수정기능 만들기수정기능 또한 Dynamic Route를 이용. 각 글에 대한 수정 페이지로 이동한 뒤, 그 페이지에 해당 글의 내용을 채워준다. 글을 채우는 것은 next.js에서는 태그 내에 defaultValue 속성을 쓰면 된다. mongoDB를 수정할 때에는 updateOne 함수를 사용한다. 서버 측에 _id를 전달해야 하는데, 나는 이를 사용자에게는 보이지 않는 input을 하나 만들어서 그 안에 defaultValue로 원래 글의 _id를 넣어주었다.import { connectDB } from '@/util/database';import { ObjectId } from 'mongodb';export default async function Edit(props) { const db = ..

게시판용 프로젝트 생성 및 MongoDB 세팅DB에는 두 종류가 있는데 관계형 DB와 비관계형 DB로 나뉨.관계형 DB는 엑셀처럼 표 형태로 데이터를 저장하는 DB. 별도의 DB용 문법인 SQL을 사용함.비관계형 DB는 표가 아닌 형태로 데이터를 저장하는 DB.대표적으로 MongoDB는 JS의 object 자료형처럼 데이터를 저장 ( { 데이터이름1: 내용1 .. } )대용량 트래픽 처리를 고려하여 설계되어 분산처리가 뛰어나다. MongoDB.com 가입 및 무료 플랜을 통해 무료 DB를 호스팅받아 진행.Database Access에서는, atlas admin 역할을 받은 admin 계정을 생성하여 이용Network Access에서는, 임시로 모든 IP(0.0.0.0)에 대해 접근을 허용 (실제 서비스 ..

Client/Server Component, Import 문법길고 복잡한 HTML을 한 단어로 축약한 것을 Component라고 한다. 컴포넌트를 만듦으로써, 더러운 코드를 한 단어로 축약하고 같은 코드를 재사용할 수 있게 된다. Component 만드는 방법function 컴포넌트명( ) { }컴포넌트명은 대문자로 시작하는 것이 좋다컴포넌트는 다른 function 바깥에 만드는 것이 좋다.중괄호 안에 return ( )을 만들고, 그 안에 축약할 긴 HTML을 넣는다.컴포넌트를 원하는 곳에 호출하여 사용한다컴포넌트를 만들면 HTML 구조를 깔끔하게 만들 수 있지만, 컴포넌트 간 데이터 공유가 귀찮아진다는 단점이 있다. 다만 Next.js에는 컴포넌트가 두 가지 종류가 있다.Server Component..

Next.js 페이지 레이아웃 만들기 (React 기초문법)리액트 버전 HTML을 JSX라고 함. JSX에는 4가지 특징이 있음. 1. return() 안에 HTML 넣을 때JSX에서는 최상위 element 하나만 return시킬 수 있다. 즉, 두 개 이상의 HTML 요소를 return시키고 싶을 때에는 상위 component로 감싸야 한다. 이때 최상위 div 태그를 굳이 더 넣고 싶지 않다면 등의 빈 태그로 감싸도 된다.2. class 사용하기return문 안은 js 영역이기 때문에 class 예약어와 겹친다. 때문에 기존 HTML의 class 대신 className을 사용한다.3. HTML 안에 변수 넣기리얼 js 코드는 return문 밖에 작성한다.return문 바깥에서 JavaScript 변..

Next.js 설치 및 개발환경 설정하기 (by 코딩애플)Next.js를 시작하기 전, 어떤 것들을 설치하고 어떤 설정들을 해야 하는지 정리해 봅니다. 1. Node.js 설치하기구글에 Node.js 검색 후 홈페이지에서 최신 LTS 버전 다운로드 및 설치 2. VSCode 설치하기마찬가지로 구글에 VSCode 검색 후 홈페이지에서 최신 버전 설치 3. 프로젝트용 폴더 생성 및 VSCode에서 해당 폴더 열기 4. 터미널을 열고, next 프로젝트 만들기Windows의 경우 VSCode 터미널에서 Powershell이 아닌, Commad Line을 사용해야 한다.npx create-next-app@14 5. 좌측 상단 File-Open Folder에서 새롭게 만든 프로젝트 열기 6. 터미널에서 next...

Next.js를 선택하게 된 이유저는 이번 한 주동안 배워볼 프레임워크로 Next.js를 선택하게 되었는데요. 이전에 배웠던 Java의 Spring이나, React를 다시금 볼 수도 있었지만, 한편으로는 그동안 쌓아 온 기본기를 바탕으로 새로운 기술들을 배워보고 싶은 마음이 컸습니다. 그리고 주니어 개발자의 경우 백엔드와 프론트엔드를 나누는 것이 무의미하고, 오히려 독이 될 수 있다는 말에 깊이 공감하기도 했습니다. 그러던 중에 백과 프론트가 나눠져 있지 않은 풀스택 웹 프레임워크인 Next.js가 있다고 해서 관심을 가지게 되었는데요. 기술적인 유연성을 갖추고 싶은 마음과 백/프론트 둘 다 할 줄 아는 사람이 되고 싶은 마음이 합쳐져서 이번에 Next.js를 배워보기로 마음먹었습니다. 이에 따라 Nex..

나만무 프로젝트에서 무엇을 얻어가야 할까?어느덧 시간을 흘러 정글에서의 14주차가 시작되었습니다. 바로 나만무 준비기간인데요. 각 팀의 리더와 팀원이 선정되는 동안 알고리즘 복습 및 각자 원하는 기술 스택을 선택해 배우게 됩니다. 저는 나만무에 들어가기에 앞서, 그리고 기술 스택 학습에 뛰어드는 것에 앞서 '내가 과연 나만무에서 무엇을 얻어가야 할까?', '이 시간을 보내면서 가장 중요한 것은 무엇일까?'라는 고민들을 하게 되었는데, 말 그대로 그냥 아무 생각 없이 프로젝트를 진행하는 것은 기존에 제가 다녔던 국비 학원과 다를 바 없다고 생각했기 때문입니다. 이에 대해 성공적인 나만무를 위한 정글 선배님의 조언이 인상깊어서 이를 공유하고, 그리고 결론적으로 나는 어떻게 생각하는지에 대해 정리해보려고 합니..

06.12Pintos Virtual Memory 디버깅 마무리알고리즘 문제풀이 (BOJ 9935, 14499) 06.13[나만무] 나만무 프로젝트에서 무엇을 얻어가야 할까? (+ 정글 선배님의 조언)https://just-live.tistory.com/entry/%EB%82%98%EB%A7%8C%EB%AC%B4-%EB%82%98%EB%A7%8C%EB%AC%B4-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C-%EB%AC%B4%EC%97%87%EC%9D%84-%EC%96%BB%EC%96%B4%EA%B0%80%EC%95%BC-%ED%95%A0%EA%B9%8C [나만무] 나만무 프로젝트에서 무엇을 얻어가야 할까? (+ 정글 선배님의 조언)나만무 프로젝트에서 무..