혼자 적어보는 노트

✅ 학습 목차 - [Day 4] JavaScript 주요 문법 (4) ✅ 새롭게 학습한 부분 - Queue - 해시테이블 Queue queue 를 Array형식과 연결리스트 형식으로 구현하는 방법을 알게되었다. 🔥queue문제에서 shift를 쓰면 안된다고? 지금까지 queue관련 문제가 나왔을 때 shift로 해결을 했었는데 shift()를 사용하면 O(n)의 시간복잡도를 가지기 때문에 array형식과 연결리스트 형식으로 구현하는 것이 좋다고 한다. + 제한사항이 작을 경우 shift를 사용해도 된다. 연결리스트를 사용한 큐 방식이 아직은 조금 어색해서 버벅대면서 했다😢😢 해시테이블 키와 값을 받아 해싱하여 나온 index에 값을 저장하는 선형 자료구조 삽입은 O(1)이며 키를 알고 있다면 삭제, 탐색..

✅ 학습 목차 - [Day 3] JavaScript 주요 문법 (3) ✅ 새롭게 학습한 부분 - 시간복잡도 - 연결리스트 시간복잡도란? 알고리즘을 수행하기 위해 프로세스가 수행해야하는 연산을 수치화 한 것 Big-O 표기법 Big O 표기법은 최악의 경우를 고려하며, 프로그램이 실행되는 과정에서 소요되는 최악의 시간까지 고려할 수 있다. Big-O 표기법의 종류 O(1) < O(log n) < O(n) < O(n log n) < O(n2) < O(2n) < O(n!) O(1) 상수 시간 (Constant time) 입력값이 증가하더라도 시간이 늘어나지 않는다. O(log n) : 로그 시간 (Logarithmic time) 원하는 값을 탐색할 때 경우의 수를 절반으로 줄여가며 탐색을 하는 Binary S..

✅ 학습 목차 - [Day 1] JavaScript 주요 문법 (2) ✅ 새롭게 학습한 부분 - 브라우저에 url을 입력했을 때 발생하는 일 - 객체지향 프로그래밍 / 함수형 프로그래밍 - 프로토타입 (추가적으로 학습 필요) - 이벤트루프 💡 브라우저에 url을 입력했을 때 발생하는 일 기술면접 때문에 이전에 접해본 적 있는 개념들이였지만 세부적으로 잘 몰랐던 부분들이 있어서 전체적으로 정리를 하게 되었다. 1. URL을 해석한다. scheme://:@:/ Scheme : protocol을 의미하며 http, ftp, sftp, pop3, IMAP을 말한다. -> 구조가 맞지 않다면 웹 브라우저의 기본 검색엔진으로 검색을 하게된다. 2. HSTS(HTTP Strict Transport Security)의..

✅ 학습 목차 - [Day 1] JavaScript 주요 문법 (1) ✅ 새롭게 학습한 부분 - for문에서 생기는 var의 이슈 - in operator - 클로저 1. for문에서 생기는 var의 이슈 + setTimeout 직접 사용해 보면서 문제점을 겪어보지 않았기 때문에 var에 관련된 것이 이전부터 조금 어렵긴 했다. var sum = 0; for (var i = 0; i { console.log(i); }, 1000); } /// 5 5 5 ..

미션 4 - TodoList App 업그레이드하기 2 mission2에서 만든 TodoList를 업그레이드해서 api호출로 데이터를 CRUD하는 과정이였다. 1. 컴포넌트별 state 관리 이번과제를 진행하면서 크게 고민했던 것은 각 컴포넌트별 state관리였다. 어찌보면 단순한 문제로 보일 수 있겠지만, 상위컴포넌트에서 데이터를 담고 그 담은 데이터를 부모컴포넌트의 setState로 관리하고 한번 더 자식들의 setState라는 함수를 통해서 전달하는 방식이 익숙치 않았던 것 같다. // initialData 선언 this.$target = $target this.todoData = { currentUser: 'jinist', todos: [], } this.isLoading = false this.u..

3주차는 API관련해서 요청을 보내고 요청 받은 데이터를 가지고 화면에 노출하는 미션이었다. mission3에서 다룰 주제는 비동기 제어, callback, promise, aync~await 이다. 1. fetch fetch를 이용하여 api를 요청하고 then으로 호출하던 부분을 async await로 변경하였다. const getSearchData = async (keyword, fromHistory) => { try { if (keyword.length < 1) { searchResult.setState([]) return } const response = await fetch( `https://jjalbot.com/api/jjals?text=${keyword}` ) const data = awa..

mission2의 중점은 컴포넌트 만들기이다. app 컴포넌트 안에서 todoList, todoInput, todoCount를 보여주는 것인데 코드 적고 나면 뭔가 이상한 것 같아서 자꾸 수정하고 시간이 조금 걸렸던 것 같다. 1. Event delegate 자식컴포넌트에 이벤트를 넣어야 할 때 일일히 넣지 않고 부모컴포넌트를 통해서 이벤트를 delegation 할수 있다는 것을 처음 알았다. [이전 코드] this.onClickRemove = (event) => { event.stopPropagation() const listId = event.currentTarget.parentNode.id this.removeTodo(listId) } this.changeComplete = (event) => { ..

혼자 공부를 하다보니 누군가에게 피드백을 받을 일이 없어서 내가 맞게 하고 있는지 의구심이 자주 들어서 남의 리뷰에 대해 갈증을 느끼던 중 프로그래머스의 강의 중에 프론트엔드 개발을 위한 자바스크립트 스터디라는 강의가 있어서 신청하게 되었다.🙌 매 주 미션을 받고 구현사항에 맞게 코드로 구현을 하고 코드 리뷰를 받는 형식이다. 일단 첫 주차 미션은 todo리스트의 컴포넌트 만들기, 다중컴포넌트, 완료된 todo 체크, setState사용 그리고 데이터에 대한 에러 체크도 해야했다. 스터디를 진행하면서 알게 된 부분들을 잊어버리지 않게 정리해서 기록을 할 예정이다. 1. 에러체크 instanceof 연산자 / new.target 생성자함수에서 new 키워드가 들어있는지 확인할 수 있는 것을 검색하면서 처음..