오늘도 조으네💜

TypeScript

📌 Partial Partial 타입은 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다. interface Address { email: string; address: string; } type MyEmail = Partial; const me: MyEmail = {}; // 가능 const you: MyEmail = { email: "noh5524@gmail.com" }; // 가능 const all: MyEmail = { email: "noh5524@gmail.com", address: "secho" }; // 가능 👉 Partial 구현해 보기 interface Profile { name: string; age: number; married: boolean } // case 1 type P..

2024.03.11

Next.js

📌 Image Component next.js에서는 이미지 최적화를 위해 Image 컴포넌트를 제공한다. Image 컴포넌트에서 제공하는 대표적인 기능은 아래와 같다. lazy loading 이미지 사이즈 최적화하여 빠른 로딩이 가능하다. placeholder 제공하여 CLS(Cumulative Layout Shift)를 방지해 준다. CLS(Cumulative Layout Shift)란? 어떤 웹 사이트에 방문했을 때 이미지가 로드되기 전까지 영역의 높이가 0이었다가 이미지가 로드된 후 이미지만큼 영역이 늘어서 레이아웃이 흔들리는 현상 👉 lazy loading 이미지 로드하는 시점을 필요할 때까지 지연시키는 기술을 의미한다. 스크린 밖에 있는 이미지들은 로딩을 지연시키고 스크린 안에 있는 이미지만을 ..

2024.02.28

React

👉 Vite로 빌드한 프로젝트 배포하기 1. 작업 프로젝트가 github 레파지토리와 연동되어 있어야 한다. git remote add origin http://레파지토리주소.git 2. vite.config.js 에 base url을 수정한다. 참고 : https://ko.vitejs.dev/guide/static-deploy.html#github-pages // vite.config.js export default { base: '/your-repo-name/', // Change this to your GitHub repository name } 3. 깃허브 레파지토리 설정 페이지에서 GitHub Pages 설정으로 이동한 후, 배포 소스를 "GitHub Actions"로 지정한다. GitHub A..

2024.02.03

React

최근 리액트를 사용하여 오브젝트의 크기를 변경할 때마다 실행되어야 하는 기능을 구현하게 되었는데, 화면이 깜빡이는 현상이 발생하여 useLayoutEffect에 대해 알아보게 되었다. 사용법은 useEffect와 동일하다. 📌 useLayoutEffect useLayoutEffect(() => { effect return () => { cleanup }; }, []) 📌 useEffect useEffect(() => { effect return () => { cleanup } }, []) 훅의 형태가 완전히 동일한데, 이 둘의 차이점은 무엇일까? 👉 이펙트 호출 시기 useEffect 훅은 DOM의 레이아웃 배치와 페인트(렌더링)이 끝난 후 비동기적으로 이펙트 함수를 호출시킨다. 렌더링 된 후에 실행되므..

2023.11.15

자료구조, 알고리즘

📌 연결 리스트(Linked List) 하나의 객체를 이루는 노드가 연결되어 리스트를 이루는 구조이다. 노드에는 값을 담고 있는 '데이터'와 다음 노드를 가리키는 '링크' 정보를 저장하고 있다. '데이터'에는 숫자, 문자열, 또다른 연결리스트 등 다양한 형식을 가질 수 있다. 리스트의 맨 앞 노드를 헤드(Head), 맨 마지막 노드를 테일(Tail)이라고 한다. 👉 배열과 연결리스트의 차이 배열과 연결리스트는 언뜻 비슷해 보이나, 분명한 차이점이 있다. 배열은 메모리의 연속된 위치에 저장되고, 연결 리스트는 각 노드가 임의의 위치에 저장된다. 또한 배열은 인덱스를 활용하여 특정 원소를 지칭하는 것이 간편하나(O(1)), 연결 리스트는 인덱스가 없다. 그래서 마지막 노드를 찾으려면 첫 노드에서부터 포인터를..

2023.10.17

자료구조, 알고리즘

📌 퀵 정렬 병합 정렬과 마찬가지로 퀵 정렬도 분할 정복 (Devide and Conquer) 기법과 재귀 알고리즘을 이용한 정렬 알고리즘이다. pivot(중심축) 을 정하고, 중심축 보다 작은 값들은 왼쪽으로 큰 값들은 오른쪽으로 보낸다. 이렇게 pivot을 정해서 왼쪽, 오른쪽으로 나누고 다시금 이에 대해 재귀적으로 pivot을 정해서 왼쪽, 오른쪽을 나누는 과정을 반복하면 최종적으로 정렬이 완성된다. 퀵정렬의 실행시간은 피벗 선택 위치에 따라 달라질 수 있는데 이상적으로는 데이터 집합의 중간값을 피벗으로 선택하는 것이다. 하지만 데이터의 중간값을 구하기 어려운 상황이라면 첫 번째 요소 또는 마지막 요소 또는 중간, 무작위 요소를 선택한다. 👀 Example const quickSort = funct..

2023.10.16

자료구조, 알고리즘

📌 병합 정렬 병합 정렬은 분할 정복 (Divide and Conquer) 기법과 재귀 알고리즘을 이용해서 정렬하는 알고리즘이다. 주어진 배열을 원소가 하나 밖에 남지 않을 때까지 계속 둘로 쪼갠 후에 다시 크기 순으로 재배열 하면서 원래 크기의 배열로 합치는 과정을 거친다. 👀 Example function merge(arr1, arr2) { let results = []; let i = 0; let j = 0; while(i arr1[i]) { results.push(arr1[i]) i++; }else { results.push(arr2[j]) j++; } } while(i < arr1.length) { resul..

2023.10.16

HTML5 , CSS3

SCSS에는 다양한 내장 함수를 제공해 준다. 여러 가지 내장 함수가 있는데 이 중 몇 가지를 알아보자. 📌 mix(color1, color2) : color1, color2를 섞어서 나온 색상이 출력된다. .box { $color: royalblue; width: 200px; height: 100px; margin: 20px; border-radius: 10px; background-color: $color; &.built-in { background-color: mix($color, red); //보라색이 출력된다. } } 📌 lighten(color, 수치) : color의 수치에 해당하는 밝기로 색상이 출력된다. .box { $color: royalblue; width: 200px; height:..

2023.09.24

HTML5 , CSS3

SCSS는 CSS의 단점을 보완하기 위해 등장한 스크립트 언어이다. 프로젝트의 규모가 커지고 복잡해질수록 CSS 또한 방대해지고 복잡해져서 유지보수가 힘들어진다.🤦‍♀️ 이러한 CSS의 단점을 보완하여 복잡한 작업을 쉽게 할 수 있게 해 주고, 코드의 재활용성과 가독성을 높여주기 위해 등장한 것이 바로 SCSS이다. SASS도 있는데, SCSS와의 차이점을 꼽자면 중괄호와 세미콜론을 사용하느냐의 차이가 있다. SASS는 중괄호과 세미콜론을 대신해 들여 쓰기로 구문을 분리하고 작성한다. 그러다 보니 CSS문법에 익숙한 퍼블리셔들은 SASS의 문법이 낯설게 느껴진다. SCSS는 CSS와 동일하게 중괄호와 세미콜론을 사용하고, CSS와 더 높은 호환성을 보이기에 SCSS를 더 선호한다. 📌 SCSS 주석 SC..

2023.09.24

React

리액트에서 특정 조건에 따라 className을 적용하고자할 때 편하게 사용할 수 있는 라이브러리가 있다. 설치는 아래와 같이 해주고, $ npm install --save clsx 사용 예시는 다음과 같다. import clsx from 'clsx'; // or import { clsx } from 'clsx'; // Strings (variadic) clsx('foo', true && 'bar', 'baz'); //=> 'foo bar baz' clsx의 인수로 객체, 배열, 부울 또는 문자열이 올 수 있다. clsx(true, false, '', null, undefined, 0, NaN); 인수로 들어온 값이 falsy한 value이면 해당 클래스는 추가되지 않고, truthy한 값만 클래스로 적..

2023.09.24