🔗 URL : https://hellosonic-vanilla-js-notion-hellosonics-projects.vercel.app/ 🚀 들어가며 드디어, 기다리고 기다리던 바닐라 자바스크립트로 개인 프로젝트를 진행하게 되었다. 개인적으로 데브코스의 많은 커리큘럼 중에서도, 바닐라 자바스크립트로 첫 프로젝트를 진행한다는 점이 인상깊었다. 자바스크립트 기본기를 탄탄하게 다져야만 이후 커리큘럼인 리액트 학습과, 백엔드와의 팀프로젝트를 제대로 진행할 수 있다고 생각했기 때문이다. 이전까지 현업자분들의 강의를 수강하며, 데이터의 흐름과 콜백 함수의 전달 등 이전까지 내가 코딩테스트를 대비하며 전혀 겪어보지 못한 새로운 어려움을 해결하기 위해 노력했고, 이번 프로젝트에 그간의 노력들을 다 담아보기로 결심했다..
🚀 들어가며 프론트엔드 데브코스에서 가장 기대했던 것 중에 하나는, 매주 과제를 수행하고 과제에 대해 팀원, 멘토님들에게 코드리뷰를 받을 수 있다는 것이었다. 나는 데브코스에 입과하기 전, 혼자서 백준 문제를 풀거나, Django로 인스타그램 클론코딩을 해본 경험이 전부였다. 그 때문에 나에게 다양한 커뮤니케이션의 기회와 협업 경험을 쌓을 수 있는 환경은 절실했고, 데브코스 최종합격을 했을 때 정말 기뻤던 기억이 난다. 데브코스 입과 전의 난, 깃허브에서 commit 과 push 외에는 전혀 몰랐다. 아니, commit 과 push 도 잘 몰랐던 것 같다. 데브코스 입과 후 토요일 첫 세션으로 프론트엔드 개발자 진유림님의 깃허브 특강을 수강했는데, 그 덕에 실무에서의 깃허브에 대한 활용 기본기를 알 수 ..
🚀 들어가며 프론트엔드 데브코스 강의를 듣는데 history API 파트가 나왔다. 마음이 너무 급했던 탓일까, 빠르게 이해하려고 보니 이해가 되지 않았다. 나에게 SPA는 생소한 개념이었고, SPA를 모르다보니 SPA를 위한 history API도 이해하기 쉽지 않았다. 잠시 급한 마음을 다스리고, SPA부터 차근차근 공부하기 시작했다. ✅ SPA(Single Page Application) 과거에는 웹 페이지를 렌더링할 때 서버에 렌더링에 필요한 리소스를 요청하고, 받아온 리소스를 클라이언트에서 렌더링했다. 즉, 렌더링이 필요한 특정 부분 이외의 불필요한 부분까지 같이 렌더링해야만 했다. 하지만 SPA가 등장하고 나서부터는 특정 부분의 렌더링을 위해 서버에서 필요한 데이터만 전달받고 렌더링할 수 있게..
🚀 들어가며 프로그래머스 프론트엔드 데브코스도 벌써 시작한지 한달이 다 되어간다. 시간이 정말 빠르다. 나는 프론트엔드 데브코스 지원 전에는 거의 파이썬으로 코딩테스트 문제만 풀어보다가 본격적인 프론트엔드 개발자가 되기 위한 전선에 뛰어들면서 JavaScript를 학습하게 되었다. 난 파이썬을 비전공자인 다른 누군가에게 설명할 때 프로그래밍 언어의 '돌연변이' 라고 설명한다. 그 이유는 파이썬은 메모리 할당과 같은 기본적인 CS 지식을 몰라도 충분히 코딩테스트에서 좋은 성과를 거둘 수 있다고 생각하고, 구현되어 있는 내장함수들이 많아서 사용하기 정말 편리하기 때문이다. 나는 파이썬 언어로 지난 6개월간 꾸준하게 코딩테스트 문제를 풀면서 골드2를 달성했었다. 그 때문에 약간 자만한 것도 있었다. 언어만 다..
✅ Map 맵은 키에 다양한 자료형 허용 메소드, 프로퍼티 new Map() : 맵 생성 map.set(key, value) : key를 이용해 value를 저장 map.get(key) : key에 해당하는 값 반환 map.has(key) : key가 존재하면 true, 존재하지 않으면 false 반환 map.delete(key) : key에 해당하는 값 삭제 map.clear() : 맵 안의 모든 요소 제거 map.size : 요소의 개수 반환 (배열의 length 역할) let map = new Map(); map.set('1', 'str1'); // 문자형 키 map.set(1, 'num1'); // 숫자형 키 map.set(true, 'bool&#..
✅ 01. 구조 분해 할당을 이용한 변수 swap let a = 5, b = 10; [a, b] = [b, a] console.log(a,b); // 10 5 배열 구조 분해 할당 ES6에서 배열의 각 요소를 추출하여 변수 리스트에 할당한다. const arr = [1,2,3]; const [one, two, three] = arr; console.log(one, two, three); // 1, 2, 3 객체 구조 분해 할당 객체의 각 프로퍼티를 추출하여 변수 리스트(객체 형태)에 할당한다. 할당 기준은 키 이다. const obj = { firstName : "Minho", lastName : "Hwang" }; const { lastName, firstName } = obj; console.log(..
📚 DOM 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 DOM을 생성한다. DOM은 브라우저가 이해할 수 있는 자료구조이다. DOM은 HTML 문서의 계층적 구조와 정보를 표현하며, 이를 제어할 수 있는 API(프로퍼티, 메서드)를 제공하는 트리 자료구조이다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체(어트리뷰트 노드, 텍스트 노드)로 변환된다. DOM은 노드 객체의 계층적 구조로 구성되고, 상속 구조를 갖는다. 📚 노드 객체의 타입 ✅ 문서 노드 DOM 트리의 최상위에 존재하는 루트노드. document 객체를 가리킨다. 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통과해야 한다. ✅ 요소 노드 HTML 요소를 가리키는 객체. ✅ 어트리뷰트 노드 H..
✅ 입력 받는 범위에 따라 입력이 100 이하 완전 탐색 백트래킹 입력이 10,000 이하 이중 for문 입력이 1,000,000 이하 힙, 우선 순위 큐 정렬 동적 계획법 위상 정렬 다익스트라 알고리즘(최단거리) 입력이 100,000,000 O(n) 선형시간 입력이 1,000,000,000 이진탐색 ✅ 키워드에 따라 x라는 조건을 만족하는 최대, 최소값 이진트리 계속해서 최대 혹은 최소값을 알아야 하는 경우 힙 어떤 영역을 채워야하는 경우 dfs, bfs
