Next.js
1.Next.js 공부(설치와 실행)
Next.js를 npm을 통해 설치한다.최신버전의 next.js를 현재폴더에 설치한다.실행한다.여기서 react와는 다르게 npm run dev를 사용한다.3 결과
2.Next.js 공부(샘플앱 세탁)
Layout과 PageLayout은 큰 틀을 생각하면 된다.children에는 어떤 것이 올까?page.js에서 리턴하는 값을 가져온다.위에 코드는 page.js코드이다. 샘플코드를 지우고 다음과 같이 작성했다. 또한 샘플 css도 초기화해주어야한다. globals.c
3.Next.js 공부(배포)
텍스트 한 줄만 추가하였는데 6.4MB나 가져온다. 이것을 단축시킬 필요가 있다.빌드를 하게 되면 .next폴더에 빌드된 파일들이 저장된다.개발서버를 시작할 때에는 npm run dev였지만 실제 서버를 시작할 때에는 npm run start를 하면 된다.271kB로
4.Next.js 공부(뼈대 만들기)
Layout.jsLayout은 뼈대를 나타낸다. 페이지마다 공통적으로 출력되게 만들려면 layout.js에 작성하면 된다.결과
5.Next.js 공부(라우팅)
경로에 따라서 어떤 컨텐츠를 어떤 방식으로 보여줄 것인가 라는 것을 결정한다.next.js는 src/app 폴더 밑에서 page.js가 있는지 찾는다. 있으면 page.js 리턴 값을 layout.js의 children에다가 결합해서 만들어진 그 최종적인 html을 응
6.Next.js 공부(뼈대 만들기)
리액트는 자바스크립트 기술이기 때문에 자바스크립트가 동작하지 않으면 웹페이지가 동작하지 않는다. 개발자도구에서 자바스크립트를 끄면 리액트는 작동하지 않는다.반면에 Next.js는 가능하다. 이것이 어떻게 가능할까?next.js가 서버 쪽에서 리액트를 실행해서 그 응답
7.Next.js 공부(정적 자원 사용하기)
public폴더에 업로드하고자 하는 이미지를 넣는다.src 경로에는 /하게 되면 알아서 public에서 찾게 된다.업로드중..
8.Next.js 공부(CSS)
globals.css 파일을 수정한다.모든 파일의 h1태그의 a태그를 변경시킨다.WEB 밑에 밑줄이 사라진 것을 볼 수 있다.
9.Next.js 공부(backend)
href 링크를 보게되면 정적으로 작성했다.이제 이거를 백엔드를 구축해서 데이터를 가져와서 동적으로 저 내용을 표시를 해줄 것이다.json-server를 설치한다. 포트는 9999번이고 db.json에 정보를 저장하고 바뀌면 서버에 바로 반영한다. db.json파일이
10.Next.js 공부(글목록 가져오기)
서버 컴포넌트에서 클라이언트 컴포넌트 함수를 사용하면 에러가 발생한다.예를 들어 useState,useEffect,onClick, onChange, useRouter, useParams 등이 있다.또한 특별한 조치를 취하지 않으면 서버 컴포넌트로 간주한다.정보를 표현하
11.Next.js 공부(글 읽기)
글 읽기는 사용자와 상호작용하는 가를 생각해 봐야한다. 그냥 데이터를 읽어서 출력만 해준다. 이럴 때에는 서버 컴포넌트로 가져가면 된다.마찬가지로 async await를 사용하였고 서버 컴포넌트를 사용하였다.업로드중..
12.Next.js 공부(글생성)
create 폴더 page.js에서 서버에 보낼 form 태그를 만든다.하지만 form 태그는 onSubmit 기능이 있어야 한다. 즉 사용자와 직접 상호작용을 해야 한다. 그래서 서버 컴포넌트가 아닌 클라이언트 컴포넌트를 사용해야 한다. 클라이언트 컴포넌트로 바꿔준다
13.Next.js 공부(cache)
현재 create를 하면 db.json에 잘 저장이 된다. 하지만 글 목록 가져오는 코드를 보자이상이 없다. 데이터를 가져와서 글목록을 작성한다. 하지만 제대로 작동하고 있지 않다. 이럴 때에는 캐시와 관련이 되어 있다.next.js는 fetch를 하게 되면 한번 가져
14.Next.js 공부(update, delete 버튼 구현)
홈 화면에서 update, delete 버튼 안보이는 것이 좋다. 현재 홈 화면인데 update,delete를 제외해보자. 그리고 글목록을 선택하면 그 때 update,delete버튼이 나오도록 하자 파라미터가 있는지 없는지 확인해야 한다. 있으면 글 목록을 선택한
15.Next.js 공부(글수정)
현재 update버튼은 1로 고정되어 있다. 이것도 read처럼 param을 받아서 처리해야한다.update부분을 받아온 params의 id값으로 넘겨준다.그리고 app 밑에 update폴더를 만들고 id폴더를 만든다.update도 form형식으로 사용자와 상호작용을
16.Next.js 공부(글삭제)
삭제도 마찬가지로 사용자와 상호작용 하기 때문에 클라이언트 컴포넌트를 사용한다. 클라이언트 컴포넌트에선 useParams를 사용하여 id값을 가져올 수 있고 fetch에서 method로 DELETE를 사용하여 해당 data를 없애준다. 그리고 루트로 이동하고 서브 컴포
17.Next.js 공부(환경변수)
주소를 보게 되면 http:\~\~~ 로 하드코딩 되어 있다. 만약 주소가 바뀐다면 일일히 다 찾아서 바꿔줘야 한다. 이것을 해결하기 위해서 환경변수를 사용해야한다.서버 컴포넌트에서 사용할 환경변수를 .env.local파일을 만들어서 작성해준다.서버 컴포넌트에
18.새로운 프로젝트 생성/MongoDB세팅
VSCODE에서 next프로젝트를 설치page.js파일 초기화 하기3.globals.css파일 초기화하기, page.module.css파일 초기화하기클라우드에서 MongoDB 호스팅 받기정리할 항목관계형 DB와 비관계형 DB 차이점
19.Next.js에서 MongoDB 사용하기
DB에 데이터 넣어보기Add my Own Data버튼을 클릭하여 데이터를 넣어본다.Database는 하나의 프로젝트를 의미한다. 하나의 사이트가 여러개의 Database를 사용하긴 하지만 여기서는 하나만 사용한다.collection은 하나의 폴더이다. 몽고 db에 데이
20.글목록 조회기능 만들기
url에 /list로 접속하면 글목록 보여주게 만들기페이지 방문시 DB에서 글 꺼내오기자바스크립트는 처리가 늦게 되는 코드를 반결하면 제껴두고 다음줄 실행함, 로직상 문제가 생길 경우 async await을 사용하기toArray()를 하게 되면 mongoDB에서 sel
21.상세페이지 만들기1(Dynamic route)
상세페이지 만들기 /detail/게시판 id값 id는 무엇인가?id id에 아무거나 입력했을 때 page.js를 보여주라는 말이다. 이것이 Dynamic route라는 것이다./detail/1, /detail/2, /detail/3으로 url로 접속을 했을 때 해당 p
22.상세페이지 만들기 2(useRouter)
페이지 이동하는 방법 => useRouter 훅 사용하기useRouter를 사용하기 위해선 클라이언트 컴포넌트에서 사용해야 한다.Link태그로 갈 수 있는 방법도 있고 함수에서는 useRouter를 사용해서 페이지 이동을 한다.push => 특정 url로 간다.back
23.글 작성기능 만들기 1
글작성 기능 만들기만약 글안적고 공백 보내거나 이상한 글 작성하면?=> DB에 바로 저장하지 말고 서버에서 글 검사한 후 DB에 저장하자(3 tier architecture)서버 코드/url과 method를 사용하여 분류한다.method에 대해서 알아보자GET => 유
24.수정기능 만들기1
수정 페이지는 글작성 페이지와 똑같다.(하지만 글이 미리 채워진다.)수정 버튼의 링크를 달아 수정페이지로 이동하게 한다.(\_id)수정 페이지를 만든다 (with Dynamic Route)서버 컴포넌트 같은 경우 props의 dynamic route에 대한 param