자료구조, 알고리즘 공부를 슬슬 해야겠다는 생각이 들어서 트리 구조에 대해 공부하다가 JS로 구현된 코드를 만났다. 그런데 문득 👈 🔥 이 부분이 궁금해졌다. > Node 라는 Class 의 정의가 다 끝나지 않았는데 어떻게 new Node 라고 접근이 가능한 거지..? 클래스라서 가능한 걸까? 궁금해서 아주 간단한 코드를 작성해보았다. 여기서도 a 함수의 정의가 끝나지 않았는데(?) console.log(a) 에서 에러 없이 [Function: a] 라고 출력이 된다. 생각해보면 재귀 함수를 쓸 때도 별 생각 없이 이런 식으로 코드를 작성했었는데, 어떤 원리로 동작하는 것인지 실행 컨텍스트 라는 키워드를 통해 알아보자. 예제 코드 위 코드에서는 > 1. x 라는 변수에 10을 할당한다. 인자를 받아 10을 곱하는 timesTen 함수를 선언한다. x를 파라미터로 전달하여 `timesTen

개발 기간 : 2021.04.19 ~ 2021.04.30 2주동안 프론트 3명이 모여 (지금은 사라진 서비스인) 배민찬 사이트 클론 프로젝트를 진행했다. 개인적으로는 백엔드 작업의 큰 흐름(API 설계, DB..? 이런거)을 파악해보고 싶었는데 화면 구현하는 것은 주어진 mockAPI로도 충분히 가능하기도 했고, 프론트 쪽 하다보니 백엔드에 크게 신경을 못써서 express 설치하고 OAuth만 구현해보았다. 리액트로 프로젝트를 한 지 어언 한 달이 되었지만 아직도 리액트를 잘 모르겠어서 복습할 겸 글을 남겨본다. 🤓📝 주요 기능 Tab UI Carousel Modal GitHub 로그인 0. 컴포넌트 트리 아델라가 너무 잘 그려줬다!!! 대박 🤭 ![](h

상품을 클릭하면 모달 창으로 해당 상품의 상세 페이지가 뜨는 기능을 구현 중이다. 리뷰어 분의 피드백 중에 React Portals를 활용해보라는 내용이 있어서 Portals에 대해 알아보고 바꿔보려고 한다. 현재 컴포넌트 구조 왜 Modal을 카드의 자식으로 넣지 않았나? 우리 팀이 Modal을 구현하기 전에, 먼저 구현해 본 펭도리가 우리 팀을 찾아와서 질문했다. 펭돌 팀이 짠 구조가 완전하게 기억은 안 나는데 대략 어떤 것이었냐면, 상품을 클릭하면 그 상품에 대한 상세 페이지가 떠야 하기 때문에 모달 창을 상품리스트(우리 팀의 컴포넌트 트리에서는 CarouselSectionList나 `CarouselS

문제 바로가기 걸린 시간: 55분 결과: 정확성 테스트 모두 통과 / 효율성 테스트 모두 실패 코드 원인 찾기 for문이 문제일까 while문이 문제일까 고민했는데 shift랑 spread operator가 문제였던 것 같다. shift는 push, pop에 비해 성능이 안좋다는 건 알고 있었는데 spread operator는 생각지도 못했네... 개선해서 다시 풀어봐야겠다. 다른 풀이법 이브는 재귀로 풀었다. 신기함... 카일도 뭔가 엄청 간단하게 풀음

몇 번째 보는지 모르겠는 드림코딩 엘리 - Promise편 아직도 익숙하지 않은 promise와 비동기 ! 간단한 예제 코드를 써보며 동작을 이해해보는 중이다. Promise 내부의 코드는 곧바로 실행된다. 예제 1 프로미스 내부의 코드는 곧바로 실행된다. new Promise를 하는 순간, 콜백함수가 실행이 되기 때문에 'promise' 가 먼저 찍힌다. 예제 2 ??? 🤷🏻‍♂️ Promise 안에 비동기 로직이 없기 때문에 then의 콜백함수가 바로 실행되어 promise, 프로미스 아님 순서로 출력될 것 같았는데 아니었다. 이게 뭘까? 이 부분을 이해하기 위해서는 이벤트루프, 그 중에서도 microtask queue의 동작에 대한 이해가 필요하다.

작 성 중 . . . 💬 [유튜브 김버그 채널] DOM 이벤트 플로우 완벽하게 정리해드립니다. 를 보고 정리하였습니다. target / currentTarget Event flow를 알아보기에 앞서, target과 currentTarget의 차이가 무엇인지 짚고 넘어가자. 응~ 나중에 쓸거야~ Event flow 우리가 작성한 html 문서는 마치 레이어처럼 차곡차곡 쌓여있다. div에 click event가 발생했을 때 event flow는 capture -> target -> bubble 3가지 phase로 진행된다. 1. Capture phase propagation up

HTML input 태그 만들기 MDN 바로가기 input 태그의 속성 중 type="file"을 이용하면 파일을 업로드 할 수 있다. (참고: type에는 file 말고도 체크박스, 이메일, 이미지, 비밀번호 등등등 많은 유형이 있다.) JS로 이벤트 등록하기 File 객체를 어떻게 얻나요? ` 태그를 이용해 유저가 파일을 선택하면 FileList` 객체가 반환된다. drag & drop 에서 DataTransfer 객체가 반환된다. HTMLCanvasElement의 mozGetAsFile() API에서도 얻을 수도 있다. MDN ``가 포

코드스쿼드의 cs10 미션들은 node.js를 이용해서 진행 중이다. 종종 모듈을 사용하는데, ES6의 export/import 문법이 더 최신이라고 해서 export/import 방식으로 쓰는 것을 선호해왔다. 그런데 오늘!! 문제 발생!! ES6 모듈과 commonJS 모듈을 혼용해서 사용하지 말자 node.js 환경에서 ES6 방식으로 모듈을 사용하려면, package.json 파일 안에 {"type": "module"} 이라고 써줘야 한다. 이렇게 쓰지 않으면 에러가 나고, type:"module"을 쓰거나 mjs 확장자로 쓰라고 친절히 알려준다. 그 이후 나는 Class의 constructor에 모듈을 불러오고 싶어서 아래와 같이 작성했다. 그런데 자꾸 에러가 난다. ReferenceError: require is not defined... constructor 안에 import로 써보기도 했는데 아예 허용되지 않는 문법이었다. Class 밖

문제 바로가기 걸린 시간: 약 30분 코드 쉬운 문제였는데 한 가지 간과한 것이 있어서 자꾸 틀렸다. 함수 블럭에서 여러줄 쓸 때는 return을 써줘야 한다는 것 !!! return 안 쓰고 계속 command = array.slice(i - 1, j).sort((a, b) => a - b)[k - 1] 상태에서 디버깅해보면서 command가 제대로 들어갔는데 왜 자꾸 undefined래? 이러고 있었다. 🤦🏻 개선 Destructuring을 적극 사용해보도록 하자. 간단하고, 직관적이고, 코드 양도 줄어든다.

reduce는 두 개의 인자를 받을 수 있다. 1) 콜백함수(reducer) 2) 처음 값 (optional) reducer라고 부르는 콜백함수는 네 개의 인자까지 받을 수 있다. 1) accumulator : 콜백함수의 반환값이 담긴다. 만약 옵션인 처음 값이 있다면 콜백의 첫번째 호출의 accumulator는 처음 값 이다. 2) 현재 값 3) 현재 인덱스 (optional) 4) 원본 배열 (optional) 현재 값에 배열의 요소가 하나씩 들어오고 accumulator와 현재 값을 콜백함수의 인자로 넣어 실행. 그 반환값을 다시 accumulator에 할당해서 배열의 모든 요소에 동일하게 진행. 인자의 이름은 그 때마다 상황에 맞게 지어주면 된다. filter, map 등등에서 그랬던 것처럼. 처음 값의 유무에 따라 콜백함수 최초 호출 시 accumulator와 현재 값<

프로그래머스에서 진행된 카카오커머스 개발자 영입 - 프론트엔드 개발 챌린지에 지원해보았다. 사실 코딩테스트만 한 번 풀어보려고 지원했다. 아직 실력이 너무너무 부족하기 때문에.. ㅎㅎ 시험이 시작되고 1, 2, 3번 문제를 쭉 훑어봤는데 그냥 어려워보였다. 시간이 정해진 코딩테스트를 풀 때면 항상 머릿속이 하얘지면서, 문제를 읽어봐도 내용이 잘 이해가 안 가는데 오늘도 그랬다. ㅠㅠ 1번 문제는 전에 풀어봤던 문제 중에 비슷한 문제가 있어서 내가 써놨던 글을 보면서 풀었는데 똑같은 삽질을 또!!!! 해가지고 1시간 넘게 걸렸다

코딩테스트에서 종종 2차원 배열 문제가 나오는데, 2차원 배열의 행과 열을 바꾸면 쉽게 풀릴 것 같은 문제들이 있다. 언젠가 구현해보겠다고 메모에 써놨는데 마침 오늘 크레인 인형뽑기 게임을 다시 풀게 되어서 정리를 해놓기로 마음먹었다. 1. reduce와 map을 활용한 방법 구글에 검색해보면 첫 번째로 나오는 stackoverflow 사이트에 사람들이 여러 가지 방법을 댓글로 써두었다. 먼저 reduce가 들어간 코드부터 살펴보자. _그냥

예전부터 여러개의 클래스 사이에서 정보를 넘겨주는 걸 대체 어떻게 하는 건지, 인자로 넘겨줘야 한다는 건 알겠는데 막상 코드로 써보려 하면 막막했다. 이번에 객체지향 프로그래밍에 대한 미션을 하면서 약간 감을 잡아서 아래처럼 코드를 썼다. (중간중간 console.log는 Node.js에서 디버깅 어떻게 하는지 몰라서 써놓은건데, Node.js에서의 디버깅 방법도 공부해야겠다.) 데이터를 어떻게 주고받을지 큰 구조는 그렸지만, init 함수에서 계속해서 변수를 만들고 값을 할당하고 그 변수를 다음 클래스의 constructor로 넘겨주도록 했다. 이렇게 하니까 코드가 너무 지저분한 느낌이 들었다. 다른 사람들의 코드를 보다가 어떤 클래스 안에서 이전 단계의 클래스를 new로 생성하는 것을 봤다.

미션을 하던 중에 Symbol 타입을 써보면 어떨까 하는 생각이 들어서 공부하다가 인프런 채널에 올라온 이 영상을 봤다. 영상 4:30 쯤에 '변수에 접근하기 위해서 대괄호 표기법을 쓴 거, 아시죠?' 라고 하시는데... 전.. 모르는데요..? 😭 그래서 우선 저 문법이 무엇인지 찾아보고 Symbol 타입에 대해서도 더 공부해보기로 결심 🤓 객체 리터럴 '계산된 프로퍼티 이름' ES6에서는 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적으로 생성할 수 있게 되었다. (명칭만 보고는 뭔소린지 잘 와닿지가 않았다.) C++나 자바와 같은 클래스 기반 객체지향 언어는 객체를 생성할 때 클래스를 먼저 정의하고 인스턴스를 만들어야 하는데, 프로토타입 기반 객체지향 언어인 자바스크립트는 다양한 객체 생성 방법을 지원한다. > - 객

문제 바로가기 오늘 하루종일 붙잡고 있었던 문제.. 풀어내긴 했지만 진이 다 빠져서 설명 포기^^! 삽질 재생 시간을 잘못 구했다. 13:30 - 14:40 처럼 끝난 시각의 분이 시작 시각의 분보다 큰 경우만 생각했다. 13:50 - 14:00 처럼 끝난 시각의 분이 더 작은 경우도 고려해야 한다. 나름 노력한 점 주어진 input을 의미 있는 자료구조로 만들기 위해 Map을 사용했다. 값을 한번에 뽑아오는 게 편해서 Map을 썼는데 이 문제에서는 딱히 그런 작업을 할 일이 없어서 그냥 객체로 사용했어도 됐을 것 같다. 근데 아직 미숙해서 코드가 너무 지저분하다. 자료구조 만들 때도 함수를 만들어서 썼어야 했는데 하다가 너무 짱나서 그냥 막 써버렸다. 😅 배운 점 이렇게 input을 받아 사용 가능한 데이터로 처

Expressions vs Statements Expressions value를 return하는 것. 자바스크립트는 expression을 value로 대체하고 계속 진행한다. Statements value를 return하지 않는 것. 명령, 혹은 지시. if문, for문, while문... 뭔가 액션을 컨트롤하는 문들. 리턴값(value)이 없으므로 변수에 할당할 수도 없다. parameter vs argument parameter (매개변수) 함수의 정의 부분에 나열되어 있는 변수들 (variable) argument (인자) 함수를 호출할 때 전달되는 실제 값 (value) 파라미터와 인자의 개수가 일치하지 않아도 오류가 나지 않는다. 함수가 실행되면 arguments라는 유사배열객체가 생성된다. 선언한 파라미터보다 더 많은 인자를 넣어 호출할 수 있는데, 이 때 인자는 arguments에

문제 바로가기 문제에서 예외 케이스까지 친절하게 알려줬고 로직 자체는 어렵지 않았는데, LRU 알고리즘에 대해 알아야 풀 수 있는 문제였다. LRU 알고리즘 캐시(페이지) 교체 알고리즘 중 하나로, Least Recently Used의 약자이다. 새로운 데이터가 발생했을 때, 가장 오래전에 사용된 데이터를 제거하고 새로운 데이터를 삽입하는 알고리즘. 새로운 데이터가 들어온 경우 1-1. 캐시에 넣어준다. 1-2. 캐시가 가득차있다면, 가장 오래된 데이터를 제거하고 넣어준다. 존재하는 데이터가 들어온 경우 2-1. 해당 데이터를 꺼낸 뒤, 2-2. 가장 최근 데이터 위치로 보내준다. queue 알고리즘을 사용하면 쉽게 구현할 수 있다. 설계 ![](https://images.velog.io/

Compiled vs Interpreted 자료 출처 바로가기 어떤 레시피를 보고 음식을 만든다고 해보자. 그런데 레시피가 고대 그리스 언어로 적혀있다. 이 때, 누가 이미 한국어로 번역해놓은 레시피를 보는 것은 Compiled, 고대 그리스 언어를 아는 사람이 바로 옆에서 한 줄씩 동시에 통역해주는 것은 Interpreted이다. Compiled Languages > Examples of pure compiled languages are C, C++, Erlang, Haskell, Rust, and Go. Compiled languages는 곧바로 machine code로 변환되기 때문에 프로세서가 코드를 실행할 수 있다. 그래서 Interpreted languages보다 더 빠르고 효과적으로 실행되는 경향이 있다. me

문제 바로가기 설계 코드 풀이 방법 > 시작 전에! >- 원본 배열을 수정하지 않기 위함이기도 하고, 또한 문제에서 주어진 board에는 문자열로 들어있기 때문에 문자열을 한글자씩 떨어뜨려 2차원 배열을 새로 만들어 문제를 해결한다. > - 4블록이 완성되어 터진 아이템은 그 자리의 글자를 숫자 0으로 바꾼다. 함수 checkSameItems 현재 아이템이 0이면 패스, 현재 아이템과 다음 아이템이 같은지 우선 확인하고, 같으면 아래 두 아이템과 같은지 확인. 해당 인덱스 4개를 temp 배열에 넣는다. 중복은 크게 신

++ 연산자 ++ 을 앞이든 뒤든 붙이면 원본 변수에도 영향을 주어 원본이 같이 변하게 된다. for문의 조건에서만 써봐서 별 생각 없이 썼었는데 원래 변수를 변하게 한다는 것이 신기했다! 아래는 이 의문이 들었던 예제 코드 콜백함수의 this 바인딩 코어자바스크립트 책에는 예제에 다 var로 변수를 정의하고 function 키워드로 함수를 정의한다. 화살표 함수로 바꾸면 this 바인딩이 어떻게 될지 궁금해서 한 번 해봤다. 콜백함수는 기본적으로 '함수'이기 때문에 객체의 메서드로써 사용을 한다고 하더라도 일반 함수 호출처럼 전역 객체에 this 바인딩이 된다. 따라서 다른 객체에 바인딩을 하고 싶다면 bind 메서드를 사용하면 간편하게 할 수 있는데, 위 예제에서 마지막 줄에 obj2에 바인딩해줬음에도 불구하고 window 객체가 나왔다. function 키워드로 프로퍼티를 정의하면 정상적으로 바인딩됐는데, 화살표 함수로 바꾸니 바인딩이 안 되는