바닐라 자바스크립트로 투두리스트를 만들어보고 있다.  GitHub - jisunipark/toodooContribute to jisunipark/toodoo development by creating an account on GitHub.github.com ES6 모듈을 사용하면서 script 태그에 type="module"을 사용하지 않아 발생한 에러를 해결했는데(이전 포스트 참고), 문제 하나가 해결되니 또 다른 에러가 생긴다😂  net::ERR_ABORTED 404 에러  콘솔 창에 net::ERR_ABORTED 404 (Not Found)라는 메시지가 뜨고 있다. 이 에러는 말 그대로 404 에러, 브라우저가 요청한 리소스 파일을 서버에서 찾을 수 없을 때 발생하는 에러다. 보통의 404 에러를..

바닐라 자바스크립트로 투두리스트를 만들어보고 있다.  GitHub - jisunipark/toodooContribute to jisunipark/toodoo development by creating an account on GitHub.github.com 자바스크립트 코드는 모두 index.js 파일 안에서 관리하고 있었는데 todo 아이템이나 todo 입력창 요소를 새로 생성해서 DOM에 추가하는 부분의 함수가 너무 길어져서 한 파일에서 관리하기엔 너무 복잡해질 것 같다는 생각이 들었다. 그래서 js 파일을 모듈화해서 관리하기로 했다. createElement.js라는 파일을 생성해서 해당하는 함수를 export 키워드를 붙여 옮겨두었고 index.js 파일에서는 옮긴 함수를 import 문을 통해 ..

바닐라 자바스크립트로 투두리스트를 만들어보고 있다. GitHub - jisunipark/toodooContribute to jisunipark/toodoo development by creating an account on GitHub.github.com  toLocaleDateString() 메서드 todo 아이템을 생성할 때 현재 날짜를 'yy/mm/dd'의 형식의 문자열로 저장하고 싶다. Date 객체가 제공하는 getDate()나 getMonth() 같은 메서드를 적절하게 이용해서 문자열로 변환한 후 사용할 수도 있겠지만, 뭔가 Date 객체가 제공하는 메서드들 중에 활용해 볼 수 있는 게 있지 않을까 싶어 찾아보니, toLocaleString() 메서드를 사용할 수 있었다. Date.protot..

바닐라 자바스크립트로 투두리스트를 만들어보고 있다. GitHub - jisunipark/toodooContribute to jisunipark/toodoo development by creating an account on GitHub.github.com crypto.randomUUID 메서드 새롭게 생성되는 todo 아이템 객체의 id 값으로 랜덤한 값을 넣어주고 싶다. 찾아보니 Web API에서 제공하는 Crypto 인터페이스의 crypto.randomUUID 메서드를 활용해 쉽게 UUID를 생성할 수 있다.const id = crypto.randomUUID();console.log(id); // "cbfc904b-b898-4deb-b736-ba433489904c" crypto.randomUUID 메..

💁🏻‍♀️ too long? click HERE🚨 문제 상황컴포넌트화 한 svg 아이콘을 상수화해서 객체의 프로퍼티 값으로 저장해 두었다. 여기까지는 해결을 했는데 이어지는 문제는 이 컴포넌트에 프롭을 어떻게 내려주어야 하는지.. 상수화를 위해 만든 객체 구조는 대략 이렇다. (전체 코드는 이전 포스트에)export const BOARDS: Boards = { dashboard: { boardName: '대시보드', icon: , link: '/main', },}구조분해 문법을 사용해서 해당 svg 아이콘을 가지고 있는 icon 프로퍼티의 값을 가져온다. 적절한 자리에 {icon}을 넣어 주긴 했는데..function BoardItem({ boardType, pathname }:..

벡엔드, 디자이너분과 같이 협업 프로젝트를 진행 중이다. "Keepy-Uppy"라는 개발 프로젝트 협업을 돕는 서비스다. 작업하는 과정에서 물음표가 생긴 부분을 멘토님께 질문드렸고 새로 알게 된 내용을 정리할 겸, 조금 더 제대로 공부할 겸 남긴다.💁🏻‍♀️ too long? click HERE🚨 문제 상황지난 번 svg 파일을 컴포넌트화 해서 사용하는 방법에 대해 알게 된 후 우리 프로젝트에도 그렇게 변경하는 것이 좋겠다는 의견을 냈고, 감사히 다른 팀원 분께서 변환 작업을 맡아주셨다. 그래서 오늘은 기존에 사용하던 svg 이미지들을 해당 컴포넌트로 바꾸는 작업을 했다. svg 컴포넌트 만들기지난번 "The-Julge" 프로젝트를 진행하며 svg 파일의 색상을 다루느라 시간을 꽤 쓴 적이 있다. ..

지난번 "The-Julge" 프로젝트를 진행하며 svg 파일의 색상을 다루느라 시간을 꽤 쓴 적이 있다. svg 파일 내의 fill 속성에 접근해서 색상값만 변경해 주면 되는 건 알겠는데, 리액트에서 사용하기에 생각보다 번거로웠다. 그러다가 생각해 냈던 방법이 svg 파일을 컴포넌트 화하는 방법이었다. prop으로 색상을 지정해 주는 방법! 그 방법을 생각해내고서 좋은 방법이라고는 생각했는데 굳이 컴포넌트까지 만드는 건 '투 머치'인가 싶은 생각도 들고, 그 방법에 대해 어떤지 물어봤던 팀원의 반응이 뜨뜻미지근해서 결국엔 같은 아이콘을 색상만 바꿔 두 개씩 만들었던 적이 있다. 필요한 색깔이 두 가지였으니 다행이지, 같은 아이콘이 여러 색깔로 필요했다면 파일 하나하나 import 해오기에도, 알맞은 것을..

코드에서 악취가 날 때 그것이 무엇 때문에 나는 냄새인지 찾을 수 있도록(ㅋㅋ) 코드 악취의 요소 24가지를 설명한다. 개인적으로 이번 챕터는 저자가 너무 말을 웃기게 해서 재밌게 읽은 챕터다. (일단 코드 악취라는 말부터가 재미있음) 그런데 각각의 문제 유형에 대한 해결책으로 구체적 리팩터링 단계를 언급하는 부분이 많아서 책을 끝까지 읽은 후에 다시 돌아와서 재차 읽어보면 더 제대로 이해할 수 있을 것 같다. 우선은 쭉 훑어보는 식으로 읽었다. 우선 악취 요소 24가지는 다음과 같다:기이한 이름중복 코드긴 함수긴 매개변수 목록전역 데이터가변 데이터뒤엉킨 변경산탄총 수술기능 편애데이터 뭉치기본형 집착반복되는 switch문반복문성의 없는 요소추측성 일반화임시 필드메세지 체인중개자내부자 거래거대한 클래스서로..