전체 글39 switch ~ case 문으로 코드를 더 깔끔하게! 삼항 연산자는 간단한 조건 분기엔 유용하지만,조건이 많아질수록 가독성이 떨어지고 유지보수가 어려워집니다.예를 들어 아래 코드를 보면:const example = data?.serviceId ? data?.servicePlan[0] : data?.servicePlan.find((data) => data.code === selectCode);return ( example || data?.servicePlan.find((data) => data.category === Category.EXAMPLE));조건이 중첩되어 있어, 한눈에 로직을 파악하기 어렵습니다.✅ switch ~ case 문으로 리팩토링해보자위 코드를 switch (true) 패턴을 활용해 다음과 같이 바꿀 수 있습니다: switch (t.. 2023. 8. 4. (사용자를) 생각하게 하지마! 우리가 실제 웹을 사용하는 방식첫 번째 진실:사용자는 웹 페이지를 읽지 않는다. 훑어볼 뿐이다.무엇을 주의 깊게 보는지는 사용자의 상황과 목적에 달려 있으며, 그 관심 범위는 페이지의 일부에 불과하다.웹 접근성에 대하여접근성을 고려하는 것은 선택이 아닌 책임이다.더 많은 사람들이 웹을 원활하게 이용하려면 접근성은 자연스럽게, 그리고 쉽게 적용될 수 있어야 한다.이를 위해서는스크린 리더나 보조 기술은 더 똑똑해져야 하고,드림위버 같은 웹 제작 도구는 접근성 관련 코드를 쉽게 작성할 수 있도록 도와줘야 하며,디자인 프로세스는 초기 단계부터 접근성을 포함해야 한다.접근성은 모두를 위한 기본이 되어야 한다. 2023. 5. 7. 자바스크립트 배열 요소 랜덤 선택하기 보호되어 있는 글 입니다. 2023. 5. 7. 프로젝트가 서쪽으로 간 까닭은 최근 읽은 책에서 인상 깊은 구절을 발견했고 그 여운을 남기고 싶어졌다.우리 개발팀의 프로세스는 다음과 같다.업무 할당 → 작업 진행 → 코드 PR → 코드 리뷰 → 최소 5인의 승인 후 머지(Merge)처음에는 코드 리뷰가 두려웠다.내가 작성한 코드를 다른 사람이 들여다본다는 건 마치 내 민낯을 들키는 기분이었다.하지만 지금은 다르다.성장을 위한 피드백은 언제나 환영이다.더 나은 코드를 작성하기 위해 그리고 함께 일하는 동료들을 위해 끊임없이 고민하고 노력해야 한다.누가 봐도 이해할 수 있는 코드를 작성하는 것,적어도 우리 팀원들에게만큼은 명확하고 일관된 코드를 보여줘야 한다는 책임감을 갖게 되었다. 저 구절을 읽는 순간, 자연스럽게 ‘코드 컨벤션’이라는 팀의 약속이 떠올랐다.우리 팀에도 다른 개발팀들.. 2023. 5. 6. useMemo를 사용해서 불필요한 연산 줄이기 React 함수 컴포넌트는 렌더링이 일어날 때마다 컴포넌트 내부의 코드가 처음부터 다시 실행됩니다.따라서 컴포넌트 안에서 변하지 않는 값이나 복잡한 연산을 매번 다시 계산하는 경우가 생기는데, 이것은 비효율적인 성능 저하를 초래할 수 있습니다.문제 상황예를 들어, 특정 문자열을 입력받아 검색하는 컴포넌트가 있다고 가정해 봅시다.// 특정 문자열을 검색하는 컴포넌트const [word, setWord] = useState('');const categories = (filterData.data?.class || []) .filter((category) => category.id === SearchInfo.CATEGORY) .map((category) => category.contents) .flat().. 2023. 5. 6. Array.some() ✅ 개요Array.some() 메서드는 배열을 순회하면서 조건을 만족하는 요소가 하나라도 있는지 검사할 때 사용합니다. 🧠 동작 방식배열의 각 요소에 대해 콜백 함수를 실행합니다.콜백 함수가 true를 반환하는 요소가 하나라도 있으면 전체 결과는 true입니다.모든 요소가 조건을 만족하지 않으면 false를 반환합니다.조건을 만족하는 요소를 찾는 즉시 순회를 멈추기 때문에 효율적입니다. 💡 사용 예시some()은 프로젝트에서 배열 내부의 데이터 유효성을 검사하거나 조건을 만족하는 항목이 있는지 빠르게 확인할 때 유용합니다.예를 들어, 아래는 pdfs 배열 중 url 또는 fileName이 비어 있는 항목이 있는지 확인하는 코드입니다:const invalidate = selectedMarker.cont.. 2023. 3. 29. 이전 1 ··· 3 4 5 6 7 다음
