코딩

프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr문제 설명머쓱이는 행운의 숫자 7을 가장 좋아합니다. 정수 배열 array가 매개변수로 주어질 때, 7이 총 몇 개 있는지 return 하도록 solution 함수를 완성해보세요.입출력 예arrayresult[7,77,17]4 function solution(array) { let result = 0; const digits = String(array).split(""); digits.forEach((element) => { if(element === "7") { result += 1; } }) return..

1. 소셜 로그인, 도대체 뭐지?처음에는 단순히 api로 구현되어 있을테니 간단한 작업으로 알았습니다. 하지만 실제로 구현해보니 OAuth2, 토큰, 리디렉션, CORS, 프론트-백 분리 구조 등 복잡한 요소들이 얽혀 있었습니다🥹 2. 기존 로그인 방식과의 차이점인증 정보ID / PW 직접 입력외부 서비스 로그인토큰 처리직접 발급/검증 구현OAuth2 기반 토큰 전달장점커스터마이징 자유빠른 가입, 사용자 접근성단점유지 보수/보안 직접 관리OAuth 플로우 이해 필요3. 소셜 로그인 구조 이해하기 1) 일반 로그인 흐름 1. 프론트엔드 → 백엔드사용자가 아이디와 비밀번호를 입력하면, 프론트가 그걸 백엔드에 전달합니다. 2. 백엔드 → 프론트엔드백엔드는 입력한 아이디/비밀번호가 맞는지 확인하고,맞으면..

useCallback이란? : 컴포넌트가 리렌더링될 때마다 새로 함수를 만들지 않고, 이전에 생성한 동일한 함수 인스턴스를 재사용할 수 있게 해줍니다 memoizedCallback은 의존성 배열 [a, b]에 명시된 값이 바뀔 때만 새로 생성됩니다. a와 b가 변경되지 않으면, 이전에 만들어진 함수 인스턴스를 계속 재사용합니다const memoizedCallback = useCallback( () => { doComething(a,b); }, [a,b],); useCallback의 두 번째 인자인 의존성 배열(dependency array)에 포함된 값이 변경될 때만 새로운 콜백 함수가 생성됩니다const memoizedCallback = useCallback( () => { d..

타입스크립트란?자바스크립트를 기반으로 한 강력한 정적 타입 지정 언어입니다. 이는 자바스크립트의 모든 기능을 포함하면서도, 추가적인 타입 시스템과 도구를 제공하여 코드의 안정성과 생산성을 높이는 데 도움을 줍니다. 정적 타입 검사 컴파일 단계에서 코드의 타입 오류를 발견할 수 있어 런타임 오류를 줄입니다.let age: number = 25;age = "twenty-five"; // 오류 발생: 문자열을 숫자에 할당할 수 없음 자동 완성 및 코드 탐색타입 정보를 기반으로 IDE에서 자동 완성과 코드 탐색 기능을 제공합니다.const user = { name: "Alice", age: 30 };console.log(user.name); // 자동 완성 지원 자바스크립트로 컴파일 타입스크립트는 브라우저나 N..

Redux 애플리케이션의 상태(state)를 하나의 중앙 저장소(store)에 관리합니다. 이를 통해 상태를 보다 체계적으로 관리하고, 애플리케이션의 동작을 예측 가능하게 만듭니다. 주요 특징 1) 단일 저장소: 애플리케이션의 모든 상태는 하나의 저장소 안에 있는 객체 트리에 저장됩니다. 2) 불변성: 상태는 직접 수정되지 않고, 새로운 상태를 생성하여 변경됩니다. 3) 액션(Action): 상태를 변경하기 위해 "무엇이 일어날지"를 서술하는 객체를 보냅니다. 4) 리듀서(Reducer): 액션을 받아 상태 트리를 어떻게 변경할지 명시하는 순수 함수입니다 개념1) Store (저장소) 애플리케이션의 상태를 저장하는 객체입니다. createStore() 함수를 사용하여 생성합니다.imp..

컴포넌트는 자신의 state가 변경되거나 부모에게서 받는 props가 변경되었을 때마다 다시 랜더링됩니다.심지어 자식 컴포넌트에서 렌더링 최적화를 위한 별도의 코드를 추가하지 않으면, 부모에데거 받는 props가 변경되지 않았더라도 다시 리렌더링 됩니다. 함수 컴포넌트는 그냥 함수입니다. 함수컴포넌트가 헨더링 된다는 것은 부모컴포넌트가 그 함수를 호출하여 실행되는 것입니다.함수가 실행될 때마다 내부에 선언되어 있던 표현식들도 매번 다시 계산이 됩니다. useMemo란? 복잡한 계산(예: 큰 배열 정렬, 데이터 변환)의 결과를 캐싱합니다. 동일한 입력값에 대해 동일한 출력을 반환하는 순수 함수에 적합합니다. info.js아래코드는 색값만 변경되어도 colorKor과 movieGenreKor이 실행되고..

Query란? Query는 비동기 데이터 소스에 대한 선언적 의존성을 의미하며, React Query에서 데이터를 가져오고 관리하기 위해 사용됩니다. 각 Query는 고유한 키(queryKey)와 데이터를 가져오는 함수(queryFn)를 필요로 합니다. 핵심 역할 데이터를 서버에서 가져오고(fetching)캐싱하여 재사용하며데이터의 상태를 관리합니다(예: 로딩, 성공, 실패) useQuery 사용법queryKey: 쿼리를 고유하게 식별하는 키 (문자열 또는 배열 형태). queryFn: 데이터를 가져오는 비동기 함수. api.jsexport const getUser = () => { return axios.get("/user").then((res) => res.data);}; Edit.js리액트 쿼리와..

context 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.전역에서 사용할 수 있는 함수를 만들어 줍니다.  Context API란?React의 Context API는 컴포넌트 트리에서 데이터를 전역적으로 공유할 수 있도록 지원합니다. 이를 사용하면 props 드릴링(부모에서 자식으로 데이터를 전달하는 과정)을 제거하고, 애플리케이션의 상태를 효율적으로 관리할 수 있습니다. React.createContextconst MyContext = React.createContext(defaultValue);//defaultValue: Context를 구독하는 컴포넌트가 트리 상에서 적절한 Provider를 찾지 못했을 때 사용되는 기본값입니다. createCon..

비동기(Asynchronous) - 일반적으로 프로그램 코드는 한 번에 한 가지씩 순차적으로 진행합니다. 만약에 어떤 함수의 결과가 다른 함수에 영향을 받는 다면, 그 함수는 다른 함수가 끝나고 값을 산출할 떄까지 기다려야 합니다.setTimeout(() => { console.log("첫 번째 메시지");}, 5000);setTimeout(() => { console.log("두 번째 메시지");}, 3000);setTimeout(() => { console.log("세 번째 메시지");}, 1000);// 콘솔 출력:// 세 번째 메시지// 두 번째 메시지// 첫 번째 메시지  Promise비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과값을 나타냅니다.프로미스가 생성된 시점에는 알려지지 ..

싱글 페이지 애플리케이션(SPA: Single-page application)   SPA는 하나의 HTML 페이지와 애플리케이션 실행에 필요한 모든 자산(자바스크립트, CSS 등)을 한 번에 로드하여 동작하는 웹 애플리케이션입니다. 이후 사용자의 상호작용에 따라 페이지를 다시 로드하지 않고, 현재 페이지를 동적으로 업데이트합니다.    => 새로운 페이지 요청 없이 DOM을 동적으로 변경하여 콘텐츠를 업데이트.        초기 로딩 속도가 느릴 수 있지만 이후 사용자 경험이 향상됨.         라우팅을 통해 URL에 따라 적절한 화면을 제공. 클라이언트 사이드 렌더링(CSR: Client-Side Rendering)   CSR은 클라이언트 측에서 데이터와 자바스크립트를 사용해 화면을 렌더링하는 방식..