티스토리

wonah's devlog

검색하기

블로그 홈

wonah's devlog

wonah99.tistory.com/m

wonah 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

17. 환경변수 그동안 작업한 application은 주소가 localhost로 하드코딩되어있다. 그런데 개발할 때 사용할 api와 서버의 deploy에서 실서버에서 사용할 api 주소가 다를 수도 있다. 이런 정보를 application의 소스코드에서 떨어뜨려서 별도로 관리해야 할 필요성이 있다. 그때 환경변수를 보면 된다. .env .local 파일을 홈 디렉토리에 생성하고 파일에 application에 사용할 정보들을 작성하면 된다. 이 데이터를 가지고 오는 방법 📍 ./ layout.js ↓ (변경) 📍 create/ page.js ↓ (변경) 🚧 글 생성 시 undefined 에러 발생 기본적으로 환경변수에는 기밀이 포함될 데이터가 포함될 가능성이 높다. 이런 기밀 정보까지 클라이언트 컴포넌트에 노출된다면 이 .. 공감수 0 댓글수 0 2023. 8. 26.
16. 글 삭제 📍 삭제 기능 구현 Control.js 파일에서 delete 버튼을 클릭했을때 delete 기능이 동작해야하므로 onClick 추가 삭제를 하기 위해서는 서버쪽으로 메소드를 delete로 전달해야하기 때문에 option으로 DELETE 메소드 추가하면 해당 글이 삭제된다. 그러면 사용자가 열어볼 데이터가 삭제되었기 때문에 root로 redirection 해야한다. 그러기 위해서는 router가 필요하다. 삭제 작업이 끝났다면 root로 이동을 하고 그다음에 서버 컴포넌트들을 refresh하면 글이 삭제된다. 공감수 0 댓글수 0 2023. 8. 26.
15. 글 수정 http://localhost:9999/update/3 구현하기 🔔 먼저 app 폴더 밑에 update 폴더 생성, 그 밑에 [id] 폴더 생성, 그 밑에 page.js 생성 update 기능에는 create 기능과 read 기능이 필요하다. 💡 기본적인 UI는 create를 가져오는 게 더 편하기 때문에 create 기능 가져오면 된다. create/page.js 내용 그대로 복사 붙여넣기 후 컴포넌트 함수명을 Create에서 Update로 변경해준다. 💡 update에서는 title, body input 값에 원본이 적혀있어야 하기 때문에 read 기능 가져오면 된다. read/page.js 열어보면 read page는 현재 서버 컴포넌트이기 때문에 그대로 사용할 수 없다. 왜냐하면 update는 클.. 공감수 0 댓글수 0 2023. 8. 26.
14. update & delete 버튼 구현 🔨사전 작업 글을 선택하지 않고 있는 홈으로 갔을때 update, delete 버튼 안 보여야 한다. 글을 선택했을때 update, delete 버튼이 보여야 한다. 어디에 있던 update/1 으로 이동을 하는데 그게 아니라 선택한 글의 id가 update/id값 이렇게 나오도록 해야한다. 이 코드를 변경하면 된다. 보였다 안 보였다 하기 위해서는 주소의 id가 있는지 없는지 확인해야한다. 루트 layout.js 에서는 id가 있는지 없는지 확인할 수 없다. read/[id]/pages에서 props.params를 이용하여 id 값을 확인할 수 있다. 그러나 layout.js는 [id] 폴더보다 상위에 존재하기 때문에 props로 params가 주입되지 않는다. 💡 useParmas 사용? usePar.. 공감수 0 댓글수 0 2023. 8. 25.
13. cache create에서 create하게 되면 content가 생성이 돼서 db.json에 데이터가 추가되고 URL 과 내용이 잘 변경된다. 그런데 글 목록에 content가 추가되지 않았다. 이는 캐시와 관련이 있다. 서버에서 글 목록을 가져오는 코드에서 fetch 명령어를 사용하게 되면 Next.js는 우리가 한 번 가져온 정보를 .next 폴더에 저장해둔다. reload를 해도 통신이 이루어지지 않고 있다. cache 가 HIT 이기 때문이다. 이 문제를 해결하기 위해서 글을 생성하고 서버 컴포넌트를 refresh하기 전에 layout.js에서 fetch로 인해서 만들어진 캐시를 지워야 한다. 📍 Revalidating Data 캐시된 데이터를 일정 시간 간격으로 재검증하려면 fetch()에서 next.re.. 공감수 0 댓글수 0 2023. 8. 25.
12. 글 생성 🔔 만약에 서버를 껐다 켜도 문제가 생기면 next 폴더를 지우고 reload하면 됨 > [mac] rm -rf .next [window] rmdir /s /q .next > npm run dev 💡 form 태그 사용하기 onSubmit 사용한다. 이를 통해 사용자와 상호작용을 하기 때문에 Server Component에서 사용하지 못하므로 Client Component로 변경해야 한다. > "use client" onSubmit은 기본적으로 페이지 이동을 하기 때문에 기본 동작을 방지하기 위해서 > (e) => { e.preventDefault(); } 💡 input 값 찾기 e.target : form 전체 e.target.title : name이 title인 element e.target.titl.. 공감수 0 댓글수 0 2023. 8. 25.
11. 글 읽기 read/[id]/page.js에서 읽기 기능 구현 💡 먼저 생각할 부분 이 페이지는 사용자와 상호작용 하는가? 그냥 데이터를 읽어서 출력할 뿐이다. = Server Component 데이터를 가져올 때는 함수를 async / await 방식 사용 id값을 URL에 반영해서 데이터를 가지고 옴 공감수 0 댓글수 0 2023. 8. 25.
10. 글 목록 가져오기 Server Component 어떤 정보를 단순히 보여줌 사용자와 상호작용 X Client Component 버튼과 같이 사용자와 상호작용 O 📍 Client Component Next.js는 기본적으로 Server Component로 간주하기 때문에 Server Component에서 useState, useEffect 같은 api를 사용하려고 했더니 에러 발생 그러면 이 코드를(모듈을) Client Component로 변경하고 싶으면 맨 위에다가 "use client"; 작성하면 정상 작동 topics를 가지고 글 목록 만들기 위 코드 중에서 몇 가지 아쉬운 점 useEffect를 이용해서 데이터를 fetching 하고 있음. 즉 서버에서 클라이언트로 데이터를 가져오고 있음. 만약에 서버가 상파울루에 .. 공감수 0 댓글수 0 2023. 8. 25.
09. Backend 현재 html, css 하드 코딩 되어있는 상태이다. 백엔드를 구축해서 백엔드에 있는 데이터를 가지고 와서 동적으로 위 내용을 표시 이때 Next.js를 순수하게 백엔드로 사용하고 싶다면 메뉴얼 Routing > Route Handlers 참고하면 Next.js로 API 구축 가능 📍 json server로 백엔드 구축 > npx json-server --port 9999 --watch db.json 9999 포트에 서버 연결 db.json파일에 내용(정보)를 저장 --watch : 내용이 변경되었을때 서버에 바로 적용 http://localhost:9999/topics 라는 주소로 접속하면 글 목록 보여주기 위해 db.json 파일에 "topics" 추가 데이터를 자바스크립트로 가져오기 위해 개발도구_.. 공감수 0 댓글수 0 2023. 8. 25.
08. CSS Next.js에서 기본적인 CSS 사용 방법 루트 layout.js에서 globals.css를 import 하여 어떤 페이지를 방문하여도 해당 css파일이 로드된다. globals.css 파일은 전역적으로 디자인을 적용할 수 있다. 공감수 0 댓글수 0 2023. 8. 24.
07. 정적 자원 사용하기 이미지와 같은 정적인 컨텐트를 사용하려면 public 폴더에다가 이미지와 같은 파일을 위치 시키면 된다. 위치 시키고 싶은 page.js에서 img 태그를 사용하면 된다. 공감수 0 댓글수 0 2023. 8. 24.
06. Single Page Application Next.js 사용하면 그냥 좋아지는 Server Side Rendering 개발자 도구에서 Run command 클릭 disable javascript 클릭하면 자바스크립트 꺼짐 React는 javascript 기술이기 때문에 자바스크립트가 꺼지면 웹 페이지가 아예 렌더링이 되지 않는다. 하지만 Next.js로 만든 웹 페이지는 reload해도 렌더링이 잘 된다. 그 이유는 js가 서버 쪽에서 react를 실행해서 그 응답 결과를 .next에 저장해서 그것을 응답하기 때문이다. 즉 Next.js는 javascript가 아닌 html를 응답한다. 현재 웹 페이지에서는 링크를 옮길 때마다 페이지를 다운로드 받고, 또 이전에 방문했던 페이지로 돌아갈 때에도 다운로드 받게 되어있다. 이러한 문제점은 사용자에게.. 공감수 0 댓글수 0 2023. 8. 24.
05.라우팅 라우팅 사용자가 접속한 URL의 path에 따라서 콘텐츠를 응답해주는 작업 어떤 프레임워크든 그 중심에는 반드시 라우팅 존재한다. 라우팅은 웹 개발의 가장 중요한 요소 중 하나이다. app 폴더 안에 layout.js, page.js 존재하는데 layout.js 파일이 웹 페이지의 기본적인 뼈대(골격)이다. 그리고 layout.js에 {children} 코드 위치에 page.js 파일에서의 return 값이 위치하게 된다. 이는 path가 없을 때 구성이고 각 a태그에 라우팅 기능을 부여하기 위한 절차는 다음과 같다. http://localhost:3000/create 로 이동했을 때의 페이지를 만들려면 app 폴더 안에 create 폴더 생성 create 폴더 안에 page.js 파일 생성 create.. 공감수 0 댓글수 0 2023. 8. 24.
04. 뼈대 만들기 웹을 소개하는 튜토리얼 사이트 첫 번째 페이지를 방문하면 welcome 메시지 보여주기 Create, Update,Delete 기능 - welcome메시지 content는 src/app/page.js return하는 값 - 공통된 부분은 layout.js에서 다루는 것이 효과적 공감수 0 댓글수 0 2023. 8. 24.
01. 설치와 실행 ~ 03. 배포 설치 > npx create-next-app@lastest . 실행 > npm run dev layout.js 파일이 기본 HTML layout.js 파일에서 children은 page.js파일에서 return한 값 개발 버전 기본적 용량이 6.4MB로 큼 -> 용량을 줄이고 불필요한 메시지 지우기 package.json 파일에서 "scripts" 아래에 프로젝트 유지보수를 위한 명령 존재 "dev"는 개발 버전 실행 명령 "build"는 실서버를 위한 배포판을 만드는 명령 "start"는 그 배포판을 서비스하는 명령 배포판은 용량이 302KB로 용량이 현저히 작음 공감수 0 댓글수 0 2023. 8. 24.
0. Next.js 란 무엇인가? 리엑트 기반의 풀스택 웹 프래임워크로 더욱 편리하게 웹앱을 구현할 수 있도록 도와줍니다. Full Stack : Frontend(=React) + Backend(≒Expressjs)Web Application : web/app을 만든는 도구Framework Sever Side Rendering ⇔ Client Side Rendering : 서버쪽에서 자바스크립트 실행, 브라우저로 완성된 HTML 전송되기 때문에 자바스크립트를 실행할 수 없는 환경에서도 잘 동작함(검색 엔젠 친화적) 공감수 0 댓글수 0 2023. 8. 24.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.