My Boundary As Much As I Experienced

요새 넥스트JS에 대해 배우면서 CSR vs SSR vs SSG에 대한 비교해보았다. 그런데 CSR과 SSR은 쉽게 구분이 가지만 SSR과 SSG을 구분하는건 조금 어려웠다. 'SSG는 빌드 시 정적 컨텐츠를 미리 만들어둬서 이 파일들만 단순히 반환하기 때문에 SSR보다 서버호출 비용이 낮으며 성능도 좋다.'라는데... '어쨌든 SSG라도 사용자에게 만들어 둔 정적 컨텐츠를 줘야하는거잖아? SSG로 만들든 SSR로 만들든 똑같은 크기의 사이트를 사용자에게 제공해준다면 크게 성능차이가 있나? 조립해두고 주는 거 vs 요청받고나서 조립하는거의 시간 차이는 있겠지만, 결국 보내는 데이터양의 비용은 똑같지 않나?' 라는 의문점이 들었다. 그런데 SSG의 장점이 잘 발휘되는 시점은 캐싱을 잘 해뒀을 때였다. SS..

들어가며... 회사에서 React Native를 처음 배우기 시작했다. React랑 거의 유사한 개발 경험을 제공한다고 하더니.. 생각보단 다르다! 일단 태그부터 다르다. div라던가 styled-components와 작별을 하게 됐다. (RN환경에서도 styled-component나 emotion을 사용할수는 있다고는 하나 사수님께서 말하길 모바일에서 별로 성능이 좋진 않다고 한다.) 사실 '태그'라고 부르는 것조차 조금 잘못된 느낌이다. React Native 공식문서에 보면 코어 컴포넌트라고 부른다고 한다. 리액트 네이티브에서 스타일링 하는 법 & 코어 컴포넌트의 기본 속성 리액트 네이티브는 css파일을 쓰지 않는다. 웹이 아니기 때문! 기술 면접 때 계속 말하던 DOM 파싱하고 CSSOM 파싱하고..

오늘 알게 됐는데, { [Date.now()]: { text: "" } } 처럼 Date.Now()같이 동적인 값을 객체의 key로 설정하고 싶을 때 대괄호로 묶는다. TypeScript에서 객체의 타입 지정해줄 때 { [key]: value }같은 형식으로 하는게 TypeScript 문법인 줄 알았는데 ES6 문법이었다🫢 사용 사례1. Date.now()처럼 겹칠 수 없는 id값을 동적으로 key값으로 부여할 때 const addToDo = (text: string) => { const item = { [Date.now()]: text }; setToDo({...toDo, item}); } 사용 사례2. 인덱스 같은 부분을 지속적으로 증가시켜 key로 할당할 때 const prefix = 'prop';..

클래스 컴포넌트란?클래스 컴포넌트는 React에서 사용되는 컴포넌트의 한 종류이다.이전에는 주로 클래스 컴포넌트가 주류였지만, 최근에는 함수형 컴포넌트와 훅을 이용한 상태 관리가 더욱 표준적으로 쓰인다. 클래스 컴포넌트는 render() 메서드를 포함하여 여러 생명주기 메서드를 사용할 수 있다는 특징이 있다.(임의로 메서드를 추가하는 것도 가능하다.) 함수형 컴포넌트에서는 hook로 이런 주기를 조작할 수 있으나 그 자유도는 클래스형보다 낮다. 클래스 컴포넌트의 특징- React.Component 클래스를 상속받아서(extends하여) 정의된다.- render() 메소드로 view로직을 처리함- 생명주기 메서드를 사용할 수 있음 라이프 사이클 메서드의 분류라이프사이클 메서드의 종류는 총 9가지이지만 크게..

들어가기 전 토막 상식 보통 클래스 안의 정보들은 프로퍼티가 아니라 필드라고 한다. 계속 프로퍼티라 부르고 있었는데 클래스 문법 복습하면서 다시 알게 되었다. _가 붙는 필드는 무엇인가? class Counter { constructor() { this._count = 0; // _count는 내부적으로 사용되는 프로퍼티 } increment() { this._count++; } getCount() { return this._count; } } const counter = new Counter(); counter.increment(); console.log(counter.getCount()); // 외부에서는 getCount를 통해서만 _count에 접근할 수 있음 JavaScript 클래스 문법에서 _..

*본 내용은 모던 자바스크립트 딥다이브의 class부분을 요약정리한 내용입니다. * (*텍스트)는 제가 주석을 단 부분입니다. 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입 기반 객체지향 언어다. 비록 다른 객체지향 언어와의 차이점에 대한 논쟁이 있긴 하지만 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 다음과 같이 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다. var person = (function(){ // 생성자 함수 function Person(name) { this.name = name; } // 프로토타입 메서드 Person...

프록시(Proxy)란? 클라이언트와 서버 사이에서 데이터를 전달해 주는 서버. 웹 캐시 기능이 있는 경우가 많으며, 방식에 따라 프론트의 IP주소를 숨기거나(포워드 프록시), 서버의 IP주소를 숨기거나(리버스 프록시) 할 수 있다고 한다. 공부하게 된 계기 이번 기술면접에서 CORS에러가 날 때 어떻게 해결할거냐는 질문을 받았다. 예전에 '빨리 잡아'라는 숙박 어플 만들 때 나를 고생시켰던 CORS에러.. 그 당시 백엔드 개발자가 프론트 origin을 whitelist에 추가하면서 해결했던 경험이 기억이 났다. '이를 해결하려면 클라이언트와 서버가 기본적으로 동일한 오리진이거나 아니면 허용된 오리진을 설정해야됩니다. 그러니 서버개발자에게 화이트리스트에 프론트엔드 오리진을 추가해달라고 요청할 것입니다.' ..

자바스크립트의 Set 자료구조는 한 마디로 '중복을 허용하지 않는 배열'이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 구분 배열 Set 객체 동일 값 중복 가능하다. 불가능하다. 요소 순서에 의미가 있다. (index) 있다. 없다. 인덱스로 요소에 접근 가능하다. 가능하다. 불가능하다. 아래는 Set 객체의 기본적인 사용법(생성, 추가, 삭제, 특정 인자 존재 여부 체크, 사이즈 체크 방법)들이다. Set 객체의 생성 아래와 같이 생성자의 인자로 아무 것도 넘기지 않으면 빈 세트가 만들어진다. const set = new Set(); // Set(0) {size: 0} 또한 아래와 같이 배열을 인수로 넘기면 배열에 담긴 값으로 세트가 만들어진다. const numSet = new S..

MSW란?Mock Service Worker의 준말이다.이때 Service Worker는 앱의 백그라운드에서 실행되는 브라우저가 제공하는 기능이다.브라우저와 앱의 중간에서 이벤트를 listening하고 있는 존재라고 보면 된다.(PWA나 Firebase Cloud Message같은 기능들을 구현해보려고 했던 개발자들은 사용해본 경험이 있을 것이다.) Mock이란 단어에서 알 수 있듯이, MSW는 브라우저의 백그라운드에서 비동기 api통신 호출을 가로채서 가짜 응답을 해주는 Proxy의 역할을 한다. 왜 필요한가? 백엔드에서 API를 아직 주지 않았을 때, api 명세서대로 객체를 생성하여일단 호출 받았다 치고 화면 구현해본 경험이 다들 있을 것이다.그러나 이런 방식으로 모사하는건 마크업을 확인하는 용도로..

1. 전통적 방식의 routing (WEB 1.0) 1990년, 아날로그의 책처럼 일련의 순서대로 된 것이 아닌 가상의 공간에서 텍스트에 새로운 문서에 대한 링크가 존재하는 개념의 하이퍼텍스트가 탄생하였다. 그러나 이때의 web은 읽기 전용의 공간이며 뉴스나 간단한 홍보글, 카탈로그 등을 올리는 정도의 역할만 하였다. 정보 제공자와 사용자가 완전히 분리되어 있었고, 사용자가 정보를 생성하는 것은 불가능했다. 전통적 방식의 routing link tag(Service 등)을 클릭하면 href 어트리뷰트 값인 리소스 경로가 URL의 path에 추가되어 주소창에 나타나고 해당 리소스를 서버에 요청한다. Home Service About Home This is main page 이때 서버는 html로 화면을 표..