클린코드 샘플(JavaScript)7 비동기 처리에 대한 클린 코드 예제 5 6 7 8 id를 선택하세요. ■ 흐름 select event → handleChange → getProduct → renderProduct → render ※ 1차 리팩토링 - getProduct 함수에서 fetch를 분리한다. getProduct 함수는 이제 fetchProduct 함수의 결과 값만 출력해주는 기능을 수행하게되었고 더이상 async/await가 필요하지 않게 되었다. (사용해도 기능이 작동하는데 영향을 주지 않는다) async function fetchProduct(id){ const res = await fetch(`https://api.escuelajs.co/api/v1/products/${id}`); const json = await res.json(); return json.. 2022. 11. 21. [2] 클린코드 Rule [1] DRY(Don't Repeat Yourself) - 반복하지마라 [2] KISS(Keep It Simple, Stupid) - 심플하고, 멍청하게 유지하자 ■ Code : 10줄 짜리 코드를 1줄로 줄이기 위해 화려한 테크닉을 이용해서 가독성을 떨어뜨리기 보다는 누구나 이해할 수 있도록 심플하고 간결하게 작성하는 것이 좋다. ■ Function : 별도의 주석을 달지 않더라도 함수의 이름, 매개변수 그리고 구현된 사항의 코드를 읽었을 때 한 번에 이해할 수 있도록 한 가지의 기능을 수행하는 코드를 작성하는 것이 좋다. ■ Class : 한 가지의 챔임만 담당하는 클래스를 심플하게 만드는 것이 좋다. ■ View : 사용자에게 보여지는 UI를 담당하는 컴포넌트에는 별도의 비즈니스 로직을 포함하지 않.. 2022. 11. 17. [1] 클린코드 Rule 1. 식별자에 의미를 부여하라. 1-1. 식별자 이름을 줄여쓰지 말아라. 1-2. boolean 타입의 변수는 접두사(prefix)를 사용해라. "isLoggedIn", hasFollowers" etc... 1-3. 함수는 동사를 넣어 사용해라."get, set, reset, fetch, add, remove, update, delete, etc... 2. 기본 매개변수(default parameter)를 사용해라. 3. 인수/인자를 3개로 제한해라. 만약 더 필요하다면 객체에 담아라. 4. 함수의 매개변수로 boolean 타입을 사용하지 마라. 함수의 기능을 쪼개어 따로 관리해라. 5. 조건문을 캡슐화해 함수로 사용하라. [1] 식별자에 의미를 부여하라. [1] example if(password.le.. 2022. 11. 17. Redux - reducer(switch문) 리팩토링 ■ switch문을 reducer함수에서 분리 - 구조분해 할당으로 매개변수명을 가독성 좋게 만든다. Redux에서 reducer는 보통 아래와 같은 형태를 하고 있다. const store = (() => { let state; return { getState(){ return state; }, dispatch(action){ state = reducer(state, action); } } })(); const initialState = { todos: [] }; const reducer = (state = initialState, action) => { switch(action.type){ case "addTodo" : return { ...state, todos: [ action.data, ...s.. 2022. 11. 15. if else, switch (feat. 객체 + 함수) ★ 규칙을 찾아내고 기능별 최소 단위로 쪼개어 분리하여 관리하는 습관이 필요하다. 3월 ~ 5월: 봄 6월 ~ 8월: 여름 9월 ~ 11월: 가을 12월 ~ 2월: 겨울 위 데이터를 바탕으로 계절을 알아내는 함수를 만들어보자 const getSeason = month => { if(month >= 3 && month = 6 && month = 9 && month = 12 || month { switch(){ case 3: case 4: case 5: return "봄"; case 6: case 7: case 8: return "여름"; case 9: case 10: case 11: return "가을"; case 12: case 1: case 2: return "겨울"; } } 위와 같이 단순하게 표현할.. 2022. 11. 15. 함수형 프로그래밍, 상속 (커링, Currying) ■ Dirty Sample#1 const handler = (e, id) => { console.log(`${id} 여길 클릭했구나 ${e.offsetX}`); } document.addEventListener("click", (e) => handler(e, "front")); ↑↑ addEventListener의 2번째 인자는 콜백함수의 자리다. 보통 위와 같이 코드를 작성하는 경우가 많다. ■ Clean Sample#1 const handler = id => e => { console.log(`${id} 여길 클릭했구나 ${e.offsetX}`); } // 풀어쓰면 아래와 같다. // const handler = (id) => { // return (e) => { // console.log(`${id.. 2022. 11. 1. 이전 1 2 다음
