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

Border에 gradient 색상 넣기!

border에 gradient 색상을 넣어야할 때가 있었다.당연히 기존처럼 gradient 는 image data type에 속해있기 때문에 image 에서만 쓸 수 있는 것이다.color 관련 css에는 못 쓴다!그래서 background-color 에 이 값을 넣으

2023년 7월 15일
·
0개의 댓글
·

넘블 후기 - Next.JS로 카톡 AI 단톡방 만들기(with ChatGPT)

카카오톡 단톡방을 보다가 넘블을 알게 되었고, 재밌어보이는 프로젝트가 있어서 신청을 하였다.평소에 프로젝트를 해야겠다고 생각은 하고 있었는데, 일을 하면서 다른 프로젝트까지 하기가 체력상 쉽지 않았고 그냥 관련된 공부만 꾸준히 하면 충분하지... 라는 자기 합리화가 되

2023년 4월 23일
·
0개의 댓글
·

NextJS를 k8s 사용하여 재배포시 404 에러

Nextjs 로 만든 서비스를 k8s를 사용하여 잘 배포하고 있었다. k8s는 replica 3 으로 세팅하여 pod 3개를 사용하고 있었고 재배포를 하면 RollingUpdate 방식으로 pod 이 25% 씩 꺼지고 생성 되도록 되어있었다.그런데 어느 순간부터 재배포

2023년 3월 31일
·
3개의 댓글
·

NextJS Babel 에서 SWC 전환 하는 과정에서 겪은 에러

NextJS 12 버전부터 SWC를 Next.js Compiler 로 소개한다.SWC는 Rust 기반의 컴파일러로 싱글 코어에서 babel 보다 20배, 4 코어에서 babel 보다 70배 빠르다고 소개하고 있다.회사에서 작업하는 프로젝트를 9버전에서 12버전으로 직접

2023년 2월 26일
·
0개의 댓글
·
post-thumbnail

Playwright click 은 scroll을 한다?..

playwright 로 e2e 테스트를 작성하다가 맞이한 이슈입니다.dropdown을 playwright의 click method를 사용하여 클릭하였을 때 dropdownList가 나오지 않는 이슈가 있었습니다.playwirght 의 click 을 보면 다음과 같은 행

2023년 2월 14일
·
0개의 댓글
·
post-thumbnail

useId hook 이란?

useId hook은 React 18에 새로 추가된 hook으로 유니크한 id를 만들어준다.하지만 이 hook의 반환값을 key 를 위해 사용하지마라고 한다.하긴 key를 위해 사용하려면 useId 를 몇개나 사용해야할지 측정하기도 어렵고, 최상단에서 사용해야하는 ho

2023년 2월 13일
·
0개의 댓글
·

@uiw/react-md-editor 에서 security 챙기기

간단한 마크다운을 사용해야할 일이 있었다.여러 개를 찾아본 끝에 @uiw/react-md-editor 를 사용하기로 하였다.사용법은 간단해서 금방 사용할 수 있었는데, xss 공격 등을 막기 위해 html sanitize를 할 필요가 있었다.sanitize란 소독이라는

2023년 2월 7일
·
0개의 댓글
·
post-thumbnail

File Upload 중 axios timeout 및 client Network offline 에러 처리

axios를 timeout을 주고 특정 시간이 지나면 에러가 나도록 사용하고 있었다. 분명 axios에서 에러가 나면 error.response 값을 활용해서 에러처리를 하고 있었는데 빈 error message가 뜬다는 현상이 가끔 CS로 올라왔다.한참을 못 찾다가

2023년 1월 2일
·
0개의 댓글
·
post-thumbnail

Image Preload로 이미지 깜빡임 제거 하기

기본적인 이미지가 있고, 해당 이미지에 마우스를 hover할 시에 이미지가 변경이 되었어야했다. 처음엔 그냥 hover시 css에서 background-url을 변경해주었다. 그러자 배포서버에서 이미지가 깜빡이는 경우가 발생하였다. 네트워크를 확인해보니, hover시에

2023년 1월 2일
·
0개의 댓글
·
post-thumbnail

Nginx 413 에러가 axios에서 보이지 않을 때

백엔드쪽 nginx에 파일 용량을 제한하는 설정을 추가하였다. client_max_body_size 200M 이런식으로 추가를 한 것이다.그러자 axios error의 response가 나오지 않기 시작하였다. 원래 제대로 error 정보가 내려오면 error.resp

2023년 1월 1일
·
0개의 댓글
·

커스텀 스크롤 만들기

회사에서 커스텀 스크롤을 만들 일이 있었다. 다른 라이브러리를 사용해서 구현해보고자 했지만, 내가 원하는 대로 되지 않아 직접 만들기로 하였다. (예를 들어 스크롤 위아래로 마진을 주는 기능이 없다던가…)직접 만든 스크롤은 -webkit- 전용 css 속성이 많아서 모

2023년 1월 1일
·
0개의 댓글
·

react-hooks 테스트하며 알게 된 점

react-testing-library 와 jest를 사용해서 react-hooks를 test 해보았다. 생각 보다 막히는 곳이 많았다.

2021년 6월 30일
·
0개의 댓글
·

프론트엔드 면접 질문 정리

제가 면접 보면서 질문 받았던 면접 질문들을 총정리 합니다. 여러 IT 대기업들 그리고 여러 스타트업들의 내용들을 정리하였습니다.DOCTYPE 이란 무엇인가요?여러 meta 태그들에 대한 질문시맨틱 태그란 무엇인가요?position에 대해 설명해주세요.display에

2021년 5월 10일
·
23개의 댓글
·

React의 Virtual Dom은 트리를 어떻게 비교하는가?

React의 V-DOM은 이전 V-DOM과 현재 V-DOM을 비교해서 바뀐 부분만 변경함으로써 최적화가 이루어진다. 그렇다면 React는 어떠한 방식으로 V-DOM 이 바뀌었는지 아는걸까? React는 Reconciliation 과정을 거친다. 일반적인 트리 비교 알고

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

prototype 언어의 장단점은 무엇일까?

javascript는 prototype을 쓰는 언어이다. prototype을 통해서 다른 class언어의 상속을 구현할 수 있다. 그렇다면 그냥 class 언어와 prototype 언어의 차이가 무엇일까? prototype 언어의 장단점은 무엇인가...내가 생각하고 공

2021년 3월 27일
·
0개의 댓글
·
post-thumbnail

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

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

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

bind 구현해보기

bind는 함수 실행시 this 값을 특정한 값으로 고정시킬 수 있는 메소드이다.bind는 ES5에 추가되었기 때문에 ES5 이전에는 call, apply를 통해서만 this를 변경할 수 있었다. bind처럼 this를 변경 한 함수로 만들기 위해서는 직접 구현을 했어

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

잘 모르고 넘어간 html 속성

Document Type의 약자로 HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해준다. <!DOCTYPE> 을 선언하지 않으면 호환모드(quirks mode)로 동작하는데, 호환 모드의 경우 각 브라우저마다 문서

2021년 3월 15일
·
2개의 댓글
·

웹팩5 HMR이 동작을 안 한다??

웹팩5를 쓰면서 잘 되던 HMR이 갑자기 동작을 안 한다. 너무 불편하다 하나를 바꿀 때마다 새로고침을 해주어야 한다.왜 그럴까... 찾아보니 target에 es5 를 추가 하면 안 된다고 하는 것 같다...아까 IE를 지원 하기 위해서 target: 'web'인 것을

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

웹팩 바벨 화살표함수가 ES5 일반 함수로 트랜스파일 안 될 때...

웹팩으로 IE를 지원 하기 위해서 babel을 사용하고 core-js도 설정을 해주었다. 그 설정은 다음과 같았다.babel.config.jswebpack.config.js다음과 같이 설정을 해뒀는데 build를 해도 계속 화살표 함수가 바뀌지 않는 것이었다. babe

2021년 3월 14일
·
4개의 댓글
·