Youngble_개발스토리

그전에 웹팩 과 바벨에 관하여 정리한적이 있는데 개념뿐만 아니라 어떠한 흐름으로 쓰는지에 대해서 좀더 디테일하게 정리하고자 한다. 순서 웹팩 적용 1. 웹팩 설치 : webpack/ webpack-cli/ webpack-dev-server 2. webpack.config.js 3. package.json scripts 빌드 명령어 3. 로더: css-loader / style-loader 4. 플러그인(Plugin) 5. 개발서버(server) 바벨 적용 1. 바벨설치: babel-loader/ @babel/core / @babel/preset-env 2. 프러그인(Plugin) 3. Preset 4. 리액트 / @babel/preset-react 5. babel-loader 웹팩 적용 1. 웹팩 설치 ..

순서 1. Lighthouse 설명 - First Contentful Paint, FCP - Speed Index, SI - Largest Contentful Paint, LCP - Time To Interactive, TTI - Total Blocking Time, TBT - Cumulative Layout Shift, CLS 이전글 웹 성능최적화 (1) 보러가기 1. Lighthouse 설명 웹 페이지의 종합 성능을 측정하는 툴로써 이전에는 따로 프로그램을 다운로드하여 사용해야했지만 이후에 구글 크롬은 브라우저에 기본내장하여 사용할 수 있도록 했다. Lighthouse를 통해 성능 점수를 매길때 6개의 지표(Metrics)가 있다. 또한 이러한 지표를 웹 바이탈(Web Vitals)이라고 한다. Fi..

순서 1. 성능 최적화는 왜 필요할까? 2. 성능 최적화는 어떻게 이루어질까? 3. 서비스 성능분석 방법 4. 성능 최적화 기법들 5. 크롬 개발자 도구 1. 성능 최적화는 왜 필요할까? 먼저 성능 최적화가 필요한 가장큰 이유는 성능이 저하되면 사용자가 떠나고 매출이 감소한다. 반대로 말하면 성능이 향상되면 사용자가 늘고 매출이 오른다. 구글이 딥 러닝 기술을 이용하여 페이지 로딩속도와 이탈률 및 전환율의 관계를 분석하였을때 다음과 같은 결과가 나왔다. 위의 결과만 보더래도 페이지 표시가 3초~10초 지연이 되면 32%~123%만큼 증가되어 이탈률을 갖게 된다는 것이다. 따라서 웹 성능을 최적화 하게되면 서비스 사용자에게 더 나은 사용자 경험(UX)를 제공하기 때문에 가입률과 전환율은 증가되고 이탈률을 ..

오늘은 Web APIs 관련해서 정리하고자한다. APIs 란? 우리가 늘상 API 라는 말을 많이 하고있지만 실질적으로 정확히 모르고 쓸때가 많다. 백엔드와 데이터를 통신할때도 API통신이라 하고 DOM을 컨트롤할때도 Browser API를 사용한다고 하는등 많은 곳에서 API라고 쓴다. 정의로는 Application Programming Interfaces(APIs)는 프로그래밍 언어에서 개발자가 복잡한 기능을 보다 쉽게 만들수 있도록 만들어진 구조이다. API는 복잡한 코드들을 제거하고 쉬운 구문으로 대체하여 사용할 수 있게 제공해주는 것이다. 정의로 말하면 솔직히 이해하기 쉽지 않다. 아래의 그림의 예시를 통해 좀더 쉽게 설명해보자. 우리가 실제로 집에서 전기를 사용한다고 했을때, 플러그 소캣에 꽂..

오늘은 프로젝트 아키텍쳐 관련하여 정리하고자한다. 순서 1. 모놀리식 아키텍처 2. 모놀리식 단점 3. 마이크로서비스 아키텍처 MSA 4. 멀티레포 장점 5. 멀티레포의 단점 6. 모노레포 모놀리식 아키텍처, Monolithic Architecture 모놀리식 아키텍처는 전통적인 소프트웨어 프로그램 모델이다. 위의 사진처럼 하나의 서비스를 위해 모든 코드와 프론트/백엔드, 로직 등 한곳에서 관리하고 빌드/배포 운영 하는 것이다. 보통 프로젝트 초기에는 코드 관리, 인지 오버헤드 및 배포의 용이성 면에서 모든 것을 한꺼번에 릴리스할 수 있기 때문에 처음 시작하는 작은 스타트업같은 경우나 소규모의 프로젝트는 흔히 모놀리식 아키텍처로 많이 진행한다고 하고 지금도 많이 쓴다. 모놀리식 단점 하지만 한곳에서 관리..

브라우저에서 해당 URL을 입력후 브라우저 렌더링 과정에 대해서 어떻게 일어나는지 정리해보자. TL;DR 렌더링 과정 1. 브라우저 주소창에 특정 주소를 입력 2. 해당 주소의 서버를 찾고 만약 캐시가 있는지 먼저 체크, 그리고 DNS(Domain Name System)가 실제 서버로 연결하고 http, https에 따라 통신한다. 3. 별도의 path없이 기본 url 요청 '/'로 보낼시 루트 설정은 기본 설정의 index.html을 요청하게되고 서버에서 루트폴더에 있는 index.html을 클라이언트쪽(브라우저)으로 보내준다. 4. 해당 index.html을 받은 브라우저에서 텍스트로 이루어진 파일을 파싱(parsing)하면서 DOM 트리 생성 5. html을 읽다 중간 link tag에서 CSS요청..

드디어 웹팩과 번들러에 대한 공부를 정리하려고한다. 많이 본 그림일거다. 웹팩이라하면 말그대로 여러가지 js,css,ts,이미지파일 등등 웹만드는 파일들을 한군데 묶어준다(bundling)라는 개념은 대강 알고있었다. 그런데 언제? 왜? 그리고 어떻게 웹팩으로 번들링을 해주는건지는 모른다. 따라서 다시 기초로 돌아가보자. 예제를 위해 간단한 코드와 파일을 생성해보고 이를 테스트해보면서 다시한번 개념을잡자. 기본적으로 내가 만든 구성은 다음과 같다. 기본적인 index.html 을 만들고 이곳에서 쓸 js파일을 5개 만들었다. Import 하고싶은 script에 type을 module을 작성하고 5개의 js파일을 import해주었다. 각각의 js파일에는 string값이 들은 변수, while문을 도는 함수..

웹프로그래밍 웹의 기본 목적 다른 여러 컴퓨터에서 문서를 공유하거나 보는 목적 웹에서 다루는 문서를 웹 문서 라고 부름 웹의 구조 인터넷을 활용 거미줄처럼 연결된 정보 소통망, world wide web →웹문서를 인터넷 상의 컴퓨터들 끼리 주고 받는 네트워크 시스템 웹 구성 웹서버 와 클라이언트 컴퓨터들로 구성 웹서버 웹사이트를 탑재하는 컴퓨터로 구글(www.google.com), 네이버(www.naver.com) 등 웹 문서, 이미지, 동영상 등의 데이터 저장 관리 웹 클라이언트의 요청을 받아 웹 문서 전송 웹 서버로 작동하도록 하는 소프트웨어를 실해하는 컴퓨터 웹 클라이언트 사용자 인터페이스 담당 웹 서버에 웹 문서를 요청하고 받아 사용자에게 볼수있도록 출력 인터넷과 웹은 다르다 인터넷 웹의 개념이..

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS 교차 출처 리소스 공유 (CORS) - HTTP | MDN 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라 developer.mozilla.org 교차 출처 리소스 공유 (CORS) 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다..