에이미의 성장기록

콜백큐(Callback Queue) - 콜백큐란 자바스크립트 런타임 환경에서 처리해야하는 명령어를 임시로 저장하는 대기 큐로 비동기적으로 실행된 콜백함수가 보관되는 영역이다. 예를들어 setTimeout에서 타이머 완료 후 실행되는 함수, addEventListener에서 click 이벤트가 발생했을 때 실행되는 함수들이 보관된다. 큐(Queue) - 컴퓨터의 기본적인 자료 구조 중 한 가지로, 먼저 집어 넣은 데이터가 먼저 나오는 FIFO(First In First Out) 구조로 저장하는 형식 - 콜백이 큐(Queue) 형태로 쌓인다. 선입선출(FIFO) 구조이다. 콜백큐는 하나인 것 처럼 보이지만 사실 여러개로 구성되어있다. 🧡Task Queue(Event Queue) 태스크 큐, Microtask..

한번에 여러 개의(5개) 서버 요청을 하고, 모든 요청에 대한 응답을 다 받았을 때, 그 때 화면을 렌더링 하려면 어떻게 해야하냐는 처리에 대답을 하지 못했다. 끙... state를 요청 갯수만큼 만든다고 했는데 정말 비효율적인 대답이었다. (대답하고 속으로 매우 좌절함) 그리고 버스타고 가는 도중 자바스크립트 스터디원 중 한 분이 단톡방에서 promise.all 메서드에 대해서 얘기했는데, 순간 그 질문이 떠올랐다. 유레카! ! ! 아 맞다 프로미스 올..... 그래.... 드림코딩 엘리 인강 들으면서 배웠었지! 비동기의 병렬처리! 대답 못했으면 제대로 모르는 것이므로, 다음번에는 잘 대답하기 위해 오늘의 공부는 promise.all() 로 정했다(. ❛ ᴗ ❛.) promise.all() Promis..

컴포넌트를 사용하는 방식은 두가지이다. 하나는 함수형 컴포넌트이고, 또 다른 하나는 클래스형 컴포넌트이다. 플젝에서는 함수형 컴포넌트만 사용했지만, 클래스형 컴포넌트도 알아두어야 할 것 같아서 "리액트를 다루는 기술"을 다시 보며 한번 정리해보고자 한다. 클래스형 컴포넌트의 선언 방식 class App extends Component { constructor(props){ super(props); this.state = { //state로 지정해 줄 데이터 foodList: ["피자", "치킨", "복숭아", "아이스크림"] } } render() { console.log(this.state); //foodList: ["피자", "치킨", "복숭아", "아이스크림"] 내가 제일 좋아하는 음식 //원하는 ..

6월에 항해가 끝나고, 개인 정비의 시간을 가졌다. 제주도도 다녀오고, PT도 끊어서 하루에 2시간씩 운동도 하고, 못 만났던 친구들도 만나며 정비의 시간을 보냈다. 틈틈히 자바스크립트 스터디를 하면서 자스 공부는 꾸준히 했고, 부족한 알고리즘 인강 + Next.js 인강을 들으면서 공부의 시간을 채워나갔다. 서서히 동기들의 취업 소식이 들리자 불안했다. 이러다 나만 취업 못하는거 아니지? 라는 생각이 들면서 급 무기력감에 빠질뻔 하였으나... 내가 지원을 안했는데 취업이 어떻게 되겠어? 대학 졸업 후 나는 우리나라 소셜커머스 3개 중 매출 2위인 ,아주 빠른 속도로 성장하는 이커머스 회사에 MD로 입사했다. 정말 매일 매일 야근을 하고, 화, 목요일은 야근하다가 토익 학원 갔다가 다시 돌아와서 야근하고..

문제링크 코딩테스트 연습 - 방문 길이 programmers.co.kr 방향에 따른 이동 좌표를 direction이라는 변수에 키, 쌍 형태로 만들어준다. 방문된 이동 경로를 찾기위해 집합 자료형으로 visited를 만들어준다. (중복을 제거하기 위해 집합 사용) 현재 좌표를 now라고 하고, 0,0으로 세팅한다. 반복문으로 dirs에 따른 이동 좌표를 구한다.(dx,dy) 좌표 평면의 경계를 넘어가는 명령어는 무시하기 위해 5보다 크거나, -5보다 작은 4개의 조건에서는 for문을 건너뛴다. 이동 경로는 (0,1) -> (1,1) 로 간 경로와 (1,1) -> (0,1) 간 것을 같다고 치기 때문에, 이 두개의 경로를 모두 구해서 visited에 add 해준다. 이렇게 되면 동일 경로가 2개씩 들어가게..

문제링크 코딩테스트 연습 - 짝지어 제거하기 짝지어 제거하기는, 알파벳 소문자로 이루어진 문자열을 가지고 시작합니다. 먼저 문자열에서 같은 알파벳이 2개 붙어 있는 짝을 찾습니다. 그다음, 그 둘을 제거한 뒤, 앞뒤로 문자열을 이어 붙 programmers.co.kr stack 이라는 빈 배열을 만들어주고, stack 배열이 비어있지 않았다면, 배열의 마지막 요소와, 현재 요소가 같은지 비교한다. 같을 경우, stack 배열에 있던 요소를 빼주고, 같지 않다면 stack에 추가한다. stack이 비어있으면(처음 혹은, 앞의 같은 두 수가 제거되었을 경우) stack에 새 요소를 추가해준다. 최종적으로 배열에 아무것도 없으면 짝지어서 잘 빠져나간 것이므로 짝지어 제거하기가 성공 = 1 아니라면 0 출력 f..

문제링크 코딩테스트 연습 - 폰켓몬 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. programmers.co.kr 주어진 숫자 배열을 for문으로 검색해서, arr라는 빈 배열에 요소가 있는지 확인 후 없고, arr의 길이가 최대로 나올 수 있는 길이/2 보다 작은지 확인해서, 조건에 만족하면 arr에 push한다. arr에 동일 요소가 이미 있다면, 반복문 조건에 따라 arr 배열에 들어가지 않는다. 최종적으로 arr 배열의 길이를 구해준다. = 최대 종류의 수 function solution(nums) { const arr = []; for (let x of..

문제 설명 앞에서부터 읽을 때와 뒤에서부터 읽을 때 똑같은 단어를 팰린드롬(palindrome)이라고 합니다. 예를들어서 racecar, 10201은 팰린드롬 입니다. 두 자연수 n, m이 매개변수로 주어질 때, n 이상 m 이하의 자연수 중 팰린드롬인 숫자의 개수를 return 하도록 solution 함수를 완성해 주세요. 제한사항 m은 500,000이하의 자연수이며, n은 m 이하의 자연수입니다. 입출력 예 입출력 예 설명 입출력 예 #1 1 이상 100 이하의 팰린드롬은 다음과 같이 18개가 있습니다. 1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 22, 33, 44, 55, 66, 77, 88, 99 입출력 예 #2 100 이상 300 이하의 팰린드롬은 다음과 같이 20개가 있습니다. 1..

오호 WIL을 얼마만에 쓰는거지? ㅎㅎ 매번 써야지 써야지 했는데 결국 한달이나 밀렸다. 꺼이꺼이 다시 열심히 써야지... 이번주는 면접이 있었고, 그래서 멘탈이 조금 음.. 마음이 싱숭생숭했다. 그래도 덕분에 자바스크립트 공부랑 면접 질문은 틈틈히 공부한 것 같다. 이것마저 안했으면 이번주는 WIL 쓸게 없어.... 고마워 자바스크립트 스터디... ☜(ﾟヮﾟ☜) 🧡 ✨배운점 - 알고리즘에서 배운건데 숫자타입을 문자타입으로 바꾸는 방법중에 String 이런 메소드 말고, "" 그냥 빈 문자열 하나 써도 문자열로 바뀐다. "" + 10 + 20 이런식으로 쓰면 30이 아니라 1020이 됨! - ES6에서 등장한 화살표 함수는 단순히 함수를 짧게 쓰기 위함이 아니다!!! this를 정적으로 바인딩 해버린다...

TIL을 쓰는 날짜가 하루씩 밀리는 것은 기분탓이다(ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ) 어찌됬든 일주일에 5번쓰면 되니깐~~ \(@^0^@)/ 껄껄 arrow function을 쓰면서 나는 오 function 키워드 쓰는 시간도 아끼라고 ES6에 좋은 문법이 나왔구나~ 라고만 생각했다 ㅎ 무식하면 용감하고 밝다 ㅎㅎㅎ this 챕터를 스터디 하면서 화살표 함수가 this를 바인딩 하지 않는다고 스치듯이 지나갔는데, 조금 더 구체적으로 알고 싶었다. 화살표 함수에는 this가 없다 함수 내부에서 this는 window로 결정되기 때문에 우리는 this를 바꿔주기 위해 call, apply, bind 메서드를 통해 첫번째 매개변수로 this를 정해줬다. 그러나 ES6에서는 호출된 방식과 상관 없이, 화살표 함수를..