React Testing Tutorial(9) - findBy

findByReact Testing Library에서 DOM요소를 찾을 때 많이 쓰이는 메서드 중 하나인 findBy는 비동기적으로 요소를 찾을 때 유용하다.API 호출이나, 타이머처럼 일정 시간이 지난 후에 렌더링 되는 요소를 테스트할 때 주로 사용된다.findBy는 Promise를 반환한다. 지정된 시간 내에 해당 요소를 찾으면 resolve, 그렇지 않으면 reject 된다. 사용시기데이터 패칭 이후 나타나는 요소setTimeout, setInterval 등으로 일정 시간이 지난 후 나타나는 요소상태 변경으로 인한 렌더링 결과물findBy와 getBy는 유사하지만 비동기 요소를 기다린다는 점에서 다르다.promise를 반환하기 때문에 주로 async/await와 함께 사용된다.const elemen..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 9. 18.
• textsms

230925 - React 컴포넌트의 유연성과 최적화 ( 조건부 렌더링, 다이나믹 컴포넌트, 고차컴포넌트(HOC))

오늘 내가 배운 것 1. 조건부 렌더링 2. 다이나믹 컴포넌트 3. 고차 컴포넌트(HOC) React Component의 유연성과 최적화 React를 이용하면서 컴포넌트를 다룰 때, 렌더링 최적화하는 여러 방법이 있다. 여러 방법 중 3가지를 최근에 접하게 되었고, 이에 대해서 살펴보려고 한다. 각 방식의 렌더링 최적화 측면과 적용 상황을 정리하였다. 1. 조건부 렌더링 1-1. 렌더링 최적화 조건부 렌더링은 필요한 부분만 렌더링을 수행하기 때문에 렌더링 성능에 도움을 줄 수 있다. 불필요한 컴포넌트의 렌더링을 방지하기 때문에 페이지의 성능을 향상할 수 있다. 1-2. 적용 상황 간단한 조건에 따른 뷰 변경이 필요할 때 사용한다. 자주 변경되는 UI 부분에 유용하다. 주의 : 복잡한 조건이나 중첩된 조건..

• format_list_bulleted TIL(Today I Learned)
• · 2023. 9. 25.
• textsms

230323~230414 React 프로젝트 - 터미널 연습 사이트 만들기

React 프로젝트 - 터미널 연습 사이트 만들기 https://www.terminus.run Terminus : 터미널 연습하기 www.terminus.run 지난 프로젝트 이후 1달간 리액트를 배운 후 프로젝트를 진행했습니다. Linux 명령어 연습사이트 MySQL 명령어 연습사이트 이번 프로젝트는 리액트를 이용한 프로젝트를 진행하면서, SPA 웹페이지를 만들고, https 설정 및 도메인까지 연결하여 실제 활용 가능한 사이트를 만들었지만, 이 사이트는 개발자를 꿈꾸는 개발자 지망생들의 React Toy Project 이므로 부족한 부분이 많아도 양해 부탁드립니다. 목차 1. 팀원 소개 2. 목표 3. DB 스키마 4. 사이트 소개 5. 'Terminus'의 구조와 흐름 6. 'Terminus' 배포..

• format_list_bulleted TIL(Today I Learned)
• · 2023. 4. 17.
• textsms

Nginx를 이용한 AWS 배포

오늘 내가 배운 것 1. Nginx 2. Nginx-AWS 배포 1. Nginx 기존에 작업을 할 때는, 레포지토리에 올린 코드를 배포할 서버에서 clone을 해서 배포하는 방식을 사용했었다. 하지만 위에 방법과 다르게 `Nginx`는 레포지토리에 있는 모든 코드가 아닌 번들링 된 번들파일(정적파일)을 배포할 서버에 올려서 처리할 수 있는 프로그램이다. 또, Nginx는 정적파일을 처리하는 웹 서버의 역할뿐 아니라 로드밸런서, 리버스 프록시, 캐시 서버 등 다양한 역할을 수행할 수 있다. 1-1. Nginx 설치하기 $ sudo apt-get update $ sudo apt-get install nginx -y 1-2. Nginx 실행하기 $ sudo systemctl start nginx 1-3. Ng..

• format_list_bulleted AWS
• · 2023. 3. 21.
• textsms

230310 - React - Login 기능 구현 페어코딩

https://github.com/100space/230310 GitHub - 100space/230310: 페어코딩 페어코딩. Contribute to 100space/230310 development by creating an account on GitHub. github.com 오늘의 목표 1. 로그인 기능구현 2. React 이용할 것 3. front와 back 분리 작업 ( DB까지 연결은 안 해도 MVC패턴 ) 4. 2인 1조로 역할 나눠서 진행 맡은 역할 front-end 디렉토리 구조 잘 짜인 디렉터리 구조는 아니지만...! 결과 로그인 유무에 따른 Navigation bar를 다르게 보여준다. 로그인 시 데이터를 백서버로 요청하여 토큰을 만들고 그 토큰을 다시 응답메시지에 cookie에 ..

• format_list_bulleted TIL(Today I Learned)
• · 2023. 3. 10.
• textsms

230309 - React - localStorage로 전역 상태 관리하기

오늘 내가 배운 것 1. 상태 관리하기 1-1. local Storage VS Sesstion Storage 2. 로그인 프로세스 3. store 1. 상태 관리하기 React는 데이터가 바뀌면서 화면이 바뀐다. 로그인 로직을 크게 생각해 보면 1. 사용자가 userid, userpw을 입력한다. 2. userid, pw를 서버로 데이터를 보낸다. 3. DB의 저장되어 있는 정보와 비교 후 데이터를 브라우저도 보내준다 4. 유저의 상태가 바뀌면서 로그인 처리가 된다. 정말 간단하게 로그인 과정을 설명한 내용이다. 이러한 과정을 통해서 로그인을 성공하면 login 상태인 유저를 판단하고 그에 따른 화면을 그려줄 수 있다. (회원/비회원 페이지를 다르게 한다.) 하지만 React에서 상태라는 것은 변수와 같..

• format_list_bulleted TIL(Today I Learned)
• · 2023. 3. 9.
• textsms