Youngble_개발스토리

Graphql 사용 정의 보통 Graphql 을 사용하는 이유는 Restful API 의 Over-Fetching의 데이터를 Under-Fetching으로 사용하는 것이다. Over-Fetching이란 필요이상의 데이터를 불필요하게 fetch 하는것을 의미하는데 그만큼 서버의 트래픽 부하 및 요청크기가 많아 지기 떄문에 비용면과 사용자 경험측면에서 좋지 않는 점이있다. 이를 해결하기위해 Graphql을 사용함으로써 Under-Fetching 즉, 기존의 데이터량으 필요한만큼과 사용하는 데이터로 줄여서 사용하는 것이다. 문제점 하지만 우리 프로젝트의 문제점은 이러한 이점을 배제한체 모든 데이터를 쿼리에 넣어 불러오기때문에 graphql 에대한 이점이 없었다. 따라서 graphql 최적화를 통해 필요한 데이..

이직한지 아직 1달은 되지 않았지만 어느덧 5월이 되었고 휴일이 긴 오늘 푹쉬며 책도 읽고 맛있는 것도 먹고 비오는날에 짧게 TIL을 작성하면 좋겠다고 생각했다. 들어오자마자 병행해야했던게 두가지였다. 하나는 입사하여 필요한 서류, 사원증, 받을 장비, 보안교육 등 전반적인 회사 교육과 온보딩이였고 하나는 실무적인 파악과 OKR 작성, 노트북 셋팅을하고 어느부분의 업무를 바로 맡아서 진행하는지 등이 이루어졌다. 현재 사용하는 기술스택을 보니 Graphql을 통한 API 데이터 통신을 하는데 단순히 그냥 쓰는게 아닌 타입스크립트대비한 code generator 인 graphql전용 codegen 을 사용하고 있었다. 사용한 경험이 없었기때문에 흥미로웠지만 공부하면서 진행하기에는 시간소요가 있기때문에 있는 ..

아마 다음주 중으로 입사 확정이 될 것이라고 생각하여 그전에 짧게 회고를 쓰고자 한다. 이직과정이나 어떤걸 느꼈는지는 아마 입사가 확정된다면 다음 회고록에서 쓰도록하고 오늘은 짧게 추가된 도서에 대한 이야기를 해보고자한다. 도서 목록 추가 먼저 그전에도 읽을 책들에 대한 리스트를 정리한적이 있는데 추가적으로 내가 필요하다고 느낀 책들이 추가되어서 그부분에 대해서 써보고자 한다. 1. 기초부터 완성까지, 프론트엔드 by 이재성 이 책을 고르게 된 이유는 프론트엔드만의 책이 있는지를 찾아보다가 알게되어서 사게 되었다. 전반적으로 자바스크립트, css, html에 대한 짧은 기본 지식을 시작하고 있다. 하지만 그런 지식을 위해서 산것은 아니고 거의 뒷쪽 챕터에 있는 내용들을 보고자 샀다. 좀더 심화된 내용으로..

회고록에 대해서 많이 남기지 못한거같아, 요근래에 어떻게 계획을 생각했는지 써보고자한다. 먼저 그전에는 기능을 구현에 포커싱을 두었고 그것이 어느정도 되고나서는 기능을 구현뿐만 아니라 어떠한 구조, 재사용, 가독성 등 좀더 큰틀을 보기위해 노력하였다. 그러면서 느낀게 개발 관련 책과 강의를 많이 구입했는데, 강의는 정말 많이 봤던거 같은데 책은 시간 배분의 효율성때문에 많이 안봤던거 같다 글이기도 하고.. 그런데 요근래 이직을 준비하면서 좀 많이 읽어봐야겠다 라고 생각했고 추가된 책들도 있어서 요번엔 책을 많이 읽어볼려고한다. 책 목록은 다음과 같다. 아마 계속 추가가 될것이다. 클린 아키텍처 선택이유: 이전 직장에서 실무를 하면서 아키텍처에 대한 영감을 많이 받았다. 그전에는 생각하지 않았던 부분이였고..

다시한번 느끼게 된 최적화에 대한 이해한 부분에 대해서 회고록 형식으로 남겨놓고자 이렇게 쓰게 되었다. 요 몇일 여러개의 기능구현 과제를 진행을 하면서 피드백을 요청하여 받았던 부분중 하나가 메모이제이션, 최적화 부분에 신경을 쓰지 않은거 같다 라는 거였다. 솔직히 몇일안에 요구사항을 구현하는것에 포커싱을 맞추고 그 후 리팩토링 작업같은 중요하지만 부가적인 부분은 보지않는다고 생각했다. 또한 무분별하게 사용하는 최적화, 메모이제이션은 오히려 많은 비용을 발생할뿐이라는 것이 많은 사람들이 이야기하는 부분이다. 그럼에도 중요하게 생각하는 부분이 최적화부분이라고 하였고, 그렇기에 이번에 다시한번 최적화 부분을 보게 되었다. 특히 리랜더링을 방지하기 위한 React.memo 와 useCallback부분이였다. ..

오늘은 간단하게 면접때 질문 받은것 중에서도 실제 사례의 사이트를 보여주며 물어봤던게 신선해서 적어볼려고한다. 해당사이트는 spotify 였는데 지금들어가면 그러진 않은데 조금 변형해서 보여줬는지는 모르겠지만 메인화면 로드에서만 5초정도의 로딩후 내용물들이 보이는 현상이 있었다. 위의 빨간 체크박스 부분이 뜨지 않다가 생성이 되는데 이러한 현상이 왜 발생하는지에 대해서 이유를 말하는 것이였다. 두가지로 추론을 했는데 첫번재는 html, css, js 등의 리소스를 한번에 불러오는데 많은양이거나 거기에 걸리는 시간으로 인해서 뜨지 않는다는 추정이였지만 그러기에는 많은 리소스가 없을거 같았고 두번째로는 api 요청부분이 있기 때문이라고 생각했다. 그런데 메인페이지에서 api요청할게 있을까? 또는 있다고 하더..

한달 넘도록 블로그관리를 하지 못했어서 한달 회고록을 파트1 과 2로 나누어서 쓰려고한다. SEO 먼저 내가 담당했던 서비스의 마케팅부분에서 구글 SEO가 제대로 잡히지 않아 급하게 프로젝트를 다시 내부적으로 교체해야하는 상황이 왔었다. 어느정도 서비스가 잘이루어져서 구글 Ads와 페이스북을 통해 마케팅 광고를 시작했는데 예전에 최적화하지 못했던 SEO부분때문에 빠르게 최적화를 하지못한다면 많은 고객을 받지 못하는 상황이 되기 때문에 가능하면 빠르게 대안을 찾아야한다고 전달 받았었다. 모노레포 선택지를 몇가지 주었다. 모노레포 라는 개념으로 프로젝트를 만들어서 SEO에 필요한 페이지에 대해서 따로 라우팅을 잡아서 배포하는 부분이 첫번째 제안이었고 두번째는 Next.js로 필요한 페이지를 부분이관이 가능한..

일단 한동안 회사 프로젝트에 집중하기도 했고 따로 기술관련 글은 올리지 못한거 같다. 맡고 있는 프로젝트의 SEO를 최적화하기위해 react-helmet과 react-snap을 사용하긴 했는데 원하는 만큼의 결과가 나오진 못했던거 같다. 원래라면 SSR, SSG 방식의 Next.js 로 바꿔야하지만 그렇게 되면 다시 마이그레이션하는 작업의 소요시간도 크기도하고 새로 추가된 요구사항들을 진행하지 못하기도 해서 일단 try 개념으로 SPA일때 사용하는 helmet과 snap을 사용해봤는데 첫페이지 외에 다른 라우팅주소에 대한 검색이 구글에서 나오질 않고 있다. 일단은 우선순위에서 급한부분이 아니라 나중에 작업하겠지만 아마 추후에 next.js로 최적화를 들어가지 않을까 싶다. 아마 다음주부터는 새로운 프로젝..

STEP 1. 디자인 시스템이란 무엇인가? 2. 왜 디자인 시스템을 사용하게 되었나? TL;DR 디자인 시스템은 일관성과 통일된 디자인 컴포넌트 집합체이다. 디자인 시스템은 오직 디자이너를 위한게 아니다. 조직 전체 구성원을 대상으로 '제품을 만드는 방법'을 다룬다. 개발자로써 리액트 컴포넌트 atom design으로 최대한 재사용성을 위해 확고한 디자인 시스템 및 운영이 필요하다. 나는 사실 디자인 시스템이 디자이너를 위한 하나의 에셋처럼 모아놓고 쓰는거라고 생각했고 주니어 개발자로써는 '아 저런식의 일관된 브랜딩된 디자인을 쓰고 무슨 색과 폰트를 쓰는구나'로 그저 참고용으로 생각했다. 실질적으로 와닿지도 않았고 여러 디자이너와의 협업을 했다고 하더라도 짧은 기간내에 이뤄졌기때문에 디자인 시스템을 확립..

회사 입사한지 어느덧 4개월이 다되가는 시점에서 내가 가진 역량을 실무에 응용하고 경험해보고 다른사람이 만든 코드의 스타일을 보고 이해하며 프로젝트를 진행해본거같다. 앞으로 프로젝트를 빌드업하며 고도화해야 할건 많지만 서비스 프로젝트에 쌓여있는 새로운 기획들과 리뉴얼들로 과연 프로젝트의 원하는 기간에 맞춰 기능과 서비스를 만들면서도 새로 접목해보고 사용하는 여유가 있을까 싶기도하다. 접목하더라도 깊게 생각해보고 고심해서 만들시간은 있을까도 싶다. 리팩토링을 하건 써보지않았지만 미래를 봤을때 협업을 위해서도, 기능속도의 향상을 위해서도 필수적이다라고 생각하는 기술스택들을 접목해볼 수 있는 스케쥴이 될까도 싶다. 지금까지는 프론트엔드로써 현재 배운것을 응용+접목하고 새로운 스택에 포커싱을 7할정도 투자하고 ..