채용 우대사항에 빠지지 않고 보이는 Webpack, Babel 사용이 능숙한 분. CRA를 사용해 프로젝트를 진행해 왔었기에, JS 신문법을 이전 버전의 문법으로 번역해준다거나 (Babel), 모듈로 이루어진 파일들을 압축해준다(Webpack) 정도로만 어렴풋이 알고있었다. 이들을 확실히 이해하고 스스로 활용할 수 있게 하기 위해 정리해 놓으려 한다. Webpack 웹팩이란 웹팩(Webpack)은 모던 자바스크립트 (ES6+) 애플리케이션을 위한 모듈 번들러이다. 모듈이란 특정 기능을 갖는 작은 코드 단위를 의미한다. 함수나 컴포넌트가 담겨 있는 js파일부터, 이미지, 동영상 등을 모두 포괄하는 개념이다. 이 자원들을 하나의 파일로 병합, 압축하는 과정을 번들링이라고 한다. 기존 모듈의 문제점과 표준화 ..
Mdn web docs - CORS를 통해 학습한 내용을 정리한 글입니다. 이전 글과 이어집니다. CORS CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)란 HTTP 헤더를 이용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처(도메인, 프로토콜, 포트)의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 기본적으로 브라우저는 스크립트에서 시작한 교차 요청을 제한한다. 이러한 규약을 동일 출처 정책이라 하며, XMLHttpRequest나 Fetch API가 이를 따른다. 이 외에도 CSS 내에서 @font-face를 통해 사용하는 웹 폰트나, WebGL 등이 있다. 다른 출처의 리소스를 정상적으로 받아오기 위해서는, 그 출처에서 올바른..
Mdn web docs - HTTP를 통해 학습한 내용을 정리한 글입니다. 개요 HTTP(하이퍼텍스트 전송 프로토콜)은 HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 계층 프로토콜이다. 클라이언트의 요청에 따라 통신하는 클라이언트-서버 모델을 따르며, 이전 요청의 세션 상태를 유지하지 않는 Stateless 프로토콜이다. * 애플리케이션 계층 통신 네트워크에서 호스트가 사용하는 트로토콜과 인터페이스 방법을 지정하는 추상화 계층 * 프로토콜 컴퓨터 내부 혹은 컴퓨터 간 데이터의 교환 방식을 정의하는 규칙 체계 집합 * Stateless 동일한 연결 상에서 발생한 두 개의 요청 사이에 연결고리가 없음을 말한다. 쿠키를 통해 동일한 상태를 공유하는 세션을 생성한할 수 있다. 프록시 브라우저(클..
들어가며 챗팟 프로젝트를 끝내고, 컴포넌트의 관리와 API의 활용법에 대해 자세히 알고싶어 엘리 쌤의 리액트 강의를 수강하게 되었다. 그 중 거의 막바지 프로젝트로 진행되는 유튜브 프로젝트이다. 본 프로젝트에서 배운 점이 많아 정리해놓으려 한다. 큼직한 단계마다 구현이 완성된 모습을 보여주고, 다음 영상에서는 해당 구현에 대한 해설이 있는 방식으로 진행되었다. 나는 그 사이에 직접 구현해보고, 해설을 통해 개선하였다. 프로젝트를 통해 배운 것 파일관리 /public /mock-data : 유튜브 API mock data /src /api : 유튜브 API 요청과 관련된 로직 파일 /components : 사용한 컴포넌트들 /context : API 요청을 통해 받아온 동영상 데이터를 모든 컴포넌트에서 활..
네이버 D2의 브라우저는 어떻게 동작하는가? 와 Mdn web docs의 글을 학습한 후 정리한 글입니다. 브라우저의 주 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 렌더링하는 것이다. 보통 HTML 문서이며, PDF나 이미지 형태의 파일도 표현할 수 있다. 브라우저는 주소 표시줄, 이전/다음 페이지 등으로 이루어진 사용자 인터페이스 (프레임이라 생각해도 될 듯), 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 브라우저 엔진, 요청한 콘텐츠를 뷰포트에 출력하는 렌더링 엔진, 백엔드에서 실행되는 통신, 이를 위한 백엔드 UI, 자바스크립트 해석기, 자원 저장소로 구성된다. 브라우저의 전반적인 동작 흐름은 탐색 > 응답 > 파싱 > 렌더로 이루어진다. 1. 탐색 1-1. DNS 조회 웹..
헉. 벌써 2023년의 절반이 지나갔다. 6월은 눈코 뜰 새 없이 지나갔고, 약 한 달간의 공백과 2분기 회고를 통합하여 작성하려 한다. 0. 톺아보기 1월에 JS 공부를 끝내고, 2월엔 약 3주 간의 토이프로젝트와 함께 서울도 다녀왔다. 새학기가 시작되고 수업과 리액트 공부를 병행하면서 본전공, 부전공 두 개의 졸작도 끝냈다. 6월엔 기말 준비와, 소프티어 및 부스트캠프 입과 시험을 준비했더니 벌써 7월이다. 돌아보면 상반기의 굵직한 계획들은 잘 이행된 것 같지만, 좀 더 밀도 있게 보낼 수 있었을 것 같기도 하다. 누군들 생각은 못할까.. 1. 프로젝트 어느 정도 눈에 보이는 결과물을 내고 싶었다. 바닐라 자바스크립트를 이용한 PBW 개인프로젝트와 리액트를 이용한 챗팟 팀프로젝트를 진행했다. 확실히 ..
1. 프로젝트 개요소개ChatGPT API 기반 사용자 맞춤형 레시피 추천 서비스 챗팟 (Chatpot)기간2023.05.07 ~ 2023.06.27팀원재웅(FE), 현도(BE)스택(FE) ReactJS (Redux, Router, Styled-components, PWA)(BE) NodeJS, OpenAI API, AWS주소https://chatpot.site/ GitHub - w00ngja/ChatPot: (ReactJS) Recipe Recommendation Web Service based on ChatGPT API(ReactJS) Recipe Recommendation Web Service based on ChatGPT API - GitHub - w00ngja/ChatPot: (ReactJS) ..
레지전트 셋이란, 메모리에 들어와있는 프로세스 페이지 정보들의 집합을 말한다. 또한 페이지의 갯수를 레지던트 셋 사이즈라 하는데, 이 사이즈를 규정하는 서로 다른 방법에 대해 알아보려 한다. Process Resident Set 레지던트 셋 사이즈를 결정하는 기준 Fixed allocation : 할당해주는 메모리 프레임의 수를 고정시킨다. 페이지 폴트가 발생하여 제거될 페이지를 선별해야 할 때, 자신이 갖고 있는 페이지 중에서 선택하는 Local Scope 영역에서 Replacement가 처리된다. Variable allocation : 할당해주는 메모리 프레임의 수를 유동적으로 결정한다. 해당 방법은 Replacement 처리 시 Local Scope와 Global Scope 영역 모두에서 사용된다...
동기 처리 자바스크립트는 기본적으로 싱글 스레드 기반의 언어이다. 따라서 하나의 호출 스택만을 이용해 한 번에 한 가지의 일만 처리할 수 있다. 코드들은 순차적으로 실행되며, 이전 작업이 완료되어야 다음 작업으로 넘어간다. 이를 동기(Synchronomous)처리라 한다. 비동기 처리 반대로 비동기(Asynchromonous) 처리란, 특정 코드의 연산이 끝나지 않아도 다음 코드를 처리할 수 있는 방식을 말한다. 자바스크립트에는 fetch()를 통한 HTTP 요청이나, setTimeout을 통한 타이머 구현같은 다양한 비동기 함수가 존재한다. 이러한 처리들이 동기적으로 처리된다면 이용자 입장에서는 마우스를 집어던질지도 모른다. 따라서 비동기적인 호출이 있을 때 작업을 시작하긴 하지만, 즉시 복귀하여 다른..
DP 동적 프로그래밍이란 복잡한 문제를 더 간단한 하위 문제의 모음으로 쪼갠 후, 각 하위 문제들을 풀어 그 답을 저장하여 문제를 해결하는 문제 해결 방식을 말한다. 적용 가능한 문제 영역이 그리 넓지 않지만, 적용 가능한 경우에는 성능에 있어 아주 큰 차이를 가져온다. 두 가지 특성 Overlapping Subproblems : 한 문제를 더 작은 문제들로 나눌 수 있고, 그 조각들 중 일부가 재활용 가능해야 한다. Optimal Substructure : 하위 문제의 최적 해답을 통하여 더 큰 범주를 갖는 문제의 최적 해답을 구성할 수 있어야 한다. 재귀를 통한 구현 : 피보나치 수열 수열의 첫 번째 숫자와 두 번째 숫자는 1이며, 그 밖의 경우 Fib(n) = Fib(n-1) + FIb(n-2)이다..
