React Docs (beta) 번역 및 정리 더보기 1. Built-in React APIs 1-1. createContext 📍createContext 컴포넌트가 읽거나 제공할 수 있는 context를 생성한다 const SomeContext = createContext(defaultValue) 📍createContext(defaultValue) 컴포넌트 외부에서 호출하여 context를 생성한다 import { createContext } from 'react'; const ThemeContext = createContext('light'); ✅매개변수 defaultValue - 일치하는 context provider가 없을 때 context가 가질 값 - 의미있는 기본값이 없으면 null을 명시하..

📍참고 링크 https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API Intersection Observer API - Web API | MDN Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다. developer.mozilla.org 📍intersection observer API 이란? ✅특정 element가 다른 element(거의 viewport로 생각하면 됨) 와 일정 부분 겹칠 때를 감지하고, 이벤트 핸들러를 등록 가능 1. observe할 element 선택 2. 이 elemen..

📍문제 링크 https://www.acmicpc.net/problem/14502 14502번: 연구소 인체에 치명적인 바이러스를 연구하던 연구소에서 바이러스가 유출되었다. 다행히 바이러스는 아직 퍼지지 않았고, 바이러스의 확산을 막기 위해서 연구소에 벽을 세우려고 한다. 연구소는 크 www.acmicpc.net 📍알고리즘 분류 - 구현 - 그래프 이론 - 브루트포스 알고리즘 - 그래프 탐색 - 너비 우선 탐색 📍문제 풀이 - N(세로) * M(가로) 좌표 평면에 바이러스, 벽, 빈칸이 존재한다. 벽을 딱 3개만 세울 수 있을 때, 확보 가능한 안전영역의 최대넓이를 구하라 - 바이러스는 벽이 없는 상하좌우로 퍼질 수 있다 - 빨간 2 = 바이러스 좌표 - 파란 1 = 벽 - 초록 0 = 벽을 세우는 좌표 ..

📍Cypress 란? - JavaScript 테스팅 라이브러리 - 오픈소스 - E2E Test, Component Test 등이 가능 📍Cypress 설치 및 실행 - 참고 https://docs.cypress.io/guides/overview/why-cypress Why Cypress? | Cypress Documentation What you'll learn docs.cypress.io npm i -D cypress npx cypress open 이후 cypress Launchpad가 실행된다 공식 문서에 따르면, 뭘 골라야 할지 확실하지 않을 떄는 E2E Testing을 고르면 된다! - 언제든지 다시 변경할 수 있다 그리고 설정 창에서도 기본대로 continue를 클릭한다 그러면 브라우저를 고를 ..

📍TDD란? - Test Driven Development (TDD) : 테스트 주도 개발 - 켄트 백의 저서에서 처음 등장한 개념 - 테스트를 먼저 만들고, 테스트를 통과하기 위한 코드를 짜는 개발 방법 ⭐원하는 대로 동작하는지 빠르게 피드백을 받는 것 (더 자주, 더 빨리 피드백 받기) - 최소 기능이 동작하는 것을 확인하면 리팩토링 📍계산기 앱을 TDD로 구현하기 ✅필수 구현 기능 - 사칙연산 - 2개의 숫자를 다루는 계산기 ✅개발 과정 1. UI없이 사칙연산되는 프로그램만 만들기 - 일단 console.log 가 포함된 코드 작성 - 그 다음, 내부 로직을 완성(클래스를 구현하는 등) 2. input으로 사용자 입력 받고 이벤트 처리하기 3. 숫자 UI 추가하고 이벤트 처리하기 4. UI 레이아웃..

📍문제 링크 https://www.acmicpc.net/problem/1011 1011번: Fly me to the Alpha Centauri 우현이는 어린 시절, 지구 외의 다른 행성에서도 인류들이 살아갈 수 있는 미래가 오리라 믿었다. 그리고 그가 지구라는 세상에 발을 내려 놓은 지 23년이 지난 지금, 세계 최연소 ASNA 우주 비행 www.acmicpc.net 📍알고리즘 분류 - 수학 📍문제 풀이 - 특정한 수 N 이 주어질 때, 1 ... N ... 1 구조를 만족하는 전체 배열의 길이를 구하면 된다 - 이 문제는 규칙성이 있다 N = 1 (N

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅뭉뚱그려 string 타입으로 할당하는 것을 피하고 구체적인 타입을 사용하는 것이 좋다 ✅변수의 범위를 보다 정확하게 표현하려면 string 타입보다는 string 리터럴 타입의 union을 사용하는 것이 좋다. - 엄격한 타입 체크가 가능하여 생산성을 향상시킬 수 있다 ✅객체의 프로퍼티 이름을 함수 매개변수로 받을 때는, string 보다 keyof T를 사용하는 것이 좋다 📍string 타입의 변수를 선언할 때는 더 좁은 타입을 고려해야 한다 - Date 타입을 사용할 수 있는 프로퍼티에도 string을 사용한다면 개선이 필요하다 // 리팩토링 전 // 모든 프로퍼티가 string이라서 에러를 유발할 수 있다 interface Album..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅유니온을 가진 인터페이스는 프로퍼티간의 관계가 불분명하기 때문에 에러를 유발할 수 있다 ✅유니온의 인터페이스보다 인터페이스의 유니온이 더 정확하고 타입스크립트가 이해하기도 좋다 ✅타입에 태그를 넣는 tagged union을 사용하는 편이 좋다 📍인터페이스들의 유니온 예시 1 인터페이스의 프로퍼티를 유니온 타입으로 사용하는 것보다, 인터페이스들의 유니온 타입 형태로 사용하는 것이 바람직하다 - 예시 type FillPaint = unknown; type LinePaint = unknown; type PointPaint = unknown; type FillLayout = unknown; type LineLayout = unknown; type ..