공부 정리

출처 : https://ko.redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow Background Concepts state management import react, { useState } from "React"; function Counter() { // state const [counter, setCounter] = useState(0); // action // code that causes an update to the state when something happens const increment = () => { setCounter((prevCounter) => prevCounter + 1); }; // view return ( v..

redux overview This tutorial will introduce you to the core concepts, principles, and patterns for using Redux. part1 리덕스 앱 예제 소개 part2 리덕스 앱에서 데이터가 흐르는 방식과 디테일 소개 part3 state, action, reducer에 대한 활용 redux가 어떻게 작동하는지 설명 이후 표준 패턴, 추상화 what is redux 리덕스는 app 상태를 ‘action’이라고 불리는 이벤트를 이용해서 관리하고 갱신하는 패턴과 라이브러리이다. 상태에 대해 중앙 집중식 저장소 역할을하고, 예측 가능한 방식으로만 업데이트 될 수 있도록 하는 규칙을 제공한다. why should i use Redux 리..

브라우저에서 MSW는 네트워크 수준에서 요청을 가로채는 책임을 지는 서비스 워커를 등록함으로써 작동합니다. 서비스워커는 원칙적으로 HTTPS를 통해 제공되어야 한다 그러나 브라우저는 로컬호스트에서 개발할 때 HTTP에서도 워커를 등록할 수 있도록 허용한다 worker 스크립트 복사하기 만약 애플리케이션이 서비스 워커를 등록한다면, 해당 워커 스크립트를 호스팅하고 제공해야 합니다. 라이브러리의 CLI는 init 명령을 제공하여 빠르게 ./mockServiceWorker.js 워커 스크립트를 애플리케이션의 공개 디렉토리로 복사할 수 있음 npx msw init 복사했으면, 브라우저에서 애플리케이션의 /mockServiceWorker.js URL로 이동한다 💡 만약 localhost:3000 이면 localh..

Import MSW는 HTTP 요청을 설명하기 위한 별도의 네임스페이스를 제공한다 이 네임스페이스로 가로챌 요청과 그에 대한 응답 방법을 설명한다 import the http namespace from the msw package src/mocks/handlers.js import { http } from 'msw' export const handlers = [] Request handler 이제 Request handler를 만든다. http namespace의 모든 메서드는 HTTP 요청 메서드에 대응되는 요청 핸들러를 만들게한다. http[method](predicate, resolver) Request handler : 요청과 mock 응답을 가로채게 하는 함수 실습 endpoint GET /po..

Intercepting requests 요청에 대해 mocked response를 보내기 위해, 우선 요청을 가로채야한다. MSW에서는, 요청 인터셉션을 request handler로 불리는 함수로 수행한다 // Intercept an HTTP GET request which path // matches the "predicate", and resolve it // using the given "resolver" function. http.get(predicate, resolver) "predicate"와 일치하는 경로의 HTTP GET 요청을 가로채고, 이를 주어진 "resolver" 함수를 사용하여 resolve한다 HTTP request HTTP 요청은 http request 네임스페이스를 사용하여..

참고 : https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics WAI-ARIA basics - Learn web development | MDN This article has by no means covered all that's available in WAI-ARIA, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it. developer.mozilla.org unsemantic HTML과 자바스크립..

참조 https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/ Accordion Example Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI). www.w3.org 아코디언 패턴 아코디언 - 각각이 섹션의 콘텐츠를 표현하는 title, content snippet, thumbnail 이 포함된 상호 작용 가능한 제목으로 구성된 수직으로 쌓인 집합 제목들은 사용자가 관련 콘텐츠 섹션을 나타내거나 숨길 수 있는 기능이 있다. 아코디언은 일반적으로 단일 페이지에서 여러 섹션..

현재 진행중인 프로젝트를 netlify로 배포하면서 마주했던 것들을 정리해봤습니다. 배포과정 netlify 들어가서 github에 올린 프로젝트를 import하면 아래같은 설정창이 보임 배포할 branch 선택하고 package.json 의 빌드 명령어 이용하면 됩니다. build command : CI= npm run build ci= 뒤에 공백 + 빌드 명령어 뭔지는 따로 알아보면 조을듯 함 publish directory : build URL 바꾸기 및 배포 진행과정 확인 url 바꾸기 site configuration → site details change site name을 누르고 원하는 url로 바꾸면 된다. 배포 진행 과정 확인 deploys 탭을 누르면 커밋메세지 + 배포 진행 상태등 확인..

! 표현식 뒤에 !를 붙이면 해당 표현식이 null을 반환하지 않는다고 인식시킨다. !연산자는 컴파일러에게 표현식은 값이 무조건 할당되어있다고 말해준다. null 이 반환되지 않음을 보장할 수 있으면 쓰면 된다. document.querySelector('p')!; 만약 느낌표가 앞의 표현식이 null 이 반환되지 않을거라는 확신이 없다면 조건문을 쓰는 해결책이 있음 const userInputElement = document.getElementById('user-input'); if(userInputElement){ (userInputElement as HTMLInputElement).value = 'value'; } 이 상황에서는 형변환은 조건문 안에 넣어주는 것이 맞다 null 검사를 먼저 하고 n..

Type Casting 타입스크립트가 직접 감지하지 못하는 특정 타입의 값을 타입스크립트에게 알려줄 수 있다 ex) DOM querySelector로 요소 하나를 잡는 것은 타입스크립트가 그 요소의 타입을 추론할 수 있게 해준다. const paragraph = document.querySelector('p'); // const paragraph: HTMLParagraphElement | null 그러나 타입스크립트는 HTML 파일을 살펴보고 분석하는 행위를 못한다 위 연산의 결과가 HTMLParagraphElement 이거나 null 이라고 추론한것 뿐이다 그래서 Id 값이나 class 값으로 요소를 잡아도 어떤 요소인지는 정확하게 알지 못하고 HTML 요소라고만 추론한다 const paragraph ..