프론트엔드

최근에 이직을 준비하며 이력서에 적어 놓은 apollo-client 관련해서 깊이 있는 질문을 다소 받았다. 익숙하게 쓰는 스택이어서 원리나 트레이드 오프 등에 대해서 생각을 많이 안 했던 것 같아서 복습해 볼 겸 클라이언트에서 graphql을 처리하는 도구들을 비교해 보는 글을 작성해 보려 한다. Apollo Client 아폴로 클라이언트는 graphql로 로컬 및 원격 데이터를 관리할 수 있는 완전하게 기능을 제공하는 포괄적인 상태 관리 graphql 클라이언트이다. graphql 프로젝트가 오픈소스화된 직후인 2016년 meteor development group이 모든 프론트엔드 웹 프레임워크에 graphql 클라이언트 라이브러리를 구축할 계획으로 출시했다. 아폴로 클라이언트 라이브러리는 다음과 ..

2023년을 마무리 하는 시간이 어느덧 돌아오게 되었다. 이렇게 연말에 회고록을 쓰는 것도 벌써 6년째 진행 중이다. 개인적으로 가장 맘에 드는 연례 행사 중 하나여서 앞으로 계속 하지 않을까 싶은 생각이 든다. 지난 회고록은 아래 링크에서 확인해 볼 수 있다. Adios 2018 Adios 2019 Adios 2020 Adios 2021 Adios 2022 (Part 1. 회사편) Adios 2022 (Part 2. 개인편) 올해는 카테고리별로 나에게 있었던 일들과 이를 통해 내가 느꼈던 점들을 이야기 하는 방식으로 회고를 작성해 보도록 한다. 개발 굿닥 굿닥에서는 연초에 체크인 스쿼드로 시작을 했다가, 커넥트 스쿼드로 바뀌고, 그 다음 O2O 스쿼드로 바뀌면서 짧은 시간 두 번의 조직개편을 경험했다...

나는 평소에 개발 관련 서적을 많이 읽는 편이다. 서점에 가서 보기도 하고 지인들에게 추천을 받아 읽기도 한다. 그러던 중 최근에 눈길을 끄는 제목의 프론트엔드 개발 서적 한 권을 우연히 만나게 되었다. 바로 이 책이다. 나는 현재 회사에서 타입스크립트와 리액트로 웹 프론트엔드 개발을 하고 있다. 사실 이 스택은 나 뿐만 아니라, 굉장히 많은 회사에서 이미 표준으로 자리잡고 있는 스택이라 웹 프론트엔드 개발자로 취업을 하길 희망하는 취준생에게는 필수적이라고 보아도 과언이 아닐 것이다. 하지만 시중에 많은 리액트, 타입스크립트 책을 봐온 나로서는 아쉬운 점이 있었다. 크게 두 가지인데 첫 번째는 책이 너무 두꺼웠고, 두 번째는 책이 너무 어려웠다. 대부분 아쉬운 점은 1번 아니면 2번, 아니면 둘 다였다...

지난 10월 28일 나는 테오콘(TEOConf)이라는 주니어 웹 프론트엔드 개발자 컨퍼런스에서 발표를 했었다. 라는 주제로 내가 올 해 상반기에 회사에서 개발을 했었던 프로젝트 관련된 이야기를 가지고 테크 세션 발표를 진행했다. 프론트엔드 주제의 기술 발표는 처음이었어서 많이 긴장되고 떨렸는데, 다 끝나고 나서는 참 하길 잘했다는 생각이 들었다. 이번 글에서는 내가 첫 기술 주제의 발표를 어떻게 시작하게 되었고, 어떤 과정을 통해 준비했는지, 그리고 그 가운데서 느낀 점들을 솔직하게 풀어 가 보고자 한다. 기술 컨퍼런스 발표에 대한 갈망 내가 개발을 처음 공부하기 시작했던 2018년, 처음으로 개발 컨퍼런스란 곳을 가 보았다. 당시 코엑스에서 했었던 DEVIEW 라는 네이버 개발자 컨퍼런스였다. 솔직히 ..

이 글의 목적 여러 뎁스로 중첩된 오브젝트 형태로 구성된 상태를 불변하게 유지하는 방법에 대해 고민이 있는 웹 프론트엔드 개발자가 참고할 수 있는 사례를 공유하기 위함 로직이 복잡하고 사이드 이펙트가 많이 발생할 수 있는 코드를 적절한 도구로 간결하고 명확하게 작성하는 방법에 고민이 많은 웹 프론트엔드 개발자에게 인사이트를 주기 위함 이 글의 예상 독자 react와 typescript로 웹 프론트엔드 개발을 하는 엔지니어 기본적인 react, typescript에 대한 선수 지식이 있다고 가정하고 설명 인트로 내가 속한 팀에서 담당하고 있는 웹 프로덕트는 현재 context로 상태를 관리하고 있으며, form 형태의 페이지는 react-hook-form 이라는 라이브러리를 사용하고 있다. 그리고 유효성 ..

지난 10월 8일 롯데타워에서 열린 2022 FEConf에 다녀왔다. 정말 오랜만에 열린 오프라인 컨퍼런스 참석이었고, FEConf도 처음 참석해서 그런지 모든 부분이 신기하고 재밌었다. 발표도 깊은 주제로 알찬 내용이 많았었다. 프론트엔드 분야 한정 컨퍼런스인데 생각보다 사람들이 많이 몰려서 놀랐다. 티켓팅은 1분만에 마감이 되었던 것으로 기억을 한다. 컨퍼런스를 다녀오고 나서 관심있는 세션들에 대한 요약 내용을 적어보려고 한다. 모든 세션을 다 정리하지는 못했다. 이날 중반 이후부터 컨디션이 급격히 안 좋아졌는데, 앞부분은 집중해서 들었으나 뒷 부분은 거의 버티면서 겨우겨우 앉아 있었다. 감사하게도 주최측에서 풀버전 녹화 영상을 유튜브에 공유해 주었으니 관심 있으신 분들은 이 영상을 보는 편이 좋겠다..

4 properties to transform objects position scale rotation quaternion Object3D를 상속받는 모든 클래스들은 위의 4가지 속성을 가진다. 예컨데, 여기에는 PerspectiveCamera나 Mesh가 있다. 이러한 속성들은 행렬(matrix)으로 컴파일 된다. position objects position 속성은 다음과 같이 3차원에서 x,y,z 축을 의미 사용하는 단위 1은 단위로 인식하면 되고, 경우에 따라 다 다른 값을 가질 수 있다. (e.g. 1cm, 1m, 1km 등등) mesh.position.x = 0.7 mesh.position.y = -0.6 mesh.position.z = 1 mesh.position.x = 0.7 mesh.po..

오늘은 많은 분들이 사용은 하지만 헷갈리기 쉬운 useCallback과 useMemo에 대해서 이야기를 해볼까 합니다. 실제로 웹 프론트엔드 개발자 면접 질문에서 신입/경력 구분없이 단골로 나오는 인터뷰 주제 중 하나이기도 해요. 먼저 React 공식 문서에는 useCallback과 useMemo가 다음과 같이 설명이 나와 있어요. useCallback : Returns a memoized callback. 메모이제이션된 콜백을 반환한다. useMemo : Returns a memoized value. 메모이제이션된 값을 반환한다. 이 문장만 읽어서는 이해가 쉽지가 않습니다. 조금 더 살펴보도록 하겠습니다. useCallback과 useMemo 둘 다 공통적으로 가지고 있는 속성은 메모이제이션(Memoi..