jayspod

[TIL] pretendard next.js에 적용

jay-dev — Fri, 3 Nov 2023 17:24:28 +0900

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
    theme: {
        extend: {},
    },
    plugins: [],
};

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    @font-face {
        font-family: 'Pretendard';
        src: url('/fonts/pretendard-regular.subset.woff2') format('woff2');
        font-display: swap;
    }

    html {
        font-family: 'Pretendard', ui-sans-serif, system-ui, -apple-system,
            BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
            'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
            'Segoe UI Symbol', 'Noto Color Emoji';
    }
}

[알고리즘] 프로그래머스 푸드 파이트 대회

jay-dev — Mon, 23 Oct 2023 13:37:13 +0900

프로그래머스 문제링크

프로그래머스

코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.

programmers.co.kr

Try / Solution

function solution(food) {
  let answer = "";
  for (let i = 1; i < food.length; i++) {
    answer += String(i).repeat(Math.floor(food[i] / 2));
  }
  return answer + "0" + [...answer].reverse().join("");
}

1부터 해당 인덱스만큼 반복 -> 0을 중심으로 양쪽에 같은 음식의 갯수가 놓여야 하니 2로 나누고 버림
만들어진 문자열을 왼쪽에 두고 물인 0을 중심으로 오른쪽에 문자열을 거꾸로 뒤집는다

[알고리즘] 프로그래머스 예상 대진표

jay-dev — Wed, 18 Oct 2023 19:58:31 +0900

프로그래머스 문제링크

프로그래머스

programmers.co.kr

Try / Solution

function solution(n,a,b)
{
  let round = 0;
    
    while (a !== b) {
        a = Math.ceil(a/2);
        b = Math.ceil(b/2);
        answer++;
    }
    return round;
}

a와 b는 2로 나누었을 때 올림한 만큼의 번호가 부여된다 -> 1과 2 중에 승리자는 다음 라운드에 1번이 되고 3,4는 2번이 된다
a와 b를 2로 나누었을 때 올림한 값이 같을 때의 라운드 값을 출력한다

[알고리즘] 프로그래머스 구명보트

jay-dev — Tue, 17 Oct 2023 13:56:28 +0900

프로그래머스 문제링크

프로그래머스

programmers.co.kr

Try / Solution

function solution(people, limit) {
    
    people.sort((a,b) => b-a);
    
    let answer = 0;
    
    let left = 0;
    let right = people.length -1;
    
    while(left < right){
        const sum = people[left] + people[right];
        if(sum > limit){
            left++;
        } else {
            left++;
            right--;
        }
        answer++;
    }
    if(left === right) answer++;
    return answer;
}

사람들을 내림차순으로 정렬
가장 무거운 사람과 가장 가벼운 사람의 무게를 합쳤을 때 보트의 무게제한보다 크다면 무거운 사람만 태우고 작다면 둘다 태움
마지막 한 사람이 남는다면 보트에 태움

[알고리즘] 프로그래머스 점프와 순간 이동

jay-dev — Mon, 16 Oct 2023 21:55:36 +0900

프로그래머스 문제링크

프로그래머스

programmers.co.kr

Try / Solution

function solution(n) {
    let battery = 0;
    while(n > 0) {
        if(n % 2 === 0) {
            n = n / 2;
        } else {
            n--;
            battery++;
        }
    }
    
    return battery;
}

2배 이동하는 순간이동은 배터리가 줄지 않으므로 2로 나눌 수 있다면 나눈다
2로 나눌 수 없다면 1만큼의 배터리를 소모하여 n에서 1을 빼준 후 다시 나눈다

[알고리즘] 프로그래머스 카펫

jay-dev — Fri, 13 Oct 2023 12:19:58 +0900

프로그래머스 문제링크

프로그래머스

programmers.co.kr

Try / Solution

function solution(brown, yellow) {
    
    let area= brown + yellow;
    
    for (let y = 3; y <= area/3; y++) {
        let x = area/y
        
        if( (x-2) * (y-2) === yellow) {
            return [x, y]
        }
    }
}

전체 넓이 = brown + yellow
brown + yellow = x * y
반복문을 시작하는 세로의 최솟값은 3 -> 세로는 가로보다 같거나 작으니 가로까지 반복
가로 = 넓이 / 세로
(x-2) * (y-2) === yellow 라면 그 x,y 값 출력

[알고리즘] 프로그래머스 다음 큰 숫자

jay-dev — Thu, 12 Oct 2023 20:39:12 +0900

프로그래머스 문제링크

프로그래머스

programmers.co.kr

Try / Solution

function countOne(n) {
    let count = 0
    let binaryArr = n.toString(2).split('');
    for(let i = 0; i < binaryArr.length; i++) {
        if (binaryArr[i] == 1) { count++; }
    }
    return count; 
}

function solution(n) {
    let result = n;
    while(true) {
        result++; 
        if(countOne(result) == countOne(n)) {
            return result;
        }
    }
}

n을 2진수로 바꾼 뒤 1의 개수를 찾는 함수 countOne

n에 1씩 더한 뒤 2진수로 바꿔 1의 개수를 찾아 n과 같은 1의 개수를 갖는 첫번째 수를 찾음

Advancd Solution

function solution(n,a=n+1) {
    return n.toString(2).match(/1/g).length == a.toString(2).match(/1/g).length ? a : solution(n,a+1);
}

재귀와 정규표현식을 활용한 풀이

[TIL] REST API, GraphQL

jay-dev — Fri, 6 Oct 2023 11:30:23 +0900

REST API

REST (Representational State Transfer) API는 웹 서비스와 클라이언트 간에 정보를 교환하기 위한 아키텍처 스타일 및 접근 방식입니다. REST는 웹의 기본 구조를 활용하여 자원에 대한 CRUD (Create, Read, Update, Delete) 작업을 수행하게 됩니다.

자원(Resource) 지향적: REST는 웹 상의 모든 것을 자원으로 간주합니다. 각 자원은 고유한 URI (Uniform Resource Identifier)를 가지며, 이 URI를 통해 해당 자원에 접근할 수 있습니다.

무상태성(Statelessness): 각 요청은 서버에 모든 필요한 정보를 포함해야 합니다. 서버는 클라이언트의 상태 정보를 저장하지 않으며, 이로 인해 각 요청은 독립적으로 수행됩니다.

표현(Representation): 자원은 여러 형태의 표현을 가질 수 있습니다. 예를 들어, 서버는 데이터를 JSON, XML 등 다양한 형식으로 반환할 수 있습니다.

통신의 비공식성(Stateless Communication): RESTful 서비스는 일반적으로 HTTP 프로토콜을 사용하여 클라이언트와 통신합니다. HTTP 메서드 (GET, POST, PUT, DELETE 등)는 자원에 대한 CRUD 작업을 나타냅니다.

무작정성(Cacheable): 응답은 캐시 가능하거나 캐시 불가능하다는 방식으로 표시될 수 있습니다. 캐시 가능한 응답은 클라이언트 측에서 캐시될 수 있으며, 이로 인해 성능이 향상될 수 있습니다.

계층적 구조(Layered System): REST는 계층화 된 시스템을 지원합니다. 클라이언트는 최종 서버와 직접 통신하는지, 중간 계층을 통해 통신하는지 알 필요가 없습니다.

REST API는 웹 서비스와 클라이언트 간의 통신을 단순화하고, 표준화된 방식으로 자원을 조작할 수 있게 해주며, 이러한 특징 때문에 많은 웹 애플리케이션 및 서비스에서 선호되는 방식으로 사용됩니다.

GraphQL 과의 차이

1. 데이터 요청 방식:

REST API: 각 리소스 혹은 데이터 타입마다 고유한 엔드포인트가 있습니다. 원하는 데이터를 얻기 위해 여러 개의 엔드포인트를 차례대로 호출해야 할 수 있습니다.

예시:
사용자 정보를 가져오는 엔드포인트(/users/{id})와 해당 사용자의 게시물을 가져오는 엔드포인트(/users/{id}/posts)가 있을 때, 특정 사용자와 그의 모든 게시물을 가져오려면 두 개의 별도의 API 호출이 필요합니다.

GraphQL: 단일 엔드포인트에서 쿼리를 사용하여 원하는 모든 데이터를 한 번의 요청으로 가져올 수 있습니다. 클라이언트는 필요한 데이터의 구조를 명시하고, 서버는 그에 따라 응답합니다.

예시:
사용자와 그의 모든 게시물을 가져오려면 다음과 같은 쿼리를 사용할 수 있습니다.

2. 데이터의 오버/언더 페칭:

REST API: 엔드포인트는 고정된 데이터 구조를 반환합니다. 때로는 필요한 정보만을 가져오지 못하거나 (언더 페칭) 또는 필요 이상의 정보를 가져올 수 있습니다 (오버 페칭).

예시:
/users/{id} 엔드포인트는 이름, 이메일, 주소 등 사용자의 모든 정보를 반환할 수 있습니다. 만약 이름만 필요한 경우에도 이 모든 데이터를 받게 됩니다.

GraphQL: 클라이언트는 정확히 필요한 데이터만 요청할 수 있습니다. 이로 인해 오버/언더 페칭 문제를 피할 수 있습니다.

예시:
사용자의 이름만 필요한 경우 다음과 같이 요청할 수 있습니다.

{
  user(id: "123") {
    name
  }
}

3. 버전 관리와 진화:

REST API: API의 변경 사항을 관리하기 위해 버전 관리가 필요할 수 있습니다 (예: /v1/users, /v2/users).
GraphQL: 새로운 필드를 추가하거나 기존 필드를 제거하는 것이 간단합니다. 클라이언트는 사용하지 않는 필드를 요청하지 않기 때문에 이전 클라이언트와의 호환성을 유지하는 것이 쉽습니다.

[TIL] 프론트엔드 성능 최적화

jay-dev — Sun, 1 Oct 2023 22:21:23 +0900

성능 최적화 방법:
코드 스플리팅: 큰 자바스크립트 번들을 작은 청크로 분리하여 필요한 부분만 로드합니다

이미지 최적화: 이미지를 압축하거나 lazy loading을 사용하여 로딩 시간을 줄입니다

CDN 사용: 콘텐츠를 빠르게 전달하기 위해 콘텐츠 전송 네트워크(CDN)를 사용합니다

캐싱 전략: 브라우저 캐싱을 활용하여 재방문 시에 빠르게 페이지를 로드합니다

비동기 로딩: async나 defer 속성을 사용하여 비동기 스크립트 로딩을 가능하게 합니다

서버 사이드 렌더링 (SSR) 또는 사전 렌더링: 초기 페이지 로드 속도를 향상시키기 위해 사용합니다

웹 워커 사용: 복잡한 연산을 백그라운드에서 처리하여 메인 스레드를 블로킹하지 않습니다

프로젝트에서 활용한 경험:
이미지 최적화: imageCompression으로 압축하고 리사이징을 적용했습니다

CDN 사용: AWS CloudFront를 사용하여 전세계적으로 빠르게 콘텐츠를 제공하였습니다
이를 통해 페이지 로드 시간이 대폭 줄었습니다

비동기 로딩: async await을 활용하여 Kakao Maps API와 같은 외부 라이브러리를 비동기로 로드하여 초기 페이지 렌더링 시간을 최적화했습니다

이러한 방법들을 통해 프로젝트의 프론트엔드 성능을 신경 쓰면서 개발을 진행했습니다
최적화를 통해 페이지 로드 시간이 줄어들고, 사용자 경험이 향상되는 것을 명확하게 느낄 수 있었습니다

[TIL] useEffect

jay-dev — Sat, 30 Sep 2023 23:20:27 +0900

useEffect는 react hooks중 하나로 side effect를 수행하는 데 사용됩니다

1. 컴포넌트가 처음 렌더링되면, useEffect 내부 함수가 실행되고
2. 의존성 배열의 값이 바뀔 때 마다 useEffect 내부 함수가 실행됩니다
만약 빈배열이라면 컴포넌트가 마운트될 때 한번만 실행됩니다

매개변수

useEffect는 두 개의 매개변수를 받을 수 있습니다.

Effect 함수: 이 함수는 컴포넌트가 렌더링된 후에 실행됩니다. 이 함수에서는 데이터 fetching, 구독 설정, 수동으로 변경되는 DOM 등 side effect를 수행할 수 있습니다.

Dependency 배열: Dependency 배열은 effect 함수가 의존하는 state와 props를 명시합니다. 배열 내부의 어떤 값이 변하면, effect 함수는 다시 실행됩니다. 빈 배열을 전달하면, effect는 컴포넌트가 mount될 때 한 번만 실행됩니다.

Cleanup 함수
useEffect 내부에서 반환하는 함수를 Cleanup 함수라고 합니다. 이 함수는 컴포넌트가 unmount될 때, 또는 dependency가 변경될 때 호출되며, 이를 통해 구독 해지, 이벤트 리스너 제거 등의 cleanup 작업을 수행할 수 있습니다.

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // count가 변경될 때마다 이 effect가 실행됩니다.
    document.title = `Count: ${count}`;

    return () => {
      // cleanup: count가 변경되기 전에 실행됩니다.
      console.log('Cleaning up!');
    };
  }, [count]); // Dependency 배열에 count를 지정했습니다.

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}