post-thumbnail

[Error] formData의 값을 console.log로 볼 수 없는 원인

WDMA의 드레스 정보에는 각 모델별로 1~3장의 사진이 포함된다. 따라서 새로운 드레스를 추가하거나 수정할 때, 1~3장의 사진을 서버에 업로드할 수 있어야 한다.로직은 Add Dress 페이지를 통해 새로운 드레스에 대한 모델명, 가격, 악세사리 정보, 소속 점포,

5일 전
·
0개의 댓글
post-thumbnail

[Error] cookie httpOnly 옵션

클라이언트에서 유저가 로그인을 이해 아이디와 비밀번호를 입력하고 서버에 인증을 요청하게 된다. 그리고 서버에서는 요청으로 받은 body에서 아이디와 비밀번호를 취득하여 서버 데이터베이스에 있는 리소스와 비교과정을 거치고 올바른 요청일 경우, jwt 토큰을 발급하고 co

2020년 5월 26일
·
0개의 댓글
post-thumbnail

Redux의 용어 및 개념 정리

WDMA 프로젝트에서 리액트를 진행하면서, 각 컴포넌트마다 상태를 관리하지 않고 Redux(리덕스)를 이용한 일원적 상태관리 체계를 구상하였다. 리덕스를 사용하는 것은 이번이 처음이므로 리덕스의 용어와 기초적인 개념을 먼저 정리하고자 한다.리덕스는 리액트만을 위한 상태

2020년 5월 23일
·
0개의 댓글
post-thumbnail

[Front-end] ESLint + Prettier 세팅하기

WDMA의 SPA를 만들기 앞서 프론트엔드 개발에 맞는 ESLINT-Prettier 세팅에 대해 간략히 정리하고자 한다.프론트엔드에선 리액트 컴포넌트나 리덕스의 상태관리 구조가 복잡하고 휴먼에러를 발생시킬 여지가 많다고 판단하여 airbnb 설정을 이용하여 다소 빡세게

2020년 5월 20일
·
0개의 댓글
post-thumbnail

react-router-dom의 'history' 란?

개인 프로젝트를 웹으로 진행하면서 리액트 앱의 라우팅이 필요한 상황이 있어 react-router-dom 라이브러리를 추가로 설치하여 사용하고 있다.react-router-dom을 사용하면 빠질 수 없는 history에 대해 정리하고자 한다.리액트에서 페이지를 이동할

2020년 5월 17일
·
0개의 댓글
post-thumbnail

Custom Hook 만들기

앞서 useState(), useEffect()에 대해 알아보았다. 그렇다면 기본적으로 제공되는 두 Hook을 이용하여 인풋창에 문자열을 입력하고 버튼을 누르면 타이틀이 변경되는 Custom Hook을 만들어 보도록 하겠다. 참고로 노마드코더의 '실전형 리액트 Hooks 10개' 강의를 보고 참고하였다. 소스코드 먼저, Custom Hook을 따로 만들...

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

React Hook 필수 개념 정리

React를 공부하다 보면 Hooks라는 말을 자주 접하게 된다. 그래서 Hooks에 대해 공부해 보고자 한다. React Hook란? React Hook은 React 16.8 버전에서 새롭게 추가된 리액트 라이브러리 사용방법이다. 기존에 클래스를 통해 컴포넌트의 state를 관리하였는데, Hook를 통해 함수형 컴포넌트에서도 스테이트를 관리할 수 있게...

2020년 5월 9일
·
0개의 댓글
post-thumbnail

[Back-end] Sequelize의 'cascade' 사용하기

WDMA에서는 하나의 드레스에 1~3장의 이미지가 속해 있는데 해당 드레스를 삭제하면 그 드레스에 속한 이미지도 같이 삭제가 되어야 한다.이를 위해, Sequelize의 onDelete: 'cascade' 라는 키워드를 이용하여 부모-자식 테이블 간의 연관 리소스를 삭

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

[Back-end] 랜덤 문자열을 이용하여 임시 비밀번호 생성하기

랜덤 문자열을 생성하는 방법을 알아보고자 한다.랜덤 문자열을 만드는 이유는 유저가 자신의 계정의 비밀번호가 기억나지 않을 때, 자신의 실제 사용되는 메일 계정으로 새로운 임시 비밀번호를 보내주기 위해서다.랜덤 문자열을 만드는 방법은 다양하다. 여기서는 간단하면서도 많이

2020년 5월 3일
·
0개의 댓글
post-thumbnail

[Back-end] Node.js에서 메일 전송하기 (feat. Nodemailer & Gmail)

WDMA를 이용하기 위해서는 직원이 사용하는 이메일을 인증하는 과정이 필요하며, 이메일이 인증된 계정에 한해 관리자 등록(계정 생성)이 가능하다.이에 따라, 사용하려는 이메일이 실제로 직원이 이용하는 실제 계정인지를 인증하기 위해 인증번호를 메일로 보내는 방식을 적용하

2020년 5월 1일
·
0개의 댓글
post-thumbnail

[Back-end] Sequelize로 migration 하기

WDMA 프로젝트는 그 동안 익힌 기술들을 다시 한 번 복습한다는 생각으로 시작한 프로젝트이다. 그래서 Stroll 프로젝트에서 사용하였던 ORM인 Sequelize를 다시 한 번 사용해 봄으로써 Sequelize의 장/단점을 확인해 보고 싶었다.Sequelize에 대

2020년 4월 28일
·
0개의 댓글
post-thumbnail

[Back-end] ESLint, Prettier 설정하기

본격적으로 개발을 진행하기에 앞서 그 동안 막연히 사용하였던 ESLint와 Prettier 함께 이용하는 개발환경 세팅을 백엔드와 프론트엔드로 나누어 다뤄 보고자 한다.ESLint는 JavaScript를 위한 정적 검사 Tool이다. 코드를 실행하기 전에 버그를 찾거나

2020년 4월 26일
·
0개의 댓글
post-thumbnail

모듈 사용을 위한 require 문법 간단 정리

그 동안 Node를 이용하여 웹 서버를 구축할 때, npm에 공유되어 있는 많은 모듈들을 받아서 쓸려면 당연히(?) require를 통해 코드를 가져와야 한다 라고 막연히 생각하고 있었다.그래서 require는 뭔지 import는 뭔지 궁금증이 생겨, 먼저 Requi

2020년 4월 23일
·
0개의 댓글
post-thumbnail

Project Intro

https://www.notion.so/WDMA-Wedding-Dress-Management-Application-618a3b782f7b4770b35087b69551c2c9일본 웨딩 드레스 전문업체인 'ANJERI' 의 웨딩 드레스 관리 장부를 웹 애플리케이션

2020년 4월 20일
·
0개의 댓글
post-thumbnail

Web API의 에러를 어떻게 표현해야 할까? (2)

각 서비스들의 API가 제공하고 있는 정보를 표에 정리하였다.이번에 조사한 범위에서는 모든 서비스가 사람이 읽고 이해할 수 있는 형식의 메세지를 반드시 에러에 포함시키고 있었다.에러 코드는 프로그램이 그 에러를 다루기 쉽도록 int 또는 string이었다. 또한 에러

2020년 4월 17일
·
0개의 댓글

Web API의 에러를 어떻게 표현해야 할까? (1)

웹 개발에 있어서 클라이언트의 요청에 문제가 있을 때, 서버에서 클라이언트에게 어떤 에러 응답을 보여줄 것인지는 매우 중요한 부분이라고 생각한다.그래서 에러처리와 관련하여 조사하던 중 발견한 qiita의 'WebAPIでエラーをどう表現すべき?15のサービスを調査してみた'을

2020년 4월 16일
·
0개의 댓글
post-thumbnail

HTTP Request 정리

HTTP 메소드는 클라이언트가 하고 싶은 처리를 서버에게 전하는 역할을 한다.메소드는 총 8개가 존재하며 아래와 같다.GET: 서버로 부터 데이터를 취득POST: 서버에 데이터를 추가, 작성 등PUT: 서버의 데이터를 갱신, 작성 등DELETE: 서버의 데이터를 삭제H

2020년 4월 13일
·
0개의 댓글
post-thumbnail

URL의 기초 개념

앞서 HTTP에 대해 공부하였는데 그 예시로 https://naver.com과 같이 'URL'을 언급하였다. 그래서 URL에 대해 개념을 확립하기 위해 정리하도록 하겠다.URL은 'Uniform Resource Locator'의 줄임말로 인터넷 상의 콘텐츠를

2020년 4월 10일
·
0개의 댓글
post-thumbnail

HTTP의 기초 개념

웹에서 클라이언트와 서버 간에 요청/응답 프로세스를 가능하게 해주는 것이 HTTP를 이용한 방법이다. 그래서 오늘은 HTTP에 대해 공부해 보고자 한다. HTTP 란? HTTP는 'HyperText Transfer Protocol'의 약자이며, 한국어로는 초본문전송규

2020년 4월 9일
·
0개의 댓글
post-thumbnail

웹 서버(Server)의 기초 개념

지금까지 두 번의 프로젝트를 진행하면서 모두 백엔드 위주로 프로젝트를 진행하였다. 왜냐하면 클라이언트가 요청하는 사항을 내가 구축한 서버가 제대로 서비스를 제공하는 것이 너무 재밌었기 때문이다.하지만 웹 서버라는게 단순히 '유저가 브라우저를 통해 발생시키는 이벤트를 클

2020년 4월 6일
·
0개의 댓글