My Boundary As Much As I Experienced

예전에 사용해봤던 React Snap, React Helmet의 사용법과 유사하다. 그러나 ReactSnap이나 ReactHelmet처럼 번거로운 설정들이 필요없다는 것이 장점이다. Next.js에서 Head 설정하기 우선 아래와 같이 import 시켜준다. import Head from "next/head"; 전체적으로 이름을 정해주려면 우선 _app.js파일(page router) 혹은 Document파일 등에 가서 아래와 같이 지정해준다. 메타태그 또한 같이 지정가능하다. 메타태그는 검색엔진을 검색할 때 중요한 태그가 되니 되도록이면 넣어주도록 하자. 그러나 페이지마다 다른 Head title 설정도 가능하다. Head 태그 안에다가 title / image / description, og tag ..

들어가기 앞서 Next.js는 framework로써 여러 성능 최적화 유틸 태그를 제공한다. 대표적으로 Link태그나 Image태그를 제공한다. (React에도 Link태그가 있다고? 아니다. 리액트 환경에서 사용하는 Link태그는 React-Router-Dom 라이브러리가 제공하는 태그이다.) 특히 Next.js의 Link 태그는 리액트 라우터 돔의 Link태그보다 더욱 성능 최적화가 되어있고, Image태그도 기존 img태그에 비해 많은 최적화가 되어있는 유틸 태그이다. 이번 시간은 이에 대해서 알아보도록 하자. Link 태그와 a태그와의 성능 비교 위 이미지는 예제 블로그 사이트이다. 저기서 첫 번째 글은 하이퍼링크로 되어있고 클릭하면 첫 번째 글로 이동한다. 이를 a태그와 Link태그로 각각 구현..

라우팅 Next js에서는 File system을 기반으로 라우팅이 된다. File system은 pages폴더 아래 있어야하며 src/pages/ 와 pages/ 가 있다면 후자가 우선순위. slug 파일 wild card처럼 다양한 값을 받을수 있는데, 하나의 파일로 여러 파일을 대체할 수 있다. 1. [slug] pages / category / [slug].js; // http://www.~~~~.com/category/:slug 와 같음 2. [...slug] 단 한개의 route를 커버하는게 아니라 하위 route를 모두 커버 가능하다. 나중에 useRouter의 query메소드로 가져오면 배열을 반환받을 수 있다. pages / category / [...slug].js; // http://..

도메인(Domain)이란? 도메인은 인터넷에 연결된 컴퓨터의 ip를 사람이 쉽게 기억하기 어렵기 때문에 이를 위해서 각 ip에 사람이 쉽게 기억하고 입력할 수 있도록 문자(영문, 한글 등)로 만든 인터넷 주소이다. 도메인 체계 도메인은 “.”또는 루트(root)라 불리는 도메인 이하에 아래 그림과 같이 역트리(Inverted tree)구조로 구성되어 있다. 아래와 같이 3단계로 구분된다. 1단계 : 최상위 도메인(TLD, Top-Level Domain) 도메인 레벨 중에 가장 높은 단계에 있는 도메인이다. 7 개의 일반도메인(com, net, org, edu,, gov, mil, int)과 + 190여개의 국가 도메인(kr, de, jp..)으로 구성되어 있다. 1단계 도메인은 도메인의 목적, 종류, 국..

요새 넥스트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';..

https://school.programmers.co.kr/learn/courses/30/lessons/42577 오랜만에 프로그래머스로 복귀했다. 레벨2 남은거 다 풀고 레벨3 풀기 시작해야겠다. 문제 수준: 레벨2 문제 요약: 전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 합니다. 전화번호가 다음과 같을 경우, 구조대 전화번호는 영석이의 전화번호의 접두사입니다. 구조대 : 119 박준영 : 97 674 223 지영석 : 11 9552 4421 전화번호부에 적힌 전화번호를 담은 배열 phone_book 이 solution 함수의 매개변수로 주어질 때, 어떤 번호가 다른 번호의 접두어인 경우가 있으면 false를 그렇지 않으면 true를 return 하도록 sol..

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

앞서, 트리구조란? 이전 포스팅에서 본대로 트리구조는 아래와 같이 자바스크립트로 심플하게 구현할 수 있다. 그러나 아래 구조에서는 한 Node에 3개 이상의 자식노드도 제한없이 추가할 수 있다. class Tree { constructor(value) { this.root = new Node(value); } } class Node { children = []; constructor(value) { this.value = value; } push(value) { this.children.push(new Node(value)); } } 그러므로 이진탐색에 쓰이기 위한 트리구조는 좀 더 제약이 필요한데, 실제 구현은 다음 포스팅 때 하겠다. 그전에 일단 이진트리가 무엇인지에 대해 정확히 알아보도록 하자. 이..