profile
꾸준하고 재밌게 코딩하고 싶습니다

Redux

리덕스는 상태 관리 라이브러리이다. 리덕스를 쓰면 상태 관리를 컴포넌트 바깥에서 할 수 있다. 리덕스를 쓰기 전에는 최상단 컴포넌트에서 상태값을 관리하고 그 상태값을 props 로 자식 컴포넌트에 내려줬다. 프로젝트의 규모가 커지면 depth 가 커지고 따라서 상태 관

약 20시간 전
·
0개의 댓글

Hooks 에서 state 값을 console.log 할 때

Hooks에서 state값을 console.log하고 싶을 때는 어떻게 할까?useEffect를 써서 데이터가 들어왔을 때 console.log를 한다.

3일 전
·
0개의 댓글

Docker 명령어

docker 컨테이너 목록을 확인하고 싶을 때docker psdocker 권한이 없다는 오류 메세지가 뜰 때sudo chmod 666 /var/run/docker.sock

3일 전
·
0개의 댓글

카카오톡 소셜 로그인을 구현해보자

카카오 로그인을 누르면 카카오 로그인하라고 창이 뜨고 로그인을 한다 카카오에 호출이 간다 카카오에서 확인 후 클라이언트 사이드인 브라우저에 유효한 유저라고 토큰을 보내준다 카카오에서 보낸 토큰을 서버에 보낸다 포스트에 이 토큰을 담아서 보내면 된다 이 토큰을 가지고

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

D3 : data 에 따라 opacity 가 달라지는 world map 만들기

data 에 따라 opacity 가 달라지는 world map 을 만들어보자. 지도를 렌더링 하기 위해서 d3 에서 쓰는 특수한 형태의 json 을 geo.json 이라고 한다. 각각의 국가는 feature로 나타내고 각각의 feature는 properties 를 가

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

D3 : 기본적인 flow (enter, update, remove)

react 의 dom element 에 접근해서 d3 로 전달하려면 useRef 라는 hook 이 필요하다. select 를 import 해서 svg 를 사용할 수 있게 한다. data 를 import 해준다. 이렇게까지 해주면 d3 로 뭔가를 그릴 준비가 된 것이

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

codecademy_Learn JavaScript (10) Browser Compatibility and Transpilation

Introduction 웹 브라우저는 주기적으로 업데이트 해줘야 한다. 보안 이슈, 새로운 요소 추가, HTML, CSS, JavaScript 새로운 문법의 추가 등의 이유가 있다. 자바스크립트의 버전이 업데이트 되면서 개발자들은 새로운 구문을 사용할 때 '호환성' 을

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

React : menu tab 구현하기

리액트 사용해서 메뉴 탭을 구현해보자. 이후에 응용할 일이 많을 것 같다. 3 개의 메뉴탭이 있고 각각의 메뉴탭을 클릭할 때마다 해당하는 컨텐츠를 보여주려고 한다. 전체 틀은 다음과 같다.탭에 이벤트 핸들러를 걸어준다.어떤 탭이 눌렸는지 구분하기 위해서는 clickHa

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

Git Rebase 로 commit 내역을 깔끔하게!

프로젝트를 진행하면서 가장 어려운 부분 중에 하나가 Git 사용이었다. 멋쟁이 동기 위코드 11기 태하님이 정리해주신 git 명령어 모음을 봐도 써보지 않았으니 기억에 남지도 않았고... 나 편하자고 branch 를 옮길 때마다 commit, push 를 하는 바보같은

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

[1차 프로젝트] T2 Tea 사이트 클론 코딩

다양한 종류의 tea 를 판매하는 호주의 로컬 tea 브랜드 T2 Tea 사이트 클론 프로젝트개발기간: 2020.08.18 ~ 2020.08.28 (10일)개발인원Front-end: 오승하, 김규영, 마상원, 강예지Back-end: 왕민욱, 이건규 Front-end G

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

[westagram] 인스타그램 클론코딩 후기

1. 프로젝트 소개 1) 주제 React.js 를 활용하여 인스타그램 클론코딩 Git 을 사용하여 팀원들과 첫 번째 협업 2) 적용 기술 HTML, CSS JavaScript React.js SCSS Git 3) 사이트 주요 기능 로그인 페이지 아이디(@ 포함)

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

React | Mock Data

Mock Data 란, 말 그대로 "가짜 데이터" 를 의미한다. API 를 통해 백에서 받아온 데이터가 아니라 프론트엔드에서 필요에 의해 임의로 만든 샘플 데이터이다. 프로젝트를 진행하다 보면 많은 경우에 API 가 나오기 전에 페이지가 먼저 만들어진다. 따라서 프론트

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

[알고리즘] 양수 N 을 이진법으로 바꿨을 때 연속으로 이어지는 0 중에서 가장 큰 값을 return

양수 N을 이진법으로 바꿨을 때, 연속으로 이어지는 0 중에서 가장 큰 값을 return해 주세요. 이어지는 0은 1과 1사이에 있는 것을 의미합니다. 1과 1사이에 있는 0을 binary gap 이라고 하겠습니다. > input: 9 output: 2 설명: 9의

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

setInterval() 을 활용해 롤링배너 만들기

1차 프로젝트로 진행중인 T2 Tea 사이트에는 롤링배너가 있다. 롤링배너란 배너의 문구가 일정 시간을 기준으로 바뀌는 배너를 말한다. setInterval 함수를 이용해 롤링배너를 만들어보자.배너 문구 2개를 요소로 갖는 배열 bannerArr 를 생성한다. 이 변수

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

위코드 한달을 돌아보며

나는 글을 잘 쓰지 못한다. 말도 잘 못한다. 한달을 돌아보는 글을 쓰면 좋겠다는 멘토님의 말을 듣고도 계속해서 글 쓰는 것을 미뤄왔다. 하지만 동기들의 진지하고 솔직한 회고록을 읽으면서 감동을 받았고, 나도 짧더라도 꼭 글을 남겨야겠다는 생각이 들었다. 어쩌다 저쩌

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

[알고리즘] 가장 자주 등장한 숫자를 k 개수만큼 return

nums는 숫자로 이루어진 배열입니다. 가장 자주 등장한 숫자를 k 개수만큼 return해주세요. > > nums = [1,1,1,2,2,3], k = 2 > return [1,2] > > nums = [1] k = 1 > return [1]

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

React Fragments 사용이유 및 사용법

리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다. 리액트를 사용하기 위한 문법인 JSX 를 쓸 때, return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다. 이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문이다.fragment 를 사용해야

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

노드 (node) 란?

노드란? (Node)HTML DOM 은 노드(node) 라고 불리는 계층적 단위에 정보를 저장하고 있다. HTML DOM 은 이러한 노드들을 정의하고 그들 사이의 관계를 설명해 주는 역할을 한다. HTML 문서의 정보는 node tree 라고 불리는 계층적 구조에 저장

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

React :: map, componentDidMount, fetch

component 를 여러 개 만들기 위해서 map 을 쓸 때 그냥 map 을 돌리면 component 가 복제된다. 복제가 되었을 때에는 각 component 에서 변경사항이 있을 때 어떤 component 에서 변경사항이 생겼는지 파악이 어렵다. 이를 해결하기 위해

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

React :: props & state

jsx 를 적어줄 때:import 해줄 것들 적어주고class 적어주고2-1. constructor 필요하면 적어주고 (state 적어줄 때)2-2. render return 해주고export default 클래스명onClick 으로 this.함수명 이렇게 적어줄 때는

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