[JSX] 조건에 따른 JSX 작성 패턴 - if, switch, object 구조

리액트에서 JSX 작성 중에 조건문이 필요할 때 주로 삼항연산자를 사용하고, case가 다양할 때에는 switch문을 사용하는 편이다. 삼항 연산자가 워낙에 간편하다 보니 if 문을 사용한적이 없는 것 같은데, 아래처럼 사용할 수 있다. 1. JSX 내에서 if 문 function Component() { return ( {(() => { if (someCase) { return ( someCase ) } else if (otherCase) { return ( otherCase ) } else { return ( catch all ) } })()} ) } 2. JSX 내에서 switch 문 function Component() { return ( {(() => { switch (status) { case..

[JS] 연속된 정수 배열을 만드는 다양한 방법

기본적인 사용자 지정 함수 function getNumberArray (N) { let a = Array(N), b = 0; while(b < N) a[b++] = b; return a; } getNumberArray(10); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] ES6+ API을 활용한 1줄 짜리 방법들 - 0으로 시작하는 기본 수열 Array.from(Array(10).keys()) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] [...Array(10).keys()] // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] Array.apply(null, {length: 10}).map(Number.call, Number) // [0, 1, 2, 3, 4, ..

[Docker] 도커 빌드할 때 (환경)변수 전달하기

// .gitlab-ci.yml docker buildx build --build-arg NODE_ENV=dev -t $AWS_ECR/$APP_NAME:$TAG . --push // Dockerfile FROM node:18-alpine ... ARG NODE_ENV ENV env_name $NODE_ENV RUN npm run build:$env_name ... 1. "--build-arg" 플래그를 통해 문자 "dev"를 NODE_ENV라는 변수에 담아 보냄. 2. 도커파일에서 ARG 변수로 NODE_ENV 가져오기.

서버사이드렌더링이란? SSR, Server Side Rendering

SSR, Server Side Rendering이란? SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트에게 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(Client-side rendering)보다 페이즈를 구성하는 속도는 늦어지나, 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점이 빨라진다. 또한, 검색 엔진 최적화(SEO, Search Engine Optimization)에도 유리하다. SSR 동작 방식 사용자가 웹 페이지를 방문하면(request), 서버는 리소스를 확인하고 페이지 내에 있는 서버측 스크립트를 실행 후 HTML ..

[git] 커밋 메시지 수정하기

1. push 전 ( 커밋이 로컬에 있을 때 ) 1) 가장 최근 커밋 메시지 수정하기 git commit --amend 2) 최근이 아닌 커밋 메시지 수정 // 깃 로그부터 확인 git log // 위에서 3번째 커밋 선택 git rebase -i HEAD~3 // 이후 아래처럼 뜨면, 수정할 커밋들을 "pick"에서 "reword"로 바꾼 후 순서대로 수정 pick e499d89 Delete CNAME pick 0c39034 Better README pick f7fde4a Change the commit message but push the same commit. # Rebase 9fdb3bd..f7fde4a onto 9fdb3bd # # Commands: # p, pick = use commit # ..

[Docker] 도커란?

Docker 2013년에 출시된 Docker는 애플리케이션을 신속하게 구축, 테스트 및 배포할 수 있는 소프트웨어 플랫폼이다. 소프트웨어를 컨테이너라는 표준화된 유닛으로 패키징하며, 이 컨테이너에는 라이브러리, 시스템 도구, 코드, 런타임 등 소프트웨어를 실행하는데 필요한 모든 것이 포함되어 있다. 이 컨테이너라는 가상화 환경에서 애플리케이션을 패키징하고 실행한다. Docker를 사용함으로써 환경에 구애받지 않고 애플리케이션을 신속하게 배포 및 확장할 수 있는 것이다. 도커는 workflow를 단순화하고 가속하여 다양한 이점을 제공한다 Docker 작동 방식 도커는 컨테이너를 위한 운영 체제로, 코드를 실행하는 표준 방식을 제공한다. 가상 머신이 서버 하드웨어를 가상화하는 방식과 비슷하게, 컨테이너는 서..

자바스크립트 스크롤 애니메이션 넣기 - Intersection Observer API

Intersection Observer API Intersection Observer API: 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰할 수 있게 한다. 예시 let observer = new IntersectionObserver((e) => { e.forEach((el) => { console.log(el.intersectionRatio); // 화면에 포함된 퍼센트 if (el.isIntersecting) { console.log(el.intersectionRatio); el.target.style.opacity = el.intersectionRatio; } else { el.target.style.opacit..

[npm/yarn] 다운로드 가능한 패키지 버전별 확인 방법

// npm npm view 패키지이름 versions --json npm show 패키지이름 versions // yarn yarn info 패키지이름 versions

[Svelte] 스벨트 라우팅 컨벤션

스벨트 라우팅 컨벤션 Route은 src 폴더 안의 routes 폴더 안에 작성 (/src/routes) Route 파일은 +page.svelte 식의 이름으로 작성 /Routes 폴더 내 폴더는 URL 주소에서 경로 segment를 결정 동적 라우팅은 segmemt 폴더 아래 [somethingId] 식으로 폴더를 생성하여 그 안에 +page.svelte를 작성

[Svelte] 스벨트, 스벨트킷이란?

Svelte란? UI를 만들기 위한 컴포넌트 프레임워크 브라우저에서 UI를 그리고 처리하는 React 또는 Vue와는 다르게, 빌드 타임에 앱을 자바스크립트 코드로 변경 즉, Virtual DOM을 기반으로 작동하지 않고, 앱의 상태가 바뀔 때 DOM을 직접 바꾸는 기존의 바닐라 자바스크립트처럼 작동 SvelteKit이란? Svelte를 이용하여 고성능 웹앱을 만드는 프레임워크 Routing, SSR, 인증, 번들 최적화 등의 기능 제공 Backend 기능이 합쳐진 풀스택 웹 프레임워크 SvelteKit의 특징 File-based routing: 파일 자체가 라우터 기능을 함 Pre-rendering: SEO에 유리 API routes Data fetching Optimized production bui..