# front end

43개의 포스트
post-thumbnail

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

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

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

[Error] cookie httpOnly 옵션

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

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

[React] Setup React project [2/2]

처음 보시는 분들은 React 첫 번째 설정 글을 보고 오세요~ [Babel7 설치] >React의 컴포넌트들은 ES6 문법에 따라 작성이 되는데, 이를 지원하지 않는 브라우저에서 기존 자바스크립트로 변환을 해주기 위해 사용합니다. 아래의 명령어를 루트 폴더에서 cm

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

[Node.js] Install Node.js in windows

Node.js를 설치하기 위해 https://nodejs.org/en/ 에 접속한 후 아래 그림과 같이 두 버전 중 아무거나 선택합니다. 굳이 최신 버전을 선택할 필요가 없고 LTS 버전은 오래 지원되기 때문에 저는 이 버전을 선택했습니다.

2020년 5월 23일
·
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개의 댓글

var, let, const

let과 const에 대해서 알아보자.이 둘은 변수를 선언할 때 사용하게 되는데 이전에는 var를 사용했다.var로 변수를 선언하게 된다면 다음과 같이 변수의 overwrite가 가능해진다.이렇게 var를 사용하게 되면 큰 어플리케이션을 만들거나 협업을 할 경우에 문제

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

[TIL] Javascript assignment(Lotto) : May 7, 2020

로또 번호를 출력하기 위해서 기본적으로 난수 출력에 대한 이해가 필요하다.Math.random() : 0 이상 1 미만의 부동소숫점 의사 난수 반환0이상 1미만의 부동소숫점이 랜덤하게 반환되는 것이니 0.1324, 0.8462, ... 등등 기나긴 난수가 반환될 것으로

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

😎 요리사에서 개발자로...!

내가 왜 개발자가 되고 싶은지를 되새기고 싶어 작성해 봅니다!!🚨다소 내용이 길 수 있음!! 짤 주의!!🚨 대학 2년 군대 21개월 그리고 현장 3년 그렇게 7년 동안 요리사로서 살았습니다.심지어 국제요리 경연대회 금상, 은상 수상!!재작년 연말을 보내고 진짜 몸과

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

너의 UX에도 다 계획이 있구나! - 1

여러분의 UX는 안녕하신가요?

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

UTF-8의 기초 개념

앞에서 아스키 코드와 유니 코드에 대해 공부하던 중 어디선가 자주 본 UTF-8에 대해 궁금증이 생겨 조금 더 알아보았다.UTF-8은 유니코드의 여러 방식 중 하나이다. UTF-8 외에도 16, 32 등이 존재한다.UTF-8은 하나의 문자를 나타내기 위해 1바이트에서

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

ASCII, Unicode의 기초 개념

유니코드(Unicode)는 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준이며, 유니코드 협회(Unicode Consortium)가 제정한다. 이 표준에는 ISO 10646 문자 집합, 문자 인코딩, 문자 정보 데이터베이스, 문자들

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

S3, ACM, CloudFront, Route53으로 서버리스 페이지 https 배포하기 [4/4]

여기까지 오셨다면 CloudFront를 통해서 SSL 인증서가 붙은 S3 버킷 정적 호스팅의 배포 설정이 준비된 상태입니다. 마지막으로 도메인을 배포 설정에 연결해 주면 목표를 이룰 수 있습니다. 마지막은 쉬워요!Route53으로 대시보드에서 사용할 도메인 이름을 눌러

2020년 3월 31일
·
2개의 댓글
post-thumbnail

S3, ACM, CloudFront, Route53으로 서버리스 페이지 https 배포하기 [3/4]

이제 S3에서 정적 호스팅하고 있는 페이지를 CloudFront를 통해 뿌려줄 차례입니다. 지역에 상관없이 원활하게 컨텐츠를 제공하고, ACM에서 만든 SSL 인증서를 붙이기 위해서 하는 작업이랍니다.CloudFront는 AWS에서 제공하는 CDN(Contents De

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

S3, ACM, CloudFront, Route53으로 서버리스 페이지 https 배포하기 [2/4]

이제 우리의 소중한🥰 프로젝트에 맘에 드는 도메인을 연결하기 위해, 구매해 둔 도메인을 ACM(Amazon Certification Manager)를 통해 AWS에서 사용할 수 있도록 셋업 할 차례에요!연결하고 싶은 도메인이 있다면 해당 도메인을 구매하여야 합니다.

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

S3, ACM, CloudFront, Route53으로 서버리스 페이지 https 배포하기 [1/4]

프로젝트 구현 및 배포용 빌드본인이 배포하고 싶은 프로젝트를 준비합니다. 프로젝트 자체의 구현은 본 글에서 다루는 내용이 아니므로 배포를 위한 빌드가 완료되었다고 가정하고 넘어가겠습니다.처음 배포해 보는 뷰린이를 위한 사족!프로젝트 루트에서 yarn build나 npm

2020년 3월 31일
·
2개의 댓글
post-thumbnail

S3, ACM, CloudFront, Route53으로 서버리스 페이지 https 배포하기 [Intro]

아직 AWS에 익숙하지 않은 프론트엔드 개발자가처음부터 차근차근 따라해서자신이 소유한 도메인에 https를 붙여 배포하는과정을 상세히 작성한 시리즈입니다.

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

JPEG, PNG, GIF 확장자의 특징

앞에 이어 이미지 파일 확장자의 특징을 알아보고, 특징에 따라 웹에서 어떻게 사용해야 하는지에 간단히 알아보도록 하겠다.각 이미지 파일 확장자들의 사용빈도는 JPEG와 PNG가 가장 많이 이용된다고 한다. 그러면 각 확장자별로 어떤 특징들이 있는지 아래의 표로 정리하였

2020년 3월 31일
·
0개의 댓글