문익점 스토리

안녕하세요. 문익점이에요. 문익점에 대해 아시나요? 목화씨를 가져온 문익점이요!

코딩

React에서 모달을 띄우는 방식을 선언적으로 처리하는법을 소개합니다. 모달을 띄우는 방식 기존의 모달을 띄우던 방식은 명령형 방식에 따르고 있습니다. 내부 함수나 로직들은 선언적으로 처리하고 모달 처리는 명령형으로 되어있는게 무언가 미적(?)으로 안 좋아 보이며 모달이 켜져있는지 꺼져있는지에 대한 여부는 hook로 숨기고 싶어 선언형으로 바꿔보았습니다. 기존 명령형 방식 ... const [isOpen, setIsOpen] = useState(); return ( setIsOpen(true)}>모달 오픈 { isOpen ? : null } ); ... 새로운 선언형 방식 ... const { open: openComfirmDialog } = useComfirmDialog(); return ( 모달 오픈..

코딩

예전 진행해왔던 코로나 백신 통계 사이트에 WAI-ARIA과 시맨틱 태그를 활용하여 접근성을 개선해보겠습니다. https://www.coronavac.site/ 기간 탭 개선 전 function BoxRadio({ list, active, handleRadio }: BoxRadioProps) { return ( {list.map((v, i) => ( handleRadio(i, v)} > {v} ))} ); } 개선 내용 가장 최상단 탭 리스트에 role을 tablist로 명시합니다. 탭 아이템에는 role을 tab으로 명시합니다. 단일 선택이 가능한 요소이므로 aria-selected 를 속성에 넣어주며 선택 상태를 명시합니다. 개선 후 function BoxRadio({ list, active, han..

코딩

웹 접근성 왜 필요할 까? 웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹 사이트를 이용할 수 있게 웹 사이트를 디자인, 개발하는 것을 의미합니다. 예를 들어 1스크린리더를 이용하는 사람, 키보드만 이용하는 사람들이 사용 할 수 있게 만드는 것 입니다. 그래서 보조과학기술(assistive technology)들이 웹 사이트를 해석할 수 있도록 접근성을 갖추는 것이 필요합니다. 표준 및 지침 중 WAI-ARIA Web Accessibility Initiative - Accessible Rich Internet Applications 문서에는 접근성을 갖춘 JavaScript 위젯을 만드는 데 필요한 기술들이 담겨있습니다. React는 접근성을 갖춘 웹..

코딩

고양이 사진첩 애플리케이션 프로그래머스 2021 Dev-Matching: 웹 프론트엔드 개발자(상반기) - 고양이 사진첩 애플리케이션 과제에 대한 리뷰입니다. 자세한 내용은 프로그래머스에서 확인해주세요. 문제링크 👉 https://programmers.co.kr/skill_check_assignments/100 화면 구성 파악 먼저 화면구성 설계를 위하여 구조를 살펴본다. 화면 구성을 통해 만들어야되는 구조를 파악하자면 트리 형태의 데이터임을 알 수 있다. root(최상단)에 존재하는 폴더나 이미지를 보여주고 특정한 폴더에 들어간다면 그 특정한 폴더에 포함된 폴더나 이미지를 보여주는 형태이다. 실제로 API는 두가지가 주어지는데 root에 속한 데이터를 가져오는 것, 특정 폴더에 있는 데이터를 가져오는 ..

코딩

Javascript 엔진 Javacript 엔진은 두 가지 유형이 있다. 첫 번째로는 인터프리터이고 두 번째는 Javascript 코드를 바이트 코드로 컴파일하는 just-in-time 컴파일러이다. 이 엔진들로는 대표적인 V8 이 외에도 SpiderMonkey, Chakra등 여러가지가 존재한다. JIT(Just-In-Time) Compiler 우선 컴파일은 무엇일 까? 브라우저에서는 Javascript 를 처리하기 위해서, Javascript 엔진 으로 Javascript 소스 를 내부에서 이해할 수 있는 언어로 변환하고 실행하는데, 이를 컴파일 이 라고 부른다. 즉 Javascript를 기계가 이해하기 위한 기계어로 변환하는 과정이다. V8 에서는 먼저 JavaScript 코드를 인터프리터 방식으로..

코딩

리액트에 대하여 https://reactjs.org/ 리액트란? 공식페이지에 들어가보면 리액트는 UI(User Interface)를 위한 Javascript Library라고 설명한다. 데이터(state)를 가지는 간단한 뷰를 설계하면 데이터 변할때 마다 효율적으로 뷰를 업데이트하는 interactive ui를 만들어준다. 리액트는 이 뷰를 component라고 부른다. 좀 더 복잡한 UI를 만들기 위해 각각의 데이터(state)를 가진 component를 구성한다. 하나하나의 component들이 모여 application을 구성한다. virtual dom virtual DOM은 이상적인 혹은 가상(an ideal, or “virtual”) UI의 표현이 메모리에 유지, 리액트DOM과 같은 라이브러리에..

코딩

리팩터링 2판(마틴 파울러 저)을 읽고 작성한 리뷰입니다. 1~4장에서는 리팩터링의 간단한 맛을 보고 왜 리팩터링이 필요한 지에 대해 알아보았다면 6장부터는 리팩터링의 기법들을 하나씩 소개한다. 5장에서는 6장부터 소개 할 카탈로그를를 어떤 형식으로 소개 할 것인지 설명한다. 5.1 리팩터링 설명 방식 이름 리팩토링 기법의 네이밍 개요 리팩토링 기법의 핵심 개념을 개념도와 코드예시로 간단히 표현합니다. 코드가 어떻게 달라지는지 보여준다.이 기법이 어떤 것인지 쉽게 떠올리기 위한 것이다. 배경 리팩토링 기법이 왜 필요한지와 적용하면 안되는 상황을 설명한다. 절차 리팩토링 기법의 과정을 단계별로 제시한다. 제대로된 설명은 `예시'에서 설명한다. 구체적인 순서가 기억이 안날 때 살펴보면 된다. 예시 리팩토링 ..

코딩

리팩터링 2판(마틴 파울러 저)을 읽고 작성한 리뷰입니다. 4.1 자가 테스트의 가치 4.1에선 테스트들의 좋은 점들을 나열한다. 테스트 코드의 목적은 미래에 발생할 수 있는 버그를 예방하기 위한 목적이다. 테스트코드는 작성한 코드가 의도한대로 제대로 값을 출력했는지 직접 확인하는 것이 아니라 컴퓨터가 확인하여 성공, 실패 여부를 출력하도록 한다. 이렇게 한다면 코드가 의도하는 대로 동작하는지도 확인 할 수 있는 것은 물론 리팩토링을 진행하는 과정에서도 계속해서 코드의 동작이 망가졌는지 아닌지도 확인이 가능하다. 이 책에서는 테스트코드 작성시기를 프로그래밍을 시작 전에 가장 적합하다고 주장한다. 즉 테스트 코드를 미리 작성한 뒤 구현하는 TDD를 소개한다. 테스트를 작성하고 이 테스트를 통과 하도록 코드..