jayspod

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

JavaScript는 단일 스레드(single-threaded) 언어이며, 이는 JavaScript가 한 번에 하나의 작업만 처리할 수 있음을 의미합니다. 그러나, JavaScript 환경에서는 많은 비동기 작업들이 발생합니다. 예를 들어, 사용자의 입력을 기다리거나, 네트워크 요청의 완료를 기다릴 때입니다. 이러한 비동기 작업들을 관리하고 실행 순서를 조정하는 메커니즘을 Event Loop라고 합니다. Event Loop의 동작 Event Loop는 Call Stack, Callback Queue(Task Queue), 그리고 Web APIs 등으로 구성되며, 이들 간의 상호작용을 통해 비동기 작업을 처리합니다. Call Stack: JavaScript는 Call Stack을 사용하여 코드를 실행합니다..

Promise Promise 객체는 JavaScript에서 비동기 연산이 완료될 때까지 기다리지 않고, 그 연산이 완료된 후에 어떤 동작을 실행할지를 정의할 수 있게 해주는 객체입니다. Promise 객체는 비동기 작업의 최종 완료(또는 실패)와 그 결과 값을 나타냅니다. 상태 Promise 객체는 3가지 상태를 가질 수 있습니다. Pending(대기 중): 초기 상태, 이행 또는 거부되지 않음. Fulfilled(이행): 연산이 성공적으로 완료됨. Rejected(거부): 연산이 실패함. 메서드 Promise 객체는 주로 다음과 같은 메서드를 사용합니다. then(): Promise가 이행될 때 호출할 함수를 등록합니다. catch(): Promise가 거부될 때 호출할 함수를 등록합니다. finall..

프로젝트 강점 정리 Refresh Token 적용 AWS CloudFront 배포 github-action을 활용해 배포 자동화 구축 Cloudinary로 이미지 등의 asset 관리 ReactQuery InvalidateQueries를 활용해 무효화 적용(필요한 곳에 항상 최신 상태 유지) FormData로 서버에 이미지 전송 debounce를 이용한 최적화된 검색기능 구현 infinity-query를 이용한 인피니트 스크롤 react-hook-form으로 효율적으로 form을 관리 react-toastify로 토스트 알람 구현 Styled-components에서 제공하는 Global Style을 활용해 global theme, media query 구현 범용적으로 사용되는 Button, modal 등..

컴파운드 컴포넌트 패턴 간단하게 말하면 내부 상태를 공유하는 컴포넌트 코드 import { useState, useContext, createContext } from 'react'; const ToggleContext = createContext(); const Toggle = ({ children }) => { const [on, setOn] = useState(false); const toggle = () => setOn(!on); return {children}; }; const On = ({ children }) => { const { on } = useContext(ToggleContext); return on ? children : null; }; const Off = ({ children ..

중간 점검 서비스 아키텍쳐 기술적 의사결정 Github Actions Github를 사용하기 때문에 효율적으로 관리할 수 있다. 초기 비용이 없다. CodeDeploy codedeploy는 AWS의 다양한 서비스와 연동되어 신속한 자동배포가 가능하다. 개발과 배포 속도가 높아져 안정적인 개발 환경을 유지할 수 있게한다. MySQL 사용하기 쉽고 오래되어서 버그가 적다. 안전하고 안정적인 트랜잭션 처리와 데이터 저장이 보장된다. S3 데이터 양에 따라 자동으로 확장되고 용량이 무제한이다. 데이터를 객체 형태로 저장하고 관리하기 때문에 서버의 부하를 줄이고 내구성이 좋다. recoil 전역상태관리할 복잡한 데이터가 많지 않아 리덕스보다 상대적으로 가벼운 recoil 선택 보일러 플레이트 코드를 줄일수 있음 ..