3/ 5 비동기 로직실행되는 작업들이 순차적으로 처리되지 않고,결과를 반환하기 전에 다른 작업을 수행할 수 있도록 하는 것콜백함수, promise, async/await을 통해 구현할 수 있음콜백함수다른 함수가 실행을 완료한 후 호출되는 함수를 의미콜백지옥이란 가독성

2/21 리엑트는 무엇일까?A JavaScript library for building user interfaces기존에 view를 설계하는 방식에서 문제 의식을 느끼는 것에서 시작했다리엑트의 장점데이터 변경이 발생하면 리액트가 변경 지점을 어떻게 그릴 것인지 알아서

사용자 친화적인 설문조사 '폼폼폼' 페이지 바로가기 GitHub 바로가기 > 목차 프로젝트 시작 프로젝트 방향성 개발조건 코드 설명 트러블 슈팅 마치며 🏁 01. 프로젝트 시작 프로젝트를 하기위해 가장 먼저 고민한 부분은 현재 필요한 것은 무엇인가였습니다. 저

백엔드에서 데이터를 가져오는 부분을 테스트하기 위해서는 실제로 서버에 호출하는 end-to-end 테스트를 할 수 있지만, 서버에 요청을 보낼 때 그 요청을 가로채서 mock-service-worker라는 것으로 요청을 처리하고 모의 응답을 보낼 때 사용총 2가지 :

userEvent는 fireEvent를 사용해 제작되었음userEvent의 내부 코드 : fireEvent를 사용하면서 엘리먼트의 타입에 따라서 적절한 반응을 보여줌실제 사용하는 유저가 보기에 버튼을 클릭하는 행위가 더 잘 표현되기 때문에 UserEvent를 사용하는

getByRole('button, {name: /submit/i} : 가장 우선적으로 사용가장 마지막으로 써줘야할 형태img, area, input 등에서 사용

실제 코드를 작성하기 전에 테스트 코드를 먼저 작성테스트 코드를 작성한 후 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성TDD를 하면 좋은 점소스 코드에 안정감이 부여TDD를 사용하면 디버깅 시간이 줄어들고 실제 개발 시간 단축소스 코드 하나하나를 신중하게

package.jon에서 eslint 관련 내용 삭제가장 상위에 .eslintrc.json 파일 제작삭제된 내용 붙여넣기 추가 ESLint 플러그인 설치eslint에서 기본으로 제공하지 않는 다양한 규칙을 플러 그인을 통해 사용가능eslint-plugin-testing

render 함수render함수를 가져오는 방법은 두가지render 후, screen객체로 가져오기쿼리함수로 가져오기소스코드가 복잡해지면 하나씩 쿼리함수를 쓰기 애매하기 때문에 screen 추천페이지에 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법여러 유형의 쿼리

FaceBook에 의해서 만들어진 테스팅 프레임 워크최소한의 설정으로 동작하며 Test Case 를 만들어서 어플리케이션 코 드가잘 돌아가는지 확인단위 (Unit) 테스트를 위해서 이용파일명 지정파일 이름.test.js파일 이름.spec.jstests 폴더describ

Document: 문서 / Object: 객체 / Model: 모델웹 페이지 빌드 과정(Critical Rendering Path CRP)웹 브라우저가 HTML 문서를 읽고, 스타일 입히고 뷰포트에 표시하는 과정문서를 읽어들여서 그것들을 파싱하 고 어떤 내용을 페이지에

React Testing Library : React 구성 요소 작업을 위한 API를 추가하여 DOM Testing Library 위에 구축DOM Testing Library : Dom 노드(Node)를 테스트하기 위한 가벼운 솔루션Create React App으로 생

제주상회 클론코딩 깃허브

🏁 01. 프로젝트 시작 항해 99 리엑트 2주차 과제는 백과 협업하여, 프로젝트를 만들기였습니다. 한번은 도전 하고 싶었던 개발 블로그라는 주제에, 적은 시간에 높은 완성도를 낼 수 있는 클론 코딩을 결합하여, velog 클론 코딩을 기획하여 1주일동안 프로젝트

깃을 사용하지만, 협업을 하지 못했고, 다른 사람들의 코드를 제대로 보적도 많지 않다고 느꼈다.매번 미뤄왔던 git issue와 project를 공부하고 이번주 클론 코딩에 적용해보려한다.우선 기본적인 github관련 폴더가 필요하다.github폴더를 가장 상위에 만들

React 기초 및 리덕스 공부리덕스의 전반적인 형태와 흐름을 집중적으로 공부하였습니다. 틀을 먼저 이해하고, 흐름을 이해하려 노력하였습니다. store, action value, action creator, reducer등 생소한 개념을 이해하고 공부하는데 집중하였습

json server 추가json server 실행db.json을 db로 삼아서, 3001번 포트로 서버를 시작하겠다는 의미db.json 자동 생성

module에서의 counterSlice hook 사용configStore에서의 configureStore hook 사용createSlice는 기존 액션 크리에이터, 액션 value, 리듀서를 모두 합친 hookcreateSlice의 인자는 아래와 같음위에 initia

리덕스를 쓰는 방법은 다양하다. 그래서 더더욱 나에게 좋은 파일 형태를 찾아 먼저 익숙해 지는 것이 리덕스를 이해하는데 도움이 될 것이라 생각했다. 따라서 간단해 보이는 리덕스 파일구조를 정리하고, 이를 우선적으로 몸에 익히려 한다.redux라는 폴더를 만들어 그 안에

Process is a program in execution실행중인 프로그램프로세스의 문맥(context)CPU 수행 상태를 나타내는 하드웨어 문맥프로세스란 것은 CPU를 잡고 매순간 instruction을 실행, 현 시점에서 instruction을 어디까지 실행했는가