JoonDevBlog

공부한 내용 📖 Module index.html에 추가한 많은 script파일은 main.js에 묶고 export default와 import를 통해 모듈화 할 수 있다. 비동기와 promise, async await를 통한 실습 더미데이터를 가진 todoList를 만든 후, XMLRequest를 통해 todoList를 외부에서 api호출을 통해 받아오기. export function request(url) { return new Promise((res, rej) => { const xhr = new XMLHttpRequest(); xhr.addEventListener("load", (e) => { if (xhr.readyState === 4) { if (xhr.status === 200) { res(J..

9월 19일에 시작한 데브코스가 어느덧 3주차를 지나 4주차를 향해간다. 1,2주차는 한 주를 채운적이 없지만 이번엔 꽉 채운 한 주를 보냈고 어떤 한주를 보냈는지 돌아보려고 한다. I. 1주일간 배운 내용 & 느낀내용📖 1.알고리즘 3주 2일차까지 진행하며 알고리즘이 마무리 되었다. 백트래킹 N-Queen 문제 해결 코딩테스트 준비 방법과 유형 파악 시간복잡도로 문제 유형을 파악하는 방법, 일관성 있게 코드를 짜는 법 등.. 2. 자바스크립트 VanillaJS를 시작하기 전 JS 사전 퀴즈를 통해 박살이 나고 겸손해졌다. This와 클로저, 호이스팅에 대해 다시한번 다루는 시간이 되었다. DOM 실습을 시작하였고, 이 과정에서 즉시실행함수의 형태와 호이스팅의 실 사용 예시를 접할 수 있었다. 선언형 프..

공부한 내용 📖 명령형프로그램 명령형 프로그램은 컴퓨터가 수행할 명령을 순서대로 써놓은 것. '어떻게 구현하는가' 가 초점이 맞추어져있다. 내가 써본 언어중 C가 대표적이다. 선언형프로그램 명령형과 반대되는 개념 '어떻게 하느냐' 라기보단 '무엇을 나타내냐'에 초점. HTML은 대표적인 선언형 방식. 어떤 태그들을 나열해서 나타낼 것인지에 대해 초점이 맞춰져있고 '어떻게 렌더링을 구현하냐'에 초점을 두었다. 가장 간단하게 배열을 예시로 들면 for문과 index를 활용한 반복문에서 forEach를 활용하는 반복 메소드를 활용하는 것이다 선언형 프로그래밍 실습 버튼을 클릭시 버튼에 삭선이 on/off되는 기능을 명령형 프로그래밍으로 시작하여 점차 선언형으로 바꿔나가는 작업을 하였다. 다음은 html 뼈대 ..

공부한 내용 📖 생성자함수의 올바른 사용으로 객체를 생성하는법 function Car(name, brand) { this.name = name; this.brand = brand; } const Kia7 = new Car("K7", "KIA"); console.log(Kia7.name); new를 붙여준다. 즉시실행함수의 사용방법과 뒤의 소괄호에 들어가는게 인자로 들어가서 매개변수로 전달된다. this의 범위는 객체 내에서 보유여부를 통해 판단 var, let, const의 차이 클로저를 사용한 은닉화 복습 이벤트 캡처링과 버블링 아래 코드는 fruits라는 id를 가진 ul아래에 one이라는 id를 가진 div 아래에 two라는 id를 가진 span을 넣고 fruits->one->two->two->on..

공부한 내용 📖 브라우저 렌더링 원리(DOM, CSSOM, JS엔진 제어권) DOM에 접근하여 조작할 수 있는 방법들 DOM조작 실습 - 간단한 텍스트 에디터 만들어보기 DOM조작과정에서 JS 함수 작성 문법에 의문이 들었고, 즉시실행 함수와 호이스팅에 대해 깨달음을 얻을 수 있었다. DOM을 활용해 실전에서 익히는 호이스팅, 즉시실행함수 위 링크에 포스팅 해두었다. 궁금한 내용/부족한 내용🤔 확실히 자유롭게 DOM을 조작하는데에 아직 미숙한 것 같다. html과 css도 VanillaJS를 공부하며 더 해야겠다. 느낀점✍ 가장 크게 느낀점은 공부하며 도대체 어디에 써야할지 감도 안오고 외워지지도 않는 개념을 계속 익히다보면 언젠가 깨달음을 얻는다는 것이었다. JS를 공부하며 호이스팅과 즉시실행함수가 그..

공부한 내용 📖 이선협 강사님 특강 알고리즘/코딩테스트 팁 기술, 사고, CS의 연관관계 JS vs Python 알고리즘/코테 팁 DFS,BFS,힙,이진탐색 등... -> 어느정도 외우고 익혀야 하는 부분이 있다 입력값의 범위를 통해 시간복잡도를 판단하고, 어떤 유형인지 판단하는 연습을 하자 초반은 쉬운, 후반은 어려운 경향이 있으니 후반부는 DP같은 어려운 부분을 염두에 두자 코드 작성하며 생각하는게 좋은 사람도 있고, 끄적이다가 한번에 코드작성하는 사람도 있다. 본인을 알아야 한다. (나는 후자) 기술, 사고, CS의 연관관계 사고력이 뛰어나도 기술이 없으면 구현이 안되고, 기술이 좋아도 사고가 안되면 어렵게 풀어나가게 된다. CS기반 지식이 있어야 문제를 해결하는 사고를 할 수 있다. JS vs P..

9.19 화요일 에 시작한 데브코스가 9.28 목요일 부터 시작된 추석 연휴를 지나 10.2 월요일이 되며 3주차를 맞이하였다. 날짜로는 3주차이지만, 1주차 화수목금, 2주차 월화수 해서 7일을 진행하였기에 1,2주차의 WIL을 한꺼번에 작성하게 되었다. 2주간 배운 내용 📖 7일이면서 2주동안 나는 무엇을 하였을까? 우선 1주차에는 가볍게 시작하는 듯 하면서도 스코프와 클로저 같은 개념을 학습하고, 알고리즘 입문인 자료구조까지 맛보았다. 이 과정에서 연결리스트를 실제로 구현해보기도 하였다. 또한 깃을 오랜만에 다시 실습하며 브랜치와 PR도 관리해보았다. 2주차에는 슬슬 프로그래머스 Lv3. 문제가 나왔다. 해시를 활용한 베스트 앨범 문제도 Lv3이었고, BFS, DFS문제와 이진탐색문제 모두 Lv3이..

공부한 내용 📖 프로그래머스 Lv3. 가장 먼 노드 문제 -> BFS를 활용한 그래프 문제 트리 자료구조 강의 재귀를 활용한 전위, 중위, 후위 탐색 함수 작성 실습. 전위:NLR순 탐색 중위:LNR순 탐색 후위:LRN순 탐색 이진탐색, 힙, 트라이 강의 -> MinHeap구현해보기 정렬 강의 -> 프로그래머스 Lv2. 가장 큰 수 JS에서 sort함수 사용시 유니코드순으로 정렬되므로 (1,10,2,3)순으로 배열된다. sort(a,b)=>b-a로 내림차순 배열 구현하자. DeepDive 배열 배열은 length프로퍼티를 갖는 객체라고도 볼 수 있다. Array 생성자 함수를 통해 배열을 생성한다. const arr = new Array(10); Array.from을 이용해 유사배열객체, 이터러블객체를 ..

공부한 내용 📖 큐 - 프린터 문제풀이 자바스크립트에서 큐를 구현하는법 구현한 큐에서는 push, pop 말고 enqueue, dequeue를 활용할 것을 명심하자(파이썬 코드를 js로 옮기는데 1시간 걸림) 해시테이블 - 베스트앨범 문제풀이 JS의 고차함수를 잘 활용하면 구현 문제를 생각의 흐름을 따라 작성할 수 있다. 처음으로 Lv3문제를 해결한 날이다. 궁금한 내용/부족한 내용🤔 JS의 배열과 객체 내장함수를 다루는 실력이 너무 부족하다. VanillaJS로 개발을 시작하게 되면 더 쓸일이 많을텐데 배열 slice, splice 나 Object.keys.sort 이런 내장함수를 딥다이브 스터디를 통해 더 공부해야겠다. 느낀점✍ 지금까진 JS로 자료구제 문제를 실습하며 '이거 그냥 파이썬으로 풀고 넘..

공부한 내용 📖 DAY4 강의 자료구조와 알고리즘이 중요한 이유 - 자료구조는 도구(재료), 알고리즘은 레시피, 개발자는 요리사! 스택 괄호문제(가장 깔끔했던 풀이) 단방향 연결리스트, 양방향 연결리스트, Circular연결리스트 구현. 깃 특강 git에서 branch를 변경할 때 그동안 git checkout으로 변경해왔었는데, 이젠 git switch를 쓰는게 더 좋다 git switch는 지금까지 작업한 내용이 stash 된다. 깃에서 스테이징이라는 개념은 데스노트같은 개념이다..(ㅋㅋ) 궁금한 내용/부족한 내용🤔 소스트리를 활용한 시각적 활용을 실습해봐야겠고다. 브랜치 개념에서 origin과 main을 경험적으로 이해하고 있지만 100프로 이해하고 있는 것 같지 않다.클린코드 특강도 한번 들어보자..