문제 설명n개의 음이 아닌 정수들이 있습니다. 이 정수들을 순서를 바꾸지 않고 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다. 사용할 수 있는 숫자가 담긴 배열 numbers, 타겟 넘버 target이 매개변수로 주어질 때 숫자를 적절히 더하고 빼서 타겟 넘버를 만드는 방법의 수를 return 하도록 solution 함수를 작성해주세요. 제한 조건주어지는 숫자의 개수는 2개 이상 20개 이하입니다.각 숫자는 1 이상 50 이하인 자연수입니다.타겟 넘버는 1 이상 1000 이하인 자연수입니다.입출력 예numberstargetreturn[1,1,1,1,1]35[4,1,2,1]42 이 문제는 DFS (깊이우선..

무려 수료한지 반년이 지나고 쓰는 후기 및 회고입니다 ^__^혹시나 멋사를 할까말까 고민하는 사람들이 있다면 이 글을 보고 도움을 얻으셨으면 좋겠어요 !1년간 화려하게 불태웠던 멋쟁이사자처럼 12기 활동 및 운영진 회고를 낋여보겠습니다 ~! 😮 엥 내가 왜 팀장이지...? 11기 아기사자로 활동했을 때가 엊그제 같은데 어마무시하게 레벨업을 하여 프론트엔드 팀장을 맡게 되었다!사실 12기때는 백엔드 아기사자로 활동해볼까 잠깐 고민했었는데, 친한 동아리원들과 함께 팀을 꾸려나가는 것도 좋은 경험이 될 것 같았고 많이 배우고 성장할 수 있을 거라는 생각이 들어 운영진을 하게 되었다. 처음 멋사 들어왔을 때만 해도 HTML, CSS에 대해서 전혀 몰랐던 완전 초보였는데, 어느새 React를 넘어서 Next..

✨ 성능 최적화를 해야하는 이유React 앱을 만들다보면 성능이 중요한 문제가 될 때가 있다. 리액트에서는 컴포넌트의 상태가 변경될 때마다 렌더링 과정을 거치게 되는데, 이 과정 중에 변화가 없는 컴포넌트까지 불필요하게 렌더링되는 경우가 존재한다. 그리고 복잡한 계산이나 데이터 처리는 애플리케이션의 반응 속도를 늦출 수 있어 사용자 경험을 저해할 수 있다. 따라서 이를 위해서 useMemo, useCallback, React.memo라는 기능을 제공하고 있다. 세 가지가 어떻게 다른지 어떤 방식으로 쓰이는지 알아보자! 📝 useMemouseMemo는 리액트에서 컴포넌트의 성능을 최적화하는데 사용되는 훅이다. 여기서 memo는 memoization을 뜻하는데 "메모리에 넣기"라는 의미이며 컴퓨터가 동일한..

자바스크립트는 싱글스레드이기 때문에 한번에 하나의 작업만 수행할 수 있고, 이를 해결하기 위해 비동기가 생겨났다.비동기란 특정 작업의 완료를 기다리지 않고 다른 작업을 동시에 수행하도록 하는 방식을 뜻한다.자바스크립트에서 비동기를 처리하기 위해 콜백 함수, Promise, async/await를 쓰는데 각각의 방식이 어떻게 어떤 방식으로 쓰이는지 , 그리고 어떤 문제점이 존재하는지 다뤄보고자 한다 ! 1️⃣ 콜백함수콜백함수란 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 의미한다.콜백함수로 비동기 프로그래밍을 짤 수 있지만, 모든 콜백 함수가 비동기이지는 않다.console.log('작업 시작');setTimeout(() => { console.log('2초 후에..

자바스크립트에서는 변수를 선언할 때 var, let, const 이렇게 세가지 키워드를 이용해 선언할 수 있다. ES5까지 변수를 선언할 수 있는 유일한 방법은 var만 있었는데 ES6에서 var의 문제점에 대응하기 위해서 let과 const가 생겨났다.이 세가지가 선언, 할당, 범위에서 차이가 나는데 헷갈리지 않게 자세하게 정리해보고자 한다 ! 1️⃣ 중복 선언var : 중복 선언이 가능하다var name = "안녕"console.log(name) //안녕var name = "하이"console.log(name) //하이 var은 중복해서 선언이 가능하다. 이 경우에, 마지막에 할당된 값이 변수에 저장된다.변수를 유연하게 사용할 수 있다는 장점이 있지만, 기존에 선언해둔 변수의 존재를 까먹고 값을 재할..

자바스크립트가 비동기 처리가 가능하다는 사실은 당연히 알고 있었지만어떤 원칙으로 어떤 구성으로 돌아가는지 제대로 모르고 있는 것 같아서 정리해보고자 한다 ^__^자바스크립트는 싱글 스레드 언어인데 어떻게 동시에 일을 진행시키는지 알아보자.📚 동기(Synchronous)와 비동기(Asynchronous)1. 동기일반적으로 각 함수와 코드들이 위에서 아래로 차례로 동작하는 방식이 동기이다. 즉, 이전 작업이 완료되어야 다음 작업을 수행할 수 있다. 동기 방식은 간단하고 직관적이지만, 작업이 오래 걸리거나 응답이 늦어지는 경우에는 전체적인 성능과 사용자 경험에 영향이 간다. 2. 비동기특정 작업의 완료를 기다리지 않고 다른 작업을 동시에 수행하도록 하는 방식이 비동기이다. 비동기는 메인 스레드가 작업을 다..

let과 const는 호이스팅 시에 변수는 선언되고 초기화는 되지 않아 ReferenceError가 발생하며, TDZ에 빠지게 된다.TDZ에 빠진다는 것은 알고 있었지만 정확하게 TDZ가 뭔지는 알지 못해서 한번 제대로 알아보고자 한다. TDZ에 대해서 이해하기 위해 변수 선언의 3단계를 먼저 알아보자. 📌 변수 선언의 3단계 자바스크립트에서 변수는 기본적으로 다음 3단계를 거쳐서 생성이 된다. 1) 선언 단계 (Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록한다.-> 이 변수 객체는 스코프가 참조하는 대상이 된다.2) 초기화 단계 (Initialization phase) : 실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만든다.-> 이 단계에서 ..

나는 Next.js를 비교적 최근에 접해봤다. 그래서 자연스럽게 App Router만 사용해봤고, Pages Router는 사용해본 적이 없었다. 기술 면접을 준비하면서 두 라우터 방식의 차이와 각각의 장단점을 명확히 알고, 왜 내가 App Router를 선택했는지 설명할 수 있어야 한다는 필요성을 느끼게 되었다. 그래서 이번 글에서는 Next.js의 Pages Router와 App Router의 차이점을 정리해보고, 어떨 때 사용하는 것이 좋은지 적어보고자 한다.📄 Next.js의 Page Router (Next.js 13 이전까지의 기본 방식)Pages Router는 Next.js의 전통적인 라우팅 시스템으로,pages 디렉토리의 파일 구조가 곧 애플리케이션의 라우트 구조가 되는 파일 기반 라우팅을..

✅ 실행 컨텍스트 ( Execution Context )실행 컨텍스트란, 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 객체를 구성하고 이를 콜 스택에 쌓아 올렸다가 가장 위에 쌓여있는 컨텍스트와 관련된 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 스택스택은 출입구가 하나인 LIFO ( Last in First Out ) 구조이다.스택에 a,b,c,d를 순서대로 저장하면 꺼낼 때 d,c,b,a 순서대로 나온다. 실행 컨텍스트 예시// --------------------------- (1)var a = 1;function outer() { function inner() { console.log(a); // ..

코드잇 스프린트가 끝나고, 취업을 위해 코드잇에서 하는 스터디에 들어가게 되었다.그 중에서도 내가 신청한 건 바로 기술 면접 !! 아무래도 기술 면접은 혼자 공부하는 것보다 같이 공부하는게 필요할 것 같아서 보자마자 바로 신청을 하였다.일단 1주차는 위클리페이퍼 기반으로 질의응답을 하고 스터디원은 4명이라 2:2로 진행을 하고 있다. 저번에는 내가 면접관으로 2분께 질문을 드렸고, 이번에는 내가 지원자가 되어서 답변을 하는 시간을 가졌다. 근데 이번에 같이 지원자 파트를 맡으신 분이 결석을 하여서 혼자 질문을 받게 되었다...! (오히려 좋아) 면접을 공부할 때 제일 중요한건 끝나고 복기 인것 같다 !! 대부분의 답변에 잘 답하였지만, 꼬리 질문에서는 모르는 부분도 있어서 모범 답안을 채워서 정리해보았..