본문 바로가기

Frontend Study - 2

 (94)
BIG O with Javascript 하나의 결과물을 위해 많게는 수십, 수백가지의 경로가 있다. 어떤 경로가, 어떤 코드가 좋은 코드일지 어떻게 알 수 있을까. 얼마나 빠른지, 메모리는 얼마나 차지하는지, 가독성이 좋은지. 대표적으로 이 세가지가 있다. 빅오는 코드의 효율, 성능을 비교할 수 있게 하는 기준이다. 빅오를 통해 각 코드의 시간복잡성과 공간복잡성을 비교할 수 있다. 1. 시간복잡도 실제로 이 코드를 동작했을 때 얼마의 시간이 걸리는 지. 로 코드의 성능을 평가할 수 도 있다. 하지만 변수들이 너무 많아 정확성 측면에서 부족하다. 예컨데 성능이 다른 기기에서 실행을 한다거나, 같은 기기라도 기기가 어떤 상태에서 코드를 실행했는지도 영향을 미친다. 그래서 빅오를 통해 시간복잡성을 측정한다. 빅오는 걸리는 시간이 아닌, 컴퓨터가 처..
Next.js : 정적생성 SSG 과 fetch! + ISR (1) Next.js를 통해 사전렌더링을 구현하는 두가지 양식. 정적생성과 서버사이드렌더링이다. Static Generation 과 Server-Side-Rendering. SSG (Static Site Generation) / SSR (Server Side Rendering) 권장양식은 정적 생성이라고 한다. 둘의 가장 큰 차이점은 페이지의 생성 시점이다. SSG의 경우 빌드되는 동안 페이지가 사전 생성된다. SSR의 경우 배포 이후에 클라이언트 요청이 발생했을 때 페이지가 생성된다. getStaticProps 함수와 getServerSideProps 함수를 통해 정적 생성과 서버 사이드 렌더링을 구현할 수 있다. 하지만 두 함수를 사용하지 않더라도 next.js는 기본적으로 자동 정적 최적화(Automati..
NextJs : 넥스트js의 라우팅 정리. * 파일 기반 라우팅. 기존 React : 코드 기반 라우팅 -> Next js : 파일 기반 라우팅 Nextjs에서는 코드 내 라우트 정의를 따로 사용할 필요가 없다. 폴더와 파일명을 통해서 라우팅을 정의한다. index.js 파일이 폴더안의 페이지를 담당한다. products 폴더 안의 index.ts 파일은 'domain.com/products' url을 의미한다. 동적 생성은 폴더 혹은 파일명에 대괄호 [ ]를 함으로 가능하다. products 폴더안의 [id].ts 파일은 'domain.com/products/p1' or p2 or adfaf1 등의 url을 동적으로 연결시킨다. * 동적 생성 추가내용. 클라이언트 사이드에서 동적 생성한 페이지의 파라미터값을 얻기위해 useRouter를 사용한다..
React : 컴포넌트의 재사용 with children - Wrap Component (확장하기) 컴포넌트를 재사용할 때, 특정 부분을 제외하거나 추가해서 재사용하고 싶을 때가 있다. 그 때 유용하게 쓸 수 있는 방법. 컨테이너 처럼 배경을 지정하고, 안의 내용에 원하는 요소를 쉽게 집어 넣는 것. import React from "react"; const AppWrap = () => { return ( // { return ( {children} ); }; 배경으로 쓸 요소를 컴포넌트로 지정하고 그 안에 들어갈 내용을 wrapComponent를 이용해서 children으로 전달하는 방식으로 활용할 수 있다.
React : Immer 사용하기 주로 리액트 상태관리에서 useState, 전역관리에는 context API, Redux를 사용했었는데 상태와 관련한 그 밖에 다른 라이브러리들이 있었다. 중첩되어 있어서 복잡한 형태라면 useReducer를 통해 별도 함수를 만들어 관리 할 수 있었고, (분리되어 있기 때문에 재사용 가능하고, 테스트하기에도 편하다) 이번에 공부하게 된 Immer 라이브러리는 상태변경과 관련된 라이브러리이다. 중첩된 객체 데이터의 변경에서 보다 더 편하게 사용할 수 있었다. 기존의 방법보다 훨씬 직관적으로 변경할 수 있게 된다. 기존 리액트에서는 상태를 변경할 때 기존 상태값을 직접적으로 바꾸는 것이 아니라 불변성을 지키며 상태를 변경시킨다. 보통 spread 연산자를 사용하여 기존데이터의 복사본을 만든 뒤에 그 복사본..
BFF (Backend For Frontend) 에 대하여! MA & MSA & BFF 모르는게 나오면 알고 넘어가야 마음이 편하다. BFF (Backend For Frontend) 는 단어 그대로 '프론트를 위한 백엔드' 라는 의미이다. 이런저런 설명을 찾아보며 어떤 내용인지는 이해 했는데, 구체적으로 어떻게 작동 하게 되는 지 감이 잘 안잡혀서 공부해보게 되었다. 생기게 된 배경을 알고 이해가 조금 쉬워졌다. 1. MA (Monolithic Architecture) 기존에는 모든 서비스가 한 곳에 모인 Monolithic한 구조로 개발을 진행했다. 모든 기능들이 하나의 시스템에서 동작하는 구조이다. 개발과 관리가 용이하다는 장점이 있으나, 기능이 많아질수록 시스템이 복잡해져 코드를 이해하기 어렵고, 유지보수가 어려워진다. 또한 부분의 오류가 전체에 영향을 미칠 수 있고 그 오류를 수정할..
CORS ERROR란? CORS 에러 개념 및 해결. 사실 팀프로젝트 하면서도 CORS ERROR를 겪어 보지 않았었다. 면접 단골 문제로 나온다고 해서 슬쩍 알아봤었는데 잘 와닿지는 않았다. 그리고 이번에 고생을 하며 아주 제대로 알게 되었다.. ^^ CORS 란? Cross Origin Resource Sharing 교차 출처 리소스 공유, 교차 출처 자원 공유는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다. -위키백과 역시나 뭔 소린지 모르겠다. 이걸 이해하기 위해서는 우선, Cross-Origin과 Same-Origin 의 차이에 대해서 알아야 한다. - SOP와 CORS 외부 정보에 접근하는 데에 있어서, 웹에는 크게 두가지 정책이 있다. Same Origin Policy와..
AWS : EC2란 무엇이고, S3는 무엇인가? CloundFront는 무엇인가? 배포를 할 때마다 구글링한 글을 더듬거리며 한다. 이번에 또 배포를 하는데, EC2와 S3 중 어떤 걸로 해야할지 고민이 되었다. 1. EC2와 S3가 무슨 차이가 있는지 궁금하기도 하고, 2. S3와 같이 활용하는 CloudFront 가 어떤 면에서 도움이 되는지 알아보기 위해 공부해 보았다. 배포 과정 자체는 구글에 검색하면 상위에 나오는 이 사이트를 참고했었다. 예외적인 부분까지 정리가 잘 되어있는 글이다. https://42place.innovationacademy.kr/archives/9784 EC2와 S3. EC2 "Elastic Compute Cloud" 는 AWS에서 제공하는 성능, 용량 등을 유동적으로 사용할 수 있는 서버 개념이다. 간단히 말해, 적은 노력을 통해 클라우드에서 서버를 돌..

티스토리툴바