profile
열심히 노력하는 신입 프론트엔드 개발자 문건우입니다.
태그 목록
전체보기 (185)JavaScript(45)알고리즘(40)프로그래머스(25)React(20)python(14)leetcode(13)부스트캠프(12)삽질(12)후기(8)typescript(8)js(7)next(5)DSC(5)next.js(5)면접(5)멤버십(5)ts(5)타입스크립트(5)boj(4)프론트엔드(4)express(4)DND(4)TIL(3)SSR(3)우아한 테크 캠프(3)위상정렬(3)리액트(3)webpack(3)에러(3)백준(3)회고(3)debounce(3)컨퍼런스(3)NHN Forward(3)카카오 코딩테스트(3)redux(3)Nginx(3)key(2)array(2)데브매칭(2)리뷰(2)(2)동아리(2)카카오 인턴(2)ux(2)boostcamp(2)프로젝트(2)https(2)ES5(2)Recoil(2)ES6(2)throttle(2)개발자의 디자인 독해력(1)책 리뷰(1)카카오 인턴 코딩테스트(1)프론트엔드과제(1)썸머코딩(1)확장(1)카카오 알고리즘(1)PNU(1)홍보(1)우테캠(1)훌륭한 개발자(1)es8(1)Context API(1)arguments(1)세션(1)쿠키(1)NaN(1)UI(1)생성자(1)action(1)사이드프로젝트(1)Trie(1)호이스팅(1)우아한 형제들(1)corejs(1)생각정리(1)자동배포(1)ScrollIntoView(1)garbage colerctor(1)레디스(1)ncloud(1)웹 표준(1)그룹 프로젝트(1)cutom hook(1)유틸리티 타입(1)Tree Shaking(1)트리 쉐이킹(1)emotion(1)트랜스파일(1)dynamic routing(1)CSS(1)lazy(1)Saga(1)test(1)bind(1)배포(1)데이터베이스(1)code splitting(1)웹팩(1)cookie(1)sql(1)개발자(1)Node(1)mysql(1)HMR(1)babel(1)html(1)카카오(1)dd(1)Sequelize(1)해커톤(1)상속(1)React Hooks(1)typeOrm(1)class(1)error(1)목표(1)shell(1)자료구조(1)객체(1)Index(1)nextjs(1)개발(1)useCallback(1)Symbol(1)queue(1)this(1)arrow function(1)private(1)화살표 함수(1)useReducer(1)Prototype(1)코드 스플리팅(1)부산(1)figma(1)clipboard(1)웹 접근성(1)코딩테스트(1)챌린지(1)Summer/Winter 코딩(1)
post-thumbnail

컴포넌트의 key가 바뀌었을 때 리렌더링? 언마운트?

key 속성은 보통 list를 map으로 반복문으로 렌더링할 때 각 element를 구분하고 바뀌었는지 구분하기 쉽게 도와주는 역할을 한다. key는 props로 넘어가지 않고 단순히 리액트를 도와주는 역할을 하는 것이다.기본적으로 props가 바뀌면 리렌더링이 되는데

2021년 3월 17일
·
0개의 댓글

useCallback 알아보기

https://dmitripavlutin.com/dont-overuse-react-usecallback/이 글을 읽고 제 나름대로 번역한 글입니다.useCallback은 함수를 메모이제이션 하는 것이다.어떤 사람이 물었다고 한다. '우리 팀 어떤분은 모든 함수

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

React에서 Clipboard API 사용하기 (이미지 복사하기)

Clipboard API를 사용하면 간단하게 blob 형태의 이미지 파일을 복사할 수 있다. https://developer.mozilla.org/ko/docs/Web/API/Clipboard여기서 write라는 메소드를 사용할 필요가 있었다. 그런데 일반 j

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

typescript react-frame-component에 emotion 적용하기

우리 팀은 리액트로 크롬 익스텐션을 만드는 작업을 하고 있다. 크롬 익스텐션을 popup 형태 말고 진짜 안에 넣기 위해선 iframe 형태로 새로운 html로 만들어서 넣어주어야했다. 그래서 찾은 라이브러리가 react-frame-component이다.react-fr

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

리액트 에러 해결: React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

프로젝트 진행을 하다가 에러가 났다.React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node나 같은 경우에는 fontAwe

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

Context API Store 분리, 합쳐서 사용해보기

Context API와 useReducer를 통해 상태관리를 할 수 있다. 이번 프로젝트는 Redux를 사용하지 않고 둘을 사용해서 적용하면서 해보고 사용을 하고 있었는데 처음에는 모든 state들을 하나의 store에 저장 해놓고 사용했다. 그리고 state Con

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

React Webpack, core-js에러 해결

원래 이렇게 corejs 관련 설정을 했다.그러자 이런 에러가 나며 잘 되지 않았다.export 'default' (imported as 'React') was not found in 'react'그래서 원래 하던대로 해주니깐 에러가 나지 않았다. 그런데 이렇게 하니

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

index를 key로 쓰면 안 되는 이유

React는 이전 리스트와 현재 리스트를 순회하고 차이점이 있으면 변경을 생성한다.예를 들어 맨 끝에 엘리먼트를 추가한다면, 변경은 잘 작동할 것이다.React는 첫번째, 두번째 요소가 같은 것을 확인하고, 마지막에 third를 추가할 것이다.하지만 위와 같이 구현할

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

[DSC] 웹플랫폼 3주차

강의자 블로그 https://velog.io/@ehdrms2034/DSC-Node.js-%EC%99%80-React%EB%A1%9C-%EC%9B%B9-%ED%94%8C%EB%9E%AB%ED%8F%BC-%EC%A0%9C%EC%9E%91%EA%B8%B0-3왜 따로

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

Recoil - TodoList 만들어보기

(이 글은 recoil 0.0.7 버전으로 작성되어있습니다.)Recoil을 좀 더 알아보기 위해서 Recoil 튜토리얼에 있는 TodoList 만들기를 내 방식대로 조금씩 바꿔서 만들어 볼 것이다.src 밑에 recoil이라는 폴더를 만들어서 그안에 todo.js를 만

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

새로운 상태 관리 라이브러리 Recoil

페이스북에서 내놓은 새로운 상태관리 라이브러리이다. 페이스북 리액트 코리아 그룹의 한 포스트에는 이러한 장점이 있다고 말해주었다.atom/selector라는 단위를 통해 derived state를 효과적으로 처리하고 상태의 "코드 분할"이 가능하게 합니다.기존 상태관리

2020년 5월 20일
·
6개의 댓글

20.04.24 삽질

사용자의 입력을 받아 차트를 그릴 수 있게 하고 차트를 이미지로 다운 받을 수 있게 하는 사이드 프로젝트를 진행 중입니다.TypeScript, React, styled-components, react-router, chart.js를 사용하여 진행 중 입니다.3일전부터

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

React.lazy 사용해보기

오늘은 React에 내장되어있는 lazy를 사용해 볼 것이다. React.lazy는 코드분할을 하게 해준다. 코드 분할은 앱을 "지연 로딩"하게 도와주고 사용자들에게 획기적인 성능 향상을 하게 해줍니다. 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러

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

Next.js에 Redux-Saga 연결 해보기

Redux만으로는 비동기적인 작업을 처리하지 못 합니다. 그래서 미들웨어를 연결해서 비동기작업 처리를 하는 코드를 짜주어야 합니다. 대표적인 미들웨어로 thunk와 saga가 있는데 saga가 더 기능이 많고 많이 쓰이는 것 같아 saga로 해보도록 합니다.위 명령어를

2020년 2월 26일
·
4개의 댓글

2020-02-22 ~ 02-23 삽질

22일부터 23일까지의 삽질 및 생각을 적어본다DND 프로젝트 남은 기한이 1주일지 2주일지 잘 모르겠지만 최대한 열심히 해보려고 한다.현재 코로나 바이러스 때문에 밖에도 안 나가고 코딩 놀기 코딩 놀기만 반복중이다...흑흑ㅠㅠ주말동안 엄청 많은 작업은 하지 않았고 많

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

Next.js에서의 SSR이란

Client-Side-Rendering 과 Server-Side-Rendering은 다른 velog나 블로그에 너무나 많이 정리 되어있어서 그거를 참고하면 좋을 것 같다. 나도 그런 것을 보고 공부를 더 확실하게 해야겠다.Next.js에서는 next의 SSR을 이렇게

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

Next.js란?

Next.js는 React 앱을 쉽게 구축할 수 있게 하고 SSR을 쉽게 설정할 수 있게 하는 리액트 프레임워크다.공식문서 : https://nextjs.org/Next.js의 장점으로는 이렇게 적혀있다.직관적인 페이지 기반 라우팅 시스템(동적 경로 지원)가능

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

Next.js 동적 라우팅 SSR

이전에는 Next의 getInitialProps를 활용하여 기본적인 SSR을 해보았다. 이제는 동적라우팅으로 되어있는 페이지들을 SSR하게 만들어 볼 것이다. 그리고 styled-components가 처음에는 csr로 실행이 되어 css가 적용되지 않고 나타났다가 적용

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

2020-02-21 삽질

오늘도 DND 프로젝트를 이어서 했다. 오늘은 로그인 구현 및 메인페이지 정보들 불러오는 작업을 하였다. 우리 로그인은 jwt를 이용하여 하는데 지금 하는 방식이 좀 좋지 않은 방식이라는 생각이 들었다. 지금 React + spring boot로 이루어져있는데 클라이언

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

2020-02-20 삽질

오늘부터 시간날 때 삽질한 기록을 남기려고 한다.오늘도 엄청난 삽질의 연속이였다. 요즈음 부산IT연합동아리 DND활동을 하고 있다. 이번주가 8주차라 거의 끝나는 시기이다. 그래서 빨리 개발을 끝내야하는데 여기저기서 막혔다.Next.js에서 styled-componen

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