티스토리

개발자 단민

검색하기

블로그 홈

개발자 단민

danminblog.tistory.com/m

프론트엔드 개발자 이정민입니다.

구독자: 73

방명록 방문하기

주요 글 목록

바닐라JS(TS)로 리액트 SPA 구현하기 | (6) JSX 구현해보기 1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 JSX란? React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 마크업과 로직을 모두 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. JSX도 결국엔 표현식입니다. 컴파일이 끝나면, JSX는 JavaScript 객체로 인식됩니다. 이전 글에서, 우리는 마크업과 해당 엘리먼트 내의 로직을 따로 분리하여 코드를 작성했었습니다. JSX를 구현하여 이를 함께 포함할 수 있도록 해봅시다! JSX를 구현한 후, 우리는 컴포넌트 내 렌더함수에서 다음과 같은 형태로 컴포넌트를 작성하게.. 공감수 0 댓글수 5 2022. 5. 30.
바닐라JS(TS)로 리액트 SPA 구현하기 | (5) 간단한 웹 구현해보기 1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 컴포넌트와 라우터가 만들어졌으니, 한번 애플리케이션을 띄워봅시다! src/index.ts import { initRouter, Route } from "./core/BrowserRouter"; // 또는 HashRouter import Main from "./pages/Main"; import Component from "@/core/Component"; import "./scss/index.scss"; import Sub from "./pages/Sub"; const routes: Route[] = [ { path: "/", .. 공감수 2 댓글수 0 2022. 5. 18.
바닐라JS(TS)로 리액트 SPA 구현하기 | (4) 클래스로 BrowserRouter 구현 1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 이번 글에서는 BrowserRouter를 구현해보도록 하겠습니다! 1. Route 타입 정의 export type Route = { path: string; page: typeof Component; }; 이는 HashRouter와 동일합니다. 2. Router 구조 class Router { $app: HTMLElement; routes: { [key: string]: typeof Component; } = {}; fallback: string = "/"; constructor() {} // 생성자 initEvent() {} .. 공감수 2 댓글수 0 2022. 5. 14.
바닐라JS(TS)로 리액트 SPA 구현하기 | (3) 클래스로 HashRouter 구현 1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 라우터를 구현하는 대표적인 방법에는 두 가지가 있습니다. 바로 BrowserRouter와 HashRouter인데요, 이 둘의 차이에 대해 잘 모르신다면 아래의 글을 먼저 읽어주세요 :) [BrowserRouter와 HashRouter, 뭐가 다를까? (feat. React Router)] HashRouter와 BrowserRouter를 모두 구현해 볼 텐데요, 이번 글에서는 HashRouter에 대해 먼저 다루어보도록 하겠습니다. 1. Route 타입 정의 export type Route = { path: string; page.. 공감수 2 댓글수 0 2022. 5. 14.
BrowserRouter와 HashRouter, 뭐가 다를까? (feat. React Router) CRA로 리액트 프로젝트를 생성하면, 기본적으로 react-router-dom을 사용하게 됩니다. 이 react-router-dom은 두 가지 라우터를 제공합니다. 바로 BrowserRouter와 HashRouter죠. 이 두 개념은 react-router-dom에만 해당되는 이야기는 아닙니다. BrowserRouter는 HTML5의 history API를 사용한 방식이고, HashRouter는 URL의 hash를 사용한 방식입니다. 리액트를 사용하지 않고 직접 라우터를 직접 구현한다 하더라도, 우리는 이 방식 중 하나를 선택할 수 있습니다. react-router 우선은 리액트 라우터에 대해 잠깐 살펴봅시다. SPA가 등장하기 전에는 어떻게 페이지를 이동시켰을까요? 를 사용해서 직접 url을 변경시켰습.. 공감수 2 댓글수 0 2022. 5. 14.
바닐라JS(TS)로 리액트 SPA 구현하기 | (2) 클래스로 컴포넌트 구현 1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 리액트 컴포넌트와 유사한 구조를 class로 만들어 봅시다! 1. Component 구조 export interface PropsType {} export interface StateType {} export default class Component { target: Element; props: P; state: S; constructor() {} // 생성자 setup() {} // 기본적인 선언 및 할당 template() { // element 반환 return "" } render() {} mount() {} updat.. 공감수 3 댓글수 3 2022. 4. 12.
바닐라JS(TS)로 리액트 SPA 구현하기 | (1) 기본 세팅 1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 별도의 SPA 라이브러리 없이 Single page application을 만들어봅시다! 언어는 타입스크립트, 번들러는 웹팩을 사용하도록 하겠습니다. html과 css 웹팩 플러그인도 함께 설치하고, 바벨 트랜스파일러도 설치합시다. 저는 sass를 사용하기 위한 추가적인 설치를 함께 해주었습니다. devDependencies @babel/cli @babel/core @babel/preset-env @babel/preset-typescript babel-loader css-loader html-loader html-webpack-.. 공감수 3 댓글수 0 2022. 4. 10.
SPA의 가상돔(virtual DOM)이란? 리액트의 휴리스틱 디핑 알고리즘 DOM이란? DOM(Document Object Model)이란, 웹 페이지를 이루는 태그들을 브라우저가 트리 구조로 만든 객체 모델입니다. HTML과 자바스크립트를 이어주는 역할로 볼 수 있습니다. 자바스크립트로는 Document라는 전역 객체를 통해 HTML 태그들을 조종할 수 있습니다. 기존의 웹 애플리케이션은 자바스크립트로 직접 DOM을 제어했습니다. 이렇게 돔을 직접 제어하는 방식이 아닌, 리얼 돔을 추상화한 자바스크립트 객체를 구성하여 사용하는 방식이 가상 돔의 개념입니다. SPA의 등장 전통적인 웹 사이트는 인터렉션이 발생할 때마다 완전히 새로운 페이지를 서버에서 전송해 주었습니다. 그러나 점차 웹 사이트가 고도화됨에 따라 한 페이지에 해당하는 페이지 용량이 커져갔고, 매번 새로운 페이지를 .. 공감수 0 댓글수 2 2022. 3. 28.
브라우저 렌더링 과정 및 사이드 이펙트 살펴보기 렌더링이란? HTML, CSS, JS 문서가 브라우저에 출력되는 과정을 말합니다. 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있는데, 크롬은 블링크(Blink), 사파리는 웹킷(Webkit), 파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용합니다. 렌더링 순서는 다음과 같습니다. HTML 파일과 CSS 파일을 파싱해서 각각 Dom Tree와 CSSOM Tree를 만든다. (Parsing) 두 Tree를 결합하여 Render Tree를 만든다. (Style) Render Tree에서 각 노드의 위치와 크기를 계산한다. (Layout) 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만든다. (Paint) 레이어를 합성하여 실제 화면에 나타낸다. (Composite) Par.. 공감수 0 댓글수 0 2022. 3. 28.
모던 웹 브라우저 - 크롬 브라우저 뜯어보기 구글 디벨로퍼 사이트의 글을 참고하여 작성된 글입니다 :) 브라우저가 동작하는 환경을 이해하기 위해서는 CPU, GPU, 메모리, 프로세스에 대한 이해가 있어야 합니다. 컴퓨터나 스마트폰에서 어플리케이션을 시작하면 운영체제의 메커니즘에 따라 CPU와 GPU가 앱을 실행합니다. 앱을 실행하면 프로세스가 생성되고, 프로그램은 해당 작업을 위해 스레드를 생성할 수도 있습니다. OS는 프로세스에 메모리 한 조각을 줘서 앱의 모든 상태 정보를 고유 메모리 공간에 저장할 수 있게 합니다. 앱을 종료하면 프로세스도 사라지고 OS가 메모리를 해제합니다. 프로세스는 다른 프로세스를 돌려서 별도의 작업을 수행하도록 OS에 요청할 수 있습니다. 두 프로세스 간 통신이 필요하다면 IPC(Inter Process Communi.. 공감수 0 댓글수 0 2022. 3. 24.
Typescript에서 undefined 값 다루기 Typescript로 개발할 때, undefined나 null이 예상되는 값일 경우 접근하거나 대입할 때 컴파일 에러를 마주칠 수 있습니다. ~ is possibly 'undefined'. 또는 Type 'undefined' is not assigniable to type ~ . 와 같은 메세지를 종종 마주할 수 있는데요, 5가지의 방법으로 이 상황을 다룰 수 있습니다. const setValue = (value: number) => value; const handleValue = (value?: number) => { setValue(value); }; 와 같은 코드가 있다고 해봅시다. number 타입의 인자만을 받아야 하는 함수에 number|undefined 타입을 넣으려고 하니 당연히 컴파일 에.. 공감수 1 댓글수 0 2022. 3. 24.
호이스팅? TDZ? var과 let/const? 확실하게 짚기 호이스팅이란? 코드에 선언된 변수 및 함수가 코드 상단으로 끌어올려지는 것처럼 동작하는 것을 말합니다. 이는 자바스크립트 파서가 내부적으로 끌어올려서 처리하는 것으로, 실제 메모리에서는 변화가 없습니다. 이러한 호이스팅이 발생하는 이유는 자바스크립트 해석기의 동작 방식 때문입니다. 자바스크립트 코드가 실행되면 파싱을 하게 되는데, 이때 코드를 해석해 전역 컨텍스트에 전역 변수 및 함수를 등록하려하기 때문에 끌어올려지는 듯한 현상이 발생하게 됩니다. 변수 호이스팅 console.log(name); // undefined var name = 'danmin'; 코드 상으로 보기에는 name 변수의 생성과 초기화가 console.log 이후에 이루어졌으니 에러가 발생할 것 같아 보이지만, undefined로 출.. 공감수 0 댓글수 0 2022. 3. 6.
요즘 핫한 SSR 프레임워크, Remix 사용해보기 https://remix.run/ Remix - Build Better Websites Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff. remix.run 위의 리믹스 공식 사이트를 둘러봅시다! 세상에.. 공식 사이트가 이렇게 힙할 수 있나요...? 첫인상부터 매우 강렬하게 다가왔습니다. 이번 프로젝트에 Remix를 도입해봐야겠다고 다짐하게 된 이유는 바로 Nested Rout.. 공감수 1 댓글수 0 2022. 3. 6.
Next.js에서 redux toolkit 세팅하기 CSR에서 세팅하는 거랑 뭐가 다른데? Next.js는 서버 사이드에서 렌더링이 이루어집니다(SSR). 그래서 일반적인 CSR 환경에서 리덕스를 사용할 때와 달리 추가적인 작업이 필요합니다. 1. 서버 사이드에서 생성되는 리덕스 store와 이후 클라이언트 사이드에서 생성되는 리덕스 store는 다릅니다. 따라서 이 둘을 합쳐주는 로직이 필요합니다. 서버에서 생성한 store의 상태를 HYDRATE 라는 액션을 통해 client에 합쳐주는 리듀서를 작성해봅시다. action.payload에는 서버에서 생성한 store의 상태가 담겨있어 이 둘을 합쳐 새로운 client 측 store의 상태를 만들게 됩니다. // store/index.tsx import { combineReducers, } from "@.. 공감수 0 댓글수 0 2022. 3. 6.
맥북 마이그레이션이 필요 없을 정도로 간단한 "맥북 + 개발 환경 세팅" | iterm2 + ohmyzsh 테마 설정 (m1 기준) 1. 기본 맥북 세팅 세 손가락 드래그 애플리케이션 창을 움직여 이동시키거나, 문서 내 글을 드래그할 때 클릭으로 하면 불편함이 많죠. 이걸 굳이 클릭해서 끌지 않아도, 간편하게 터치 & 드래그로 할 수 있는 방법이 있습니다. 으로 들어가면 드래그 활성화를 할 수 있습니다. 저는 세 손가락으로 드래그 활성화를 하고, 페이지를 쓸어 넘기거나 Mission Control을 사용할 경우 네 손가락을 씁니다! 앱 expose 로 들어가면 앱 Expose를 켤 수 있습니다. 현재 포커스 된 탭과 동일한 애플리케이션 내의 탭들만 노출시키는 기능으로, 비활성화해놓으면 은근 불편하더라고요ㅎㅎ 2. 설치할 앱 이건 지극히 프론트를 하는 제 주관적인 의견입니다 :) 1. 필수적인 앱 크롬, 카카오톡, 노션, vsc, zo.. 공감수 5 댓글수 1 2022. 3. 5.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.