Youngble_개발스토리

백엔드쪽 작은단위 도메인 서비스와 컨트롤러들은 완성했고, 초반엔 익숙치않고 알아야하는 개념들이 있어 진도가 많이못나갔지만 익숙해지니 간단한 컨트롤러나 도메인은 2-3개씩 금방금방 적용한거같다. 검색CRUD, 검색히스토리, 소셜로그인(카카오), 일반로그인, spring security Authenciation filter, 관심종목CRUD, 실시간 종목 주가시세 웹소켓 및 단일 http, 과거 주가시세, 일부 도메인 통합테스트 진행한상태 이제 마지막 피날레 메인 도메인이될 매수,매도 프로세싱을 진행하기전 프로세싱 고민과 진행 후에는 이 예측이 어떻게 달라질지 TIL방식으로 간단히 적어볼려고한다. 매수매도를 진행하기위해선 계좌, 계좌내역, 주문, 주문히스토리 등이 한번에 이루워 져야하기때문에 복잡하고 설계..

어느순간부터 AWS에서 비용이 청구되었다.현재 프리티어 계정인데 1월 부터 비용이 청구되는것을 보고 뭐지싶었다. AWS에서 각각의 서비스들의 한가지씩은 모두 사용하더래도 무료이기때문에 돈이 나갈일이없어야하는데 1월26일자 기준으로 1월은 2.37달러, 2월은 예상 7달러가 나오길래 혹시모르는 내 설정이나 과도한 트래픽이 문제인가 생각하게되었다. 웹소켓을 통해 실시간 주식정보를 받는것도있고 EC2안에서 프로젝트를 시작할때 약 2700개의 주식정보들을 인메모리에 저장하여 쓰기위해서 DB에서 가져오는데 테스트할때는 프로젝트를 껏다가 배포하고 껏다가 배포하고 하니깐 많은 쿼리가 발생한다고 생각했다. 먼저 떠올린건 로드밸런서 도입이후기때문에 로드밸런서가 공짜가 아닌가? 생각을했고 원래부터 프로젝트로는 비용을 내지..

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로 최적화를 들어가지 않을까 싶다. 아마 다음주부터는 새로운 프로젝..