기본 폴더 구조 client 폴더 : 프런트엔드 단 구현 server 폴더 : 백엔드 단 구현 [client] 기본 구조 생성 명령어 : npx create-next-app [server] ✏️ 기본 구조 생성 명령어 : npm init 명령어 실행 시 package.json 파일 자동 생성 ✏️ 모듈 설치 명령어 npm install morgan nodemon express --save npm install typescript ts-node @types/node @types/express @types/morgan --save-dev nodemon 서버 코드 변경 시 재시작 없이 반영 확인 가능 ts-node Node.js 에서 TypeScript Compiler 통하지 않고 직접 Ts 실행 morgan..

🖥️ 프로젝트 소개 [ Website ] ⭐️ 로그인 창의 테스트 계정으로 로그인하시면 회원 가입 없이 사이트를 둘러보실 수 있습니다. Motimates Motimates motimates.xyz [ GitHub ] https://github.com/SesacProjectTeamA-2 SesacProjectTeamA-2 새싹 프로젝트 팀프로젝트 TeamA-2. SesacProjectTeamA-2 has 3 repositories available. Follow their code on GitHub. github.com [ Notion ] Motimates Motimates 🌐 웹 사이트 주소 www.notion.so 🏃🏻‍♂️ 개요 Motivation + Mates 모임에 가입해 목표를 함께 달성하고 경..

1. JWT 검증 개발한 기능들 중 토큰 검증을 통해 접근할 수 있는 기능들에는 앞서 개발한 미들웨어를 넣어줄 수 있다. 예를 들어, 이런 식으로 게시글을 작성하기 위한 페이지에 접근하기 위해 토큰 검증을 하려고 하는 경우, middlewares/auth.js 폴더 안 토큰을 검증하는 로직인 checkToken을 불러와 authUtil이라는 이름으로 미들웨어로 넣어주었다. 로그인을 하면 토큰이 발급되게 해 두었고, 이 토큰을 포스트맨과 스웨거에서 사용하는 법을 정리해보려 한다. 2. Postman에서 토큰 활용 포스트맨을 열어 사용하려는 api를 작성한 뒤, 상단의 Auth 탭에 들어간다. 이런식으로 토큰의 타입을 선택할 수 있는데, 현재 토큰은 req.headers.authorization에 Beare..

JWT란? Json Web Token Json 포맷을 이용하여 사용자에 대한 정보를 저장하는 웹 토큰 토큰 자체를 정보로 사용하는 방식 주로 회원 인증이나 정보 전달에 사용 [ 구조 ] 1) Header (헤더) typ : 토큰의 타입 (ex. JWT) alg : 해싱하기 위한 알고리즘 방식 (ex. SHA256, HS256 등) 2) PayLoad (페이로드) 토큰에서 사용할 정보들인 Claim (클레임)이 담겨있음 Registered Claim (등록된 클레임) 토큰 정보를 표현하기 위해 이미 정해져 있는 종류의 데이터 선택적 작성이 가능 issuer 토큰 발급자 subject 토큰 제목 audience 토큰 대상자 expiration 토큰 만료 시간 not before 토큰 활성 날짜 issued ..

🖥️ 프로젝트 소개 [ 웹사이트 바로가기 ] ⭐️ 로그인 창에 기본 값으로 작성되어 있는 계정으로 로그인 시 회원가입 없이 사이트를 둘러보실 수 있습니다. https://sesacin.online/ 메인 사진에 어떠어떠한 구조물이 있는지 분석하는 ai를 개발하려면 어디부터 시작해야할까요?이런걸 시작하기 위해 필요한 부분들이 정리돼있는 책, 유튜브, 혹은 검색해볼 주제를 알려주셨으면 좋 sesacin.online [ Github 바로가기 ] https://github.com/SesacProjectTeamC/SesacIn GitHub - SesacProjectTeamC/SesacIn: 새싹 프로젝트 팀프로젝트 TeamC 새싹 프로젝트 팀프로젝트 TeamC. Contribute to SesacProjectTe..

0. Nodemon이란? Nodemon은 프로젝트 폴더의 파일들을 모니터링하고 있다가, 파일이 수정되면 서버를 자동으로 재실행 시켜주는 패키지이다. node app을 하면 코드 수정 후 매번 서버를 종료했다가 다시 실행시켜야 하는 번거로움이 있기 때문에.. 아주 편리하다는 장점이 있다 🙂 1. 설치 nodemon은 다른 패키지 설치와 동일하게 npm i nodemon 명령어로 설치할 수 있다. npm install nodemon --save-dev 위 코드와 같이 -dev를 붙이면, development mode, 즉 local에서만 사용하겠다는 의미이다. 2. 앗 오류 ?! 여느떄와 같이 노드몬을 사용 하려고 npm i nodemon을 실행했다. 근데 로컬에서 사용하려고 저렇게.. 작성하고 설치를 완료..

0. multer란 파일 업로드를 위해 사용되는 Node.js의 미들웨어 express로 서버 구축 시 가장 많이 사용되는 미들웨어 multipart/form-data 형식으로 단일 및 다중 파일 업로드를 지원하기 때문에 많이 사용됨 1. 설치 방법 Vscode의 터미널에서 npm i multer 명령어를 통해 설치할 수 있다. (일반적인 모듈 설치 방법과 동일) 이렇게 뜨며 설치가 완료되고 package.json에 정상적으로 추가되는 것을 확인할 수 있다. 간단한 실습을 통해 어떻게 사용하는지 살펴보려 한다. 코드 안에 주석으로 자세한 설명을 작성해 두었으니 꼼꼼히 읽어보면 도움이 될 것 같다. 3. 간단 실습 - 파일 업로드 3.1 Single file upload single() 하나의 파일 업로드..

0. Node.js란? 서버 측 자바스크립트 런타임 환경 확장성 있는 네트워크 애플리케이션 (특히 서버 사이드) 개발에 사용되늰 소프트웨어 플랫폼 브라우저 밖에서도 자바스크립트 사용 가능 자바스크립트 실행 엔진으로 구글 크롬에서 사용하는 V8 엔진 탑재 ▶ 실행 속도 빠름 단일 스레드 이벤트 루프, 비동기 I/O 모델 사용 ▶ 가볍고 효율적 + 높은 처리 성능 내장 HTTP 서버 라이브러리 포함 ▶ 웹 서버에서 별도 소프트웨어(ex. 아파치 등) 없이 동작 가능 NPM 패키지 매니저 : 세계에서 가장 큰 오픈 소스 라이브러리 ★ 런타임 runtime = 실행시간 컴퓨터 프로그램이 실행되고 있는 동안의 동작을 의미 컴퓨터 언어 안에 쓰인 프로그램을 관히라기 위해 특정 컴파일러 혹은 가상 머신이 사용하는 기..

NPM 이란? - Node Package Manager - 명렁어로 자바스크립트 라이브러리를 설치, 관리할 수 있는 패키지 매니저 - 패키지 = 라이브러리 = 모듈 = 프로그램이 사용하는 기능 같은 것 [ 장점 ] 프로젝트에서 필요한 라이브러리를 쉽게 다운받을 수 있음 프로젝트에서 사용하는 많은 라이브러리의 버전과 의존성 관리가 용이 필요한 라이브러리를 CDN 보다 편하게, npm 명령어를 통해 프로젝트 로컬 환경 및 전역 환경에 쉽게 설치, 관리할 수 있음 빌드하는 명령어를 자동화하여 프로젝트를 관리할 수 있음