My Boundary As Much As I Experienced

파이어베이스를 쓰려고 했는데, 지금 보는 강의에서 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함수가..

구글 마테리얼 디자인 다크테마 https://m2.material.io/design/color/dark-theme.html#properties 벨로그에 다크 모드 적용하기 https://velog.io/@velopert/velog-dark-mode Surfit.io 다크 테마, 라이트 테마 제작기 https://surfit-story.medium.com/surfit-io-%EB%8B%A4%ED%81%AC-%ED%85%8C%EB%A7%88-%EB%9D%BC%EC%9D%B4%ED%8A%B8-%ED%85%8C%EB%A7%88-%EC%A0%9C%EC%9E%91%EA%B8%B0-fc861c14a846 다크모드 UI의 원칙 https://yozm.wishket.com/magazine/detail/619/ UIUX ..

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

https://school.programmers.co.kr/learn/courses/30/lessons/68936 문제 수준: 프로그래머스 레벨2 문제 요약: 이미지 압축 알고리즘으로 유명한 쿼드트리를 구현하는 문제. 문제를 읽어봤자 잘 이해는 안 가고 입출력 이미지를 봐야 이해하기 쉽다. 입출력 예 (입력 / 출력): 문제 풀이 전략: 반복적인 패턴이 보인다면, 늘 사용하던 dfs를 활용하면 된다. 처음 풀었을 때가 어려웠지 두 번째 비슷한 문제를 푸니까 접근 방법은 쉽게 파악이 된다. 내 풀이: function solution(arr) { function qt(arr, leng) { // 전체 배열과 row의 갯수를 받는다. leng /= 2 let leftUp = arr.slice(0, leng)...

요새 유행하는 번들러 환경 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..