문익점 스토리

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

코딩

Blogger 글꼴(폰트) 바꾸기 블로그스팟에서는 기본적으로 테마별로 제공하는 폰트를 사용하고 있습니다. 이는 CSS의 폰트 속성으로 전역적으로 적용하는 경우도 있고 홈 페이지, 글 자세히보기 페이지 별로 다르게 적용하는 경우도 있습니다. 이 글은 내가 원하는 폰트로 적용하는 법을 안내합니다. 글꼴 변경하기 1.cdn 링크를 html head에 추가하기 글꼴을 변경하기 위해서는 블로그스팟의 관리 페이지에 로그인한 후, 테마 > 맞춤설정 옆 토글 버튼 > HTML 편집을 클릭합니다. 원하는 글꼴을 추가하기 위해서 다음과 같은 코드를 추가해야 합니다. 태그안에 적절하게 추가합니다. 이는 cdn 서버에 올라가 있는 폰트를 다운받아서 폰트를 변경하는 방식입니다.즉 인터넷에 업로드 된 폰트를 받아오는 코드입니다.

코딩

면접 질문들을 기억나는대로 정리한 리스트입니다. 기술 면접을 준비하시는분들에게 많은 도움이 되었으면 합니다~ 네트워크 (1) 로그인과 로그인 유지를 할 때 어떤 방식으로 구현했는지 순서대로 설명해주세요. (2) HTTP 0.9, HTTP 1.0, HTTP 1.1 각각 무슨 차이점이 있나요? (3) HTTP 메소드들을 설명해주세요. (4) HTTP와 HTTPS는 어떤 차이점이 있을까요? (5) HTTP 헤더 중 Etag는 어떠한 역할을 하나요? (6)HTTP 헤더 중 Cache-Control는 어떠한 역할을 하나요? (7) HTTP status code 중 304는 어떤 의미인가요? 브라우저 - 랜더링 방식 (1) 검색창에 google.com을 치게되면 일어나는 일을 네트워크부터 브라우저가 하는일까지의 과..

코딩

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에 속한 데이터를 가져오는 것, 특정 폴더에 있는 데이터를 가져오는 ..