개발일기

1️⃣ 싱글 스레드 구조자바스크립트는 단일 Call Stack으로 동작한 번에 하나의 작업만 실행 가능2️⃣ Call Stack함수 호출 → Call Stack에 push실행 완료 → pop순차적으로 동작 (동기 처리)3️⃣ Web APIs & 비동기 작업setTimeout, DOM, AJAX, fetch 등은 브라우저(Web APIs)가 처리완료 후 Callback Queue / Microtask Queue에 콜백 등록4️⃣ Event LoopCall Stack이 비면, Queue에서 콜백을 가져와 실행Microtask Queue → Macrotask Queue 순서로 처리5️⃣ Microtask & MacrotaskMicrotaskPromise.then, MutationObserverCall Stac..

Cypress 웹 애플리케이션의 E2E(end-to-end) 테스트를 위한 javascript 기반 프레임워크이다. 브라우저에서 직접 실행되어 실제 사용자 경험을 시뮬레이션하고 테스트할 수 있다.  E2E(end-to-end) 테스트의 중요성- 실제 사용자 관점에서 애플리케이션의 전체 흐름을 테스트- 통합테스트와 단위테스트로는 발견하기 어려운 문제 식별- 주요 기능이 예상대로 작동하는지 확인  Cypress 설정 및 실행우선 개념 파악을 위한 설치이기 때문에 기본 설정만 // npm install --save-dev cypressimport { defineConfig } from "cypress";export default defineConfig({  e2e: {    baseUrl: 'http://lo..

테스트 용이성을 높이기 위한 몇가지 조건들이 있다.  1. 순수함수가 테스트하기 용이하다. 순수 함수란 동일한 입력에 대해 항상 동일한 출력을 반환하는, 부수 효과가 없는 함수를 의미한다. 부수 효과를 일으키는 비순수 함수를 테스트하는 것은 까다롭다. 예를 들어, 함수 외부의 상태에 의존하거나, API 호출을 하거나, DOM을 직접 조작하는 등의 동작이 포함된 함수는 외부의 영향을 받으므로 테스트의 정확성을 보장받기 어렵다. 입력을 받아 단순한 계산 값을 반환하는 순수함수는 독립적으로 테스트하기 좋다. 2. 단일 책임 원칙을 준수한 코드가 테스트하기 용이하다.하나의 함수나 모듈이 한 번에 많은 역할을 수행하면 테스트를 작성하기 어려워진다. 예를 들어, 데이터를 가져오는 함수가 UI를 렌더링하는 기능까지 ..

infer 키워드는 조건부 타입에서 특정 타입을 추론하는데 사용된다. 즉, 타입을 직접 지정하는 것이 아니라 타입스크립트가 해당 타입을 유추할 수 있도록 돕는 역할을 한다. infer는 extends를 사용하는 조건부 타입 안에서 활용되며, 특정 타입을 분해하여 사용할 수 있다.type GetReturnType = T extends (...args: any[]) => infer R ? R:never;함수 타입 T의 반환 타입을 추출하는 유틸리티 타입이다. T가 함수 타입이라면 infer R에 의해서 타입을 R로 추론하고, 그렇지않으면 never를 반환한다.주의할 점은 infer은 반드시 조건부 타입 안에서만 사용되어야 한다. 독립적으로 사용 불가.extends 키워드의 용도제네릭에서 타입을 제한하는 역할..

를 이용해 외부 링크를 연결할 때는 rel 속성을 적절히 설정하여 중요 정보가 유출되지 않도록 해야한다.  1. rel="noopener"를 설정하여 외부 페이지에서 opener 객체에 접근할 수 없도록 막아야 한다. 기본적으로, target= "_blank"가 설정된 를 통해 열린 외부 사이트에서 window.opener 객체에 접근할 수 있다. 이에 객체에 대한 접근을 허용하면, 악의적으로 피싱 사이트로 연결시키는 탭 내빙(Tabnabbing) 공격이 가능해진다. 이를 방지하기 위해서는 noopener를 설정해야한다.  2. rel="noreferrrer"를 설정하여 Referer 헤더 정보가 노출되지 않도록 막아야한다. 브라우저는 링크 연결시 referer 헤더를 통해 사용자가 어떤 웹사이트에서 ..

git ActionCI/CD를 자동화 하는 gitHub의 내장 도구즉, 코드를 푸시할 때 자동으로 테스트, 빌드,배포하는 작업을 설정할 수 있는 개념개념워크플로우 : 자동화된 작업의 전체 프로세스이벤트 : 워크플로우를 실행하는 트리거(pull, pull_request, schedule 등)잡(job) : 하나 이상의 작업 단위(”빌드”작업, “테스트”작업)스텝 : 특정한 명령어(스크립트) 실행 단계러너 : github Action을 실행하는 환경(github이 제공하는 VM)Vercel정적 사이트 및 서버리스 애플리케이션을 쉽게 배포할 수 있는 플랫폼주요기능자동배포 : 깃헙, 깃랩, 빗버킷과 연동하여 자동으로 배포프리뷰 배포 : PR이 생성될 때 미리보기 배포 제공서버리스 함수 : 백엔드 기능을 추가할 ..

컴포넌트에 props 전달하기부모 컴포넌트에서 전달받을 인자를 Avatar({person, size}) 이렇게 표현 !!!== function Avatar(props) { // 구조분해할당 let person = props.person; .. }props를 전달하지않거나, undefinded로 전달 되었을때 기본값이 사용된다.function Avatar({person, size = 100})https://ko.react.dev/learn/passing-props-to-a-component부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법const Parent = () => { return ;}const Child = (props) => { return ( 이름 : {props.name}, 나..

State를 통해 컴포넌트는 사용자 입력과 같은 정보를 기억할 수 있습니다. 폼 컴포넌트는 state를 사용하여 입력값을 저장하거나, 이미지 갤러리는 state를 사용하여 선택한 인덱스를 저장할 수 있다.컴포넌트에 state를 추가하려면, 두 가지 hook을 사용 가능핟.useState직접 업데이트 할 수 있는 State 변수를 선언, 리액트가 뭔가(첫번째 변수)를 기억하길 원한다면. 이 쌍의 이름은 const [something, setSomething]과 같이 지정하는 것이 규칙입니다.여러번 사용할 경우const [index, setIndex] = useState(0); const [showMore, setShowMore] = useState(false); https://ko.react.dev/le..

챗토리의 컴포넌트 구조ChatContainer : 채팅 화면 전체를 담당헤더, 채팅 내용(MessageList), 입력영역(MessageInput)을 컴포넌트로 가짐MessageList: 메세지 목록을 표시MessageInput : 메세지 입력 영역jsx: Javascript XML의 약자로, 자바스크립트 내에서 HTML과 유사한 마크업을 작성할 수 있게 해주는 문법.클래스 속성은 className으로 작성(html의 class와 다름)중괄호를 사용해 javascript 표현식 삽입 가능모든 태그는 닫혀야 함우리는 그동안 화면은 html로, css는 디자인, js로 로직을 작성해 왔다. 보통은 분리된 파일로 관리한다. 페이지 로직이 js 안에서 분리되어 동작하는 동안 html안에서는 내용이 마크업 되었다..

📌 AuthState는 interface로 유지하는 게 좋고, Notification 같은 데이터는 type이 적합해요! 😊 왜! ?AuthState는 interface가 좋은 이유확장 가능 해야 하기 때문로그인 상태를 관리하는 데이터, 만약 새로운 속성이 필요하면 extends로 확장할 수 있다.객체 기반 상태 관리에서 interface가 더 일반적상태 관리 라이브러리에서는 보통 interface를 사용한다.AuthState처럼 상태를 나타내는 객체는 interface가 더 많이 쓰이는 패턴이다(그래서 유지보수가 쉽다!)Notification은 type이 더 적합한 이유type은 유니온 타입(여러값 중 하나)을 쉽게 정의할 수 있음. (=type은 유니온타입을 지원한다.)Notification은 확..