클린코드 개인 프로젝트의 헤더 컴포넌트 코드를 정리해보겠습니다. 내 코드를 타인이 봤을 때 이해할 수 있을까? 라는 목표로 코드 정리를 진행해보았습니다. Before 선언형과 명령형이 뒤섞여있습니다. 동료들이 이 코드를 보고 한번에 이해하기는 어려울 것 같습니다. After 최대한 선언적으로 고쳐보고자 노력했습니다. Header 컴포넌트이므로 header 태그와 header_content는 유지한 상태에서 내부 코드를 최대한 추상화 해보았습니다. 커스텀 링크나 커스텀 버튼의 경우, props나 핸들러를 통해 어떤 역할을 할 지 명시해주었습니다. 결론 생각보다 재밌는 작업이지만, 시간이 많이 걸리는 것 같습니다. 하지만 좋은 동료가 되려면 의도적인 연습은 필수일 것 같습니다. 아직 모자란 직관과 실력이지만..
클린코드를 시청한 이유 지금까지는 언어의 이해와 구현에 많은 리소스를 투자해왔습니다. 구현에 급급하다보니 질 좋은 코드가 나오기 힘들었습니다. 앞으로는 협업을 위한 스킬에 많은 리소스를 투자하려 합니다. 그 첫걸음은 클린코드라고 생각해서 클린코드 영상을 시청하게 되었습니다. https://www.youtube.com/watch?v=edWbHp_k_9Y 클린코드의 목적 단일 목적을 하는 코드가 흩뿌려져 있거나, 하나의 함수가 여러 역할을 하고 있다면 동료 개발자들이 제 코드를 읽기 어려워 할 수 있습니다. 또는 나만 알고 있어서 나만 수정할 수 있는 코드가 생길 수도 있습니다. 이는 조직적 관점에서 좋은 현상이 아닙니다. 코드의 질에 따라 생산성에 차이가 생기며, 생산성은 시간이고 시간은 곧 돈이기 때문입..
버튼을 누르면 2초 뒤 DOM이 조작되어 브라우저에 렌더링 된다. 0. HTML 뼈대 및 정리 안된 코드 분식점 음식제작 한 껏 늘려쓴 코드이다. if문이 중첩되어있고, 모든 기능들이 함수 하나에 전부 내장되어 있다. 1. if 합치기 if문이 2개라면 연산자로 묶어서 하나로 표현해줄 수 있다. 이를 통해 코드 한 줄을 줄일 수 있고, 들여쓰기를 삭제해줄 수 있다. 1-1. if문 밖으로 코드 빼기 (+ 드모르간의 법칙) 논리 연산에서 AND와 OR 연산을 서로 바꾸고 각 변수에 부정을 취할 때 두 값은 논리적으로 같다는 것이 드모르간의 법칙이다. ('el이 존재하며 orderList가 배열로 존재해야 한다'와 'el이 없거나 orderList가 없어야 한다'는 논리적 동치관계) 여기에서는 드 모르간의 ..
문제 const grades = [80.55, 90, -95, -45, 44.3, 100, 177] /* 아래 조건에 따른 새로운 배열을 만들어서 console.log 해야 합니다. 1. 0 ~ 100점이 유효한 점수입니다. 2. 소수점을 제거해주세요. 3. 각 엘레멘트의 뒤에 '점'을 추가해주십시오. ex) 80점 4. console.log로 출력 해주십시오. */ const validGrades = [] // 새로운 배열입니다. for문, if문 const grades = [80.55, 90, -95, -45, 44.3, 100, 177] const validGrades = [] // 새로운 배열 // 1번 풀이 for (let grade of grades) { if (grade >=0 && grad..
