프로젝트 캠프: Next.js 과정 2기
-
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - 리액트 hook프로젝트 캠프: Next.js 과정 2기 2024. 7. 25. 16:10
학습 목표리액트 훅의 종류를 익히고 각각의 사용 방법을 학습니다.리액트 훅이란?함수형 컴포넌트에서 사용할 수 있는 이미 만들어진 임의의 기능을 의미한다.대표적으로 useState, useRef 등이 있다.useState상태 변수를 선언하고 관리하는 데 사용하는 훅지금까지 배운 내용으로 리액트에서 버튼을 눌러 숫자를 증가시키는 기능을 구현하고자 한다면 let으로 count 변수를 생성하고 버튼을 누를 때마다 count를 증가시키는 코드를 작성할 것이다. 그러나 이와 같이 코드를 작성하면 count의 값이 증가되더라도 그 결과가 화면에 표시되지 않게 된다.그 이유는 리액트의 변수 추적 관찰과 관련이 있다. 대부분의 프레임워크는 변수의 변화를 감지하는 추적관찰 기능이 있다. 그러나 리액트의 경우 화면이 렌더링..
-
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - React 조건부 렌더링과 반복 렌더링프로젝트 캠프: Next.js 과정 2기 2024. 7. 25. 13:00
조건부 렌더링조건부 렌더링을 사용하면 특정 조건에 따라 컴포넌트나 요소를 렌더링할 수 있다. 자바스크립트의 조건문을 사용하여, 특정 조건이 참일 때만 컴포넌트를 렌더링하거나, 조건에 따라 다른 컴포넌트를 렌더링할 수 있어 효율적인 UI관리가 가능하다.if문import { useState } from "react";const App = () => { const [isLogin, setIsLogin] = useState(true); if (isLogin) { return ( Hello, Login! ); } return ( Hello, Not Login! );};export default App;삼항 연산자const App = ()..
-
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - React 데이터 전달프로젝트 캠프: Next.js 과정 2기 2024. 7. 24. 15:11
학습 목표| 리액트에서 데이터를 전달하는 방법을 학습합니다.Props컴포넌트 간에 데이터를 전달하는 방법으로 컴포넌트의 확장성을 높여 재사용성을 향상시킨다. 컴포넌트를 정의할 때 함수와 동일하게 정의하기 때문에 데이터를 전달할 때에도 함수에서 매개변수를 사용하듯이 작성하면 된다.props 받기// src/learn/props/Greeting.tsxconst Greeting = (props: { uname: string; age: string }) => { // props가 객체 형태로 전달됨 // 타입을 지정해줘야 함 return ( Hello, {props.uname}({props.age}) {/* 표현식을 사용해서 태그 안에서 props 데이터 ..
-
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - React 시작하기프로젝트 캠프: Next.js 과정 2기 2024. 7. 23. 15:32
왜 React를 사용하는가가장 인기있는 프레임워크일단 사용량이 많음. 리액트가 뷰의 4배정도의 사용량을 보임성능적 장점기본적인 렌더링 방식Critical Rendering PathDOM 트리 생성CSSOM 트리 생성JS 실행Reder Tree 생성레이아웃 생성페인팅🔥 작성한 html 코드를 기반으로 DOM 트리를 생성하고 CSS파일을 토대로 CSSOM트리를 생성한다. DOM과 CSSOM으로 Render Tree를 생성하고 Layout으로 화면에 어떻게 그릴지 설계한다. 그 결과를 화면에 Paint하는 과정을 Critical Rendering Path라고 한다.이때 화면을 조작할 때마다 dom이나 cssom이 변하고 그로인해 render tree, layout, paint 과정을 매회 반복하게 되는데 이..
-
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 1주차프로젝트 캠프: Next.js 과정 2기 2024. 7. 21. 02:35
학습 목표javascript의 역사와 전반적인 내용을 익히고 타입스크립트의 대표적인 개념을 배웁니다.이번주 수업에서 좋았던 점사실 첫날의 수업을 들을 때 javascript의 기초부터 시작하는 것을 보고 조금 당황했었다. 왜냐면 나는 이미 javascript를 할 줄 알고 Next.js 과정이었기에 바로 Next.js를 시작할 줄 알았었기 때문이다. 그래서 기초를 배우는 동안 내가 수업에 집중을 하지 못하고 다른 공부를 하려고 하면 어떡하지 라는 걱정이 들었는데 그건 쓸데 없는 걱정이었다는 것을 오전 수업이 끝나기도 전에 깨달았다.내가 javascript를 사용할 줄 알기에 기초도 매우 잘 알고 있었다고 자만했었는데 사실은 아니었다는 것을 첫날부터 알게 되었다. 생각해보면 나는 개발하기 급급해서 처음 공..
-
교육 준비: Node.js 및 Visual Studio Code 설치프로젝트 캠프: Next.js 과정 2기 2024. 7. 14. 22:56
1. Node.js 설치https://yoolabong.tistory.com/entry/Nodejs-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EB%B0%8F-%EC%84%A4%EC%B9%98 Nodejs 다운로드 및 설치1. Nodejs 사이트 접속https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. Installer 설치아래 좀 더 최신 버전을 다운로드할 수 있는 링크yoolabong.tistory.com 2. Visual Studio Code 설치1. VS Code 사이트 접..