목록2023/08 (55)
min
오늘은 자바스크립트에서 굉장히 중요한 개념인 호이스팅에 대해서 알아볼려고 한다. 정확히 말하자면 호이스팅이 어떤 개념이 이 개념이 어떻게 적용되는지에 대해서 살펴보려고 한다. 1. 호이스팅이란? 호이스팅이란 변수나 함수 선언이 자신이 속한 스코프에서 가장 최상단에 위치한다는 것을 의미한다. 이는 실제적인 코드자체가 위로 올라간다느 개념보다는 자바스크립트 해석 엔진이 코드를 판독하고 해석할 때 적용되는 기준이라고 생각하면 편하다. 2. 호이스팅의 종류란? 호이스팅은 크게 2가지로 나뉜다. 첫번째는 변수 호이스팅이다. 두번째는 함수 호이스팅이다. 3. 호이스팅의 필요성 호이스팅은 자바스크립트 엔진이 코드를 해석할 때 적용되는 기준이다. 그 만큼 자바스크립트 코드를 디버깅하거나 자바스크립트 코드를 작성할 때 ..
이번에는 상태 관리에 대해서 같이 이야기를 나눠볼려고 한다. 이야기의 주제는 다음과 같다. 첫번째 상태관리란 무엇인가? 두번째 상태관리는 왜 하는 것인가? 세번째 상태관리를 어떻게 진행하는가? 이다. 그렇다면 이 세가지 질문에 대해서 나만의 답을 해보도록 하겠다. 1. 상태관리란 무엇인가? : 상태관리를 알기 위해서는 먼저 상태에 대해서 살펴봐야 할 것 같다. 상태란 프로그래머 입장에서 봤을 때는 데이터이다. 즉 상태관리란 데이터를 관리하는 것이라고 볼 수 있다. 2. 상태관리를 하는 이유는 무엇인가? : 상태 관리를 하는 이유는 크게 2가지로 볼 수 있을 것 같다. 첫번째는 렌더링을 최적화하기 위해서 이다. 리엑트에서 렌더링이란 성능적인 측면에서 중요한 주제이다.. 두번째로는 상태의 불변성을 유지시키기..
오늘은 any와 unknown의 차이점에 대해서 알아볼려고 한다. 이 말을 들었을 때 다음과 같은 생각이 들 것이다. any는 어떤 거고 , unknonw은 어떤 것이길레 둘의 차이점을 분석하는 것일까? 이 질문에 대한 답을 얻기 위해서 먼저 any와 unknown이 무엇인지 부터 알아보도록 하겠다. 1. any와 unknown의 공통점이란? any와 unknown는 모두 어떤 값에든 할당 될 수 있는 타입이다. 이는 결국 수동적인 타입을 의미한다. 이런 any와 unknown은 수동적인 타입이다보니 정적 타입 언어인 typescript의 장점을 살리는 데 있어서는 좋지 못한 타입이다. 그렇다면 왜 이런 any와 unknown이 만들어진 것일까? 그 이유는 사실상 자바스크립트에 답이 있다. 자바스크립트의..
오늘은 atomic pattern에 대해서 작성해볼려고 한다. 내가 atomic pattern에 대해서 공부하게 된 계기는 다음과 같다. 첫번째 컴포넌트를 나누는 기준을 명확하게 알고 싶다. 사실 기능적 폴더 구조나 타입별 폴더 구조 모두 컴포넌트를 나누는 기준이 명확하지 않다. 사실상 크게 컴포넌트를 나누는 기준은 알 수 있어도 세부적으로 컴포넌트를 나누는 기준은 알 수 없다. 그래서 나는 세부적으로 컴포넌트를 나누는 기준을 알기 위해서 atomic pattern에 대해서 알아볼려고 한다. 두번째 atomic pattern은 사실상 프론트엔드 디자인 패턴에서 유명한 디자인 페턴이다. 그 이유는 명확한 폴더 구조와 명확한 컴포넌트 분리 기준 때문이다. 그래서 나는 어떤 점에서 atomic pattern이..
오늘은 오랜만에 redux에 대해서 살펴보려고 한다. 내가 TodoList를 redux로 만든 이유는 다음과 같다. redux는 안정성 측면에서 높은 평가를 받고 있다. redux의 경우 flux 패턴으로 이루어져있다. 즉 store , action , dispatch 개념을 통해서 안정성을 확보한 체로 문제를 해결할 수 있다. flux 패턴은 다음과 같다. flux 패턴 : https://minprogramming.tistory.com/entry/MVVM과-FLUX에-대하여 MVVM과 FLUX에 대하여... 오늘 나는 cs 스터디로 MVVM과 FLUX에 대해서 공부해보는 시간을 가졌다. 내가 MVVM과 FLUX에 대해서 공부한 이유는 다음과 같다. 1. 면접에 자주 나오는 질문이라서 2. MVC는 들어..
오늘은 TodoList을 Typescript로 변환하는 작업을 진행했다. 추가적으로 기능적 폴더 구조와 함께 React Js , Typescript를 통해 프로젝트를 만들었다. 그럼 여기서 이런 의문이 들었을 것이다. 왜 Typescript를 사용했는가? 그 이유에 대한 답을 얻기 전에 먼저 Typescript가 무엇인지를 Javascript와의 비교를 통해서 설명을 해보도록 하겠다. Javascript : 자바스크립트는 동적 타이핑 언어 , 즉 약한 타입의 성질을 가지고 있는 언어이다. 이와 같은 특성을 가지고 있는 언어로는 대표적으로 파이썬이 존재한다. 그렇다면 동적 타이핑 언어의 장점은 무엇일까? 동적 타이핑 언어의 장점은 코드의 생산성이 빠르다는 것이다. 우리가 예를 들어 C언어를 통해 게임을 만..
오늘은 todoList를 recoil 버전으로 만들어보았다. 그럼 여기서 드는 의문중은 다음과 같다. 왜 구지 recoil을 사용했는가? 컨텍스트 api도 있는데도 불구하고 recoil를 사용한 이유는 무엇인가? 이 질문에 대답을 하기 위해서 recoil이 context api와 구별되는 차이점에 대해서 설명하도록 하겠다. 먼저 recoil의 가장 큰 장점은 엄청 가볍다는 것이다. 이때 가볍다는 의미는 2가지로 해석할 수 있을 거 같다. 첫번째는 context api의 비해 사용방법이 간단하다. 두번째 context api나 redux의 비해 환경세팅이 간단하다는 것이다. 이 2가지 측면에서 보면 context api보다 recoil이 가지고 이는 장점이 많다는 것을 알 수 있다. 또한 전역 상태관리를 ..
이번에는 저번에 올린 게인 프로젝트의 폴더 구조를 바꿔보았다. 이번에 시도하게 된 폴더 구조는 타입별 폴더 구조가 아닌 기능적 폴더 구조이다. 그럼 여기서 이런 의문이 들 수 있다. 기능적 폴더 구조란 어떤 폴더이며 왜 사용하는지? 이 질문에 대한 답변은 다음과 같다. 먼저 기능적 폴더 주조란 말 그대로 폴더 구조를 기능적으로 나누는 것을 의미한다. 여기서 기능적으로 나눈다는 말을 이해하기 위해서 먼저 알아야할 개념들에 대해서 집고 넘어가자 . 먼저 "엔터티"라는 개념이다. 엔터티는 핵심 단어라고 생각하면 편하다. 즉 내가 만약 todolist와 관련된 프로젝트를 만들때 핵심 엔터티 즉 핵심 단어는 todo가 될 것이다. 즉 기능적 폴더 구조라는 폴더를 핵심 단어를 기준으로 todoform , todol..