전체 글
-
깊이 우선 탐색(DFS, Depth First Search)알고리즘 2023. 10. 29. 11:43
깊이 우선 탐색? 목표한 노드를 찾기 위해 가장 우선 순위가 높은 노드의 자식으로 깊이 들어갔다가 목표 노드가 존재하지 않으면 처음 방문한 노드와 연결된 다른 노드부터 그 자식 노드로 파고드는 검색 방법 * 모든 노드를 방문하고자 하는 경우에 이 방법을 선택 * BFS보다 좀 더 간단하지만, 단순 검색 속도 자체는 느리다. 구현 방법 스택을 사용한다. 문제 다음과 같이 리스트 형태로 노드들의 연결 관계가 주어진다고 할 때 깊이 우선 탐색으로 이 노드들을 탐색했을 때의 순서를 공백으로 구분하여 출력하세요. graph = {'E': ['D', 'A'], 'F': ['D'], 'A': ['E', 'C', 'B'], 'B': ['A'], 'C': ['A'], 'D': ['E','F']} 사진 도식화 문제풀이 현..
-
Webpack4 패키지 최적화프론트엔드 최적화 2023. 10. 16. 21:54
Webpack 마이그레이션을 진행하면서, 사이드 이펙트를 발생시키지 않고 소스 코드의 구조 변경을 최소화하는 최적화에 대해서 고민을 하며, 어떤 최적화를 할 수 있을까 하다 '패키지 최적화'를 진행하기로 선택하였다. 번들링의 방식과 구조를 변경하면서 사이즈를 축소시키고, 웹 페이지 리소스 로딩 속도 개선을 충분히 할 수 있었기 때문이다. 사실, 렌더링 최적화와 로직 최적화는 기존 레거시 구조에서 변경시키는데 상당히 많은 변화를 발생시키기 때문에 선택할 여지가 없었기도 한다. 번들링 사이즈 측정은 webpack-bundle-analyze로 하였고, Chrome의 Network 기능과 Lighthouse를 통하여 측정하였다. 측정결과 [webpack-bundle-analzye] Parsed Size: 10...
-
Gulp + Webpack 3를 Webpack 4로 마이그레이션 해보자프론트엔드 최적화 2023. 10. 14. 16:16
기존 구조를 변경하게 된 이유 기존 빌드 시스템은 gulp를 통하여 자동화 task로 자바스크립트 파일을 제외한 정적 자산 파일(html, css, svg, png, jpg font 등)를 생성하며 특히, image sprite를 통하여 여러 장의 이미지를 한 장의 이미지를 생성하는 등의 작업을 한 후에 build하고, webpack을 통하여 자바스크립트 파일을 빌드하는 시스템이었다. gulp는 유닛 테스트, 최적화 등 반복 가능한 작업들을 자동화하는 빌드 시스템이다. pipe를 통하여 동시에 여러 task를 수행하고, 스트림 기반이기 때문에 node.js의 강점을 잘 살려, 실제 빌드 및 작업 속도가 webpack보다 빠른 것으로 알려져 있다. webpack은 모든 모듈(html, css, js, 등 ..
-
프로토타입 체이닝Javascript 2023. 6. 26. 22:33
프로토타입의 두 가지 의미 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원한다. 자바스크립트가 어떻게 OOP 기능을 제공할까? 이에 앞서 자바스크립트 OOP 상속에 근간이 되는 프로토타입과 프로토타입 체이닝의 기본 개념을 설명한다. 자바스크립트는 자바와 같은 객체지향 프로그래밍에서처럼 "클래스" 개념이 없다. 대신에 객체 리터럴 또는 생성자 함수로 객체를 생성한다. 이렇게 생성된 객체의 부모 객체가 바로 "프로토타입" 객체다. 즉, 상속 개념과 마찬가지로 자식 객체는 부모 객체가 가진 프로퍼티 접근이나 메서드를 상속받아 호출하는 것이 가능하다. 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체를 가리키는 참조 링크 형태의 숨겨진 프로퍼티가 있다. ECMAScript에서는 이러한 링크를 ..
-
참조 타입과 비교 그리고 함수 호출방식 이해하기Javascript 2023. 6. 26. 21:22
참조 타입의 특성 자바스크립트에서는 기본 타입인 숫자, 문자열, boolean, null, undefined 5가지를 제외한 모든 값은 객체이다. 이러한 객체는 자바스크립트에서 참조 타입이라고 부른다. 이것은 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리되기 때문이다. const objA = { val : 40 } const objB = objA objA 객체를 객체 리터럴 방식으로 생성했다. 여기서 매우 중요한 개념, objA 변수는 객체 자체를 저장하고 있는 것이 아니라 생성된 객체를 가리키는 참조값을 저장하는 것이다. 또한, 변수 objB에 objA 값을 할당한다. objA는 생성된 객체를 가리키는 참조값을 가지고 있으므로 변수 objB에도 이같은 객체의 참조값이 저장된다. 객체 비교 일치 연..
-
CSR과 SSR프로그래밍 2023. 6. 6. 15:14
SPA와 MPA를 먼저 알고가자면 SPA(Single Page Application) 단일 웹 페이지로 돌아가는 애플리케이션 즉, 클라이언트 측에서 한 장의 페이지로 작동하는 기능 정도로 소개할 수 있다. 웹 어플리케이션에 필요한 정적 리소스(html, css, javascript)를 한 번에 모두 다운로드 하고, 그 이후에 모든 일들을 클라이언트 측에서 브라우저가 비동기로 처리하게 된다. 예를 들어, 유저가 어떤 버튼을 클릭하였을 때, 원격 API를 호출해서 데이터를 가져온 후 HTML 문서로 렌더링 하는 일련의 과정이 모두 자바스크립트를 통해 브라우저에서 일어난다. CSR 렌더링 방식이라고도 부르며 react, vue, angular 등이 사용된다. MPA(Multiple Page Applicatio..
-
npm install / npm ci 차이점Node 2023. 5. 10. 22:56
들어가기 전에 pacakge.json과 pacakge-lock.json의 차이에 대해서 이해해야 한다. 간략히 차이를 말하자면, package.json은 ^ 등을 이용해서 version range로 버전으로 명시하여 의존성 목록을 만든다. pacakge-lock.json은 정확한 버전을 명시하여 의존성 목록을 만든다. 공통점 의존성 모듈을 설치한다. 차이점 npm install npm install 명령어를 통해 설치를 하면 package.json에 의존성 목록이 추가될 것이고 package-lock.json도 업데이트가 될 것이다. 즉, node_modules와 package-lock.json 파일이 존재하지 않아도 pacakge.json을 보고 node_modules와 pacakge-lock.json..
-
heroku로 React + json-sever 정적 웹 사이트 배포하기프로젝트 2023. 4. 15. 17:01
배포 순서 1. 폴더 구조 및 server 디렉토리 생성 1) 최상위에 Mock Api(json-server / json-server-auth)의 역할을 할 server 디렉토리를 생성한다. 2) 최상위에 db.json 이라는 파일을 만들어 db 역할을 할 데이터들을 json 형식으로 넣는다. 3) server 디렉토리로 이동해서 index.js 파일을 만들어 띄울 데이터 서버를 작성한다. const jsonServer = require("json-server") const auth = require("json-server-auth"); const path = require('path'); const app = jsonServer.create(); const router = jsonServer.route..