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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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