728x90 next.js10 여러 페이지 만들기 (라우팅) 오늘의 숙제 : 하단 참고 이번엔 다른 페이지 만드는 법을 알아봅시다. 페이지 나누는걸 전문용어로 라우팅이라고 합니다. 다른 페이지 만들기웹사이트들은 url을 이용해서 페이지를 구분해놓습니다.vibe.naver.com/today 으로 접속하면 오늘의 메세지 보여주고 vibe.naver.com/chart 으로 접속하면 차트 보여주고 이렇게 맘대로 url을 작명해놓고 거기로 접속하면 다른 html을 보여주는 식으로 개발해놓습니다. 우리가 만들 사이트도 메인페이지 & 상품목록페이지가 필요할테니 각각 만들어봅시다. Q. url은 어떻게 정함?url 작명은 개발자 마음입니다. 어떤 url로 접속하면 어떤 html을 보여줄지 알아서 결정하면 됩니다.저는 예를 들어서 /list로 접속하면 상품목록페이지를 보여주고 .. 2024. 10. 25. 페이지 레이아웃 만들기 (React 기초문법) 오늘의 숙제 :심심하면 html css 작성해서다음 시간까지 여러분 웹사이트의 대문을 마음대로 꾸며옵시다. 웹개발하려면 우선 유저들이 방문할 웹페이지같은게 있어야할거아닙니까그래서 가장 먼저 웹페이지 레이아웃 만드는 법을 알아봅시다. page.jsx 파일이 메인페이지라서 거기에 코드짜면 되는데 레이아웃 만들 땐 React 문법을 이용해야합니다. Next.js는 React 위에 얹혀있는 프레임워크같은거라서요. 우선 저번시간 프로젝트 열어서 page.jsx 안의 html 내용과 global.css 안의 내용은 지우고 시작해봅시다. 실은 리액트라고 다른거 없고 html css 문법 그대로 쓰면 레이아웃 만들 수 있는데 리액트에선 html css가 아니라 JSX 라는 문법을 사용하게 되어있습니다.생긴건 htm.. 2024. 7. 12. Next.js 설치와 개발환경 셋팅 개발환경 셋팅(맥이나 윈도우나 똑같습니다) 1. 구글에 Nodejs 검색해서 LTS라고 써있는 버전을 설치합시다. - nodejs 18버전 이상에서만 잘돌아감- 설치 경로는 C드라이브 어쩌구 되어있는거 바꾸지말고 그대로 쓰는게 좋습니다.- 설치 중 chocolatey 어쩌구는 설치하지 맙시다. 2. Visual Studio Code 에디터도 구글에 검색해서 설치합니다.평소에 쓰던 에디터 쓰셔도 되지만 터미널을 기존에 안다뤄본 분들은 설치합시다.Next.js 프로젝트 생성은 1. 작업용 폴더를 하나 만들어줍니다오픈 폴더 해서 열어줌.이 명령어 입력하고 엔터키 치면 된다. npx create-next-app@latest프로젝트 이름 작명하라고 하면 작명하면 됨. fresh 라고 프로젝트 이름 설정또 그 다.. 2024. 7. 11. Next.js 많이 쓰는 이유를 알아보자 1. 프론트엔드만 찔끔 안다고 취업시켜주는 시대가 점점 끝나고 있습니다. 외주개발 맡기면 훨씬 저렴하고GPT가 단순한 자바스크립트 훨씬 잘 짜주는데앞으로도 프론트엔드 개발자가 많이 필요해질까요 실은 그것들은 호들갑이고GPT는 검색 + 코드생성을 도와주는 정도라서 별로 상관할 바는 아닙니다.근데 그거보다 더 큰 문제가 있는데client-side rendering 말고 server-side rendering이 다시 유행하기 시작한다는게 문제입니다.2. client-side rendering은 브라우저에서 html을 실시간으로 만드는 방법이고server-side rendering은 서버에서 html을 미리 만들어 보내줍니다. client-side rendering 사용시 이쁘고 부드러운 사이트는 만.. 2024. 7. 11. 이전 1 2 다음 728x90
