혼자 적어보는 노트

JSON.parse()는 json이 아닌 데이터를 넣으면 에러를 발생시킨다 const json = JSON.parse('hi'); try catch를 이용하여 불러온 json의 데이터가 올바른 json인지 확인할 수 있다. function IsJsonString(str) { try { const json = JSON.parse(str); return (typeof json === 'object'); } catch (e) { return false; } }

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 키워드가 들어있는지 확인할 수 있는 것을 검색하면서 처음..

js에서 customEvent로 이벤트를 직접 만들 수 있다는 것을 알게 되었다. 기본적으로 아래와 같이 사용할 수 있다. document.addEventListener("welcome", () => { //이벤트 수신중. 호출되면 아래의 console.log 출력 console.log("Welcome!"); }); const customEvent = new CustomEvent("welcome"); // 이벤트 생성 document.dispatchEvent(customEvent); // 이벤트 요청 document에서 welcome이라는 이벤트를 수신하고있고 document에서 해당 이벤트 호출 시 함수가 실행된다. 커스텀 이벤트 호출의 조건은 new CustomEvent('이벤트이름')으로 이벤트를 ..

git으로 브랜치를 만들어서 과제를 제출하는 스터디를 하는 중에 master브랜치에서 브랜치를 생성해야했는데 다른 과제를 진행했던 브랜치에서 생성을 해서 이전 변경사항이 적용되는 문제가 발생했다. branch 조회 git branch -a 위의 명령어를 통해 현재 브랜치 상태를 볼 수 있다. git branch -a * master mission1 mission2 * 별표가 있는 부분이 현재 checkout되어있는 브랜치이다. 원격 브랜치는 빨간 글씨로 표시된다. local branch 삭제 git branch -d 브랜치명 위의 명령어를 통해 브랜치를 삭제할 수 있다. error: The branch 'mission2' is not fully merged. If you are sure you want ..

프로젝트를 작업하다보니 textarea영역을 다뤄야 하는 일이 생겼다. 이전에는 한번도 사용해보지 않았는데 이번에 사용하면서 몇가지 알게된 부분을 적어보겠다. 1. 스크롤바 안보이게하기 / 모서리 사이즈 조절 막기 textarea { overflow-y: hidden; resize: none; } 세로스크롤을 안보이게 하려고 overflow-y를 했지만 가로까지 포함해서 하려면 overflow: hidden;을 하면 된다. resize:none을 하면 사용자의 사이즈 조절을 막을 수 있다. + 스크롤바를 없애는데에는 아래와 같은 코드도 적용 가능하다. textarea { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firef..

key in object const obj = { name: "Jay", age: 29, }; console.log("name" in obj); // true console.log("age" in obj); // true console.log("gender" in obj); // false Object.hasOwnProperty const obj = { name: "Jay", age: 29, }; console.log(obj.hasOwnProperty("name")); // ture console.log(obj.hasOwnProperty("age")); // ture console.log(obj.hasOwnProperty("gender")); // false

input을 핸들링 하면서 엔터 입력 등 어떠한 이벤트 이후 데이터 처리가 되면서 focus를 해제하고 싶을 때가 있다. 1. event.target을 이용한 fucus해제 const onKeyDown = (event) => { if (event.key === "Enter") { // 데이터 처리 코드 작성 event.target.blur(); } }; return ( ) 20 useRef를 이용한 focus해제 const inputRef = useRef(); const onKeyDown = (event) => { if (event.key === "Enter") { // 데이터 처리 코드 작성 inputRef.current.blur(); } }; return ( ) 3. 전역객체인 document에서 강..