ALL

[알고리즘 JS] 프린터 (프로그래머스 Lv.2)

문제 https://school.programmers.co.kr/learn/courses/30/lessons/42587 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 function solution(priorities, location) { let count = 1; let queue = priorities.slice(); while (true) { const max = Math.max(...queue); const now = queue.shift(); // 반복 // 1. now 가 max와 같은 경우 if (now === max) { // loc..

[알고리즘 JS] n^2 배열 자르기 (프로그래머스 Lv.2)

문제 https://school.programmers.co.kr/learn/courses/30/lessons/87390 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 function solution(n, left, right) { let answer = []; for (let i = left; i

[TIL] 2023-0126 : 새 프로젝트 / 딥다이브 스터디 / 과제

🐈Facts 새로운 프로젝트를 시작했다. 악보를 사고 팔 수 있는 커머스 사이트이다. 오늘은 디자인 작업을 했다. 알루 주간모임을 진행했다. 오늘은 3명이서 도란도란 이야기했다. 딥다이브 1회독 스터디를 참여중인데, 부랴부랴 읽고 오늘 모임에도 참석했다. 월요일부터 진행했던 사전 과제를 제출했다. 첫 과제여서 잘하고 싶었는데, 아쉬운 점도 많지만 어쨌든 제출했다. 🐈Feelings 집중해서 작업할 수 있는 프로젝트를 시작한게 기쁘다. 처음 접하는 기술 스택이 몇 개 있는데, 부딪혀보면서 많이 공부할 수 있을 것 같다. 다만 취업 준비도 빡세게 해야하는데 프로젝트만 하다가 시간이 다 가버리는건 아닐지 걱정이 되기도 한다. 오늘 딥다이브 모임에서는.. 딱 내가 이상하게 적어둔 부분을 짚어서 질문을 하셔서 좀..

ES6의 모듈에 대해서.

이번에 바닐라 JS 로 채용 과제를 진행하면서, 스크립트 파일의 엔트리포인트를 설정하기 위해 경로를 지정하며 type의 module 이라는 속성을 사용했습니다. module 속성값이 무엇인지 잘 모르고 썼는데, 자바스크립트 딥다이브를 읽다보니 해당 부분에 대한 내용이 나와 정리해보려고 합니다. 모듈이란 애플리케이션의 크기가 커질 때 이를 관심사별로 여러개의 파일로 분류하게 됩니다. 이 때 분리된 각 파일을 module 이라고 합니다. 이렇게 모듈화하여 유지보수성을 높이고 보다 체계적으로 코드를 관리할 수 있다는 장점이 있습니다. 모듈을 어떻게 쓰나요? 자바스크립트에서 모듈을 내보내고, 가져오는 문법은 단순합니다. 저희가 숨쉬듯 사용하는(?) import 와 export 키워드를 사용하면, 클래스나, 함수..

[TIL] 2023-0117 : 순수 함수 / 4주차 과제 진행과정 -1 / 캡처링, 버블링

🐈오늘 공부한 것 ✔️순수 함수란? 알고 있는 것 순수 함수란 사이드 이펙트를 일으키지 않는 함수를 의미한다. 즉 동일한 input 에 대해 동일한 output을 리턴한다. 사이드 이펙트란 부수 효과라고도 불리며 함수가 함수 외부의 상태를 변경하는 것을 의미한다. 순수 함수를 지향해야 하는 이유는 사이드 이펙트가 일어났을 때 어떤 동작이 일어날지 예측할 수 없기 때문이다. 그래서 리액트의 컴포넌트도 순수 함수의 형태를 유지한다. 리액트의 컴포넌트는 왜 순수 함수처럼 동작해야 하는가? 리액트의 컴포넌트가 순수 함수처럼 동작해야한다는 의미는, 컴포넌트로 주입된 props 를 읽기전용으로 다룬다는 뜻이다. 읽기 전용으로 다룬다는 의미는 props에 직접 접근해서 값을 변경하지 않고, state인 경우 setS..

[JavaScript] 이벤트 위임, 이벤트 전파, e.target & e.currentTarget 차이

❓이벤트 위임이란 개별 요소 각각에 이벤트 리스너를 생성하는 대신에, 개별 요소의 상위 요소에 이벤트 리스너를 등록한 뒤 조건문을 통해 하위 요소 중 어떤 요소에 이벤트가 발생했는지 특정짓는 것이다. 어떤 상황에서 유용한지 간단하게 알아보자. 아래와 같은 메뉴가 있다고 할 때, 메뉴 리스트에 등록된 각 메뉴 아메리카노, 프라푸치노에 클릭 이벤트를 달아주려고 한다. 위와 같은 메뉴가 있다고 할 때, 메뉴 리스트에 등록된 각 메뉴 아메리카노, 프라푸치노에 클릭 이벤트를 바인딩 하려고 한다. 각각의 자식 노드에 이벤트를 바인딩하려면 아래와 같이 반복문을 돌리거나 혹은 DOM 요소를 찾아 등록해주어야한다. // #espresso-menu-list 라는 상위 엘리먼트의 각 자식 노드에 이벤트 리스너를 등록한다. ..

[Redux] redux-toolkit 폴더 구조 / 비동기처리 - createAsyncThunk 사용법

✔️ Redux folder structure https://redux.js.org/style-guide/#structure-files-as-feature-folders-with-single-file-logic 리덕스 공식문서에서 추천하는 폴더구조가 있어서 이 방법을 참고해 셋팅을 해보았다. features 라는 폴더에 기능단위로 컴포넌트와 로직을 담당하는 Slice 가 같이 위치한다. 지난 프로젝트에서 디렉토리 구조를 신경쓰지 않고 진행했다가 몽땅 갈아엎는 대참사를 경험한 뒤로 초기셋팅에서 폴더 구조에 신경을 많이 쓰게되는 것 같다. 정해진 정답이 딱 있지 않아서 가능한 많이 참고하고 고민하고 적용해보는 시도가 필요할 것 같다. 이러한 구조에서는 동작을 담당하는 Slice 에 많이 의존하게 되는 것 같..

[알고리즘 JS] 신고 결과 받기 (프로그래머스 Lv.1)

문제 https://school.programmers.co.kr/learn/courses/30/lessons/92334 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 function solution(id_list, report, k) { const answer = []; const dedupedReport = [...new Set(report)]; const reportedId = {}; const reportedCount = new Map(); // 전체 유저 id로 키값 지정 for (let id of id_list) { reportedId[id..

[알고리즘 JS] 햄버거 만들기 (프로그래머스 Lv.1)

문제 https://school.programmers.co.kr/learn/courses/30/lessons/133502 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 숫자 배열에서 1,2,3,1 의 연속된 수가 나올 수 있는 횟수를 구하여야함! 풀이(정답) function solution(ingredient) { let count = 0; let stack = []; for (let item of ingredient) { stack.push(item); if (stack.length >= 4) { let burger = stack.slice(-4).jo..

[WIL] 2023 - 01 W2

😸주간 요약 더 밀도있게 살지 못한 것이 아쉬운 한 주. 늘 파이팅 넘치지는 못했지만 주어진 일은 완수하며 살았다. 💛Facts ✔️취준 알고리즘 : 1일 1알고리즘 실천이 잘 되지 않았음. 다음 주 스터디 문제도 몰아서 풀게 될 가능성이 높다... ;ㅅ; 면접/이론 : 1일 1면접 질문 답변 준비. 준비하는 답변 갯수를 늘리고 이론 공부하는 느낌으로 더 밀도있게 팠으면 좋겠다. 포트폴리오 : 다 완성하지 못하고 스터디도 중간 하차. ppt는 우선순위가 조금 낮은 것 같고 사이트를 만들어야겠다. 이력서 : 프로젝트 부분 수정하여 일단 완성된 상태. 몇 군데 서류도 지원해보고 있으나 적극적으로 지원하지는 않는 상태. 다음주부터는 본격적인 취준에 들어갈 예정이므로 더 적극성이 필요함. 프로젝트 : 과제 구현..