전체 글

NextJS 프로젝트 생성 NextJS의 공식 홈페이지에 접속하면 최신 버전의 NextJS를 생성할 수 있는 명령어가 나온다. 터미널에서 프로젝트 생성을 원하는 폴더로 이동 후 'npx create-next-app@latest'를 입력하자. 입력하면 아래의 그림과 같이 Project 이름을 설정하는 화면이 나타난다. 원하는 이름을 설정하자. 프로젝트 설정을 하면 Yes or No로 몇가지 질문이 나타난다. 다음 타입스크립트 설정을 할 것인가 물어본다. (Yes) ESLint를 설정 할 것인가 물어본다. (Yes) Tailwind CSS를 설정할 것인가 물어본다. (NextJS 자체에 다양한 스타일이 존재하여 Tailwind에 전문가가 아니라면 비추천, Yes) 'src/' directory를 사용할 것인..

NextJS의 장점 NextJS는 React로 풀 스택 어플리케이션을 빌드 할 수 있게 만들어 준다. 이 과정에서 데이터 fetch와 렌더링은 더 쉽고 효율적으로 변한다. 파일 시스템 라우팅(File-based Routing)의 도움으로 경로를 설정할 수 있다. 이는 추가적인 코드 기반 구성이나 추가적인 패키지가 필요 없다는 것이다. NextJS가 서버에 있는 모든 페이지와 구성 요소를 렌더링한다는 것이다. 이말은 화면에 전송되는 콘텐츠, HTML 문서 등 최종적으로 화면에 그려지는 모든 콘텐츠를 이미 포함한다는 것이다. 이는 SEO에도 강점을 가진다.

REST API란? REST 원칙을 적용하여 서비스 API를 설계한 것을 말합니다. REST란 무엇인가? 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것입니다. HTTP URI를 통해 자원을 명시하고 HTTP 메서드(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD를 적용하는 것을 말합니다. API란 무엇인가? 쉽게 말해 프로그램끼리 통신할 수 있도록하는 중재자입니다. 응용프로그램에서 사용할 수 있도록 운영 체제나 프로그래밍 언어가 제공하는 기능을 제거할 수 있게 만든 인터페이스입니다. Restful API REST API를 제공하는 웹사이트를 Restful 하다고 할 수 있습니다. Restful API를 통해 이해하기 쉬운 API를 만드는 것이 목적입니다. GE..

positon 속성과 배치방법 position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. static : 요소를 일반적인 문서 흐름에 따라 배치합니다. relative : static + 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. absolute : 요소를 일반적인 문서 흐름에서 제거하고, 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. fixed : 요소를 일반적인 문서 흐름에서 제거하고, 뷰포트의 초기 컨테이닝블록을 기준으로 삼아 배치합니다. (바뀌지 않는 위치에 지정) sticky : static + fixed 특징을 동시에 가집니다. 용어 공부 오프셋(offset) : top, left, right, bottom 값을 ..