sizplay

운동 코딩 맥주

SSR에서 window is undefined 에러 수정 방법

next.js에서 개발 하다보니 window is undefined라는 문구를 볼 때가 있다. Server Error ReferenceError: window is not defined CSR(client side rendering)을 주로 하던 나에겐 서버 사이드 렌더링에서 생길 수 있는 오류에 대해 방심하고 있던 찰나 생긴 오류였다. 인터넷을 보니 몇…

2021 상반기 회고

8월이 끝나가는 이 시점에 나는 올해 상반기를 어떻게 지내왔고 무엇을 반성하고 싶어졌는지 내 생각을 정리해보기로 하였다. 이직 🕵 첫 프론트엔드 개발자로 일했던 쓰리빌리언에서 윌라로 이직을 하게 되었다. b2b회사에서 개발을 하다보니 고객들의 피드백이 있는 회사에서는 어떤 방식으로 일할 수 있을까 궁금했던 것들이 한번에 해소되었다. 기술적으로도 React…

주니어 프론트엔드 개발자 이력서 작성 팁

안녕하세요 블로그를 이전 하게 되었습니다. 글은 주니어 프론트엔드 개발자 이력서 작성 팁에서 확인 가능합니다. 감사합니다.

books-잘 듣는 습관

책 링크:잘 듣는 습관 목록 제 1장 좋은 인상을 주는 듣기 잘 듣는 법 어떻게 듣는지가 중요하다 잘 듣지 못하는 사람이 많다 듣기가 인생을 풍요롭게 한다 듣기 기술이 무기가 된다 제 2장 미움 받는 듣기 ‘미움 받는 듣기’만 피해도 성공 미움 받는 듣기 7가지 특징 - 2021.03.28 제 3장 어떤 상대에게도 적용할 수 있는 듣기 기술 상대가 적대감…

주니어 프론트엔드 개발자 이직 팁

이직을 하면서 정리를 할겸 작성하게 되었습니다. 의식의 흐름대로 작성되었으니 감안하고 봐주시길 바랍니다. 이직을 해야할 시기가 되었다. 프론트엔드 개발 경력 1년 7개월이 넘어가는 시점이 었다. 어디서 부터 어떻게 준비해야 하는지 막막했지만 열심히 준비하며 생긴 노하우와 팁들을 정리 하며 공유 하기로 하였다. 동향 파악 우선 동향 파악을 먼저 해야한다. …

2021 리액트 생태계 현황

이글은 State of the React Ecosystem in 2021을 Dave Ceddia의 허락하에 번역한 글입니다. 궁금하신 점 있으시면 daveceddia.com를 참조하시기 바랍니다. 2021년 리액트 앱을 만들기 위한 최고의 방법은 무엇일까? 2016년으로 부터 무엇이 바뀌었을까? 모든 사람들이 어떤 라이브러리를 사용하고 있을까? 저는 20…

immer에 대해 알아보자

immer의 특징은 object를 복사해서 사용 할때 데이터를 수정하거나 추가 삭제 한 부분을 제외 한 나머지는 구조적으로 공유 하고 있고 변환 된 부분만 새로운 object로 반영된다. version1은 우리가 일반적으로 사용하는 방식이고 version2는 immer의 produce를 이용 하여 mutable 하게 작성 하였다. 그리고 version3는…

image lazy load 간단 정리

이미지 / 비디오 Lazy Load에 대해 알아보았다. 아래는 일반적인 img tag에 onload를 실행하여 loading이 끝났을 시 브라우저에 표시 하는 방식이다. stackoverflow 그리고 아래는 백그라운드를 lazy load할때 표현법이다. stackoverflow 그리고 react npm package로 react-lazy-image-co…

내가 많이 사용하는 vscode 단축키

평소에 코딩 하면서 내가 자주 사용하던 단축키를 VScode shortcut 보며 정리 해보기로 했다. 원하는 파일로 바로 이동 할때 다른 packages를 사용 할때 유저 셋팅을 변경할때 지금 있는 라인의 코드를 위나 아래로 움직일 때 현재 라인을 삭제할때 파일의 맨 첨이나 마지막 라인으로 이동 할떄 그 단락을 접고 필때 모든 단락을 접고 필때 라인 커…

Object를 Array로 변환 방법

Object methods를 통해 간단히 Array로 변경 가능 좀 더 복잡한 구조도 Object.entries를 통해 쉽게 변환 가능하다 반대로 [‘chat’, ‘kakaotalk’] 포멧의 array를 object로 변환 하는 방법은 Object.fromEntries를 사용 하면 된다.