그럼에도 불구하고

본 포스트는 더 나은 UX를 위한 개인적 경험과 고민이 담긴 글입니다. 1. 요구사항 - 선거 조직은 [대분류]-[중분류]-[소분류]로 구분된다. - [대분류]는 기본 값으로 "중앙자치기구", "단과대", "학과"를 갖는다. - [대분류]인 "중앙자치기구"와 "단과대"는 [중분류]만 갖는다. - [대분류]인 "학과"는 [중분류]와 [소분류]를 갖는다. - "학과"의 [중분류]는 "단과대"의 [중분류]를 사용한다. - "저장" 버튼을 누르면, 입력된 input 태그의 데이터를 서버에 전송한다. - 데이터 전송 후, 서버에 저장된 새로운 데이터를 호출하여 UI를 최신화한다. 2. 고민 내가 고민했던 내용은 다음과 같다. 선택 1) 모든 정보를 입력한 다음, [저장하기] 버튼을 통해 최종 데이터를 전송한다. ..

본 포스팅은 2021년 상반기에 진행한 협업 프로젝트 [WEVOTE]에 대한 회고 기록입니다. [이전 프로젝트] 2021.11.14 - [Development/Front-End] - [온라인 선거 홍보 서비스] 프로젝트 회고 - UNIVVOTE편 [온라인 선거 홍보 서비스] 프로젝트 회고 - UNIVVOTE편 본 포스팅은 2020년 하반기에 진행한 개인 프로젝트 [UNIVVOTE]에 대한 회고 기록입니다. 프로젝트 명 : UNIVVOTE 프로젝트 기간 : 2020.10 ~ 2020.11 (2개월) 프로젝트 설명 : OO대학교 온라인 선거 홍보 서비 despiter.tistory.com [프로젝트 명] WEVOTE [프로젝트 기간] 2021.02 ~ 2021.08 (6개월) 후 리팩토링 진행 중 [프로젝트..

본 포스팅은 [토스] Youtube 채널의 "SLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code" 영상을 보고 작성한 리뷰입니다. [목차] - 실무에서 클린 코드의 의의 - 안일한 코드 추가의 함정 (코드 리팩토링 예제) - 로직을 빠르게 찾을 수 있는 코드 1. 응집도 2. 단일책임 3. 추상화 실무에서 클린 코드의 의의 좋지 않은 코드란 무엇일까? 1) 좋지 않은 코드는 흐름 파악이 어렵다. 2) 좋지 않은 코드는 도메인 맥락 표현이 안 되어 있다. 3) 좋지 않은 코드는 동료에게 물어봐야 알 수 있는 코드이다. 좋지 않은 코드는 개발의 병목이 되며, 유지보수할 때 시간이 오래 걸리며, 기능 추가가 불가능할 수도 있다. 따라서, 우리는 읽기 좋은 코드를 작성하여, 코드 리뷰 시..

본 포스팅은, [FEConf Korea] Youtube 채널의 [상태관리, 이제 Recoil 하세요] 영상을 보고 작성한 리뷰입니다. FEConf Korea - 상태관리, 이제 Recoil 하세요 주의. Redux보다 Recoil이 좋다는 의견이 아닙니다. 1. 너도 나도 쓰는 Redux 1) 외부 저장공간(store)의 사용 2) 강한 제약사항 3) 번거로움 2. Recoil의 등장 도입배경 - 페이스북이 만들었다. - 생각보다 훨씬 쉽고, 간결하게 사용할 수 있을 것 같았다. 핵심 컨셉 - React의 내부 상태만을 활용한다. - 작은 Atom 단위로 관리 - 순수함수 selector - re-render 최소화 - 데이터 흐름을 따라서 - 곧 새로운 React 기능과 호환성 예시 Modal 기능은 ..

본 포스팅은 2020년 하반기에 진행한 개인 프로젝트 [UNIVVOTE]에 대한 회고 기록입니다. 프로젝트 명 : UNIVVOTE 프로젝트 기간 : 2020.10 ~ 2020.11 (2개월) 프로젝트 설명 : OO대학교 온라인 선거 홍보 서비스 1. UNIVVOTE 프로젝트를 하게 된 이유 1-1. 왜 프로젝트를 하는가 많은 개발자들이 프로젝트를 통해 새로운 기술과 지식들을 접하는 기회를 얻는다고 생각했습니다. 웹 서비스가 세상에 나오기까지 어떤 과정들이 필요한 지 알기 위해서는 직접 만들어보는 것이 도움이 될 것이라 판단하여 직접 배포하여 사용자를 발생시키는 것을 목표로 서비스를 기획하기 시작했습니다. 1-2. 왜 선거 프로젝트를 하는가 혼자 프로젝트를 진행하기로 결심하고, 나에게 혹은 내 주변에 어떤..

Javascript Style Guide 1. 가독성은 좋은 코드의 조건 중 하나 개발에서의 가독성은 사람이 읽기 쉬운 코드를 작성하는 것을 의미합니다. 우리는 왜 가독성이 좋은 코드를 작성해야 할까요? "여러 개발자가 함께 일하기 때문이다"와 같은 표면적 이유들을 넘어 그 본질적 목표는 생산성의 향상에 있습니다. 경제적인 관점에서, 기업은 투입되는 비용을 최소화하여 최대의 효율로 이윤을 내는 것이 굉장히 중요합니다. 투입되는 비용에는 개발 비용 즉, 개발에 투입되는 시간과 노력 등이 포함될 것이고, 가독성이 좋은 코드는 개발자들이 빠르고 쉽게 코드를 읽을 수 있어 코드를 이해하는데 필요한 시간을 줄일 수 있다는 장점이 있기 때문에 가독성이 곧 좋은 코드의 조건 중 하나가 될 수 있는 것이죠. 물론, 개..

반응형 웹(Responsive Web)의 이해 *이 글은 무엇인가요? 이 글은 반응형 웹에 대한 기본적인 이해, 반응형 웹을 적용하는 기준과 방법에 대한 간단한 예시를 다루는 글입니다. *이 글은 무엇이 아닌가요? 이 글은 반응형 웹을 개발하기 위한 구체적인 코드 사례들을 소개하는 글이 아닙니다. *목차 1. 반응형 웹이란? 2. 뷰포트(Viewport) 3. 미디어 쿼리(media-query) 4. 분기점(breakpoint) 5. 반응형 웹 디자인 9가지 기본 원칙 6. Mobile First vs Desktop First 7. 마무리 반응형 웹(Responsive Web)이란? 사용자의 디바이스나 사용자의 필요에 따라 화면의 크기가 자동으로 변하도록 만든 웹 페이지를 의미합니다. 반응형이라는 용어를..

웹 접근성(Web Accessibility)의 이해 *이 글은 무엇인가요? 본 포스팅에서는 웹 접근성에 대한 전반적이고 간단할 설명을 제공합니다. 웹 콘텐츠 접근성 지침에 대한 일부 예시를 다루고 있습니다. *이 글은 무엇이 아닌가요? 본 포스팅은 웹 접근성 지침과 관련된 구체적인 예시들을 제공하지 않습니다. 간단한 소개 목적으로 일부 예시가 포함되나 해당 글의 목적과는 다릅니다. 접근성을 위한 구체적인 코드 예시를 원하신다면, [한국형 웹 콘텐츠 접근성 지침 2.1] 혹은 [NULI]라는 사이트를 활용하시는 것을 추천드립니다. 웹 접근성 웹 접근성(Accessibility)이라는 용어는 어떠한 사용자(장애인, 노인 등), 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정..

*material-ui는 v5부터 typescript를 안정적으로 지원하기 때문에 @types/material-ui 같은 별도의 패키지는 필요 없음 *작성 이유 - Material-ui를 typescript로 적용하는 과정에서 theme, breakpoint, palette 등 type 선언에 대한 공식 문서의 설명이 친절하지 않다고 판단 *핵심 - node_modules/@material-ui/core/styles 디렉토리에서 기본 설정되어있는 타입 선언 및 구조를 뜯어보자 Issue 1) 활용 중인 material-ui 코드 중 공통 부분을 통합하고, typescript로 마이그레이션하는 과정에서 발생 2) style.ts에 theme을 생성하고 커스터마이징하는 과정에서 palette를 추가함 3) ..

1. 이 글은 vscode의 sort-imports extension을 활용하여 import 구문을 정렬하는 방법에 대한 글입니다. - sort-imports extension 활용 방법 - sort-imports 관련 ESLint rules 설정 방법 2. 이 글은 어떤 기준으로 import 구문을 정렬해야하는지 알리는 글이 아닙니다. - 여러 방법 중 어떤 것이 더 좋은 방법인지 명확하게 이야기하지 않습니다. WHY - import sorting은 왜 필요할까요? >> 결론적으로 import 구문 정렬은 개발자 개인 취향입니다. 용도별로 직접 구분하며 정리하는 사람도 있고, 굳이 import를 정리할 필요성을 못 느끼는 사람도 있지만, 다른 개발자들과 함께 개발을 진행하다보면 개발 스타일이 섞이기 마..