My Boundary As Much As I Experienced

정의 내부 슬롯과 내부 메서드는 ECMAScript에서 정의한 의사 프로퍼티Pseudo Property, 의사 메서드Pseudo Method이다. (css의 가상 선택자Pseudo Selector처럼, 실제로 있는 태그는 아니지만 기능 상 존재하는..? 느낌인듯!) ECMAScript 사양에 정의된 대로 구현되고 JS 엔진에서 실제로 동작하는 방식을 구성한다. 그러나 개발자가 직접 접근하거나 호출할 수 있도록 공개된 객체의 프로퍼티는 아니다. 내부 슬롯과 내부 메서드는 형태는 이중 대괄호로 감싸서 표현된다. 실제 확인 방법 우리가 한 번 쯤 들어본 [[prototype]]도 내부 슬롯이다. 직접 [[prototype]]을 프로퍼티 체이닝으로 접근할수는 없지만 객체를 console.log해보면 개발자 도구..

이미 한 번 변수 호이스팅에 대해 다뤄본 적이 있지만 자바스크립트 스터디에서 심화적으로 다뤄보기로 했다. 1. 변수 호이스팅이란? 자바스크립트에서 호이스팅(Hoisting)은 변수 선언과 함수 선언을 코드의 맨 위로 끌어올려지는 현상을 일컫는다. 그래서 개발자가 어느 라인 위치에 코드를 선언해도, 실행 되기전 코드가 최상단으로 끌어올려지고 실행되게 된다. 2. var 변수 호이스팅의 특성 var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다. 즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다. 단 할당문 이전에 변수를 참조하면 언제나 undefined를 반환한다. 3. 호이스팅의 원인 (실행 컨텍스트) ..

파이어베이스를 쓰려고 했는데, 지금 보는 강의에서 Convex를 사용하길래 한 번 사용해봤다. convex란? https://www.convex.dev/ Convex | The fullstack TypeScript development platform The backend application platform with everything you need to build your product. www.convex.dev Convex Convex is a Backend Application Platform that keeps you focused on building your product. Convex Functions, Database, File Storage, Scheduling, and Search..

리액트 개발하다보면 아래같이 함수 실행부 옆에 을 쓸때가 많다. const [text, setText] = useState() 그리고 타입스크립트에서도 제네릭 문법 을 사용하여 타입 제한할때가 있다. function add(arg: T): T { // 함수 내용 } 가끔가다 함수실행부 옆에 제네릭을 넣는다던가, 제네릭 써야하는 부분에 string, number 등 구체적인 타입을 넣는다거나 하면서 헷갈릴 때가 있다. 타입스크립트는 왜 굳이 이렇게 동일한 형태로 다른 문법을 만든걸까? 라고 궁금해서 알아본 결과 const [text, setText] = useState()에서의 은 타입스크립트 문법이 아니다. 이것은 jsx문법(즉 React문법)인 것이다. 왜 제네릭 과 헷갈리게 동일한 괄호를 사용했나 했..

오늘 만든 resize 이벤트가 끝나면 0.5초 이후 true값을 반환하는 useCatchResizeEnd 훅. import { useEffect, useState } from 'react'; export const useCatchResizeEnded = () => { const [isEnded, setIsEnded] = useState(false); useEffect(() => { let resizeTimeout: NodeJS.Timeout; setIsEnded(false); const handleResize = () => { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { console.log('timeout이 멈췄습니다.'); set..

emotion으로 ThemeProvider 세팅을 하던 도중, theme의 타입이 불명확해서, 아래 경우에 color에 타입을 찾을 수 없다는 둥 에러가 났다. background-color: ${({ theme }) => theme.color.gray100}; 처음엔 typescript의 interface를 사용해서 타입지정을 다 해주려 했다. interface Theme { color: { darkGray900: string; darkGray800: string; darkGray700: string; darkGray600: string; darkGray500: string; darkGray400: string; ... 그런데 interface로 만든 Theme type을 실제 theme객체에 위 타입..

테스트 라이브러리 구성 React Testing Library 시뮬레이션된 DOM을 제공(Provides Simulated DOM for TEST) 그러나 테스트 러너 없이는 사용할 수 없다(JEST, VITEST) Jest vs Vitest Vitest가 Jest보다 빠르다. Jest는 Vite에서 깔기 힘들다. 테스트의 방식 expect 글로벌 단언 matcher: 어떤 단언인지 jest-dom에 의거함 expect(element.textContent).toBe(”hello”); expect(elementsArray).toHaveLength(7); Jest-DOM 테스트 전에 import되어야 함 matcher를 쓸 수 있게 해줌 toBeVisible, toBeChecked 전역 함수로 test함수가..

프로젝트를 시작하며 (기획, 디자인) 이번 프로젝트는 숙박 예약을 위한 서비스의 전과정을 구현하는 프로젝트였다. 2주라는 짧은 기간동안 전과정을 구현하는 것은 매우 도전적인 과제였고, 멘토님께서 언급한 '기술적으로 단단한 서비스'를 만드는 것을 목표로 진행하였다. 어김없이 내가 초반 이틀 정도는 피그마 디자인을 만들어 제공했는데, 자연스럽게 모바일 - 태블릿 사이즈를 모두 지원하는 느낌보단, 전체적으로 모바일 사이즈를 무리하게 늘려놓은듯한, 요소 하나하나가 비대한 디자인이 되었다는 점은 조금 아쉽다. 내가 개발했던(그리고 지속적으로 관찰했던) 메인페이지 파트의 요소들만 웹 기준으로 적합한 느낌이 든다😅 전 프로젝트(8lack)에선 나름 시간이 남아서 그래픽적인 부분까지 필요하면 신경을 좀 썼더니 팀원들의..

요새 유행하는 번들러 환경 Vite에, 가장 유명한 테스팅 라이브러리 Jest를 엮어쓰려고 했으나 Jest는 웹팩 기반 라이브러리라 Vite환경에서 쓰려면 매우 복잡한 설정들을 거쳐야 한다. 아래 글에서 더욱 자세히 알려준다. vite 에서는 import.meta.env.VITE_XXX 와 같이 환경 변수를 사용하는데 WEBPACK 환경에서 위와 같은 환경 변수를 사용하기 위해서는 별도의 babel 관련 설정이 추가되어야 합니다. https://velog.io/@saeeng/VITE-VITEST-migrate-from-Jest VITE + VITEST (migrate from Jest) Vite > Vite의 사전 번들링 기능은 Esbuild를 사용하고 있습니다. Go로 작성된 Esbuild는 Webpa..

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를 설정