Using Shared Components 앞에서 Next.js에서 페이지를 만드는 방법에 대해 알게 되었습니다. 우리는 react 컴포넌트를 pages 폴더에 넣어서 페이지를 만들 수 있었습니다. pages폴더의 파일 이름은 url로 접근 할 수 있습니다. pages는 자바스크립트 모듈임으로 다른 자바스크립트 컴포넌트를 넣을 수도 있습니다. 이것은 다른 ...
Navigate Between Pages 간단한 Next.js를 실행 시켜 보았습니다. 이전 편에서 index.js를 추가했던 것처럼 원하는 만큼 여러가지의 페이지를 추가할 수 있습니다. 이번에는 about 페이지를 만들어 봅시다. pages/about.js를 생성하고 아래의 내용을 추가해 주세요 그 후 http://localhost:3000/about에 ...
처음으로 next js를 사용하여 자사 홈페이지를 리뉴얼 하는 프로젝트를 진행했습니다. 어떻게 학습하며 프로젝트를 진행했는지 정리하려 합니다. 가장 우선적으로 한 일은 next js docs에서 제공하는 튜토리얼을 학습했습니다. 그에 따라 next js docs를 기반으로 작성하겠습니다 NEXT.js의 기능 - 기본적으로 서버사이드 렌더링 지원 합니다 - ...
css에서 가장 중요한것은 블록요소와 인라인 요소의 차이점이라고 아는 것이라고 생각한다. 이 개념이 흔들린다면 css를 사용함에 있어 혼란이 올 수 있으니 꼭 정립하고 가자. 1. 블록 요소 - div, h1, p 등 - 기본적으로 사용가능한 최대 가로 너비를 사용한다 - 크기를 지정 할 수 있다 - width: 100%; height: 0;으로 시작 - ...
약어로 랩핑(Wrap) 랩핑할 코드 선택모든 명령 표시 실행 / “Ctrl + Shift + P”(Windows), “Cmd + Shift + P”(macOs)Emmet: Wrap with Abbreviation(Emmet: 약어로 랩핑)를 입력하거나 목록에서 선택(“Enter”)div, span 등의 Emmet 문법(ex: .wrapper, span.bo...
Korean Language Pack for Visual Studio Code 한글화 확장 기능 Prettier 가장 대중적으로 쓰이는 코드 포멧터 기본 설정 방법 : 컨트롤 + , 를 누른 후 formatOnSave검색 후 체크 설정이 완료 되면 저장 시 마다 자동으로 인덴트 등을 잡아준다. 상세한 설정은 다른 포스팅에서 다룰 예정 beautify와 같이...
자유로운 창작이 가능한 기본 포스트
소장본, 굿즈 등 실물 상품을 판매하는 스토어
정기 후원을 시작하시겠습니까?
설정한 기간의 데이터를 파일로 다운로드합니다. 보고서 파일 생성에는 최대 3분이 소요됩니다.
포인트 자동 충전을 해지합니다. 해지하지 않고도 ‘자동 충전 설정 변경하기' 버튼을 눌러 포인트 자동 충전 설정을 변경할 수 있어요. 설정을 변경하고 편리한 자동 충전을 계속 이용해보세요.
중복으로 선택할 수 있어요.