milliwonkim의 블로그

도커 용어 정리 - 기본용어 1. Docker - execution time - 프로세스 실행 - 컨테이너 하나 당 하나의 프로세스 - docker run으로 만들어짐 2. Container - 레이어 파일시스템을 사용 - 한 번 레이어를 add하면 삭제 불가능 - 레이어를 스쿼시는 가능 다른 레이어들을 삽입하는 각각의 과정 - 각각 레이어들은 캐싱되어 재사용가능, no-cache 옵션도 있음 3. Base Images - 필요한 패키지들과 함께 container를 prebuilt함 - ubuntu, centos etc 4. Container Registry - 태그된 이미지를 쉽게 저장하는 곳 - API 제공, NPM처럼 패키지 있음 - Docker hub, Quay.io, GitHub, Gitlab ..

요약 - 페이지 내용이 자주 바뀐다? => SSR 사용 - 페이지 내용이 거의 안바뀐다? => SSG 사용 Next.js에서 SSG와 SSR이 무엇인가! 1. Static Site Generation(SSG) - 빌드 타임에 페이지를 서버에서 사전에 HTML을 생성해둠 - getStaticProps, getStaticPaths를 이용함 - 생성된 정적페이지는 모든 요청에 동일하게 제공됨 - 서버 측에서 사전렌더링 => 클라이언트에서 추가적인 데이터 요청 안해도됨 - 캐싱 => 성능향상, 서버 부하 감소 가능 - 주로 변경이 적은 페이지, 공통 데이터를 사용하는 정적 컨텐츠에 적합함 2. Static Site Generation(SSG) - 각 페이지 요청이 올 때마다 HTML을 생성함 - getServe..

Next.js에서 Dynamic Route를 사용하기 위해선 반드시 getStaticPaths, getStaticProps를 사용해야한다. getStaticPaths getStaticPaths는 동적 경로를 가지는 정적페이지를 생성하기 위해 모든 URL에 따른 페이지를 빌드 시점에 서버를 이용해 모두 Pre-Render한다. 예를 들어, /post/[id].tsx라는 동적 라우팅이 있다면, /post/1, /post/2, /post/3에 대한 HTML, JS 등을 미리 렌더링한 파일을 만들고, 이 배포 시, /post/1을 호출할 경우, Pre-Render된 /post/1의 HTML, JS 등을 브라우저에 렌더링한다. getStaticProps 그런 후 getStaticProps에 해당 경로(/post/..

동작 안한다. getStaticPaths, getStaticProps, getServerSideProps는 Node 서버가 필요하기 때문에, Node 서버를 올릴 수 없는 AWS S3, Github Pages에서는 Build time 당시의 Pre Render 기능은 모조리 업데이트 불가능하다 (다만 deploy 시도 시에는 새로운 빌드를 하기 때문에 최신이 적용되긴 한다) AWS amplify, Vercel이 서버리스를 위한 서버를 이용할 수 있기 때문에 Next.js에 적당해보였다 import React, { useEffect, useState } from "react"; const Post = (data: IData, params: IRoute) => { const { category: catego..

잠시 짬나는 3시간에 만들어보았는데요. 도움이 됐으면 좋겠네요~https://react-usable-tools-milliwonkim.vercel.app 청년도약계좌 만기액 계산해보기 react-usable-tools-milliwonkim.vercel.app 청년도약계좌 만기액 계산해보기 조건 나이가 만 19세 이상, 만 34세 이하인가요? 금융소득(이자소득, 배당소득)이 2000만원이 넘지 않나요? 연 소득은 얼마 이하인가요?(만 단위로 입력) 가구소득 중위 180% 이하인가요? 최대 6년까지, 군 복무 기간을 연령 계산에서 제외 / 6000만 원~7500만 원은 이자 비과세만 적용 소득이 없는 취준생, 대학생이 아니거나 혹은 아르바이트 등 고용보험에 가입되어 있나요? 매달 70만원 한도내에서 꾸준하게 ..

14. 전역변수의 문제점 전역변수의 문제점 전역변수 지역변수 실행 명시적 호출없이 실행 함수가 실행되야 생김 스코프 전역 스코프 렉시컬 스코프(함수) 생명주기 전역 객체의 생명주기와 일치 렉시컬 스코프가 없어질 때 까지 생존 문제점 암묵적 결합(모든 코드가 전역변수 참조 및 변경가능) 긴생명주기(따라서 메모리 리소스도 오래 소비) 스코프 체인 상 종점에 존재(전역변수의 검색 속도가 가장 느림) 네임스페이스 오염(변수 이름 충돌) 스코프는 항상 좁은게 낫다따라서 전역변수보다 권장된다. 전역변수를 억제하는법 즉시실행함수: 모든 코드를 괄호로 감싸면 ⇒ 모든 변수는 즉시실행함수의 지역변수가 됨 네임스페이스 객체 var MYAPP = { name: "KIM" } ES6 module ES6 모듈은 파일 자체의 독..

변수일 경우 console.log(message) // ReferenceError: message is not defined const message = 'message' 만약 변수를 console.log한다면, console.log는 변수를 '참조한다' => 따라서 변수 선언 이전에 해당 변수를 참조하려했으므로 참조에러가 뜬다. 원시값인 경우 console.log(3) // primitive value console.log("string") // primitive value 원시값이기 때문에 참조가 아니니, 할당이겠구나 싶겠지만 그건 아니다. 왜냐하면 변수에다가 값을 두는 건 아니고 단지 console.log에 값을 전달하기만 할 뿐이다.

밑의 코드는 useState 소스코드를 간소화해서 useState의 원리를 설명하는 코드입니다. Object.assign을 이용해서 새 객체를 생성해서 state에 할당합니다. 따라서 state의 불변성을 보장합니다. let currentState; // current state value function useState(initialState) { // set current state to the initial state if it hasn't been set yet if (!currentState) { currentState = initialState; } function setState(newState) { // create a new state object by merging the current..

이 글에서 "선언 전"이라는 의미는 단순히 줄의 전 후 관계 변수가 글로벌 스코프인 경우 const App = () => { return } const styles = { display: 'flex' } 이 코드는 에러가 안난다. 이유는 styles 변수가 이 파일의 글로벌스코프에 있어서, 어디에서든 접근이 가능하다. 심지어 이렇게 실제로 styles를 사용하는, 그것보다 먼저 선언 및 할당 App 함수에서도 사용 가능하다 const와 let은 블록 스코프이지만, 만약 글로벌 스코프에서 정의됐다면 파일 어디에서든지 접근 가능하다. 변수가 렉시컬 스코프인 경우 const App = () => { const App2 = () => { console.log(styles); return ; }; const st..

let num = 42 const string = "string" 이처럼 원시값이 변수에 할당될 때, 값 자체를 변수에 할당하는게 아니고, 값의 사본이 생성되어 변수에 저장됨 자바스크립트는 42의 사본을 새로운 메모리 공간을 생성하고, 그 메모리 위치에 대한 참조를 변수 num에 할당합니다. 따라서 num은 42의 메모리 위치를 가리키게 됨 그러나 num자체는 값 42가 포함돼있지 않음 그럼 이 참조되는 원본 42는 어디에 있나? 42라는 리터럴 값을 사용하면, 자바스크립트는 이 리터럴 값을 뜻하는 새로운 값을 메모리에 넣는다. 42라는 이 복사값이 만들어지고, 메모리에 저장됩니다. 변수에는 이 복사값의 참조값을 메모리에 저장한다. 최종적으로 우리는 하나의 원시값을 변수에 할당할 때, 2개의 메모리를 사..