소소한 코딩일지

이벤트 루프는 싱글 스레드인 JS 엔진에 동시성을 부여하기 위한 특성이다. 이벤트 루프에 대해서 좀 더 자세하게 정리해보자 먼저 첫 문장에서 나온 말에서 4가지 단어에 대해서 이해하면 좋을 것 같다. JS 엔진 싱글 스레드 동시성 이벤트 루프 JS 엔진 자바스크립트 엔진은 대표적으로 구글 크롬 브라우저의 V8 엔진이 있습니다. JS 엔진의 내부에는 메모리 힙(Memory Heap), 콜 스택 (Call Stack)이라는 구성요소가 존재하고 하는 일은 다음과 같습니다. Memory Heap: 메모리 할당이 발생 Call Stack: 실행 콘텍스트에 따라 호출 스택이 쌓이는 공간 싱글 스레드(Single Thread) 자바 스크립트는 싱글 쓰레드 언어이다. 싱글 스레드라는 것은 호출 스택이 하나라는 뜻이고 ..

DOM을 수정하는 것은 리소스가 많이 필요하다. DOM 수정에 따른 성능 저하를 방지하기 위해 DOM을 최소한으로 수정해했고, 그래서 나온 개념이 VIrtual DOM이다. Virtual DOM은 React에서 나온 실제 DOM과 구조가 비슷한 React의 객체 트리이다. DOM을 직접 수정하지 않고 Virtual DOM을 조작하면 React가 변화된 부분을 적절하게 DOM에 적용시킨다. Virtual DOM을 사용함으로써 실제 DOM을 조작할 필요가 없어졌다. 웹의 복잡성이 더욱 높아지면서, DOM을 직접 관리하는 것이 복잡하고, 실수의 가능성이 존재했는데, 이러한 부분을 virtual DOM을 통해 자동화하고, 추상화해줌으로써 해소할 수 있다. Virtual DOM은 실제 DOM 변화를 최소화시켜주는..

SPA란? SPA(Single Page Application)는 단일 페이지로 구성된 웹 애플리케이션을 말한다. 정적인 파일을 먼저 다운로드하고, 이후 사용자의 조작에 따라 필요한 데이터만 서버에서 비 동직적으로 받아오면서 동작한다. 그래서 트래픽의 총량을 줄일 수 있고, 애플리케이션의 형태나 웹 사용성(UX)에서 이점을 가진다. SPA의 장점 1. 새로운 페이지를 요청하게 되면 필요한 부분만 재랜더링되기 때문에 전체적 트래픽 감소와 더불어 랜더링에서 좋은 효율을 보인다. 2. 새로운 부분만 재랜더링 되기 때문에 사용자 입장에서도 매우 자연스러운 화면 전환을 경험할 수 있다. 3. 컴포넌트 별로 개발할 수 있다. SPA의 단점 1. 필요한 리소스를 초기에 다운로드 받기 때문에 초반 로드 속도가 느리다. ..

웹 팩을 공부하면서 babel이라는 tranpiler에 대해서도 자연스럽게 알게 되었습니다. tranpiler와 compiler 가 이름도 비슷하고 하는 일도 어느 정도 유사해서 두 가지 차이점을 정리해보려고 합니다. Compiler 컴파일러의 경우 한 언어로 작성된 소스코드를 다른 코드로 변환시키는 것을 말합니다. ex) Java -> bytecode, C -> assembly 언어 Transpiler 트랜스 파일러의 경우 한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 말합니다. ex) ES6 -> ES5, C++ -> C Compiler와 Transpiler 모두 소스 코드를 변환시키지만 Compiler의 종류 중에 Transpiler라는 비슷한 수준으로 언어를 ..

프로젝트를 하면서 웹팩을 본 적은 있지만 실제 내가 핸들링해본 적이 없다. 웹팩이라는 bundler에 대해 공부를 하면서 이번 기회에 webpack을 가지고 직접 build 가능한 프로젝트를 한번 생성해보고, 그 과정을 정리해보기 위해서 글을 쓴다. 기본 세팅 mkdir webpack-demo //실습 폴더 생성 cd webpack-demo npm init -y //package.json 생성 npm install webpack webpack-cli --save -dev // 웹팩 라이브러리 설치 npm lodash //lodash 라이브러리 설치 위 명령어로 실습 폴더와 라이브러리를 세팅한다. 그러면 다음과 같은 폴더 구성으로 세팅이 완료된다. 다음으로 루트 경로에 index.html과 src/inde..

Repository Pattern이라는 개념을 처음 접하게 되어서 그 개념을 정리해보고 사용해본 것을 기록으로 남기려고 한다. 1. Repository Pattern이란? 프로그램을 개발하면서 비즈니스 로직을 작성하게 되고, 이 비즈니스 로직은 데이터베이스와 웹 서비스의 데이터 저장소에 접근하는 일이 굉장히 많을 것이다. 여기서 여러 문제들( 중복되는 코드, 로직 에러, 오타 등... )이 발생하게 된다. 이러한 문제들을 해결하는 방법으로 1) 비즈니스 로직에서 데이터 레이어를 분리, 2) 한 곳에서 데이터를 처리해주어 일관성 있는 데이터를 전달해주는 것 이다. Repository Pattern은 이 두 가지를 반영하기 위해 나온 디자인 패턴이다. Repository Pattern은 비즈니스 로직과 데이..

비즈니스 로직이라는 말을 자료를 찾아보면서 어느 정도 많이 접하게 되는 단어인데 생소하게 느껴져서 짚어보고 넘어가 보려고 한다. 비즈니스 로직이란 개발자의 입장에서 사용자가 하나의 기능을 사용할때, 개발자가 구현해야 하는 내부 동작들을 말한다. 예를 들어 쇼핌몰 페이지의 상품 리스트를 보여주는 화면의 프로세스를 따라가 보면 비즈니스 로직은 대략 상품 리스트가 있는 데이터베이스 연결 --> 데이터 베이스의 상품 리스트를 데이터화 하여 불러오기 --> 데이터 베이스 연결 끊기 --> View 영역에 불러온 데이터를 전달 --> 데이터를 사용하여 화면 구현 이 될 수 있을 것 같다. 비즈니스 로직은 쉽게 개발자 코딩하는 과정이라고 보면 될 것 같다고 생각했다. 그래서 유저의 행위를 컴퓨터로 잘 전달하기 위해서..

어제 API에 대해서 정리했다. API 개발이나 학부생 연구원으로 일할 때 API라는 것을 꽤 자주 접하게 되었다. 처음 API라는 것을 쓸때, API가 뭔지도 모르고 그냥 가이드라인에 따라서 사용했었다. 늦게나마 API에 대한 개념을 확실 u-pic-code.tistory.com API는 서로 다른 응용 프로그램의 데이터와 서비스에 연결하는 소프트웨어 및 매개체이다. API의 구조에 대해 이야기할 때, 가장 대표적인 방식이 SOAP 방식과 REST 방식이다. 가장 큰 차이는 SOAP는 프로토콜이고, REST는 아키텍처라는 점이다. 그렇기 때문에 두 방식은 구성, 기능, 사용되는 상황이 서로 다르다. REST API REST(Representation State Transfer)는 네트워크를 통해 컴퓨터..

개발이나 학부생 연구원으로 일할 때 API라는 것을 꽤 자주 접하게 되었다. 처음 API라는 것을 쓸때, API가 뭔지도 모르고 그냥 가이드라인에 따라서 사용했었다. 늦게나마 API에 대한 개념을 확실하게 잡고 넘어가고 싶어 정리하게 되었다. API(Application Programming Interfaces)는 어플리케이션 소프트웨어 및 서비스를 통합하는 툴, 정의, 프로토콜의 세트. 제품과 서비스가 서로 커뮤니케이션할 수 있도록 도와주는 기능을 제공 한 프로램에서 다른 프로그램으로 데이터를 주고바는 방법 이라고 정의할 수 있다. API 역할 서버와 데이터베이스에 대한 출입구 역할 API는 서버와 데이터 베이스에 대한 출/입을 관리하며, 허용된 사람들에게 접근성을 부여한다. 애플리케이션과 기기가 원할..

Vue를 공부하면서 Vue와 React의 차이를 공부했었다. Vue는 웹 프레임워크이고 React는 라이브러리라는 점이 달랐다. 프레임워크와 라이브러리라는 것에 대해 정확하게 알고 넘어간 적이 없는 것 같아서 짧게 정리 해놓으려 한다. 1. 프레임워크(FrameWork) 프레임(Frame)이라고 하면 철제 틀 같이 기본 형태를 잡아주는 것이라는 생각이 들고, 워크(Work)라는 것은 작업, 일이라는 뜻이니까 기본적인 틀을 가지고 하는 작업 정도가 아닐까하는 생각을 했었다. 프레임워크는 앱 개발시에 필수적으로 있어야하는 코드, 알고리즘, 데이터베이스 등 최소한의 뼈대를 제공하는 것이다. 그러면 이제 개발자는 그 뼈대를 가지고 필요한 기능들을 구현하는 것이다. 2. 라이브러리(Library) 라이브러리는 프..