프로그래머스 데브코스 (18) 썸네일형 리스트형 노션 클로닝 미션 회고 ✋ No 프레임워크!! 자바스크립트로만 구현하는 notion 프로그래머스 데브코스 4주차 미션 미션 후기 및 회고 장장 1주일 동안의 노션 클로닝 미션이 끝이 났다. 뿌듯함과 동시에 아쉬움이 많이 밀려온다. 아쉬웠던 부분은 리팩터링을 진행하고, 앞으로 계속해서 추가적인 기능을 덧붙여 배포까지 해보고 싶다. 데모 기능 소개 사이드바의 최상단 "상윤의 notion"을 누르면 홈 화면으로 이동한다. 사이드바의 페이지 리스트를 클릭하면 해당 페이지로 이동한다. 토글 버튼을 클릭해서 하위 페이지를 볼 수 있다. 하위 페이지가 없다면 "하위 페이지가 없어요" 라고 보여준다. 페이지 생성 기능 사이드바의 하단 "새 페이지"를 누르면 새로운 페이지를 생성할 수 있다. 사이드바의 리스트에 추가를 한다면 리스트 아래에 새.. [데브코스 16일차] 3주차 과제를 수행 중... 오마이갓... 과제만 하다가 오늘 강의를 하나도 못 들었다... 과제밖에 못했음... 과제를 하면서 커밋이 상당히 많았기에 (원래 이런건가... 나만 커밋 많은 것 아니겠지...?) 커밋을 좀 정리해두어야 할 것 같다. 들었던 생각, 고민을 같이 정리하면 좋을 것 같다. 📌 feat: TodoList.js 렌더링 구현 TodoList 컴포넌트를 구현했습니다. 📌 feat: index.js 에 App 클래스 추가, 컴포넌트의 렌더링은 App이 담당하도록 모듈화 index.js 파일을 만들어서 App 클래스를 추가했습니다. 이제 컴포넌트의 렌더링은 App이 담당합니다. TodoList를 모듈화해서 App 클래스 안에 추가했습니다. 이제 data는 index.js에서 보냅니다. TodoList가 data를 받.. [데브코스 15일차] 브라우저 저장소와 모듈 + 1주차 미션 회고 🤔 생각해볼 것들 - 쿠키와 세션에 대해서 설명할 수 있나요? - 쿠키를 사용할 때 주의할 점에는 무엇이 있을까요? - 모듈화를 하면 무엇이 좋은가요? [1] 쿠키 ⚠ 쿠키와 세션에 대해서는 다음 번에 자세히 공부해보자. 웹 페이지에서 '하루동안 보지 않기', '15일 동안 보지 않기' 이런 기능들은 쿠키를 활용할 수 있다. 왜냐하면 쿠키에 유효기간을 넣을 수도 있기 때문. [1-1] 쿠키 저장하고 가져오기 document.cookie = "name=yong"; document.cookie = "location=korea"; console.log(document.cookie); // name=yong; location=korea 쿠키를 가져오게되면 문자열 형태로 반환한다. 이것을 이용해서 데이터를 추출하.. [데브코스 14일차 TIL] 바닐라JS 코드 디자인에 대해 2 + git 공부 💡 배우고 생각해본 것들 e.preventDefault() 에 대하여 e.preventDefault()는 from의 전송 뿐 아니라 태그의 기본동작을 차단한다. 예를 들어 a태그는 기본동작으로 href로 페이지를 이동하는데, 이것도 차단할 수 있다. 나는 그동안 폼의 전송을 막고 싶을 때 기계적으로 e.preventDefault()를 사용했는데, 태그의 기본동작을 막는다는 근본적인 생각을 하지 않고 사용하고 있었다. querySelector에 대하여 그 동안 나는 id, class, 태그 이름을 가져오는 것에만 기계적으로 사용하고 있었는데, 태그에 name을 줘서 input[name=todo] 이런 식으로 특정 태그를 가져올 생각을 하지 않았었다. html 기본기가 부족한 상태가 아닌가 체크를 해봐야 할.. [데브코스 13일차 TIL] 바닐라JS 코드 디자인에 대해 1 💡 회고) 배우고 생각해본 것들 타입체킹과 defaultProps에 대해서 타입스크립트면 처음부터 타입을 명시하면 되겠지만 자바스크립트에서는 어떤 props가 들어올지 모르니 타입체킹이 필요하다. 그리고 올바른 타입이더라도 값이 없을 경우 defaultProps를 덮어야 할 경우도 있을 것. 코드 디자인 - render를 어디서 처리 할 지? 지금은 그냥 생성하는 순간에 render를 하고 있음. render에 대한 역할을 컴포넌트가 아닌 더 상위 컴포넌트 혹은 부모 클래스에서 담당하게 할 수도 있을 것 같다. 뭐가 더 좋을까? 나중에는 상위에서 담당하는게 낫지 않을까? 코드 디자인 - 데이터 패칭에 관한 부분, 목업 데이터에 관한 부분에 대해서 일단 데이터를 목업할 때 api 규모가 커지면 프로젝트 시.. [데브코스 12일차 TIL] 컴포넌트 방식으로 구현하기 명령형 프로그래밍과 선언형 프로그래밍 명령형 프로그래밍은 프로그래밍을 처음 배울 때 생각해보면 진짜 하나하나! 세세하게! 순서대로! 어떻게 할 건지 A부터 Z까지 코드로 설계하는 프로그래밍이다. 보통 처음 배울 때 C언어(당연히 아닌 사람들도 많겠지만)로 시작하고는 하니, 명령형에 익숙해져있는 것은 어찌보면 당연하다. 명령형이 "어떻게"에 초점을 맞췄다면, 함수형(선언형) 프로그래밍은 목표(그래서 뭘 하고 싶은데?)에 초점을 맞추는 것이라 보면 될 것 같다. 이러한 철학으로, HTML도 일종의 선언형 프로그래밍이다. 명확한 알고리즘(어떻게)을 명시하지 않고, 그저 어떤 태그를 만들겠다, 어떤 이벤트를 걸겠다 등으로 접근하지 않는가? 따라서 함수형은 더 직관적(가독성은 상대적이지만)이다. 그러나 함수형은 .. [데브코스 11일차 TIL] Vanilla JS 시작하기 + 이터러블 / 이터레이터 프로토콜 🤔 앞으로 배워야 할 1. new 키워드에 대햐여 2. 즉시실행함수에 대하여 3. 클로저에 대하여 4. this에 대하여 5. 화살표 함수와 this, this 바인딩, 그리고 클로저 6. 실행 컨텍스트, 렉시컬 컨텍스트... 6. 당연히 이것들 말고도 더 있음 7. 자바스크립트 그 자체 이터러블 / 이터레이터 프로토콜 Array, Set, Map 등을 for - of 문이나 다른 고차함수들로 "간편하게" 순회를 할 수 있는 것은 이터러블 / 이터레이터 프로토콜을 준수했기 때문. Set, Map은 기존 for문처럼 i에 인덱스(key)값을 넣어줌으로서 순회를 할 수 없다. 그런데 for - of 문으로는 순회를 할 수 있다. 이것은 for - of가 내부적으로 기존 for문과 다르게 동작한다는 것 → S.. [데브코스 10일차] HTML / CSS 그리고 DOM 🤔 생각해볼 것 1. 시멘틱 태그가 무엇인가요? 2. 웹 접근성이 무엇인가요? 3. CSS를 html 파일에 적용하는 방법 3가지를 알고 있나요? 4. CSS에서 id와 class의 차이점은 무엇인가요? 5. html에서 같은 id값을 가진 태그가 여러 개 있다면 어떻게 처리될까요? 6. CSS 선택자 종류에는 무엇이 있을까요? 7. 브라우저 렌더링 과정을 설명할 수 있나요? 8. document.createDomcumentFragment는 무엇이고, 하는 일은 무엇일까요? HTML / CSS ('html은 프로그래밍 언어가 아니에요' 라는 유명한 짤이 생각나는...) html은 그저 마크업 정적문서이다. 그리고 CSS는 그 문서를 꾸민다. CSS도 발전을 거치면서 단순히 색을 입히는 것 이상의 역할을 .. [데브코스 9일차] 백트래킹과 동적 계획법 💡 키워드 - 백트래킹 - 동적 계획법(Dynamic Programming) [1] 백트래킹 특정 알고리즘이라기 보다는 모든 경우의 수를 탐색한다는 개념. 보통 DFS, BFS를 이용하는 경우가 많다. 백트래킹에서 중요한 점은 효율을 높이기 위해 가지치기를 하여 탐색할 경우의 수를 점점 줄여나가는 것. 재귀를 이용하는 경우가 많으므로 순환(무한루프)에 빠지지 않도록 한다. 방법 1. 우선 모든 경우의 수를 찾을 수 있도록 한다. 2. 특정 조건을 만족하는 것만 탐색하고 나머지는 탐색하지 않도록 조건을 건다. (가지치기) 대표적인 문제 - N-Queen 문제, 체스 문제 등 [2] 동적 계획법(Dynamic Programming) "큰 문제를 작은 문제로 나누어서 해결한다" 즉 작은 문제의 규칙을 찾아서 .. [데브코스 8일차] 그래프 탐색(DFS, BFS)과 그리디 💡 키워드 DFS BFS 그리디 다익스트라 알고리즘 크루스칼 알고리즘 [1] 그래프 탐색 알고리즘 [1-1] DFS (깊이 우선 탐색) 가장 깊은 정점부터 탐색한다. 재귀 또는 스택으로 구현할 수 있다. 정점의 수가 V, 간선의 수가 E라고 할 때 시간복잡도는 O(V + E) 그림으로 보는 DFS [1-2] BFS (너비 우선 탐색) 같은 깊이의 정점부터 탐색한다. 가장 가까운 정점부터 탐색한다는 점에서 그리디 + 큐 기반 알고리즘이다. 시간복잡도는 DFS와 같은 O(V + E). 그림으로 보는 BFS [2] 그리디 알고리즘 (Greedy, 탐욕법) 당장 눈 앞에 보이는 최적해를 선택한다. 따라서 항상 최적해를 보장해주지는 않는다. 어느 정도의 최적해를 찾는 알고리즘. 코딩 테스트에서 특별한 알고리즘이 .. 이전 1 2 다음
