My Boundary As Much As I Experienced

https://dev.to/hannahadora/jest-testing-with-vite-and-react-typescript-4bap Installing Jest for Testing in Your Vite-React TypeScript Project. A Step-by-Step Guide. Introduction Application testing is an important aspect of web development. It helps... dev.to 2. in tsconfig esModuleInterop: true 3. cypress 제외 in tsconfig exclude: []에 추가 4. scss나 styled-component를 사용할 시 우회 proxy를 설정

Q. JWT의 장단점? JWT는 인증에 필요한 정보가 담긴 토큰을 클라이언트에서 저장하기 때문에 DB조회를 하지않아도 되고 서버 확장성에 좋다. 그러나 이러한 장점은 클라이언트에서 토큰이 탈취될 수 있다는 단점이 되기도 하다. AccessToken 인증시, 필요한 정보가 담긴 토큰으로 인증을 통과할 수 있는 key라고 보면 된다. 인증에 필요한 정보가 담기기 때문에 탈취에 대한 위험을 줄이기 위해 토큰의 유효기간이 매우 짧다. (30분 ~ 1시간) RefreshToken 유효 기간이 짧은 Access Token을 보조해주는 토큰으로 Access Token보다 유효기간이 길며, Access Token을 발급하는데 사용된다. 유효 기간은 2주 ~ 1달 정도 잡는거 같다. JWT 특징 1. AccessToke..

테스트에는 유닛테스트와 인터그레이션 테스트, e2e테스트가 있다. 유닛테스트는 jest, 인터그레이션 테스트는 react testing library로 많이 한다. (jest로 인터그레이션 테스트도 가능하긴 함.) CRA를 하면 react testing library와 zest를 기본적으로 깔아줌. 파일 이름 컨벤션은 App.test.js 식으로 많이 짠다. in App.test.js import { render, screen } from "@testing-library/react"; import App from "./App"; // learn More라는 텍스트가 있는지 확인하는 테스트 // 이걸 테스트할 필요가 있나? test("renders learn More link", () => { // 맨처음..

XMLHttpRequest는 뭐야? XMLHttpRequest는 클라이언트 측에서 서버와 비동기적으로 상호 작용할 수 있도록 해주는 자바스크립트 객체입니다. 이를 사용하면 페이지의 새로고침 없이도 서버로부터 데이터를 요청하고 받을 수 있습니다. 주로 AJAX(Asynchronous JavaScript and XML) 기술에 사용되며, 최근에는 fetch API로 대체되는 경향이 있습니다. 더보기 XMLHttpRequest의 주요 메서드와 속성: open(method, url, async) 메서드: HTTP 요청을 초기화합니다. method: HTTP 메서드 (GET, POST 등) url: 요청을 보낼 URL async: 비동기 여부를 나타내는 불리언 값 send(data) 메서드: 요청을 서버로 보냅니..

promise에 대해서 알려줘 Promise 객체는 자바스크립트에서 비동기 작업을 처리하기 위한 객체입니다. 비동기 작업은 주로 네트워크 요청, 파일 읽기, 데이터베이스 쿼리 등과 같이 시간이 걸리는 작업을 의미합니다. Promise는 이러한 비동기 작업을 더 효율적으로 다룰 수 있도록 도와주는 패턴 중 하나입니다. Promise는 세 가지 상태를 가집니다: Pending (대기 중): 비동기 작업이 아직 완료되지 않은 상태. Fulfilled (이행됨): 비동기 작업이 성공적으로 완료된 상태. Rejected (거부됨): 비동기 작업이 실패한 상태. Promise 객체는 다음과 같은 구조를 가지고 있습니다: const myPromise = new Promise((resolve, reject) => { ..

초창기 웹 초창기에는 모든 웹페이지가 정적인 페이지였다. 화면에 어떠한 변화를 주려고 화면을 전환하면 그 때마다 서버로부터 새로운 HTML을 전송 받아서 다시 렌더링 해야 했다. 당연히 성능적인 문제도 많았고 사용자 경험 측면에서도 좋지 못했다. 1. CSR (Client Side Rendering) React와 같은 다양한 프론트엔드 프레임워크들이 유행하면서 브라우저(클라이언트)에서 전적으로 웹 렌더링을 책임지는 방식이 보편화되었다. 이제 서버(프론트엔드 프로그램)에서 아무 내용이 없는 빈 HTML 껍데기를 보내면 클라이언트(브라우저)에서 동적으로 태그들과 스타일을 생성하여 페이지를 채운다. 이렇게 되면 최초에 HTML을 받는 것 외에는 페이지 렌더링을 위해서 별도의 HTTP 통신을 할 필요가 없어진다..

브라우저 렌더링 동작 과정 렌더링의 기본적인 동작 과정은 다음과 같다. 1~2. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing) 3. 두 Tree를 결합하여 Rendering Tree를 만든다. (Style) 4. Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout) 5. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint) 6. 레이어를 합성하여 실제 화면에 나타낸다. (Display) 0. 요청, 응답 처음 웹페이지에 접속하면 HTML, CSS, Javascript 파일, 그리고 필요하다면 이미지나 폰트같은 파일들을 서버에 요청하고 응답 받게 된다. 그렇다면 서버에 요청은 어떻게 전송할까? 브라우저..

뜻: Development + Operations의 합성어 소프트웨어 개발자와 정보기술 전문가 간의 소통, 협업 및 통합을 강조하는 개발 환경이나 문화를 의미한다. 개발과 운영의 이해관계 우리는 서비스를 만들때 기획 -> 개발 -> 빌드 -> 테스트 -> 릴리즈 -> 배포 -> 운영 과같은 단계를 거친다. 이때 각각의 역할이 있게 된다 개발팀: 개발, 빌드 운영팀: 테스트, 릴리즈, 운영 개발팀 입장에서는 잦은 배포로 더 많은 기능들을 추가하여 더 좋은 서비스를 제공하고 싶어한다 하지만 운영팀의 입장에서는 잦은 배포는 그만큼 많은 버그와 오류에 대한 걱정과 스트레스가 커지게 된다. 이 개발팀과 운영팀 사이의 중간자적인 역할을 하면서 CI/CD를 책임진다. CI/CD란? CI: 지속적통합(Continuou..

명령형 프로그래밍(절차지향, 객체지향) 상태와 상태를 변경시키는 관점에서 연산을 설명하는 방식. 알고리즘을 명시하고, 목표는 명시하지 않음 절차지향 프로그래밍: 수행되어야 할 순차적인 처리 과정을 포함하는 방식 (C, C++) 객체지향 프로그래밍: 객체들의 집합으로 프로그램의 상호작용을 표현 (C++, Java, C#) 선언형 프로그래밍 How보다는 What을 설명하는 방식 (어떻게보단 무엇을) 알고리즘을 명시하지 않고 목표만 명시함 함수형 프로그래밍: 순수 함수를 조합하고 소프트웨어를 만드는 방식 (클로저, 하스켈, 리스프) 함수형 프로그래밍은 거의 모든 것을 순수 함수로 나누어 문제를 해결하는 기법으로, 작은 문제를 해결하기 위한 함수를 작성하여 가독성을 높이고 유지보수를 용이하게 해준다. 함수형 프..

useContext란? 프롭스 드릴링(프롭스가 하위 컴포넌트로 파고파고파고파고 또 파고 들어가는 현상)을 피하고 싶을 때 쓰는 문법. props 체이닝이 없이도 값을 전달하고 싶을 때 사용한다 context 설정법 api라던가, store, context같은 폴더에 파일을 만들어서 따로 관리한다. React 라이브러리를 import하고, createContext 메소드에서 관리하고 싶은 상태값을 입력(구독)한다. import React from "react"; const AuthContext = React.createContext({ isLoggedIn: false, }); export default AuthContext; 그런 다음에, App.js 같은 전역적으로 뿌릴 수 있는 곳에서 를 이용해 제공한..