profile
성장하는 개발자 :)

위코드(부트캠프)를 수료하며

2020.06.22 ~ 2020.09.11 2020년 여름의 대부분의 시간을 위코드에서 보냈다. 해를 거듭할수록 느꼈던 거지만, 이번 여름은 유난히 시간이 빨리 간 듯하다. 12주라는 기간이 충분히 긴 시간은 아니지만, 매주 한주한주를 바쁘게 보내다보니 한주가 지날 때

2020년 9월 14일
·
0개의 댓글

[Javascript] 스코프 (Scope)

var는 function scope에서 동작한다. 간단히 말해서, var로 변수를 선언하면, block scope는 없다고 생각하고 동작하고, function scope에서는 function내부와 외부의 변수값이 연결되지 않는다. function scope가 범위

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

[Javascript] 호이스팅 (Hoisting)

console.log(num)을 실행할 당시에는 add라는 함수가 정의되어 있지 않은 상태인데, console에 30이라는 값이 찍힌다. const나 let은 var와 같이 undefined가 아닌 Error가 뜨기 때문에 호이스팅이 되지 않는 것처럼 보이지만, 사실

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

[vue] vue-router 동적라우팅

react로 첫 프로젝트를 할 때 동적라우팅개념을 몰랐을 때, 어떻게 url에 따라 기본틀은 유지하면서 안의 내용물만 바꿀 수 있을지 굉장히 고민했었다. 그러다가 동적라우팅 개념을 알고나서 나름 혁신적인 경험을 했던 기억이 있다. vue에도 당연히 리액트와 같은 기능을

2020년 8월 30일
·
0개의 댓글

[vue] vuex-store module화

vuex의 store뿐만 아니라, 한 파일 내에 담고있는 정보가 너무 많다면, 특정 부분을 별도로 분리해 하나의 파일로 만드는 것이 좋다. 그 때 분리한 하나의 파일을 moduel이라고 하고, 그러한 행위를 모듈화라고 한다.store.jsstore.js파일 하나에 위보

2020년 8월 30일
·
0개의 댓글

[Vue] vue의 기본개념

v-on (@) 엘리먼트에 이벤트 리스너를 연결합니다. $emit v-bind v-model v-for

2020년 8월 23일
·
0개의 댓글

[Vue] vuex

Vue에서는 전역 변수 상태 관리를 위해 vuex를 이용한다. redux와 기능적으로는 거의 동일해서 기존에 redux를 잘 알고 있다면 이해하기 어렵지 않을 것이다. 위는 vue공식 문서에 나와있는 vue의 흐름이다. 그리고 아래는 기존 vue에서 사용하던 것들과

2020년 8월 23일
·
0개의 댓글

[Redux] redux 기본 개념

redux를 사용하는 이유는 뭘까? redux를 사용하는 이유는 컴포넌트 간에 state값이 이동해야 하는 경우에, depth가 깊어지는 것을 방지하고 state값을 전역에서 관리할 수 있기 때문이다. 생활코딩의 react-redux 강의를 보고 개념 공부를 해서 위

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

DATA USA 사이트 클론 프로젝트

드디어 위코드 내에서 두번째 프로젝트가 끝났다. 첫번째 프로젝트가 끝난 여운이 채 사라지기도 전에 두번째 프로젝트가 시작되었는데, 벌써 두번째 프로젝트도 끝났다. 코로나 바이러스를 비롯한 여러 데이터를 수집, 분석 및 차트와 지도로 시각화한 dataUSA Web사이트

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

[React] 라이브러리 활용 (차트, 표)

처음에 테이블을 직접 구현해보려고 하다가, 테이블 만드는 데에 너무 많은 시간을 소요할 것 같기도 하고, 라이브러리를 사용해보고 싶기도 해서 material ui라는 라이브러리를 사용하여 데이터 테이블을 구현했다.

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

[Rest API] fetch와 axios

fetch와 axios 둘다 결국에는 서버와 통신하기 위해 사용하는 방법 중 하나일 뿐이다. 기능적으로는 동일하지만, 사용하는 방식이 다르다. 지난번엔 fetch를 사용해서, 이번에는 axios를 사용해봤는데 둘다 사용해보고 비교해보니 axios가 조금은 더 편한 것

2020년 8월 9일
·
0개의 댓글

[react] 카카오 소셜 로그인

기존의 로그인 기능이 아닌, 소셜 로그인 기능을 구현해보려고 해서 그 중 가장 처음에 접근이 쉽다는 카카오로 소셜로그인 기능을 구현해봤다. 라이브러리를 사용하면 더 쉽지만 기능의 전체적인 흐름을 한번 익혀보고자 이번에는 사용하지 않았다. 이거는 카카오 디벨로퍼

2020년 8월 9일
·
0개의 댓글

[Git] git rebase

여태까지 master와 branch사이에 update된 사항이 있으면 변경 사항을 맞춰주기 위해 각각의 branch로 이동해서 master의 내용을 merge해줬는데, merge가 아닌 rebase라는 기존과 다른 방식을 사용해서도 같은 기능을 수행할 수 있다. reb

2020년 8월 9일
·
0개의 댓글

[React] 첫 프로젝트 (컨버스 사이트 클론)

한달 동안 html, css, javascript, react 공부를 하고, 쉴틈없이 바로 2주간의 프로젝트에 들어갔다. 2주차 주말을 제외하면 정확히는 12일동안의 결과물이다.신발과 의류 등 세계적인 패션회사인 컨버스 홈페이지 클론코딩간략 소개나는 컨버스 팀에 속하게

2020년 8월 2일
·
0개의 댓글

[React] 장바구니 api

장바구니 기능을 만들때, 상품을 프론트엔드에서 관리해도 되고, 백엔드에서 관리해도 됐기 때문에 어느쪽에서 그 일을 맡을지 역할을 분담해야 됐었다. 보통의 사이트에서는 백엔드 쪽에서 관리한다고 들었는데, 공부를 하는 입장에서 내가 있는 프론트쪽에서 한번 구현해보고 싶어서

2020년 8월 2일
·
0개의 댓글

[React] api와 소통시 초기값이 비었을 때

리액트의 라이프사이클은 constructor > render > componentDidMount 순으로 진행된다. 그런데, 나의 경우에는 fetch를 componentDidMount안에서 했기 때문에 그 전의 render에서는 state에 빈 값이 있을 수 밖에 없었

2020년 8월 2일
·
0개의 댓글

[React] 이중 map

react에서는 배열에 반복문을 사용할 때, for문이나 while문보다는 map함수를 사용하게 되는데, 사용하다보니 이중 혹은 그 이상의 반복문이 필요한 경우가 종종 발생했다.신발 상세 페이지의 mock data인데, 신발 하나당 배열안에 두개의 객체를 활용해서 해당

2020년 8월 2일
·
0개의 댓글

[React] 유동라우터

아래의 두 사진은 하나의 페이지에서 같은 형식을 유지하면서 url에 따라 받는 데이터가 달라진다. 그럴 때 사용되는 개념이 유동라우터라는 개념이다. Routes.js Routes.js에서 페이지의 형식이 재사용 되는 경우가 아니라면 login과 같이 path를 설정

2020년 8월 2일
·
0개의 댓글

[React] State 끌어올리기, Ref

처음에 리액트를 배울 때 리액트는 waterfall방식이기 때문에, state의 부모 컴포넌트에서 자식 컴포넌트로 단방향일 것이라고만 생각했다. 그런데 코드를 짜다보니 자식 컴포넌트의 state값을 부모 컴포넌트에게 전달해줘야 되는 상황이 발생하기 시작했다. 리액트에서

2020년 8월 1일
·
0개의 댓글

[React] TIL

위 컴포넌트는 First, Second, Third 상단 바를 공유하고 있는데, First를 누르면 First를, Second를 누르면 Second를, Third를 누르면 Third를 아래에 보여주는 기능을 가지고 있다.어떤 방법으로 이게 가능한 걸까?obj라는 객체의

2020년 7월 26일
·
0개의 댓글