과제 제출마감 10분전

리액트에서 특정 DOM을 선택하려면? Vanilla JS로 개발할 때에는 document.getElementById("id-value")과 같이 id값이 id-value인 DOM을 선택할 수 있었다. 하지만 리액트에서는 위의 방법을 대체할 수 있는 방법이 존재한다. 그렇다면 리액트에서 특정 DOM을 선택하려면 어떻게 해야 할까? 바로 useRef()를 이용하면 된다! 현재 작성하고 있는 프로젝트에서 함수형 컴포넌트로 코드를 작성하고 있기 때문에 함수형 컴포넌트를 사용할 때 useRef()를 사용하는 방법에 대해 알아보려고 한다 (❁´◡`❁) useRef() import React, { useRef } from "react"; const textRef = useRef('mini'); 먼저 useRef를 i..

[ 해당 글은 C++을 기준으로 작성했습니다. ] Stack Last In First Out (LIFO) 원소를 컨테이너의 한쪽 끝(스택의 top)에서만 꺼내거나 넣을 수 있다. 괄호 짝 맞추기를 할때 많이 사용했던 자료형. 중위식을 후위 표기법으로 변환할 때도 쓰인다. Code Queue First In First Out (FIFO) 원소를 컨테이너의 뒤(back)에 넣고, 앞(front)에서 꺼낸다. BFS의 핵심이 되는 자료형 Code + Stack 두 개로 Queue 구현해보기 스택 두 개를 이용해서 큐를 구현해 보았다. 큐는 다음과 같이 1 2 3 순서대로 넣으면 pop을 했을 때 1 2 3 순서대로 나와야 한다. 이를 입력을 받아들일 스택인 stack_for_input과 출력을 할 스택인 st..

Array (배열) 같은 자료형에 대한 자료들을 메모리에 연속적으로 저장하기 위해 사용된다. 물리적 저장 순서와 논리적 저장 순서가 일치하는 특징이 있다. 선언되면 컴파일 타임에 할당할 사이즈를 미리 정해놓고 정적 메모리를 할당함 ➡ 크기가 미리 정해지며, 사이즈 변경이 힘듦 index를 통한 random access가 가능하다. (이는 배열의 원소들이 연속된 메모리 위치에 저장되기 때문임) 크기 : 자료형에 대한 메모리 할당 크기 * 배열 요소의 개수 삽입 : O(N) 삭제 : O(N) 탐색 : O(1) ▶ 삽입/삭제 시에는 해당 원소를 삭제한 뒤, 다른 원소들의 조정이 필요하기 때문에 worst case가 O(N)이 됨 배열을 사용하기 좋은 경우 데이터의 개수가 정해져 있다 데이터 탐색을 할 일이 많..

본 게시글은 부스트코스에서 이선주님의 "웹 접근성 이해" 강의를 수강하고 작성된 게시글입니다. 3. 웹 접근성 진단도구 CCA (Color Contrast Analyser) 명도 대비 체크 프로그램 KWCAG a11y inspector 컨트롤의 대각선 길이를 측정 OpenWAX 접근성을 자동으로 진단 가능한 부분까지 진단해주는 프로그램 W3C Validation 웹 표준 검사 사이트

본 게시글은 부스트코스에서 이선주님의 "웹 접근성 이해" 강의를 수강하고 작성된 게시글입니다. 1. 웹 접근성의 이해 웹 접근성이란? 어떠한 사용자가 어떠한 기술 환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것, 따라서 모든 기기에서 불편함 없이 웹에 접근할 수 있도록 해야 한다. 웹 접근성을 준수해야 하는 이유? 1. 장애인 차별 금지법 법으로 정해져 있기 때문에 2. 웹의 지향성 www의 창시자 팀 버너스 리는 "웹의 힘은 보편성에 있으며, 장애에 구애 없이 모든 사람이 접근할 수 있도록 하는 것이 웹의 필수 요소"라고 하였음 2. 웹 접근성 지침 W3C가 WCAG(웹 콘텐츠 접근성 지침)을 발표 이를 국내 설정에 맞게 반영한 것이 KWCAG. 원칙 4..

React로 웹 앱을 만들 때, 입력하지 않은 input이 있으면 알림을 띄우는 기능을 구현하려고 했다. 이 때 alert 대신 toast를 통해 알림을 띄우면 깔끔해 보일 것 같아 만들어보는 toast 알림창! ❕ Toast Notification 이런 알림이 toast알림이다. 안드로이드에서 자주 보이는 알림인데, 웹에서는 내장되어 있는 기본 기능이 아니기 때문에 직접 만들어야 한다. + react-toastify라는 오픈 소스 라이브러리를 이용하여 간단하고 쉽게 toast 알림 기능을 사용할 수 있게 코드를 제공하고 있었다. 하지만 나는 직접 만들어 보고 싶은 생각이 있어서(...!!) 이번만 만들어보고 다음부터는 저 오픈소스를 사용한 알림도 구현해보고 싶다. 💫 구현 과정 1. 기능 구상 위의 r..

grid를 통해 이미지와 텍스트들을 배치해줬다. 근데 이미지가 너무 커서 화면을 넘어가는 현상 발생... 이를 자르기 위해서는 다음과 같이 하면 된다 .detail-element > img { grid-area: detail-element-img; height: 100%; display: block; overflow: hidden; }

React 환경에서 Kakao Map API를 사용하면서 api key를 관리하는 방법 1. dotenv 설치 yarn add dotenv // or npm install dotenv 2. index.html의 head부분에 스크립트 추가 3. 프로젝트의 최상단에 .env 파일 생성 src파일 내에 만들어야 했나 싶었는데 index.html에서도 써야하고 해서 그냥 최상단? 사진 위치에 해줬을 때 잘 동작했음 4. gitignore에 등록 우리의 소중한 api key는 노출되면 안되니까 5. env에 api key 작성 REACT_APP_KAKAOMAP_API_KEY=qwer1234 반드시 REACT_APP_으로 시작해야 한다 설정 끝!

다음과 같은 글씨를 꾸미기 위해 노란색으로 텍스트를 둘러주려고 한다. 방법 1. -webkit-text-stroke 사용 -webkit-text-stroke: 1px yellow; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: yellow; 다음과 같은 코드로 적용시킬 수 있다. 그러나 관련 문서를 보면 해당 방식으로 테두리를 주는 것이 표준이 아니며, IE에서는 지원이 되지 않는다고 한다. 또한 이 방식은 글자의 안쪽으로 테두리를 주는 방식이라 글자가 작으면 다음과 같이 보이는 특징이 있다. (방법 2와 비교해보면 다르다) 방법 2. text-shadow 사용 text-shadow: -1px 0px yellow, 0px 1px yellow, 1..