odada

프론트엔드 개발 월별 계획

Phase 1: 프로젝트 초기 설정 (1월 3주차)1주차: 개발 환경 구성Next.js 프로젝트 생성 및 기본 설정TypeScript, ESLint, Prettier 설정shadcn/ui, Tailwind CSS 설정기본 디렉토리 구조 설정2주차: 기본 컴포넌트 및 상태관리 설정공통 컴포넌트 개발Layout (Header, Sidebar)Button, Input, Table 등 기본 UI 컴포넌트Form 컴포넌트Zustand 상태관리 설정인증 상태 관리UI 상태 관리기본 데이터 상태 관리Phase 2: 페이지 구현 (2월 ~ 4월)2월: 인증 및 기본 페이지로그인/회원가입 페이지대시보드 레이아웃My Page 구현메인 대시보드 UI3월: Order & RMA 페이지Order 관련 페이지제품 리스트 페이지주..

0. 주요 변경사항 정리MongoDB 연결 설정 추가환경 변수 (MONGODB_URI) 설정데이터베이스 연결 유틸리티 생성Mongoose 모델 정의API 라우트 변경MongoDB CRUD 작업으로 변경클라이언트 컴포넌트 수정id 대신 _id 사용날짜 형식 처리 추가1. MongoDB 설정MongoDB Atlas 가입하기1-1. MongoDB Atlas 설정1. MongoDB Atlas에서 연결 문자열을 가져오는 방법:"Connect" 버튼을 클릭합니다"Connect your application"을 선택합니다Driver는 "Node.js"를 선택합니다거기서 보이는 연결 문자열을 복사합니다 (예: mongodb+srv://username:@cluster0...)2. 프로젝트에 환경 변수 설정:프로젝트 루트..

프론트엔드 개발자를 위한 MongoDB & Mongoose 가이드MongoDB 공식 문서: https://www.mongodb.com/docs/Mongoose 공식 문서: https://mongoosejs.com/docs/1. 데이터베이스가 뭔가요?프론트엔드에서 우리는 보통 이런 형태로 데이터를 다룹니다:const posts = [ { id: 1, title: "첫 번째 글", content: "내용입니다" }, { id: 2, title: "두 번째 글", content: "내용입니다" }];하지만 이렇게 하면 서버를 재시작할 때마다 데이터가 사라지죠. 이 데이터를 영구적으로 저장하고 관리하는 곳이 바로 '데이터베이스'입니다.2. MongoDB는 무엇인가요?Mon..

프론트엔드 개발자를 위한 데이터베이스 초보자 가이드1. 우리가 아는 것에서 시작하기프론트엔드에서 데이터를 다루는 법부터 시작해볼게요:1-1. React에서의 데이터 저장// React에서 게시글 목록 관리하기const [posts, setPosts] = useState([ { id: 1, title: "첫 번째 글", content: "안녕하세요" }, { id: 2, title: "두 번째 글", content: "반갑습니다" }]);1-2. 근데 여기에는 문제가 있어요새로고침하면 데이터가 사라져요다른 사용자와 데이터를 공유할 수 없어요데이터가 많아지면 관리가 어려워요이런 문제를 해결하기 위해 데이터베이스가 필요합니다!2. 데이터베이스의 두 가지 타입2-1. My..

1. 모듈(Module)이란?프로그램을 기능별 단위로 분리한 코드 모음함수, 변수, 객체 등을 포함하나의 .js 파일이 하나의 모듈- 모듈의 장점재사용성: 한 번 만든 모듈을 여러 프로젝트에서 재사용유지보수: 기능별로 분리되어 있어 관리가 용이캡슐화: 관련 코드를 하나의 단위로 묶어서 관리의존성 관리: 필요한 기능만 선택적으로 가져와 사용- 대표적인 웹서비스 공통 모듈 예시회원가입 모듈로그인 모듈게시판 모듈댓글 모듈- 모듈 사용법모듈 내보내기 (Export)// module.jsconst greeting = 'Hello, Module!';const sayHi = () => console.log(greeting);// module.exports = { 내보낼 내용 }module.exports = { ..

콜 스택(Call Stack) & 이벤트 루프(Event Loop) & 콜백 큐(Callback Queue)콜 스택(Call Stack)자바스크립트는 싱글 스레드 언어이기 때문에, 콜 스택이 하나만 존재한다.콜 스택은 함수가 호출되면, 해당 함수를 콜 스택에 쌓아놓고 실행한다.함수가 실행이 끝나면, 콜 스택에서 해당 함수를 제거한다.function first() { console.log('첫번째 함수'); second();}function second() { console.log('두번째 함수');}first();// 실행 순서// 첫번째 함수// 두번째 함수이벤트 루프(Event Loop)자바스크립트는 이벤트 중심 언어이기 때문에, 이벤트 루프가 존재한다.이벤트 루프는 콜 스택과 콜백 큐를 감시하..

my-next-server라는 이름으로 next.js 서버를 만들어보자.github 주소 : https://github.com/odada-o/-template-next-js-crud1. Next.js 설치npx create-next-app ./2. 간단한 서버 만들기브라우저에서 http://localhost:3000/api/hello로 접속했을 때, 안녕하세요!라는 메시지를 JSON 형식으로 응답하는 서버를 만들어봅시다.API Route 파일 생성app/api/hello/route.ts 파일을 생성합니다.API Route 파일은 GET(), POST(), PUT(), DELETE() 함수를 내보내는 파일입니다.my-next-server/├── app/│ └── api/│ └── hello/..

ㅇㅇ

Express 모듈을 사용하여 서버 만들기1. Express 란?http, url, fs 등 Node.js의 기본 모듈을 사용하여 서버를 만들 수 있지만, Express 모듈을 사용하면 더 쉽고 강력한 서버를 만들 수 있습니다.자바의 Spring, Python의 Django와 같이 Node.js의 대표적인 웹 프레임워크로 Request, Response 객체를 사용하여 HTTP 요청을 처리할 수 있습니다.- Express를 사용하는 이유간단하고 직관적인 API미들웨어를 통한 유연한 기능 확장강력한 라우팅 시스템큰 커뮤니티와 풍부한 생태계- 참조프레임워크란 개발자가 웹 개발에 필요한 기능을 미리 구현해 놓은 것으로, 개발자가 필요한 기능을 사용하기만 하면 되기 때문에 개발 시간을 단축할 수 있습니다. 웹을..

node.js로 서버 만들기 - node.js 배우기1. 서버란?서버와 클라이언트서버는 요청을 받는 응답자이고, 클라이언트는 요청을 보내는 요청자입니다. 클라이언트: 웹 브라우저(Chrome, Safari).서버: 네이버, 구글 같은 웹사이트를 운영하는 컴퓨터.쉽게 서버의 동작 이해하기브라우저에서 "구글 검색"을 입력(요청)하면,구글의 서버가 요청을 받아서 검색 결과를 준비(처리)한 뒤,준비된 검색 결과를 브라우저로 보냄(응답).서버의 예웹 서버: 웹사이트를 보여주는 서버.예: 네이버, 구글, 유튜브.파일 서버: 파일을 저장하고 전송하는 서버.예: Google Drive, Dropbox.게임 서버: 온라인 게임에서 플레이어 간 연결을 관리하는 서버.예: LOL, PUBG.호스팅 서버: 웹사이트를 저장하..