비전공 개발기

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...

vscode extension

Korean Language Pack for Visual Studio Code 한글화 확장 기능 Prettier 가장 대중적으로 쓰이는 코드 포멧터 기본 설정 방법 : 컨트롤 + , 를 누른 후 formatOnSave검색 후 체크 설정이 완료 되면 저장 시 마다 자동으로 인덴트 등을 잡아준다. 상세한 설정은 다른 포스팅에서 다룰 예정 beautify와 같이...