그럼에도 불구하고

본 포스팅은 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를 정리할 필요성을 못 느끼는 사람도 있지만, 다른 개발자들과 함께 개발을 진행하다보면 개발 스타일이 섞이기 마..

Currying What? 커링은 f(a, b, c)처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합되도록 변환하는 것입니다. 커링은 언어에 상관 없이 존재하는 하나의 기법입니다 Partial Application: 함수를 반환하는 함수이지만 함수가 받는 인자는 하나일 필요는 없다. 여러 개를 받을 수도 있다. // Currying function const add = x => y => z => x + y + z; // Partial Application function const add = x => (y, z) => x + y + z; Why? Lazy evaluation (지연 평가) : 계산의 결과 값이 필요할 때 까지 계산을 늦추는 ..

협업 프로젝트에 필요한 Github 활용 방법 개발 공부를 하다보면 종종 "정답은 없다"라는 말을 듣곤 합니다. 어딘가 더 나은 방법이 있을 수 있다는 개발자들의 철학이 담긴 말이지만, 초심자에게는 이런 말은 그저 광야와 같은 느낌이죠.. 협업 개발의 방법도 여러 가지가 있습니다. 본 포스트는 예제를 찾고 있는 분들에게 조심스럽게 한 가지 예시가 되어드립니다. 물론, 이것은 정답이 아닙니다. 순서 1. [Github] Issue 2. [Github] Projects 3. Branch 전략 4. Commit 단위 5. Pull-Request 6. Code Review 1. Issue를 이용한 작업 등록 What - issue : 새로 추가할 기능, 개선해야할 기능, 버그 등 프로젝트에 필요한 모든 작업 이..

해당 포스트는 React(v17.0.1) 기준입니다. 오늘은 리액트 프로젝트 설정에 대해 알아보겠습니다. 프로젝트를 시작하는 방법보다는 configuration에 대한 내용이 중점입니다. 0. create-react-app(CRA)을 이용한 자동 설정? - 리액트를 처음 시작하는 분들은 대부분 CRA(create-react-app)을 통해 프로젝트를 시작합니다. create-react-app은 React SPA(single page application)를 만드는 것을 도와주는 공식적인 방법이고, webpack이나 babel 등 프로젝트에 필요한 설정들을 직접 구성할 필요없이 자동으로 설정해줍니다. 올인원 솔루션을 지향하는 Rome이라는 통합 툴체인도 등장하고 있지만, 아직은 베타버전... npx cre..

[Issue] React styled-components Font 깜빡임 (feat. GlobalStyle) 일종의 FOUC (Flash of unstyled content) 즉, style이 적용되기 전의 페이지가 보이는 이슈에 속한다고 볼 수 있습니다. [문제] CSS-in-JS 라이브러리인 styled-components 환경에서 createGlobalStyle 내에 폰트를 정의하면 render가 될 때마다 폰트를 재요청하게 됩니다. 이는 styled-components의 github issue에서도 논의가 되었던 문제이며, 폰트뿐만 아니라 background-image와 같이 리소스 요청이 필요한 부분에서 동일하게 발생되는 문제입니다. 해당 이슈에 대한 라이브러리 개발자의 입장을 요약하자면, 1...