전체 글 썸네일형 리스트형 [TIL] 프로그래머스 데브코스 - 바닐라JS/ SPA구조로 노션만들기 - 리팩토링(함수네이밍,세션스토리지 추상화,고차함수 적용). 과제 구현 중 멘토님, 동료 피드백 내용을 반영하는 리팩토링을 진행해봤다. 함수 네이밍 함수 네이밍시 동사원형+명사 조합으로 작성해보면 그 함수의 역할을 파악하기가 쉬울 것이다라는 피드백을 받았다. 신기하게도 함수의 이름이 길어졌음에도 가독성이 좋아졌다라는걸 느꼈다. 아래는 가장 눈에띄게 변화를 느낄 수 있었던 변경을 가져와봤다. (각 bannerEvent, editorEvent함수는 Banner, Editor 각 컴포넌트의 외부에서 Banner, Editor의 상태 변경을 지시하는 함수다.) 세션 스토리지 추상화 api호출시 공통된 부분을 index.js로 따로 빼서 작성하는 것과 동일하다.(클로저를 처음으로 사용해봤다.) 고차 함수 적용 인덱스를 찾기 위해 for문 내부에서 findIndex함수를 불.. 더보기 [TIL] 프로그래머스 데브코스 - 바닐라JS/ SPA구조로 노션만들기 -토글기능(+ 약간의 리팩토링). 배포 사이트 : https://vanilla-js-notion-4cckycphd-gangpyono.vercel.app/ 이전에 토글기능을 넣었지만 특정 페이지를 편집중에 새로고침을 눌렀을때 해당 문서가 자식문서임에도 불구하고 토글이 모두 닫혀 왼쪽 배너부분에서의 정확한 위치표시가 안됨 + 아래 문제부분에서의 의문이 있어 주말을통해 개선하고자했다. 1. 문제 서버로부터 토글에 대한 상태를 받아오지 않기 때문에 토글 버튼을 클릭할 때마다 전역에서 관리하는 배너 상태에 임의로 상태 값을 넣어주고 상태 변경에 의한 렌더링으로 보여주고 있었다. 여기서 문제가 총 2가지가 발생했는데 첫 번째로는. 토글 상태를 배너부분외에서 사용하지않을것같은데 전역상태로 관리할 필요가 있는가? -> 토글상태를 전역 상태 관리에서 분.. 더보기 [TIL] 프로그래머스 데브코스 - 바닐라JS/ SPA구조로 노션만들기. 시작. 이번 클론 코딩에서 가장 핵심이라 생각했던 부분은 노션의 왼쪽 배너의 여러 문서들의 트리구조를 어떻게 구현할 것인가 였다고 생각했다. 그래서 이부분만 해결하면 나머지는 쉽게 쉽게 풀릴 줄 알고 사전에 상태 관리를 어떻게 해야 할지, 어떻게 해면 좀 더 확장성이 좋은 코드가 될 수 있는지를 고려하지 않았다. 그 결과 재귀 함수를 활용하여 구현은 했지만(이외에도 무수한 에러를 많이 만났다..), 이후 추가와 삭제 버튼을 만드는 과정에서 아래와 같이 새로 만들어진 문서에 대해서 추가와 삭제 이벤트를 직접 달아줘야 한다라는 문제점을 보고 상태 기반으로 렌더링 하는 방식을 선택해야겠다는 생각을 하게 되었다. 1. 새로운 문서를 생성했을 때, 이에 대한 상태를 관리하고 있는 곳이 있는가? 위의 첫 번째 스크.. 더보기 [TIL] 프로그래머스 데브코스 - 임시팀 마무리,스터디 마무리 2주간 배웠던 내용들이다. 1. JS로 알고리즘 구현 2. 코드 리뷰 3. 자바스크립트 스터디 (코어 자바스크립트) 4. 백준 알고리즘 스터디 1. JS로 알고리즘 구현 이전에 작성한 전위 중위 후위 순회 + trie구현 내용이다. 2. 코드 리뷰 이전 부트캠프에서 팀원과의 동료 외에 시니어 개발자분에게 코드 리뷰를 받아본 적은 처음이다. 내 코드를 직접 읽어봐 주시고 필요한 부분에 대한 조언을 해주셨는데 좋은 코드를 작성할 수 있는 여러 팁들을 얻을 수 있어 유익한 시간이었다. 확실히 코드 리뷰가 여러 유명한 강의나 좋은 자료보다 훨씬 더 직접적인 도움이 되는 것 같다. 동료 분들의 리뷰 또한 내가 모르던 부분을 확인할 수 있는 좋은 계기가 되었다. 나름 신경 쓰면서 작성했지만 분명한 오류가 있었고, .. 더보기 [TIL] 프로그래머스 데브코스 - 전위,중위,후위 순회 + trie 뭘 했는가? 1. 과제 구현(전위, 중위, 후위 순회 + trie) 2. 백준 알고리즘 스터디(2231,1003,1541) 과제구현 1) 전위, 중위, 후위 순회 예전에 인프런 알고리즘 강의에서 재귀 함수시간에 한번 짧막하게 다뤘던 기억이있었는데 까먹었기도하고 이를 JS의 클래스 문법을 사용하면서 직접 노드를 만들고 클래스 내부에 함수를 선언하는 방식으로 구현을 하려다보니 새로운 느낌이 들었다. 핵심로직은 같은데, 아직 클래스 문법이 익숙하지 않아서 였던거 같기도하다. 재귀함수 호출 순서를 계속 머리로만 생각하려다 보니 이해가 안가 시간이 오래 걸렸었는데 그냥 공책에다가 콜 스택을 직접 그려가며 호출 순서를 파악하니 이해하기가 편했다. 2) trie 구현 딱 들었을 때는 검색창에서 입력을 했을 때 입력하.. 더보기 [TIL] 프로그래머스 데브코스 - 형변환 뭘 했나? 1. 데브 코스 1주 차 day 4. 2. 스터디 진행방식 최종 결정. 3. 알고리즘 특강. 1. 데브 코스 1주 차 day 4 강의를 듣다 보니 매일 풀려고 했던 백준 알고리즘을 못 풀었다. 강의가 알고리즘 내용이 많아 문제를 풀다 보니 시간이 순식간에 지나갔다. 그래도 나름 고민한 내용들의 해답을 찾을 수 있었어서 비록 다른 일은 못했지만 만족스러운 하루였다. 강의 중 flatMap을 활용한 풀이 방법이 있었는데, 어떻게 동작하는지 이해가 되지 않아 동작 방식에 대해 찾아보고, 직접 실험을 진행해보면서 파악하려 노력했다. 위와 같이 실험을 진행했었는데 예상했던 결과물과 다르게나와 질문방에 질문을 올려 다른 수강생 분과 멘토님의 답변으로 문제점과 해답 외에도 자바스크립트에서의 형 변환이 연산.. 더보기 javascript 데이터타입, 얕은복사, 깊은복사, 값의 없음. 1. 데이터 타입의 종류 1-1) 원시형 데이터 NUmber String Boolean null undefined Symbol 1-2) 참조형 데이터 object Array Date RegExp(정규표현식) Map, WeakMap(Map에서 키값으로 object만 사용 가능.) Set, WeakSet(Set에서 value값을 object만 사용 가능.) 불변성 2. 메모리와 데이터. 메모리는 비트로 구성되어있고, 고유한 주소 값을 통해 비트의 위치를 알 수 있다. 메모리 용량이 과거에 비해 월등히 커진 현시점에서 자바스크립트는 이런 메모리 관리의 압박에 있어 자유롭다. 자바스크립트에서의 숫자는 정수형, 부동 소 수형을 구분하지 않고 모두 1바이트, 한 글자 기준 한글 2바이트, 영어 1바이트로 표현하다... 더보기 [TIL] 프로그래머스 데브코스 - 배경지식 뭘 했나? 1. 깃 특강 듣기 2. 데브 코스 1주 차 day2강의 수강 3. 알고리즘 문제풀이 깃 특강 듣기 기존 프로젝트에서 깃을 사용한 적이 있긴 한데, 한정적으로만 사용하고 있었던 느낌이 들었었다. 강의를 들으면서 커밋 기록에 있어 유연한 대처가 가능한 여러 명령어들을 알게 되었고, 실무에서의 발생할 수 있는 사례들을 통해 명령어를 설명해주시는 분이 이해하기 쉬웠고, 언제 사용하면 되는지가 명확하게 전달되었다. 다음 프로젝트떈 의식적으로라도 이러한 명령어들을 활용해볼 생각이다. 데브 코스 1주 차 day2 강의 수강 1일 차가 전반적인 JS문법이었다면 2일 차 때는 네트워크, 컴퓨터 시간, 암호화, 프로그래밍 패러다임 등 전반적인 배경지식에 가까운 내용이었다는 생각이 든다. 처음 본 내용들이 많아.. 더보기 이전 1 2 3 4 5 다음
