jayspod

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-fami..

프로그래머스 문제링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Try / Solution function solution(food) { let answer = ""; for (let i = 1; i 0을 중심으로 양쪽에 같은 음식의 갯수가 놓여야 하니 2로 나누고 버림 만들어진 문자..

프로그래머스 문제링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. 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로 나누었을 때 올림한 값이 같을 때의 라운드 값을 출력한다

프로그래머스 문제링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. 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 limit){ left++; } else { left++; right--; } answer++; } if(left ==..

프로그래머스 문제링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. 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을 빼준 후 다시 나눈다

프로그래머스 문제링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Try / Solution function solution(brown, yellow) { let area= brown + yellow; for (let y = 3; y 세로는 가로보다 같거나 작으니 가로까지 반복 가로 = 넓이 / 세로 (x-2) * (y-2) === yellow 라면 그 x,y 값 출력

프로그래머스 문제링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. 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) =..

REST API REST (Representational State Transfer) API는 웹 서비스와 클라이언트 간에 정보를 교환하기 위한 아키텍처 스타일 및 접근 방식입니다. REST는 웹의 기본 구조를 활용하여 자원에 대한 CRUD (Create, Read, Update, Delete) 작업을 수행하게 됩니다. 자원(Resource) 지향적: REST는 웹 상의 모든 것을 자원으로 간주합니다. 각 자원은 고유한 URI (Uniform Resource Identifier)를 가지며, 이 URI를 통해 해당 자원에 접근할 수 있습니다. 무상태성(Statelessness): 각 요청은 서버에 모든 필요한 정보를 포함해야 합니다. 서버는 클라이언트의 상태 정보를 저장하지 않으며, 이로 인해 각 요청은 ..

성능 최적화 방법: 코드 스플리팅: 큰 자바스크립트 번들을 작은 청크로 분리하여 필요한 부분만 로드합니다 이미지 최적화: 이미지를 압축하거나 lazy loading을 사용하여 로딩 시간을 줄입니다 CDN 사용: 콘텐츠를 빠르게 전달하기 위해 콘텐츠 전송 네트워크(CDN)를 사용합니다 캐싱 전략: 브라우저 캐싱을 활용하여 재방문 시에 빠르게 페이지를 로드합니다 비동기 로딩: async나 defer 속성을 사용하여 비동기 스크립트 로딩을 가능하게 합니다 서버 사이드 렌더링 (SSR) 또는 사전 렌더링: 초기 페이지 로드 속도를 향상시키기 위해 사용합니다 웹 워커 사용: 복잡한 연산을 백그라운드에서 처리하여 메인 스레드를 블로킹하지 않습니다 프로젝트에서 활용한 경험: 이미지 최적화: imageCompressi..

useEffect는 react hooks중 하나로 side effect를 수행하는 데 사용됩니다 1. 컴포넌트가 처음 렌더링되면, useEffect 내부 함수가 실행되고 2. 의존성 배열의 값이 바뀔 때 마다 useEffect 내부 함수가 실행됩니다 만약 빈배열이라면 컴포넌트가 마운트될 때 한번만 실행됩니다 매개변수 useEffect는 두 개의 매개변수를 받을 수 있습니다. Effect 함수: 이 함수는 컴포넌트가 렌더링된 후에 실행됩니다. 이 함수에서는 데이터 fetching, 구독 설정, 수동으로 변경되는 DOM 등 side effect를 수행할 수 있습니다. Dependency 배열: Dependency 배열은 effect 함수가 의존하는 state와 props를 명시합니다. 배열 내부의 어떤 값이..