next.js
-
[Next.js/코딩애플] 프로그램 만드는 법 (feat. 코딩애플)IT Study/FE 2023. 7. 10. 10:26
프로그램 만드는 방법 오늘은 복잡해 보이는 코드 작성 과정을 단순하게 바꾸는 방법에 대해 이야기하려고 합니다. 저는 이번에 Next.js를 공부하며 터득한 중요한 교훈이 있었는데, "그것은 바로 기능을 먼저 정의하고 코드를 작성하라"입니다. 처음에는 코드를 작성하는 과정이 어려울 수 있지만, 아래의 예시를 통해 기능 정의를 연습해 보세요 :) 처음 보는 기능 만들기 1. 기능의 동작 방법에 대해 한글로 상세히 정의하고 2. 코드로 번역하기 글 목록 페이지와 기능 만들기 (글 목록 조회 기능) 1. HTML 페이지 작성하고 2. 페이지 방문 시, DB에 저장된 글을 꺼내와서 3. 글을 HTML에 넣어 보여주기 상세 페이지 기능 만들기 1. 글 제목 클릭 시, 상세 페이지 이동 2. 상세페이지 방문 시, D..
-
[Next.js] MongoDB의 Error: querySrv ENODATA 해결하기IT Study/FE 2023. 7. 3. 15:23
Next.js를 공부하며 데이터베이스로 사용하던 MongoDB에 다음과 같은 에러가 발생했습니다. 'Error: querySrv ENODATA _mongodb._tcp.cluster.mrbwkwq.mongodb.net' 오류는 MongoDB 클라이언트가 서버 주소를 찾기 위해 DNS 서버를 사용하며 발생할 수 있다는 것을 알게 되었습니다. 평소 공부를 하던 장소가 아닌 카페(스타벅스)에서 접속했을 때 에러가 발생하여, 다음과 같은 단계로 해결하였습니다. DNS 서버 확인하기 MongoDB 클라이언트는 MongoDB 서버의 주소를 찾기 위해 *DNS 서버를 사용합니다. MacOS를 기준으로 사용 중인 DNS 서버를 확인하고 변경하기 위해서는 아래와 같은 단계를 따를 수 있습니다. *DNS: 인터넷에서 도메..
-
[Next.js/코딩애플] React에서 Next.js로의 라우팅 변화 (feat. Dynamic Route)IT Study/FE 2023. 6. 30. 19:09
프론트엔드 개발에 있어 React는 가장 중요한 도구 중 하나입니다. 그러나 React는 라우팅 기능을 기본적으로 제공하지 않기 때문에, 개발자들은 라우팅을 위해 'react-router-dom'과 같은 별도 라이브러리를 별도로 사용해 왔습니다. 1. React의 라우팅 React Router는 널리 사용되는 React의 라우팅 라이브러리로, 사용자가 URL을 통해 어플리케이션 내 이동할 수 있도록 돕습니다. React에서는 아래와 같이 라우팅을 설정할 수 있습니다. import { BrowserRouter as Router, Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; 위 예시에서는 Rou..
-
[Next.js/코딩애플] Next.js의 시작IT Study/FE 2023. 6. 27. 14:17
Next.js의 독학을 시작하며, 주요한 내용을 기록하기 위해 블로그에 기록을 작성해보려고 합니다. 1. Next.js의 파일 구조 파일(폴더)명 내용 layout.js page.js를 감싸는 파일 페이지 간 공유하는 UI (상단 메뉴바 등) 내용 작성 layout.js의 {children}: page.js 들어가는 부분 page.js 메인 페이지 파일 page.module.css (____.module.css) 유일하게 한 페이지에 적용할 수 있는 css 파일 public 이미지, 폰트 파일 저장 폴더 2. JSX 사용 방법: React 버전 HTML (1) return() 내 HTML 작성 시 평행하여 태그 작성 불가: only 1개 태그로 시작/종료 필수 (2) className 사용 (class ..