5_Clock

환경 OS: macOS IDE: vs code node: v20.6.0 생성된 앱의 src/app 폴더 밑에 global.css에서 전역 스타일링의 적용이 가능하다. :root 에서는 전체적으로 많이 쓰이는 색상을 미리 지정해 두어 다른 파일에서 --var(변수 이름)과 같이 불러와서 쓸 수 있다. :root { --font-family: sans-serif; --dark-blue: #0a1930; --light-blue: #1f93ff; --light-gray: #E7E7E7; --dark-gray: #767676; --border-gray: #CCCCCC; --table-border-gray: #EEE; --color-white: #FFFFFF; --color-primary: #0074e9; --co..

환경 OS: MacOS IDE: VS code Node: v20.6.0 1. 폴더 구조 react-next로 앱을 생성하게 되면 기본적으로 src/app 폴더가 생성된다. 해당 폴더에서 라우팅하고 싶은 url 경로명의 폴더를 생성해준 뒤에 page.jsx(page.tsx)를 생성해주면 해당 페이지로 라우팅이 된다. 다음처럼 src/app 폴더 하단에 test 폴더와 page.jsx 파일을 생성한 뒤에 간단한 페이지를 생성해주면, localhost:[포트]/test로 접속을 해보면, Test라는 컴포넌트에 작성한 내용을 확인 할 수 있다. React-next를 사용하게 되면 이전에 react만 사용했을때 처럼 복잡한 라우팅에 대한 코딩은 없어지게 된다.

환경 OS: macOS IDE: vs code node: v20.6.0 1. 일반 폴더 생성 대부분의 react 프로젝트를 생성할 때 처럼 기본 폴더를 생성해준다. 그리고 현재 나의 환경에서 vs code를 사용하고 있기 때문에 폴더를 vs code로 드래그 해준다. 2. react-next 프로젝트 생성 맥이라면 터미널, window라면 powershell등을 이용해서 해당 폴더의 경로로 이동하거나 vs code의 터미널로 이동하며 다음 명령어를 입력해주면 생성이 완료 된다. npx create-next-app ./​ 해당 명령어를 실행하게 되면 다음과 같은 질문이 몇개 뜨는데 자신에 맞는 것을 선택하여 생성하면 된다. 마지막으로 생성이 완료되면 다음과 같은 파일들이 생성된다. 3. 프로젝트 실행 아래..