Youngble_개발스토리

SEO 최적화는 어느정도 마무리가되어 서비스의 성능 최적화를 위하여 번들사이즈를 줄이기로 하였다. 먼저 찾아본결과 Nextjs build후에 번들의 사이즈를 알기위해서 bundle analyzer를 사용하여 사이즈를 체크하고 사용하지않는 코드와 import들을 Tree Shaking을 진행하면 된다고 하였다. 현재 Nextjs로 진행하고 있기 때문에 @next/bundle-analyzer 라이브러리를 사용하여 번들사이즈를 이미지화하여 볼수 있다. bundle-analyzer를 사용하여 보는 사이즈는 Stat size, Parsed size, Gzipped size 총 3개가 있다. Stat: 빌드된 그대로의 상태 사이즈 Parsed: 번들된 사이즈 Gzipped: 압축된 사이즈 Parsed를 줄이면 Gz..

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

Router Next.js의 Router는 file-system 기반 File-system? 파일을 만들면 해당 파일이름으로 라우터로 즉각적으로 인지하여 주소와 docking이 된다. pages/ src/pages/ 만약 src/pages 도 있고 pages/ 경로도 있다면 어느게 우선순위가 높고 어떤걸로 인지하는가? 만약 pages/ 가 있다면 이것을 우선순위로 인지하여 실행되고 아래 src/pages는 인지하지않는다. Nested routes pages/products/first-item.js => /product/first-item pages/settings/my/info.js => /settings/my/info 이때 경로 depth가 길어질수록, import 할때 상대경로의 …/../ 등 일정하..

Layouts 여러 page들의 공통 처리 하나의 공통된 layout을 쓰는 경우 Components/Layout.js 컴포넌트 하나를 pages/_app.js 에서 활용하면 됨 만약 여러개의 Layouts을 활용하고 싶은 경우 Components/SubLayout.js Page.getLayout에 getLayout 함수를 제공 Next.js에서 다른 url path로 이동하거나 새로고침시에 전역적으로 사용하는 header, navigator 같은 형식이나, 전체적으로 가져가고싶은 css 등을 설정할수 있게하는 기능이 있다. 이를 전체 한개의 layout으로 쓸 Layout이라는 컴포넌트와 그외에 추가적인 layout을 쓴다면 SubLayout을 만들어서 사용한다. 먼저 Layout.js 컴포넌트를 보면..

SSR : Server Side Render 서버가 그린다. 그린다: 데이터를 가져와서 그린다 서버가 그린다: 서버가 데이터를 가져와서 그린다. SSR을 담당하는 함수 - getServerSideProps 정해진 틀로 props에 원하는 값을 넘겨주면되는데 이때 time에 현재시간을 넣어주었다. 위와 같이 getServerSideProps를 선언하고 Home이라는 컴포넌트에서 {time}을 매개변수로 사용한다. 그리고 jsx return 문에서 해당 time을 출력해보면 아래와 같이 뜬다. 이 getServerSideProps와 페이지 Home 컴포넌트 어디서 작동하는지 알기위해 console.log를 써놨는데 클라이언트 브라우저에서는 아무 로그도 찍히지 않았다. 대신 terminal을 통해 server..

재귀란? 자신의 함수에서 자기자신을 호출하는 것 재귀함수를 사용하는 이유 모든 곳에서 재귀함수를 사용하고 있다. 예로 간략한 리스트는 다음과 같다. - JSON.parse - JSON.stringify - document.getEementById - DOM traversal algorithm(DOM 순회 알고리즘) - data structures - cleaner alternative to iteration DOM traversal algorithm(DOM 순회 알고리즘) DOM의 모든요소가 중첩된 트리 구조로 되어있기 때문에 만약 div 태그안에 div가 들어있고 이러한 중첩 계층이 100개나 될때 그것을 살펴보고자 할때 흔한 접근법 중 하나가 재귀적으로 코드를 작성하는 것이다. Data structu..

분할정복이란? 알고리즘 디자인 패러다임 중 하나이다. 정의 : 문제를 즉각 해결할 수 있을 때까지 재귀적으로 둘 이상의 하위 문제(Sub-problem)들로 나누고(Divide) 문제를 해결한 다음(Conquer) 그 결과를 이용해 다시 전체 문제를 해결하며 합치는 방법 분할정복 핵심 진행방식 ① 분할 : 동일한 타입의 하위 문제로 큰 문제를 분할한다. ② 정복 : 재귀적으로 하위 문제들을 해결한다. ③ 병합 : 적절히 해결된 결과를 사용해 큰 문제를 해결한다. 분할정복 종류 이진탐색, 퀵정렬, 병합(합병)정렬 이글에서는 이전 알고리즘&자료구조 글로 썼던 이진탐색의 예시로 진행한다. 선형탐색/순차탐색(Linear search, Sequential Search) function search(arr, val..

YML/YAML 이란? Yet Another Markup Language의 약자로, 사람이 읽을 수 있는 데이터 직렬화 언어이다. 최근에는 YAML Ain't Markup Language라고 불리는 재귀적 말장난도 있다. YAML 은 JSON이나 XML과 마찬가지로 설정 파일 등의 목적을 가진 데이터를 기술하기 위해 만든 포맷으로 JSON과 비교하자면 좀 더 구조가 복잡하지만 사람이 보기에 가독성 측면에서 좀 더 자연스러운 포맷이다. 어디서 사용하는가? 여러곳에서 활용하고 있겠지만 현재 내 입장에서는 github actions을 이용할때 CI/CD 를 배포할때 사용하는 포맷이다. 처음에는 그저 CI/CD를 구현하기위한 주목적으로 큰틀만 알고 사용했지만 여러 추가적인 action이 필요하게 되고(cloud..

슬라이딩 윈도우란? 고정 사이즈의 윈도우가 이동하면서 윈도우 내에 있는 데이터를 이용해 문제를 풀이하는 알고리즘 여기서 말하는 윈도우와 슬라이딩은 창문 틀에서 창문이 슬라이딩 하는 것 같은 알고리즘이라는 뜻 프로그램을 작성할때나 코딩테스트에서 리스트를 활용하는 경우는 굉장히 많다. 일반적으로 인덱스를 처음부터 끝까지 완전 탐색을 하게 되는데, 완전 탐색을 할 경우 효율성이 좋지 않을 때 활용할 수 있는 알고리즘 3가지는 다음과 같다. Two Pointer Sliding Window Prefix Sum 문제설명 주어진 Array에서 주어진 number 만큼의 연속되게 붙어있는 값들을 더했을때 가장 큰 값 max를 구해야한다. 예를들어 maxSubarraySum([2,6,9,2,1,8,5,6,3],3) 라는..

출처: https://github.com/pocojang/developer-roadmap GitHub - pocojang/developer-roadmap: 2020년 웹 개발자가 되기 위한 로드맵 2020년 웹 개발자가 되기 위한 로드맵 :kr:. Contribute to pocojang/developer-roadmap development by creating an account on GitHub. github.com 로드맵의 목적 이 로드맵의 목적은 전체적인 방향에 대한 아이디어를 제공하고 다음에 무엇을 배워야 할지 혼란스러울 경우와 트렌드에 뒤떨어진 것을 배우지 않도록 안내하는 것입니다. 왜 어떤 도구가 다른 도구보다 적합하다고 생각되는지에 대한 이해를 넓혀 가야 하며 유행에 따른 도구를 기억하는 ..