next.js
-
[Next.js] 3. 페이지 레이아웃 만들기프론트앤드/[Next.js] 2023. 7. 5. 17:43
웹사이트 레이아웃을 만드려면 html, css를 작성해야 한다. next 에서는 ? 리엑트버전 (jsx) html, css를 사용하면 된다 1. return () 안에 HTML넣을 때 : 평행해서 태그들을 2개이상 넣을 수 없다. (전체를 감싸는 하나의 태그가 있어야 한다) 2. 스타일 적용하고 싶을 때 : className 이라고 써야한다. ex) 3. HTML안에 변수 넣을 때 : { } 중괄호 안에 넣어준다. (jsx의 데이터바인딩 문법 이라고도 불린다) 중괄호 안에 넣어주었고, 결과는 위의 화면과 똑같은것을 확인 할 수 있다. 4. style 속성을 넣으려면 style={ { 어쩌고 : 저쩌고 } } : 중괄호 두개를 이용한다 : 이 때, -기호가 들어가야 하는 font-size 같은 속성은 fo..
-
[Next.js] 2.개발환경 세팅, 오류, 파일프론트앤드/[Next.js] 2023. 7. 4. 19:39
Next.js 써보려 이제 개발환경 세팅을 하려 한다!!! 1. 바탕화면에 폴더 하나 만들어주고 vscode에서 열어준다 2. 프로젝트 생성을 위해 터미널을 열고 npx create-next-app@latest --experimental -app 를 쳐서 엔터를 누르니 이런게 떠서 (y) 누르고 진행 프로젝트 이름 설정해주기 타입스크립트를 쓸 것인지도 물어보는데, 방향키로 선택이 가능하다 ESLint도 사용할 것인지 물어보고 Tailwind CSS도 쓸 것인지 src/directory 도 쓸 것인지 App Router도 쓸 것인지 (이건 그래도 Recommended라고 되어있다!) 그러면 이제 생성이 된다! 3. 에디터로 생성된 프로젝트 열고 코드 짜면 된다! 내 프로젝트 이름은 fresh 이라, cd ..
-
[Next.js] 1. 쓰는 이유프론트앤드/[Next.js] 2023. 7. 4. 18:25
요새 주니어 개발자..취직 너무 힘들다.. 😂 뭐가 부족한지, 그리고 면접 갔었을 때 물어보던 것 들중 하나였던 ' Next.js 쓸줄 알아요? '... 그래서.. 준비하고 공부하려한다.. 일단.. 인강질렀다.. ㅎ 코딩애플 강의자분이 되게 말도 재밌게 해주시고, 이해도 잘 되게 말씀해주셔서 질렀고 ㅎ 프론트엔드 시대가 가고,, 이제 점점 풀스텍을 지향하는 시대가 오고 있다는데.. 미리 대비해야지.. ㅎ 취직 넘어렵짜냐... ㅠ_ㅠ..!! 나이제 Next.js 배워서 써먹을 예정이니 제발 나 뽑아줘라...ㅠ_ㅠ힝...!!!! 여튼!!! 여기서 부터 시작해보쟈 ~~ 웹 개발시 Client-side Rendering 시대가 가고 Server-side Rendering 시대가 오고 있기 때문! Client-s..