리엑트의 가장 중요한 특징이라고 하면 불변성일 것이다. 아래의 궁금증을 가지며 글을 작성해본다.리엑트는 왜 불변성을 가질까?불변성을 지켜 어떤 이점을 가져갈 수 있고, 그에 따른 단점이 무엇일까?불변성 불변성은 메모리에 있는 값을 변경할 수 없는 것을 말한다.하지만 우리는 변수의 값을 곧 잘 변경했었다. 편의상 변경이라고는 하지만 내부적으로는 변하지 않는다.변수는 기존 값을 참조하고, 변수의 값을 변경시 새로운 값이 생성되고 변수는 새로 생성된 값을 참조하게 된다. 아무런 참조가 없는 값은 가비지 콜렉터가 처리하게 된다.  원시 데이터(string, number, boolean, null, undefined, Symbol) : 불변성이 있다. 원시 데이터는 수정시, 메모리에 저장된 값..

학습할때 과거, 역사를 아는 것은 굉장히 중요하다. 역사를 모른다면 왜 현재의 Javascript 를 사용하게 되었는지 알 수 없다. Javascript 가 왜 이렇게 발전했고 변화했는지 알아보고자 한다. Javascript 의 등장 (1995~1997) 1990 년대 초중반은 인터넷의 중요한 시기였다. 넷스케이프와 마이크로소프트와 같은 큰 기업들은 브라우저 전쟁을 벌이고 있었다. 이때 사용자들은 동적이고 상호작용적인 웹 페이지를 원하게 되었다. 1995 년에 브랜던 아이크가 브라우저에서 사용할 수 있는 정말 간단한 스크립트 언어를 개발했다. 원래 이름은 mocha 였지만 이를 넷스케이프 커뮤니케이션즈에서 LiveScript 로 릴리즈했고, 1997년 넷스케이프 2.0 에서 Javascript 로 이름이..

인증 및 인가를 할 때 선택지는 쿠키, 세션, 토큰 정도가 있다. 주로 토큰방식을 사용하며 JWT 를 사용한다. 왜 토큰을 사용할까? 토큰이 정말 안전할까? 등 나의 생각을 정리해보려고 한다. JWT 는 어떻게 구성이 되어 있을까? 점(.)을 기준으로 헤더.페이로드.시그니쳐 로 구분된다. 헤더에는 토큰의 유형 + 해싱 알고리즘이 들어있다. 페이로드는 토큰에서 사용할 정보(클레임)이 들어있다. 이 클레임은 json 객체이다. 클레임은 토큰 정보를 표현하기 위해 정해진 종류의 데이터이다. 물론 사용자가 정의해 비공개 클레임을 만들 수도 있다. 시그니쳐는 토큰을 검증하기 위한 것들이 들어간다. 헤더와 페이로드를 base64로 인코딩한 후 비밀키를 이용해 헤더에서 정의한 알고리즘으로 해싱해 다시 base64 로..

UUID 는 네트워크 상에서 고유성이 보장되는 ID 를 만들기 위한 표준 규약이다. 왜 UUID 를 ID 로 사용할까? ID 를 넣을때 auto increment 를 사용해 자동으로 숫자가 올라가는 방식으로 사용하는 경우가 있다. ex) 1, 2, 3, 4 이렇게하더라도 노출이 안되는 부분들도 있겠지만, 예를들어 상세조회나 업데이트, 삭제하기 등을 사용할때 파라미터에 ID 를 넣어 주고받는다. 이때 ID 숫자가 노출되는데 이는 유추할수 있어 보안상의 위험을 초래한다. UUID 에는 여러가지 버전이 있는데 그 중에서 많이 사용하는 1, 4 버전에 대해 알아본다. UUID v1 UUID 는 공통적으로 128비트의 숫자이며, 32자리의 16진수로 표현된다. 8-4-4-4-12 글자마다 하이픈을 집어넣어 5개의..

데이터 바인딩은 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것을 말한다. 즉 사용자 인터페이스와 데이터 모델간의 동기화이다. 이에 두가지 주요 방법이 존재한다. 1. 단방향 데이터 바인딩 단방향 데이터 바인딩에서는 데이터가 한 방향으로만 흐른다. 즉 모델에서 뷰로의 데이터 흐름만 존재하고, 뷰에서 모델로의 직접적인 업데이트는 발생하지 않는다. 사용자 인터페이스는 데이터 모델의 상태를 읽기 전용으로 표시하는데 이는 데이터 모델의 변경이 뷰를 갱신할 수 있지만 뷰의 변경이 직접적으로 모델을 갱신하지 않는다. 대표적인 프레임워크는 React 이다. 쉽게말해 HTML 에 바인딩한 데이터를 JS 에서 수정할 경우 화면에는 반영되지만, 화면에서 직접 해당 엘리먼트의 값을 바꿨을때 JS 의 데..

개발자는 항상 적절하며 근거있는 선택을 해야한다. 프론트의 프레임워크는 크게 Angular, React, Vue 가 있다. 현재 대부분의 학원들은 프론트엔드는 React 로 가르치고 있다. 이 글은 왜 리엑트를 사용해야하는가 에 대한 궁금증으로 작성한다. 각 프레임워크는 구성 요소 기반이고 UI 기능을 빠르게 생성할 수 있다. 그러나 모두 구조와 아키텍처가 다르다. 1. Angular Angular 는 TS 를 기반으로 하는 프레임워크이다. 평소 좋아하는 백엔드 프레임워크인 Nest.js 가 Angular 에 영감을 받아 만들어졌다. 이는 MVC(Model-View-Controller) 프레임워크이다. 각 Angular 애플리케이션에는 적어도 하나의 루트 구성 요소와 하나의 루트 모듈이 존재한다. Ang..