본문 바로가기

개발

 (10)
첫 풀스택 서비스 만들기 (Feat. 엉망잔칭) 프론트엔드 개발자였던 과거를 뒤로 하고...(과거 아님) 이번에 회사에서 필요하다는 서비스를 풀스택으로 만들어보기로 했다. 3월 쯤 본격적으로 들어가는 메인 프로젝트에 투입되기 전까지 시간이 남아 백엔드도 경험해 볼 겸 맡아보기로 한 것이다. 예전에 싸피 할 때도 백엔드 공부를 하긴 했었고 백엔드 개발자들과 협업도 당연히 했었던지라 어렴풋이 어떻게 설계를 하고, 개발을 하는지 알고는 있었는데 막상 직접 개발해보는건 처음이었다. 스케줄은 타이트하게 정해졌다. 우선 한달 동안 MVP(최소 기능 제품)를 빠르게 개발해내고, 남은 한달 동안 피드백을 받으며 수정해나가기로 했다. 우리 파트원들끼리만 사용해보면서 어느 정도 안정화하다가 몇달 후 런칭할 사내 시스템에 붙이는 것이다. 프로젝트 시작! 먼저 요구사항을 ..
useScrollAutoMove - 실시간 로그 화면 스크롤 자동 이동 회사 서비스 중에 실시간으로 추가되는 로그를 계속해서 보여줘야 하는 화면이 있었다. 배열에 로그 데이터가 계속해서 추가되며 전체 로그의 height가 길어지면서 당연히 화면에 세로 스크롤이 생겼다. 이런 상황에서 리액트는 스크롤이 상단에 멈춰있는 상태로 스크롤 전체 길이만 길어져갔다. 그런데 이렇게 되니 새로 쌓이는 로그들은 스크롤을 직접 내려 확인해야 하는 불편함이 생겼다. 마우스로 스크롤을 내리지 않는 이상 초반에 생성된 로그만 볼 수 밖에 없었고, 자동으로 가장 최신 스크롤을 계속 볼 수 있게 개발해보기로 했다. export const useScrollAutoMove = (data: any[]) => {  const scrollRef = useRef(null);  useEffect(() => {  ..
테오 스프린트 18기 회고 테오 스프린트란, 구글의 핵심 서비스들을 탄생시킨 프로세스 '스프린트'를 FE 시니어 엔지니어인 테오만의 방식으로 변형시킨 서비스 개발 프로세스다. 일주일 간 진행하는 일종의 해커톤이라고 할 수 있다. 벌써 18기수의 나름 전통(?) 있는 행사고, 나는 14, 15, 16기 연속 3회를 참여했었다. 작년까지는 거의 1~2달 간격으로 자주 했었는데, 최근에는 테오가 바빠서 그런지 텀이 꽤 있었다. 나는 17기를 건너 뛰고 약 1년만에 재참여를 하게 됐다. 이번에 참여하는 주된 이유는 IT 프로덕트를 만드는데 효과적이라고 생각했던 이 테오 스프린트의 시스템을 체화하기 위해서였다. 추후 내가 하고 싶은 경제성 있는 프로젝트들에도 적용하기 위해서. 그래서 이번에는 배운다는 생각으로 개인적인 개발이나 아이디어의 ..
컴퓨터 옮겨가며 작업 이어가기 Feat. Git 직장 동료와 코드 리뷰를 하다 '~기능 구현 중'이라는 커밋이 눈에 띄었다. 이게 뭐냐고 물어보니 회사에서 작업하다가 집에 가서 이어하기 위해 그때까지의 작업을 저장해 놓은 커밋이라는 답을 들었다. 커밋을 그렇게 해도 되나 싶으면서도 아니면 어떻게 해야 할지 바로 떠오르지는 않았다. 작업의 진행 상황을 임시 저장하는 용도로 커밋을 사용했던 동료의 방법은 간단하고 직관적이지만 다른 사람이 볼 때 의미 없는 커밋을 쌓는다는 단점이 있었다. 당장 나만 해도 코드 리뷰를 하면서 이 커밋은 무슨 역할인지 헷갈렸다. 이 글에서는 찾은 방법에 대해 간략하게 소개해보도록 하겠다.임시 브랜치 활용두괄식으로 바로 소개해보자면, Git으로 임시 브랜치를 만들어 활용하는 방법이다. 이 방법을 사용하면 커밋 내역을 깨끗하게 유..
에러 핸들링 feat. Error Boundary, react-error-boundary 개발을 하다보면 새하얀 배경에 에러 메세지로 가득한 화면을 심심치 않게 맞닥뜨린다. 실제 서비스 단계에서 이런 상황이 닥친다면 아무 안내도 받지 못한 사용자는 당황하다가 페이지를 이탈할 가능성이 크다. 반대로 예상치 못한 에러가 발생하더라도 재시도나 홈으로 이동 등 유저에게 에러 대처 기능을 제공하면 사용자가 바로 이탈할 가능성은 줄어들 것이다. 즉, 에러를 어떻게 처리하는지는 웹에서 상당히 중요하다.이전 회사에서는 에러 처리 로직이 제대로 되어 있지 않았다. 기능 구현하느라 바빴고, 에러가 발생하면 빠르게 해결해 재배포하는 식이었다. 언제 한 번 제대로 공부해야지 생각만 하고 있다가 이번에 기회가 되어 에러 처리 로직을 개선해보게 되었다. 이 과정에서 얻은 지식을 토대로 FE에서의 에러 처리에 대해 전..
Next.js 사용 중에 쿠키가 사라진다면 회사 프론트엔드가 Next.js 기반이긴 했지만 사실상 pages router로 라우팅을 편하게 관리할 수 있는 리액트 정도로만 사용되고 있었다. 초기 렌더링에 필요한 데이터는 클라이언트 사이드 useEffect 안에서 불러왔기 때문에 렌더링 이후 네트워크 요청이 많고 가독성에도 좋지 않았다. 이런 단점들을 보완하기 위해 Next.js의 getServerSideProps를 사용하면 어떨까 생각이 들어 건의했고, 새로 작성하는 페이지들에 우선적으로 적용해보기로 했다. getServerSideProps에 쿠키가 전달되지 않는다새 페이지를 만들고 getServerSideProps(이하 GSSP) 안에서 데이터를 페칭해 props로 내려주도록 했다. 아무 문제 없이 잘 작동해 dev에 배포했는데 에러가 발생했다..
Technical challenges in Teo Sprint '나랑 벚꽃 보러 가지 않을래?' 스프린트 프로젝트에서 내가 겪었던 기술적인 도전들을 적어보려고 한다. 1. Tainted Canvas 스프린트를 하는 과정에서 아이폰에서 초대장 생성이 안 되는 이슈가 있었다. 유저가 만든 화면으로 canvas를 생성하고 그것을 url로 바꿔 firebase에 전달하는 로직에서 발생한 이슈였다. 내가 짰던 코드가 아니었기 때문에 코드를 찬찬히 뜯어봤는데 비동기 처리 부분이 뭔가 이상했다. 코드를 동기적으로 처리하기 위해 setTimeout을 사용하고 있었다. await가 제대로 동작하지 않아 시간이 없어 setTimeout을 사용했다고 예전에 들었던 것 같다. 이 문제가 firebase의 비동기 처리 부분에서 일어난 문제라고 생각해 await 코드로 바꿔보기로 했다. s..
Context API 이번 글은 전적으로 velopert 님의 블로그 글을 참고했습니다! 해당 블로그 글을 보고 공부하며 메모한 부분과 약간의 생각을 첨부했습니다. 참고 링크는 글 하단에 명시했습니다. Context는 리액트 컴포넌트 간에 어떠한 값을 공유할 수 있게 해주는 기능이다. 주로 전역적인(global) 값을 다룰 때 사용하지만 꼭 전역적일 필요는 없다. Props가 아닌 또 다른 방식으로 컴포넌트 간에 값을 전달하는 방법인 것이다. Props로만 값을 전달하면 컴포넌트들 간의 depth가 깊어질 수록 Props Drilling이 심해진다. props를 전달하는 과정에서 실수할 수도 있고, 부모-자식 간이 아닌 형제 컴포넌트 간에는 값의 공유가 어려워진다. Context를 사용하면 이런 어려움들을 해결할 수 있다. ..

티스토리툴바