Programming39 프론트엔드 아키텍처란? * 회사 기술블로그에 직접 작성한 내용을 발췌. 만약 개발을 할 때 어떤 규칙을 세우지 않고 코드를 짜게 되면 후에 그 코드의 양이 늘어나게 될 경우 불편함이 생기고 정리가 안되는 시점이 생기게 됩니다. 이러한 점을 방지하기 위해 처음부터 특정한 규칙을 만들어 개발을 하게 된다면 이것이 반복이 되어 특정한 패턴이 만들어지고 이러한 패턴을 모두가 이해하고 따를 수 있도록 하는 구조를 아키텍처라고 합니다. 소프트웨어 관점에서 지속적으로 관리가 잘 되는 코드를 위해선 좋은 아키텍처가 필요하며 웹에서도 좋은 아키텍처의 모습이 지속적으로 진화하고 있습니다. 모든 패턴과 아키텍처에 대해서 설명드릴 순 없고 어떤 아키텍처가 있는지에 대해서와 이 아키텍처의 개념에 대해서만 간단하게 설명드릴 예정이지만 각각의 아키.. 2023. 12. 20. [Nodejs] 간단한 api 구현해보기 1. express-generator 설치 1~5 과정은 command 또는 PowerShell에서 작업한다. Express Application Generator Tool : 사용자가 손쉽게 프로젝트를 생성할 수 있도록 도와주는 웹 애플리케이션 프레임워크 npm install -g express-generator 2. 프로젝트 생성 express 프로젝트이름 express demo 3. 모듈 설치 프로젝트 경로 이동 cd 프로젝트 이름 cd nodejs-api npm 설치 npm install 4. 서버 실행 npm start 5. 테스트 및 확인 port 3000 접근 express를 통해 프로젝트를 생성하면 아래와 같은 구성이 생성된다. bin/www 웹 서버 구축에 관한 파일, 포트번호 등 nod.. 2023. 8. 21. [Nodejs] 스터디 내용 정리 1장 노드 시작하기 1.1 핵심 개념 이해 Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임입니다. Node.js는 이벤트 기반, 논블로킹 I/O모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생태계이기도 합니다. Javascript Runtime 이벤트 기반 논블로킹 I/O 모델 (추가적) 싱글쓰레드 1. 자바스크립트 런타임 V8 : C++로 작성된 구글의 고성능 자바스크립트 및 웹어셈블리 엔진이다.(출처 : V8 공식홈페이지) 런타임(Runtime) : 컴퓨터 과학에서 컴퓨터 프로그램이 실행되고 있는 동안의 동작을 말한다.(출처 : 위키백과) Node js = V8 + libuv libuv : C, C++로 .. 2023. 8. 21. Docker 파일 분석 회사에서 도커로 이미지를 빌드하고 그 이미지를 도커허브에 올린 후 누구나(권한을 부여할시) 도커허브에 올린 이미지를 통해 k8s 에서 실행시킬 수 있도록 작업하기를 원해서 관련 내용 공부를 하며 작업을 진행했었다. 처음엔 막막하고 어려웠는데 공부도 하고 찾아가면서 작업을 진행하다보니 예상치 못하게 재밌었고 나중에 많은 도움이 될 거 같아 공부 했던 내용을 다시 상기하고 기록하고 싶어서 포스팅을 하려고 한다. Docker 파일 # build stage FROM node:14-alpine as build-stage # ARG ENV WORKDIR /app COPY package*.json ./ # COPY yarn.lock ./ RUN yarn install COPY . . RUN yarn run build.. 2023. 3. 27. [React] React.memo() 참고문서 https://dmitripavlutin.com/use-react-memo-wisely 유튜브를 보거나 보고싶은 페이지 또는 어플이 있어서 다운로드를 받고 켰는데 UI 반응이 느리다면? 정말 이 페이지가 아니면 난 죽을꺼같다 정도가 아니면 창을 닫고 나간 경험이 한번 쯤은 있을거다. 인터넷 속도만 해도 예민한사람들은 10ms 차이에도 엄청난 차이를 느낀다. 이러한 반응속도를 줄이기 위해 React는 자체적으로 React.memo() 를 제공한다. 렌더링 결과를 메모이징(Memoizing) 함으로써 불필요한 리렌더링을 줄이는 것이다. React는 먼저 컴퍼넌트를 렌더링(rendering) 한 뒤, 이전 렌더된 결과와 비교하여 DOM 업데이트를 결정한다. 만약 렌더 결과가 이전과 다르다면, Reac.. 2022. 5. 10. [React] Redux 란 리덕스는 사용률이 가장 높은 상태관리 라이브러리다. 리덕스를 사용하면 컴포넌트의 상태 관련 로직들을 다른 파일들로 분리 시켜서 효율적으로 관리 할 수가 있다. 또한 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다. Redux의 3가지 원칙 1. Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미다. 2. State is read-only 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다. 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다. 3. Changes are made with pure functions 변경은 순수함수로만 가.. 2022. 4. 6. 이전 1 2 3 4 5 ··· 7 다음
