FrontEngineer JungBam

유데미 강의를 훑으면서 뭔가 부족했던 부분을 채우기 위해 책을 구매했다. 하나하나 조금 더 깊이 있게 타입스크립트를 이해해 볼 생각이다. 타입스크립트란? 1. 타입스크립트는 자바스크립트의 상위집합으로 모든 자바스크립트는 타입스크립트 안에 포함된다. 2. 타입스크립트는 자바스크립트로 컴파일되고 자바스크립트로 실행된다. 3. 타입스크립트는 자바스크립트 런타임 동작을 모델링하는 타입 시스템을 갖고 있다. 즉, 타입 체커를 통해 런타임 오류를 발생시킬만한 오류를 찾아내려고 노력한다. 하지만, 모든 런타임 에러를 잡을 수 있는 것은 아니다. 4. 타입스크립트와 자바스크립트를 언어적으로 어떤 것이 우위에 있다라고 생각하기보다 프로젝트의 성향 및 취향의 차이일 수 있다. 하지만 일반적으로는 타입스크립트가 제공하는 D..

프로젝트가 끝나고 나의 코드를 본 많은 동기생들이 물어본 것이 useRef였다. 내가 왜 useRef를 사용했는지에 대한 질문들이었다. 나는 그저 공식문서에 있는 답변을 해주었다. 내가 사용한 이유는 매번 렌더링을 할 때에 동일한 객체를 제공해주기 위해서라고. 반복되는 질문을 받다보니 글로 정리해서 준다면 어떨까라는 생각이 되어서 정리해보기로 했다. 위에는 reactjs.org에 설명된 useRef의 기본설명이다. useRef는 통상적으로 DOM에 접근하는 방법으로 사용한다. input이라던가 아니면 어떤 요소에 focus를 할당한다던가 아니면 scroll 이벤트를 할때에 사용한다.(이건 공식문서에 보면 이런 상황에서 사용하라고 아주 잘 설명되어 있다.) 근데 이러한 부분이 아니라 함수형 컴포넌트에서 렌..

실전프로젝트 1차 결과물이 완료되어 유저테스트를 시작했다. 프로젝트의 가장 중요한 점이 유저테스트라는 것을 새삼 느낄 수 있었다. 아침에 일어나면 버그신고를 통해 각종 버그와 격려가 있었고 이것을 해결하는데 하루 하루를 보냈다. 최종발표회 당일에도 버그가 2건이 나오면서 발표회 중간에 즉각적으로 수정하여 배포했다. 최종 배포까지 버전업을 2번 진행했는데 각각의 버전업에 반영된 사항은 아래와 같다. 조금 아쉬운 것은 유저테스트를 좀 더 길게 할 수 있었다면 좀 더 완성도 있는 모습이 되지 않았을까 라는 점이다. 그리고 UT결과 중 프론트엔드에서 처리할 수 있는 것들은 즉각 처리가 되었지만 게임서버쪽에서의 에러들은 수정되지 못했다. 코드가 정리되어 있지 않아서 하나를 수정하면 그로 인해 파생되는 에러들이 생..

이 부분은 실제 내가 구현한 화면을 보면서 이야기를 하면 편하겠다. 프로젝트에서 조커를 픽하면 조커의 위치를 선택하는 화면을 구성한 것. (혹시나 프로젝트가 궁금하다면 : https://davinci-code.online) 조커 선택 화면 react-beatiful-dnd는 사용하는 것은 복잡할 수 있지만 이해하고 나니 너무 간단(?) 했다. 큰 틀은 처음 Context를 할당해주고 Drop 시킬 영영과 Drag 해줄 친구를 설정하고 Context에서 제공되는 메소드를 통해 드래그가 시작될 때 드래그가 끝날 때 등 각각의 이벤트를 만들어 주면 되는 것이었고 이걸 이해했음에도 계속 react-beutiful-dnd 에러가 콘솔에 찍히면서 애를 좀 먹었는데 이것 또한 스택오버플로우를 보면서 해결하니 금방 해..

1. 비동기 작업이 너무 간단함.(fetch, redux-toolkit의 thunk) 별도의 코드라인 작성없이 useQuery 한방이면 끝. 2. 코드가 간결하고 직관적이라 코드의 흐름을 따라가기 쉬움. 코드를 작성하고 나면 useQuery의 옵션을 통해 직관적으로 성공했을 때의 로직과 실패했을 때 로직, 아래 코드에는 없지만 항상 실행시키는 로직, 그리고 mutation에서는 onMutate까지 코드의 흐름을 읽기 너무 좋다. 3. DX 측면에서 개발 생산성 향상 이번 프로젝트에서 가장 많이 느낀 것은 refetch의 활용! 서버 상태와 일치시키고 싶은 순간 refetch함수 호출이면 끝. 4. staleTime 과 cacheTime을 통한 불필요한 서버 요청 최소화 처음 리액트 쿼리를 배울 때에 개발..

멘토링을 통해 큰 깨달음을 얻었다. 지금까지 모달은 display 값을 바꿔줌으로써 그 모달을 보여주고 감추고 하는 작업으로 진행했고 그로 인해서 초기값을 할당하기 위해 상태값을 변경하는 코딩을 해왔었다. 근데 이렇게 작업하다 보니 모달이 닫힐 때 모달 안에 있는 값들을 초기화 해줘야했다.(지금 생각해보면 멍청하다.) 이걸 한번에 해결하는 것은 모달에 해당하는 컴포넌트 자체를 호출할 때만 띄워주면 되는 것...그럼 당연히 호출되면서 초기화가 될테니까..ㅠㅠ 그래도 지금이라도 깨달아서 다행이다. 앞으로 display를 통해서 컴포넌트를 렌더링하는 일은 없을 듯. 의도를 갖고 작업하는 게 아니라면.

코드 리펙토링 과정을 통해 비지니스 로직과 UI적인 부분의 분리를 많이 시도하면서 공부하고 있다. 컴포넌트 함수가 호출되는 과정에서 함수가 재생성되고 레퍼런스 값들이 계속해서 호출되는 불필요한 리소스 낭비를 제거하기 위해서 많은 부분에서 고민하고 있다. 실전 프로젝트를 하면서 협업을 하면서 중요한 것에 대해서 정리가 되어가는 것 같다. 1. 신뢰할 수 있는 사람을 만나야 한다는 것. 각자 맡은 부분에 대하여 책임감을 갖고 프로페셔널하게 최선을 다하는 사람을 만나는 것은 중요한 것 같다. 이번 프로젝트에서는 그런 부분에 있어서 어려운 점이 많았던 것 같다. 두명의 하차과정이 진행되었고 그 중 프론트에 있어서 한명은 갑작스러운 하차를 하면서 진행에 있어 달라진 점이 많이 생기게 되었다. 그럼에도 프로젝트에 ..

예전에 유데미 강의를 들으면서 자바스크립트로 구현했던 드래그 앤 드롭을 리액트에서 구현하기 위해서 라이브러리를 찾아보던 중 이전에 사용했던 react-dnd보다 친절한 라이브러리가 없을까 라는 생각으로 npm에서 찾아봤다. 그래서 이번에 작업하면서 사용하기로 결정한 것은 rect-beautiful-dnd였다. 일단 주간 사용량이 150만건이고 가장 최근에 이슈가 해결된 것으로 보아 그래도 관리는 되고 있다고 생각이 들었다. 직접 구현해도 되지만 왜 라이브러리를 쓰냐 라고 한다면 깔끔한 드래그앤 드롭 이벤트를 구현하려면 dragstart - drag - dragenter - dragover - drop - dragleave 의 6가지 절차를 각각 잘 만들어줘야 하는데 이걸 각각 기능구현하고 애니메이션 작업..