Pay it forward

오래간만에 포스팅입니다! 10월에는 이사, 결혼준비 등 이벤트가 많아서 블로그 작성에 소홀했네요. 이사하고 나서 대중교통에 서있는 시간이 많아졌습니다. 회사까지 거리는 가까워졌지만.. 앉아서 가는 건 불가능해졌어요. 요즘엔 이 기회(?)를 살려 출퇴근 길에 공식문서를 읽는 습관을 들이고 있어요. 요즘엔 리액트 공식문서를 읽고 있는데, 마침 제가 당면한 문제를 해결할 수 있는 힌트를 얻었고 이를 통해 코드를 개선한 경험을 공유하고자 합니다. 문제 1. 상태(state)가 복잡하다. 총 4개의 필터데이터를 관리하는 상태입니다. const initialState = [[],[],[],[]]; const [filter, setFilter] = useState(initialState); 처음에는 상태를 배열로 만..

리액트에서 를 제어하는 방법은 보통 아래와 같다. import React, { ChangeEvent, useState } from 'react'; const ControlledInput = () => { const [text, setText] = useState(''); const handleChange = (e: ChangeEvent) => { setText(e.target.value); }; return ( ); }; export default ControlledInput; 사용자의 텍스트 입력 시 상태변화를 리액트에서 자신의 state로 관리하고 업데이트한다. 당연하다시피 사용하고 있는 이 방식의 Input은 리액트에서 상태를 관리하는 '제어 컴포넌트'이다. 그러면 '비제어 컴포넌트'는 무엇일까 i..

웹사이트 성능개선을 위해 무거운 자바스크립트를 code splitting 해서 초기 진입 속도를 빠르게 개선했다. 그 뒤에 발생한 에러이다. 브라우저를 미리 켜두었던 경우에 발생했다. 페이지를 이동하는데 loading chunk ...failed 라는 에러가 나왔다. 다른 분의 컴퓨터에서 확인해서 캡처는 못했다. 일단 에러메세지를 봤을 때 2.sgej22.chunk.js(랜덤) 를 찾는 것으로 보아 이동하려는 페이지의 chunk 파일을 웹서버에 요청했다. 근데 현재 웹서버의 chunk파일은 새배포가 되면서 랜덤 한 이름으로 바뀌었을 것이다. 그래서 2.sgej22.chunk.js 는 없는데? 라면서 에러가 나온 것이다. 각 라우트별로 codesplitting 을 한 뒤에 각 페이지에서 reload를 해보..

프론트엔드 로딩, 랜더링 성능을 전혀 생각하지 않고 개발된 프로젝트를 배포하려고 하니 이상하게 페이지가 느리고 버벅거리는 현상도 종종 나타났다. 그래서 성능에 관심을 가지게 되었고 메모이제이션이나 눈에 띄는 레이아웃 변경에 따른 reflow방지 외에 웹페이지 성능개선을 위해 노력한 것들이다. 부족한 점을 파악하기 위해 lighthouse를 이용하고 유동균 님의 인프런 강의를 참고했다. 가장 급한건 '텍스트파일 gzip형식으로 압축하기'이다 lighthouse 검사결과 텍스트 압축사용을 하지 않았다는 것이 가장 큰 성능저하요인으로 나왔다. 텍스트 압축사용이 뭔고 알아보니 https://vnthf.github.io/blog/Front-Gzip%EC%97%90-%EA%B4%80%ED%95%98%EC%97%AC..

https://pungwa.tistory.com/183 프로젝트 실패 회고 오래간만의 포스팅이다! 새로운 도메인의 프로젝트를 처음 시작하면서 굉장히 바쁘게 보냈다. 이 프로젝트의 첫 업무는 거의 실패라고 할 수 있다. 아니 실패다. 3주 안에 끝났어야 하는 일을 한 pungwa.tistory.com 위 글에서 이어지는 내용이다. 이번에 진행한 프로젝트에서 제대로 작성되지 않은 코드가 어떻게 회사의 비즈니스에 악영향을 미치는지 경험하게 되었다. 그래서 진지하게 '좋은 코드'에 대한 욕심이 생겼고 아키텍처든 패턴이든 코드컨벤션이든 그런 게 왜 필요한지 느끼게 되었다. 자연스럽게 아키텍처까지 생각하게 되었다. 아니 아키텍처를 고민해 봤다기보다 User Interface를 만드는데 왜 이렇게 느리고 어렵지? 왜..

오래간만의 포스팅이다! 새로운 도메인의 프로젝트를 처음 시작하면서 굉장히 바쁘게 보냈다. 이 프로젝트의 첫 업무는 거의 실패라고 할 수 있다. 아니 실패다. 3주 안에 끝났어야 하는 일을 한 달이 넘도록 해왔으며 아직 배포도 못한 상황이다. 레포를 클론받아서 한 달간 진행해 본 시점에 왜 이번 프로젝트가 오래 걸렸고 개발자로서 실패였는지 회고를 남긴다. 프런트엔드 개발자로서 오직 내가 스스로 개선할 수 있는 프런트엔드의 문제점만 뽑았다. 1. 2년 전 코드 그대로 개발, 기능추가시 useEffect 하나씩 추가하면서 새 기능 구현 22년 3월에 리액트 18버전이 릴리즈 되었는데, 프로젝트의 리액트 버전은 17.0.2 버전이다. 21년 3월에 릴리즈 된 버전을 마지막으로 사용하고 있었고 react-rout..