목록전체 글 (110)
기술 블로그
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bbZ8EA/btsyRUMDFg3/9zJv8f257n0yjAymwixfXk/img.png)
https://blog.jaegwan.com/99 [TIL] 웹 브라우저 이해 브라우저 유저 인터페이스: url 입력창을 포함한 웹페이제 외적 클라이언트 요소 브라우저 엔진: 유저 인터페이스와 렌더링 엔진을 중재 렌더링 엔진: 리소스를 파싱하고 결과물을 바탕으로 페 blog.jaegwan.com 브라우저 렌더링에 대해 위 게시글에서 더 자세히 설명했다. 돔 객체 수정시 일반적으로 수정은 리플로우 단계부터 일어난다. 리플로우에서는 크기와 위치를 재조정하는 과정을 거치며 리페인트에서는 스타일을 입히는 과정을 거친다. 리플로우를 일으키는 작업을 하면 순차적으로 리페인트까지 일어나게 되는것이다. 만약 특정 요소의 위치를 변경하거나 크기를 키워야한다면 transform을 조작하는 방법과 position을 조작하는..
http란? 데이터 전달을 위한 통신 프로토콜로 클라이언트 서버 모델에서 사용되며 비 상태성을 지닌다. 보완 방법: 쿠키 세션 쿠키 - 클라이언트에서 저장하는 작은 데이터 셋 * 쿠키에 만료기간 있음 세션 - 서버 단에서 클라이언트를 식별하기위해 각 클라이언트마다 세션 아이디를 할당하고 쿠키를 내려보내 통신시 인증하는 구조 - 세션정보는 서버에 저장됨 - 일반적으로 세션은 브라우저 종료시 종료됨 OSI 7 계층이란 네트워크 프로토콜이 통신하는 구조 응용 어플리케이션 프로세스와 통신하는 구간 http 구간 세션 세션을 유지하고 암호화 , 직렬화등을 담당 동기화와 오류 복구 담당 전송 포인트 투 포인트 TCP/UDP등이 해당 양 끝단 신뢰성있는 전송 담당 데이터의 분할 및 재조립 네트워크 ip 계층이며 데이..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b8CwV1/btsyChHTru9/ujhi70KqY0NqpWXuZ1M6Pk/img.png)
브라우저 유저 인터페이스: url 입력창을 포함한 웹페이제 외적 클라이언트 요소 브라우저 엔진: 유저 인터페이스와 렌더링 엔진을 중재 렌더링 엔진: 리소스를 파싱하고 결과물을 바탕으로 페이지를 그려냄 webkit, gecko 등 네트워크 레이어: http(s)프로토콜을 이용해 외부 리소스를 얻어오고 서버에 요청을 보낼 때 사용 js 인터프리터: 자바스크립트를 해석하고 실행 ui 백엔드: 렌더트리를 기반으로 운영체제의 인터페이스를 따르는 ui를 처리 자료 저장소: 데이터를 브라우저 자체 로컬에 저장하기 위한 레이어 접근 및 저장에 활용 로컬스토리지 등 동작 유터 인터페이스에서 url 입력받음 브라우저 엔진에서는 검색어인지 url인지 검증 렌더링 엔진을 거처 네트워크 레이어에서 리소스 요청 리다이렉션(3xx..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bXcrTd/btsyqyD4JKH/HzdwuriD4Q5BbACEyDnKsk/img.png)
https://blog.jaegwan.com/96 [TIL] GCP Next.js deploy 최근 서류합격한 기업의 우대사항을 보니 GCP 배포가 기재되어 있어 면접 전 GCP 배포를 경험해보고자한다. 구글 클라우드에 가입 후 원할한 진행을 위해 카드 등록도 해준 후 배포하기 위한 프로 blog.jaegwan.com 이전 게시글에 이어서 작성되는 글이다. "CI/CD"란 "Continuous Integration"과 "Continuous Delivery" 또는 "Continuous Deployment"의 약어로, 소프트웨어 개발 및 배포 프로세스를 자동화하고 효율화하기 위한 방법론과 관련된 도구와 절차를 통칭합니다. GCP내의 CI/CD를 검색해서 Cloud Build를 클릭한다. 사용을 클릭한다. 이..
모듈: 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위 웹펙에서의 모듈: 웹 애플리케이션을 구성하는 모든 자원 모듈 번들러: 의존성이 있는 리소스(html,css,js,img)를 각각의 모듈로 보고 하나 또는 여러개의 파일로 묶어주는 도구 리소스: 웹 애플리케이션을 구성하는 모든 자원 기존의 페이지 별 자바스크립트 방식의 문제 의존성 순서 비보장 문제 일부 파일 에러 -> 전체 에러 문제 번들러(웹팩) 장점 여러 타입으로 구성된 여러 리소스파일들을 받으면 다수의 http통신이 발생하여 웹 로딩 속도 저하로 이어질 수 있다. 번들러는 파일을 하나로 합쳐 이 문제를 해결한다. 성능 최적화 및 자동화 코드 축소 및 트리쉐이킹 코드 스플릿을 통한 lazy loading 필요한 코드를 필요할 때 로딩 종속성..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bNWrxz/btsys2q7K8N/U07BgDqgDbp8X7T9Gdbesk/img.png)
인프라에 관심이 생겨 GCP 배포를 경험해보고자한다. 구글 클라우드에 가입 후 원할한 진행을 위해 카드 등록도 해준 후 배포하기 위한 프로젝트를 만들어 선택한다. 옆의 id를 잘 기억해준다 추후 사용한다. 우리가 주로 참고해야할 레퍼런스는 아래 두개다. https://nextjs.org/docs/pages/building-your-application/deploying#docker-image Building Your Application: Deploying | Next.js Congratulations! You're here because you are ready to deploy your Next.js application. This page will show how to deploy either ma..