728x90
반응형
리스트 예시: 게시물이 존재할 경우 3건을 노출합니다.
- react - Suspense 이해 정리 리액트 파다가 헷갈려서 다시 정리함 1. 원래 리액트는 자바스크립트 싱글 스레드 위에서 돌아가기 때문에 병렬적인 작업이 안됨2. 게다가 비동기 아님 동기임 3. 그럼 컴포넌트를 세세하게 쪼개서 동시성이 있는 것처럼 작동하게 하자(비동기)4. 이게 리액트가 말하는 동시성임. 그렇게 나온 코드 스플리팅과 suspense. *** 리얼 돔이 아니라 가상돔에서 일어나는 일 *** 1. 가상 DOM은 실제 DOM과 달리, 컴포넌트를 하나씩 순차적으로 처리하고 렌더링함2. 그러다보니 어떤 페이지가 있을 때, 컴포넌트 하나 그리고 -> 다음 거 그리고 -> 그 다음 거 그리고... 이렇게 동기적으로 하다보니 예시의 코드를 그릴 때 느린 컴포넌트가 모두 그려진 후에 안 느린 컴포넌트를 그.. 2024.08.19
- 2024.08.18, weekly memoirs 1.오랜만의 주간 회고록!그 동안 쓰지 않은 이유는.... 느낀 게 아무 것도 없기 때문.........이다부랴부랴 일 + 동료 팀원분들 퇴사로 인한 송별회로 다른 걸 생각할 여유가 없었다 동료 분들이 한둘 나가기 시작하면 나도 이직해야하나... 하는 생각이 자연스럽게 드는 거 같긴 하다더군다나 입사 동기분이 이직하셔서 크게 휘청이는 나의 마음... 그래도 아직은.... 레거시가 되어가는 나의 이력서 + 요즘 기업에서 요구하는 리액트 스펙 생각하면 아직 애매한 거 같다 2.회사에서 계속 리액트 쓰고 있다초반에 컴포넌트 나누느라 고생했는데 요즘 그 덕 잘 보고 있다 한번 유용하게 짠 내 컴포넌트 열자식 안 부러움 요 근래는 프린트 미리보기 + 엑셀 다운로드 작업을 계속 했는데처음에 컴포넌트 틀 만드는.. 2024.08.18
- 타입스크립트 - infer 타입스크립트가 추론한 타입을 사용할 때 컨디셔널 타입과 함께 사용함 Q : 그럼 이미 추론한 걸 그대로 두지 왜 infer로 끄집어내서 사용하려고 할까? A : 복잡한 기능에선 쓰일 데가 있음 복잡한 타입 추론:TypeScript가 자동으로 추론하지 못하는 복잡한 상황에서 infer를 사용하여 원하는 부분만 추출하거나 변형할 수 있습니다.예를 들어, 특정 함수의 반환 타입을 추출하거나, 제네릭 타입 내의 특정 부분만 추출할 때 유용합니다.유틸리티 타입 작성:TypeScript에는 ReturnType이나 Parameters와 같은 유틸리티 타입이 있습니다. 이러한 유틸리티 타입은 infer를 사용하여 다양한 타입 정보를 추출합니다. 유틸리티 타입을 직접 정의하거나, 기존 유틸리티 타입을 변형할 때 in.. 2024.08.18
- 타입스크립트 - enum 열거형 타입 enum 전에도 한번 봤던 적 있는데https://0119eunji.tistory.com/231 책에 나오길래 다시 정리 enum(열거형) 타입은말 그대로 여러 상수를 나열하는 목적으로 쓰임 enum Status { New, InProgress, Completed, Cancelled} 이런 enum이 있다면var status = { "0" : 'New', "1" :'InProgress', "2" :'Completed', "3" :'Cancelled' New : 0, InProgress : 1, Completed : 2, Cancelled: 3} 런타임시 이런 자바스크립트 코드가 됨 enum Status { New, .. 2024.08.18
- 타입스크립트 - class 클래스는 값이면서 타입임 const Person = class { name; age; married; constructor(name:string,age:number,married:boolean){ this.name = name; this.age = age; this.married = married; }} 이렇게 씀 constructor에 멤버를 넣기 전에 한번 써줘야됨멤버의 타입은 생략 가능함 멤버와 constructor는 짝이 맞아야 함=> 그러니까 이 짝이 맞는 걸 타입체킹하는 거임. 더 엄격한 타입 검사를 원하면 implements 예약어를 쓰면 됨 interface Human { name: string; age : number; married : boolean; s.. 2024.08.18
- 타입스크립트 공변성, 반공변성 공변성 :A -> B 일 때, T -> T반공변성 : A -> B 일 때 T -> T 이변성 : A -> B 일 때 T -> T 됨 T -> T 됨무변성 : A -> B 일 때 T -> T 도 안되고 T -> T 도 안됨 기본적으로 타입스크립트는 공변성의 갖고 있음근데 함수의 매개변수는 반공변성을 갖고 있음 이때 ts.config에서 strictFunctionTypes 체크 되어 있어아함체크 안되어 있으면 타입스크립트는 매개변수에 대해 이변성을 띔 반환값에서의 공변성 사례 1. a -> b 인 상황number | string => number function a (x:string):number {return Number(x)}type B = (x:string) => number | string;l.. 2024.08.11
- 타입스크립트 오버로딩 타입스크립트 오버로딩 함수 자체를 오버로딩하는 경우* 오버로딩된 함수의 시그니처를 선언한 후, 바로 뒤에 실제 함수 구현을 제공해야함 function add(x: number, y: number): number (+1 overload) *** 오버로딩 순서 중요함 *** function test(a:string): string;function test(a:string | null): number;function test(a:string | null): string | number { if(a){return "string"} else {return 123}}const result = test("hi") 인자를 string으로 넘겼을 때 result는 가장 첫번째에 있는 리턴값 string이 .. 2024.08.11
- 싱글톤 정말 많이 쓰는 패턴 싱글톤특정 클래스의 인스턴스가 오직 하나만 생성되도록 보장하는 디자인 패턴임 클래스 형class Singleton { constructor() { if (Singleton.instance) { return Singleton.instance; } this.value = Math.random(); Singleton.instance = this; } getValue() { return this.value; }}const singleton1 = new Singleton();const singleton2 = new Singleton();console.log(singleton1 === singleton2); // trueconsole.log(sing.. 2024.08.04
- 클로저 - hof - 리액트 - hoc - class 프론트엔드 개발자라면 중요한 클로저 개념...클로저 예시 찾아보면 모두 class 형밖에 없다 Q: 그럼 함수형에는 클로저 개념이 없는 걸까?A :아님 함수형 클로저function out (a:string){ let outV = "밖"; function inner(){ console.log("inner", outV) console.log("props",a) } return inner}const instance1 = out("인스턴스단 변수1");const instance2 = out("인스턴스단 변수2");const instance3 = out("인스턴스단 변수3");instance1()instance2()instance3()/**'inner' '밖''props' '인스턴스단 변수.. 2024.08.04
- es5은 어떻게 브라우저에서 동작했을까 & UMD 파면 팔수록 넘 헷갈려서 다시 정리함 commonJS는 2009년에 만들어짐가져올 때const {name} = require("../name.js");내보낼 때exports.name = "something"; es5표준을 기반으로node의 모듈 시스템을 위해 만들어짐(require문 자체는 commonJS에서 만듦) 아무튼 commonjs는 node"서버"를 위한 모듈 시스템임동기적으로 동작함모든 모듈이 순서대로 로드, 실행됨 // counter.jslet count = 0; // 모듈의 비공개 변수module.exports = { increment: function() { count += 1; return count; }, decrement: function() { count .. 2024.07.28
- tanstack Query v5 기존 상태 라이브러리는 비동기 및 서버 상태 관리에 적합하지 않다우리는 서버 상태를 관리하기 위한 가장 좋은 라이브러리다!!구 리액트 쿼리현 탠스택 쿼리 서버 상태 관리란? 클라이언트에서 제어하지 않은 상태에서 관리됨비동기 api 필요사용자가 모르는 사이에 바뀔 수도 있음 캐싱같은 데이터 요청 중복 제거최대한 빠르게 업데이트 반영 stale-while-revaildate http 캐싱에도 사용되는 캐싱 매커니즘-> 캐싱된 데이터를 사용자에게 줌 + 비동기적으로 콘텐츠를 서버에서 revaildate fetching이건 fresh한 상태임조건에 따라 (staleTime) stale로 바뀜 사용되지 않으면 inactive 로 바뀜gcTime(cacheTime) 가비지 콜렉터 타임... 캐시를 제거하는.. 2024.07.28
- 2024.07.28, weekly memoirs weekly memoirs 1.공유 오피스 잘 끊은 거 같다카페에서 공부할 때와 질이 다름...원래는 주말마다 따로 카공할 수 있는 자리가 따로 있는 대형 카페 자주 갔었다ㅎㅎ나쁘진 않았지만 아무래도 대형카페다 보니까 조금 시끄러웠었는데여기는 조용하고 자리 넓구 밝고... 깨끗하고 모니터 있는 자리도 따로 있고 심지어 커피도 무료다 ㅎㅎ너무 좋다 ㅎㅎ 그리고 다니면서 약간 동기부여가 되는 점도 있는데주말밖에 안 와봤지만 은근 여기 공유 오피스를 많은 분들이 이용하시는 것 같다...다들 노트북 앞에서 열심히 일하신다 점심 시간 전 후로 오는 편인데 늘 10분 이상은 계신 것 같음...열심히 사는 사람들이 이렇게나 있다나두 계속해서 열심히 살아야지 2.어제 자기 전에 이제껏 써왔던.. 2024.07.28
- 타입스크립트 never, 컨디셔널 타입 저번주 주말에 공부했는데 이번주에 일하다 써먹을 일이 생겨서 얼른 도입하고정리하려고 씀 never는 어떠한 타입도 대입할 수 없음 그럼 언제 never가 뜨는지.... 함수가 정상적으로 완료되지 않거나, 반환할 가능성이 전혀 없는 경우에 사용됨예를 들어, 무한 루프나 예외를 던지는 경우임 근데 선언형일때랑 표현식 쓸 때랑 타입을 다르게 추론함 표현식일 때는 void()로 추론함never가 더 맞는 거 아닌가? 해서 never 넣으면never는 어떠한 타입도 넣을 수 없기 때문에 타입 오류 뜸 이렇게 쓰면 됨 근데 저런 코드가 많진 않을 거 같음그럼 왜 never를 쓸까 뭐가 좋아서 ??? 코드의 명확성: never 타입을 사용하면 이 함수가 정상적으로 반환되지 않는다는 것을 명확하게 나타낼 수 있습.. 2024.07.27
- jest 2 테스트 종류 참고https://youtu.be/q9d631Nl0_4?si=ygDZPvIiM4jtBDwohttps://youtu.be/MN7Pw4mK6lU?si=uj4TEHC7lGZJGx5S 프론트 엔드는 입출력이 데이터가 아니기 때문에 테스트가 애매함 입력 데이터- dom 이벤트 ( 마우스, 키보드, 터치 등 이벤트 )- 라우팅/io ( URL 변경, 로컬스토리지 등) 출력데이터- 코드 관전 (HTML, CSS)- 사용자 관점 (브라우저가 렌더링한 화면) 시각적 요소 검증으로는 스냅쇼 테스트가 있음 => 이거 테스트 애매함... html 구조이기 때문에 테스트 코드를 잘 때도 픽셀 정보를 예측할 수 없고테스트가 통과한다고 해도 의도된 결과가 나온다고 보장할 수 없음 그래서 이걸 편하게 해주는게 stortyBo.. 2024.07.21
- 2024.07.20, weekly memoirs weekly memoirs 2024.07.14, w 1. 재택이 이렇게 시간 빨리가는 건 줄 몰랐다.......하루 종일 침대 - 책상 - 부엌 - 침대 - 책상 이렇게 또 일주일 보냄...집중은 잘 되는데 세상 기가 다 빨려서 너무 힘들었다.....그리고 먹는 건 비슷한데 안 움직여서 살 엄청 쪘다 ㅠㅠ재택은 참 몸은 편한데... 여러모로 시간 관리나 자기 관리하지 않으면 몸 망가지기 쉬운 거 같다 2.지금 프로젝트에서 리액트를 사용하고 있는데 전체적인 구조는 잘 짜놓은 거 같아서 뿌듯하다이제껏 짠 코드 중에서 추상화라던지 관심사 제일 잘 분리시켜 놓았고대부분 컴포넌트를 조합해서 만들어서 진짜 가독성도 괜찮음 근데 어마어마한 공통 컴포넌트들을 보면서 약간의 현타도 느꼈다분명히 이렇게 쓰.. 2024.07.20
- 타입스크립트의 추론 const test : number = (a:number, b:number) => a + bconst test = (a:number, b:number) => a + b 이 정도 반환값은 그냥 알아서 추론해줌 첫번째 리턴값은 number 라고 표기하고두번째는 리턴값 타입 표기 안 했음 안해도 됨알아서 추론해줌 그렇다면 타입스크립트한테 어디까지 추론을 맡겨야할까? 책에서는 타입스크립트가 타입을 제대로 추론하면 그대로 쓰고, 틀리게 추론할 때만 올바른 타입을 표기하라고 함 const a = "안녕"; 이런 이유 때문에...리터럴이 더 좁은 개념임 const 는 리터럴로 추론하면서 let은 string으로 더 넓게 추론함let으로 선언한 변수는 다른 값을 넣을 수 있기 때문임이걸 > 라고 함 그리고 l.. 2024.07.20
- 2024.07.14, weekly memoirs weekly memoirs 1. 이번 주부터 재택 근무 시작했다집에 모니터도 없고... 잘될까 걱정했는데 생각보다 집중 잘 되어서 놀랐다;;; 아침에 일어나서 커피 타고 앉아서 작업하는데 한창 집중하다가 머리가 맹해진다 싶어지면 점심 시간임...밥 먹고 설거지 하고 앉으면 한 시 반,,,,,,,, 원래는 두 시까지인데 집중 너무 잘 되어서 그냥 일한다어차피 내일의 내가 해야할 거... 집중 잘 될 때 얼른 만들어 놓는 게 낫겠다 싶어서열일하고 정신차리면 여섯시;;;;;;;; 회사에서보다 시간이 두 배는 빨리 가는 거 같다 2.요즘 리액트로 작업한다디자인 처음 봤을 때부터 공통 컴포넌트도 많아 보이고... 진짜 리액트로 만들면 잘 만들 수 있겠다는 생각에vite 환경부터 시작해서 컴포넌트.. 2024.07.14
- 새로 나온 hook useFormStatus 등 리액트 동향 살펴보기 https://react.dev/reference/react-dom/hooks/useFormStatus useFormStatus – ReactThe library for web and native user interfacesreact.dev import { useFormStatus } from "react-dom";import { submitForm } from "./actions.js";function Submit() { const { pending } = useFormStatus(); return ( {pending ? "Submitting..." : "Submit"} );}function Form({ action }) { return ( );.. 2024.07.02
- icon suspense lazy 기능으로 넣기 vite 환경import svgr from 'vite-plugin-svgr';vite.config.ts에 svgr() 추가함 이거 안 쓰면 컴포넌트 감싸서 가져와야 됨 import { Suspense, lazy, memo } from 'react';import Loading from './Loading';import { IconProps } from './types';import S from './styles';const Icon = memo( ({ fileName, alt = 'image', width = '100%', height = '100%', handleClick, }: IconProps) => { const LazyComponent = lazy(() => .. 2024.07.02
- 2024.07.01, weekly memoirs weekly memoirs 1. cra는 요즘 안 쓴다는 소식에 충격 받았던 나...저번 주말에 webpack 공부를 했다생각보다 쉽고 재밌었다의존성 관리 어떻게 하지... 하다가도 노드 쓸 것만 들고 있고 개발 환경 맞출 수 있으니까 좋은 거 같다회사에서 맨날 새로 고침하다가 HMR 되는 건... 진짜 너무 신났다ㅎㅎㅎㅎㅎ 2.회사에서도 새로운 리액트 프로젝트 들어가게 되었고 아... 진짜 빠른 거 써보자.. 해서 vite를 공부했다전에도 몇 번 써봤지만 정말 정말 빨라서 기억에 남아서 꼭 써보고 싶었다 환경 세팅하는 건 전에 webpack도 해봤었고슬쩍 만만히 보고 도전했다가 es모듈 세상에 갇혀서 정말 힘들었다 ㅎ 타입스크립트 세팅도 아니고 es5 변환하는거 때문에 ㅜㅜ 그래도 .. 2024.07.01
728x90
반응형