프론트엔드50 [공식문서] Next.js의 작동 방식 #1 고급 Next.js 기능을 더 배우기 전에 Next.js의 기본 작동 방식을 이해하는 것이 도움이 될 것입니다. 이 과정의 시작에서 React가 응용 프로그램을 어떻게 구축하고 구조화하는지에 대해 비교적 객관적임을 설명했습니다. React로 응용 프로그램을 여러 가지 방법으로 구축할 수 있습니다. Next.js는 응용 프로그램을 구조화하고 개발 프로세스와 최종 애플리케이션을 모두 빠르게 만들어주는 최적화를 제공하는 프레임워크입니다. 다음 섹션에서는 다음과 같은 다른 단계에서 응용 프로그램 코드에 어떤 일이 발생하는지 살펴보겠습니다. 코드가 실행되는 환경 : Development vs. Production 코드가 실행되는 시점 : Build Time vs. Runtime 렌더링이 발생하는 위치 : Clie.. 2023. 8. 11. [공식문서] React에서 Next.js로 #3 다음 단계 요약하자면, React와 Next.js의 기초 지식을 탐색하고, 간단한 React 애플리케이션을 Next.js 애플리케이션으로 마이그레이션했습니다. 이제 Next.js 여정에서 다음 단계를 선택할 수 있습니다. 첫 번째 앱을 만들며 Next.js 사용 방법을 배우세요. 이 과정은 주요 Next.js 기능을 소개하고 보다 복잡한 프로젝트를 구축하면서 실습을 할 수 있도록 도와줄 것입니다. 계속해서 이 과정을 진행하며 Next.js의 작동 방식을 더 자세히 탐구하세요. 다음 수업에서는 Next.js의 작동 방식을 탐색하면서 관련 웹 개발 개념을 소개합니다. 이러한 개념에 익숙해지면 기초가 확장되어 보다 고급 Next.js 기능을 배우는 것이 더욱 수월해질 것입니다. 2023. 8. 11. [공식문서] React에서 Next.js로 #2 Next.js 시작하기 프로젝트에서 Next.js를 추가하려면 이제 더 이상 unpkg.com에서 react와 react-dom 스크립트를 로드할 필요가 없습니다. 대신 Node Package Manager(npm)를 사용하여 이러한 패키지를 로컬로 설치할 수 있습니다. 참고 : 먼저 Node.js가 설치되어 있어야 합니다(최소 버전 요구사항). Node.js는 여기서 다운로드 할 수 있습니다. 그렇게 하려면 package.json 이라는 빈 객체 {} 를 가진 새 파일을 생성하세요. // package.json { } 터미널에서 npm install react react-dom next 명령을 실행하세요. 설치가 완료되면 package.json 파일 내에 프로젝트 종속성이 나열되어 있는 것을 확인할 수.. 2023. 8. 11. [공식문서] React에서 Next.js로 #1 마지막 레슨에서는 React를 시작하는 방법에 대해 논의했습니다. 아래는 최종 코드 예시입니다. 이 코드를 시작점으로 사용하려면 해당 코드를 코드 편집기의 index.html 파일에 붙여넣으세요. 이제 간단한 React 앱을 Next.js로 전환하는 방법을 알아보겠습니다. 2023. 8. 11. [공식문서] JavaScript에서 React로 #9 React 학습을 계속하는 방법 방금 세 가지 핵심 React 개념인 컴포넌트, 속성(props), 그리고 상태(state)를 소개 받았습니다. 이러한 개념에 튼튼한 기반을 갖추면 React 애플리케이션 구축을 시작하는 데 도움이 될 것입니다. 더 자신감을 얻게 되면 다음과 같은 React 주제도 확인해보세요. React가 렌더링을 어떻게 처리하며 어떻게 ref를 사용하는지 상태(state)를 관리하는 방법 깊게 중첩된 데이터에 context를 사용하는 방법 useEffect()와 같은 React API 훅(hook) 사용 방법 React 자원 (React Resources) 여러 해 동안 React를 학습하는 데 도움이 되는 수많은 강의, 비디오, 기사가 만들어졌습니다. 학습 스타일에 맞는 자원을 추천.. 2023. 8. 11. [공식문서] JavaScript에서 React로 #7 Props를 사용하여 데이터 표시하기 지금까지, 컴포넌트를 재사용하려면 두 번 중복해서 같은 내용을 표시할 것입니다. function Header() { return Develop. Preview. Ship. 🚀; } function HomePage() { return ( ); } 하지만 다른 텍스트를 전달하고 싶거나, 데이터를 외부 소스에서 가져와서 정보를 미리 알 수 없는 경우는 어떨까요? 일반 HTML 요소에는 해당 요소의 동작을 변경하는 정보 조각을 전달할 수 있는 속성이 있습니다. 예를 들어 요소의 src 속성을 변경하면 표시되는 이미지가 변경됩니다. 태그의 href 속성을 변경하면 링크의 대상이 변경됩니다. 동일한 방식으로 React 컴포넌트에 속성으로 정보 조각을 전달할 수 있습니다. 이러한.. 2023. 8. 11. [공식문서] JavaScript에서 React로 #6 컴포넌트를 사용하여 UI 구축하기 사용자 인터페이스는 구성 요소(components)라고 불리는 더 작은 구성 블록으로 분할할 수 있습니다. 구성 요소를 사용하면 독립적이고 재사용 가능한 코드 조각을 빌드할 수 있습니다. 구성 요소를 레고 브릭처럼 생각하면, 이러한 개별 브릭을 가져와서 더 큰 구조물을 형성하는 데 결합할 수 있습니다. UI의 일부를 업데이트해야 할 경우 특정 컴포넌트 또는 브릭을 업데이트할 수 있습니다. 이 모듈화는 코드가 성장함에 따라 유지 관리하기 더 쉬워지며, 응용 프로그램의 나머지 부분을 건드리지 않고도 컴포넌트를 쉽게 추가, 업데이트 및 삭제할 수 있습니다. React 컴포넌트의 좋은 점은 그저 JavaScript이라는 것입니다. JavaScript 관점에서 React 컴포넌트.. 2023. 8. 11. [공식문서] JavaScript에서 React로 #5 React 핵심 개념 React 애플리케이션을 구축하기 위해 알아야 할 세 가지 핵심 개념이 있습니다. 이들은 다음과 같습니다: 컴포넌트 (Components) 속성 (Props) 상태 (State) 다음 섹션에서는 위의 개념들을 자세히 살펴보고, 계속해서 학습할 수 있는 자원을 제공할 것입니다. 2023. 8. 11. [공식문서] JavaScript에서 React로 #4 React를 위한 필수적인 JavaScript JavaScript와 React를 동시에 학습할 수 있지만, JavaScript에 익숙하다면 React를 학습하는 과정이 더욱 수월해질 수 있습니다. 다음 섹션에서는 JavaScript 관점에서 React의 핵심 개념을 소개합니다. 다음은 언급될 JavaScript 주제의 요약입니다. 함수(Functions)와 화살표 함수(Arrow Functions) 객체(Objects) 배열(Arrays)과 배열 메서드(Array methods) 구조 분해 할당(Destructuring) 템플릿 리터럴(Template literals) 삼항 연산자(Ternary Operators) ES 모듈과 Import / Export 구문 이 강좌는 JavaScript에 대해 자세히.. 2023. 8. 11. 이전 1 2 3 4 5 6 다음
