Youngble_개발스토리

오늘은 Web APIs 관련해서 정리하고자한다. APIs 란? 우리가 늘상 API 라는 말을 많이 하고있지만 실질적으로 정확히 모르고 쓸때가 많다. 백엔드와 데이터를 통신할때도 API통신이라 하고 DOM을 컨트롤할때도 Browser API를 사용한다고 하는등 많은 곳에서 API라고 쓴다. 정의로는 Application Programming Interfaces(APIs)는 프로그래밍 언어에서 개발자가 복잡한 기능을 보다 쉽게 만들수 있도록 만들어진 구조이다. API는 복잡한 코드들을 제거하고 쉬운 구문으로 대체하여 사용할 수 있게 제공해주는 것이다. 정의로 말하면 솔직히 이해하기 쉽지 않다. 아래의 그림의 예시를 통해 좀더 쉽게 설명해보자. 우리가 실제로 집에서 전기를 사용한다고 했을때, 플러그 소캣에 꽂..

오늘은 프로젝트 아키텍쳐 관련하여 정리하고자한다. 순서 1. 모놀리식 아키텍처 2. 모놀리식 단점 3. 마이크로서비스 아키텍처 MSA 4. 멀티레포 장점 5. 멀티레포의 단점 6. 모노레포 모놀리식 아키텍처, Monolithic Architecture 모놀리식 아키텍처는 전통적인 소프트웨어 프로그램 모델이다. 위의 사진처럼 하나의 서비스를 위해 모든 코드와 프론트/백엔드, 로직 등 한곳에서 관리하고 빌드/배포 운영 하는 것이다. 보통 프로젝트 초기에는 코드 관리, 인지 오버헤드 및 배포의 용이성 면에서 모든 것을 한꺼번에 릴리스할 수 있기 때문에 처음 시작하는 작은 스타트업같은 경우나 소규모의 프로젝트는 흔히 모놀리식 아키텍처로 많이 진행한다고 하고 지금도 많이 쓴다. 모놀리식 단점 하지만 한곳에서 관리..

브라우저에서 해당 URL을 입력후 브라우저 렌더링 과정에 대해서 어떻게 일어나는지 정리해보자. TL;DR 렌더링 과정 1. 브라우저 주소창에 특정 주소를 입력 2. 해당 주소의 서버를 찾고 만약 캐시가 있는지 먼저 체크, 그리고 DNS(Domain Name System)가 실제 서버로 연결하고 http, https에 따라 통신한다. 3. 별도의 path없이 기본 url 요청 '/'로 보낼시 루트 설정은 기본 설정의 index.html을 요청하게되고 서버에서 루트폴더에 있는 index.html을 클라이언트쪽(브라우저)으로 보내준다. 4. 해당 index.html을 받은 브라우저에서 텍스트로 이루어진 파일을 파싱(parsing)하면서 DOM 트리 생성 5. html을 읽다 중간 link tag에서 CSS요청..

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..