# Boilerplate

25개의 포스트
post-thumbnail

[Boilerplate] 보일러 플레이트를 npx 로 설치

이글은 \[Next.js] Custom Express Server 설정 (보일러 플레이트, boilerplate) 다음글이다.보일러 플레이트를 만든 이유는 매번 거의 똑같은 폴더 구조, 똑같은 패키지 들을 만드는것이 지루해서 보일러 플레이트를 만들었다.이번 글도 비슷한

2022년 9월 28일
·
0개의 댓글
·
post-thumbnail

TypeScript 개발환경설정 2탄 (Webpack + Babel + ESLint + Prettier)- 바벨 설정, 웹팩 통합하기

바벨, 폴리필을 설정하고 웹팩으로 통합해서 빌드해보기(babel7, preset, polyfill, babel-loader)

2022년 9월 16일
·
0개의 댓글
·
post-thumbnail

TypeScript 개발환경설정 1탄 (Webpack + Babel + ESLint + Prettier) - 웹팩 기본 설정하기

웹팩의 기본적인 로더와 플러그인을 적용해 개발/배포 환경에 맞게 빌드해보기 (webpack5, loader, plugin, asset modules)

2022년 9월 13일
·
0개의 댓글
·
post-thumbnail

KaKao Laas Cloning

현장 실습 인턴을 진행하는 동안 프로젝트로 만들어본 카카오 라스를 클로닝한 웹 페이지 입니다.프로젝트는 react와 node express를 통해 프론트와 서버를 구현했으며db는 mongoDB를 활용하였습니다.github 주소 : https://github.c

2022년 8월 25일
·
0개의 댓글
·
post-thumbnail

React에 Storybook 적용하기(feat vite)

storybook 은 UI 컴포넌트를 보여주고 문서화하는 오픈소스 툴이다.명령어로 react-typescript 패키지를 설치해준 뒤를 입력하면 아래 이미지처럼 루트 경로에 vite에 맞게 설정된 .storybook 폴더와 src/stories경로에 테스트 해볼 수 있

2022년 8월 22일
·
0개의 댓글
·

FE 프로젝트 Bolier-plate for React TypeScript Webpack Babel

FE 프로젝트를 하다보면 초기 환경설정이 어느정도 비슷한 환경에서 이루어진다. 자주 사용하는 기본적인 환경은 React, TypeScript, Webpack, Babel 이 있다.한번 프로젝트 세팅을 잡아두면 두고 두고 다시 쓰기에 좋다. 하지만 시간이 지난다면 사용하

2022년 8월 11일
·
0개의 댓글
·
post-thumbnail

npm 배포를 위한 보일러플레이트

typescript, react, rollup, jest, npm link, prettier, eslint, husky를 사용하는 npm 라이브러리 배포를 위한 보일러플레이트

2022년 5월 12일
·
0개의 댓글
·
post-thumbnail

🙈Pytorch ignite가 뭐야🙉!!

🤩 IGNITE YOUR NETWORKS!

2022년 4월 12일
·
0개의 댓글
·

React18 + Typescript + recoil + emotion + eslint + prettier boilerplate

React18 Typescript boilerplate 만들기

2022년 4월 7일
·
0개의 댓글
·
post-thumbnail

[Next Js + TypeScript + Tailwind CSS 프로젝트] - 1편 Tailwind CSS

이번에 회사에서 빠르고 간단하게 예약 시스템을 만들 일이 생겨서, 평소에 관심 있었던 기술 스택들을 가지고 프로젝트를 시작했다! 이들을 채택한 이유를 간단하게 설명하고, 내가 겪은 오류들을 해결한 방법을 쓰고자 한다.그 전에 혼자 사이드 프로젝트를 하면서 tailwin

2022년 3월 29일
·
0개의 댓글
·
post-thumbnail

express 서버를 만들어보자

필요한 기능이 있을때마다 업데이트를 하자

2022년 1월 2일
·
0개의 댓글
·
post-thumbnail

[Boiler plate] (7) Logout

회원가입, 로그인, 인증을 성공했으므로 로그아웃 기능을 만든다.🌷로그아웃 라우터를 만든다.auth middleware는 로그아웃하려는 유저를 찾기 위해서 이다.auth middleware에서 ID를 받아아서 user를 데이터베이스에서 찾는다.logout을 하므로 to

2021년 7월 7일
·
0개의 댓글
·
post-thumbnail

[Boiler Plate] (6) User Authentication

이번에는 사용자 기능을 추가한다!🌷로그인이 되어 있는지, 관리자인지 확인하기 위해 인증 기능을 추가한다.또한, 글을 수정하거나 삭제할 경우 권한이 있는지 확인한다.index.js 에 auth router를 생성한다.중간에 auth라는 미들웨어를 만들고 중간에서 인증을

2021년 7월 7일
·
0개의 댓글
·
post-thumbnail

[Boiler Plate] (5) 로그인 & Token & Cookie

이제 회원가입이 완성되었으므로 로그인을 진행한다! 🌷우선 index.js에 router를 생성한다.클라이언트에서 요청한 이메일이 데이터베이스에 있는 이메일인지 찾아야 한다.mongoDB에서 제공하는 함수인 findOne()을 사용한다.이메일은 모든 사용자가 달라야 하

2021년 7월 6일
·
0개의 댓글
·
post-thumbnail

[Boiler Plate] (4) 비밀번호 암호화

앞서 회원가입에서 비밀번호를 입력하고 서버에 보내면 비밀번호가 다음과 같이 그대로 노출된다.보안에 취약하다...!비밀번호만 암호화하는 기능을 추가할 것이다!🌷User 정보를 client에서 받아오고user.save로 데이터베이스에 넣어준다.user 정보를 client

2021년 7월 6일
·
0개의 댓글
·
post-thumbnail

[Boiler plate] (3) 회원가입 기능

세번째, 회원가입 기능을 만든다. 🌷body-parser는 API 요청을 받은 body의 값을 파싱하는 역할을 한다.req.body로 출력해준다.index.js 파일에 추가한다.정보를 보내는 것이므로 POST method를 사용한다.POST method로 보낸다.ro

2021년 7월 6일
·
0개의 댓글
·
post-thumbnail

[Boiler Plate] (2) User Schema & Model

이번에는 Boiler plate의 초기 셋팅을 끝내고 유저의 모델과 스키마를 만든다!!🌷Schema 는 document, defalut values, validator 등의 구조를 정의한다.Model 은 creating, querying, updatingm delet

2021년 7월 6일
·
0개의 댓글
·
post-thumbnail

[Boiler Plate] (1) Initial Setting

서버는 nodeJS와 express를 이용해서 만든다!🌷DB는 mongoDB를 사용한다.nodeJS는 자바스크립트 언어를 사용하고 서버사이드를 개발하는소프트웨어 플랫폼이다.express JS는 nodeJS를 쉽게 사용할 수 있는 프레임워크이다.쉽게 예를 들어서 말하면

2021년 7월 6일
·
0개의 댓글
·
post-thumbnail

[BoilerPlate] LOGIN & LOGOUT

Boiler plate 란 많이 쓰이는 기능을 만들고 가져다가 쓰는 것을 말한다!작년에 한 web 프로젝트에서 리팩토링하면서로그인/ 로그아웃 부분을 수정하고 싶었다.코드도 너무 난잡해서...😂😂😂BoilerPlate project에서 회원가입, 로그인, 로그아웃

2021년 7월 6일
·
0개의 댓글
·
post-thumbnail

Webpack으로 React.js 개발환경 build하기 - 2. webpack.config.js 세팅

🔗설치한 라이브러리들을 바탕으로 config file을 설정해줍니다.

2021년 4월 11일
·
0개의 댓글
·