nextjs4 Next.js 기초편: UI Component 구축하기 사용자 인터페이스는 구성 요소라고 하는 더 작은 빌딩 블록으로 나눌 수 있습니다. 컴포넌트를 사용하면 재사용가능한 코드 조각을 만들 수 있다. 컴포넌트를 레고 블럭으로 생각한다면 이러한 개별 브릭을 결합해 더 큰 구조물을 만들 수 있습니다. UI의 일부를 업데이트해야하는 경우 특정 컴포넌트 또는 브릭을 업데이트 할 수 있습니다. 이 모듈성은 애플리케이션의 나머지 부분을 건드리지 않고도 컴포넌트를 쉽게 추가, 삭제, 업데이트할 수 있기 때문에 코드가 성장함에 따라 유지 관리가 더 쉬워집니다. 리액트 컴포넌트에 대한 좋은 점은 자바스크립트라는 점입니다. 자바스크립트 관점에서 리액트 컴포넌트를 작성하는 방법을 살펴보겠습니다.: 컴포넌트 만들기 리액트에서 컴포넌트는 함수입니다. 스크립트 태그 안에 header라.. 2022. 5. 22. Next.js 기초편: 리액트를 위한 필수 자바스크립트 JavaScript와 React를 동시에 배울 수 있지만 JavaScript에 익숙해지면 React를 배우는 과정이 더 쉬워집니다. 다음 섹션에서는 JavaScript 관점에서 React의 몇가지 핵심 개념을 소개합니다. 다음은 언급할 JavaScript의 주제에 대한 요약입니다. Function 그리고 화살표 함수 Objects 배열 그리고 배열 함수 구조화 ( Destructuring ) 템플릿 리터럴 삼항 연산자 ES 모듈 및 Import / Export Syntax 이 과정에서는 JavaScript에 대해 자세히 다루지 않지만 최신 버전의 자바스크립트를 사용하는 것이 좋습니다. 그러나 아직 자바스크립트에 능숙하지 않다고 느끼더라도 리액트로 빌드를 시작하는데 방해가 되지 않도록 하세요! React의.. 2022. 5. 22. NEXT.JS 기초편: 명령형 VS 선언적 프로그래밍 위의 코드는 사용자 인터페이스를 업데이트 하는 방법에 대한 단계를 작성한 명령형 프로그래밍의 좋은 예이다. 그러나 사용자 인터페이스를 구축할 때 개발 프로세스의 속도를 높일 수 있기 때문에 선언적 접근 방식이 선호되는 경우가 많다. DOM 메서드를 작성하는 대신 개발자가 표시하려는 내용을 선언할 수 있게하면 더 좋을 것이다. (어떻게?) 야 컴퓨터. 나 뭐 해줘! 즉, 명령형 프로그래밍은 요리사에게 피자를 만드는 방법에 대한 단계별 지침을 제공하는 것과 같다. 선언적 프로그래밍은 피자를 만드는 필요한 단계를 고려하지 않고 피자를 주문하는 것과 같다. 개발자가 사용자 인터페이스를 빌드하는데 도움이 되는 널리 사용되는 선언적 라이브러리는 리액트다. React: 선언적 UI 라이브러리 개발자는 사용자 인터페이.. 2022. 5. 22. NEXT.JS 기초편: HTML vs the DOM 브라우저 개발자 도구 내부의 DOM 요소를 보면 DOM에 요소가 포함되어 있음을 알 수 있다. 페이지의 DOM은 소스 코드로 사용자가 만든 원본 HTML 파일과 다르다는 것을 알 수 있다. HTML은 초기 페이지 콘텐츠를 나타내는 반면 DOM은 작성한 JavaScript 코드에 의해 변경된 업데이트된 페이지 콘텐츠를 나타내기 때문이다. 일반 JavaScript로 DOM을 업데이트하는 것은 매우 강력하지만 장황할 수 있다. 일부 텍스트와 함께 요소를 추가하기 위해 이 모든 코드를 작성했으니 말이다. 앱이나 팀의 규모가 커지면 이런식으로 구축한다는 것은 점점 더 어려워질 수 있다. 이런 접근 방식을 사용하면 개발자는 컴퓨터가 작업을 수행하는 방법을 코드로 알려주는 것에 더 많은 시간은 할애한다. 그렇다면 우.. 2022. 5. 22. 이전 1 다음
