오늘도 조으네💜

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. 3. 11.

Next.js

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

2024. 2. 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. 2. 3.

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. 9. 24.