til45 Zustand 이번 팀 프로젝트에서 상태 관리 라이브러리로 zustand를, 사용하게 됐다. Zustand 가 redux 와 같이 flux 패턴이라서 redux에 대한 이해가 있다면 비교적 쉽게 배울 수 있다고 한다. 모듈이 가볍다. 문법 및 사용법이 간단하다. Flux 패턴이란? 데이터를 중앙 집중형 저장소에 저장하고 action을 통해 데이터를 조작하는 패턴이다. Zustand 사용하기 create() 함수로 store를 생성한다. 그러고 사용할 컴포넌트에서 useMemoStore() 로 불러와서 구조분해할당으로 필요한걸 꺼내서 사용한다. 요즘 너무 복붙을 많이 하는 것 같아서 오랜만에 손코딩 2024. 3. 19. 새로운 팀 프로젝트 시작! 오늘부터 새로운 팀프로젝트가 시작됐다. 우리 팀은 화장실 위치를 찾아주는 아주 유용하고 재밌는 프로젝트를 기획했다. 재미있고 해보고 싶은 기능을 구현해 보자는 실험실 모토로 시작했는데, 결론적으로 하나에 더 집중해서 만들어보는 쪽으로 결정이 됐고, 그중 하나인 화장실 프로젝트가 선정되었다. 화장실 위치 및 이 화장실이 어떤지 리뷰를 작성할 수 있도록 하는 프로젝트여서 위치 데이터가 중요했는데, 전국 화장실 위치가 있는 데이터와 시별로 따로 나뉜 데이터 중 어떤 데이터를 사용해서 구현하는 것이 중요할지가 오늘의 중요한 포인트였다. 전국 화장실 위치 데이터와 도시별 화장실 위치 데이터는 각각 장단점이 있었다. 전국 데이터는 도시 별로 나뉜 데이터보다 통일성이 있기 때문에 데이터 관리가 비교적 쉬웠지만, 도시.. 2024. 3. 18. [프로그래머스] 문자열 다루기 기본 / 오타 때문에... 오래걸린 코딩 테스트 문제 - 문자열 다루기 기본 계속 통과를 못해서 며칠 동안 미뤄뒀던 문제를 오늘 다시 풀어보았다. 분명 다 맞는 것 같은데 왜 계속 4개의 실패 케이스가 나오는지 도통 이해가 되지 않았다. 그러던 중 6글자의 숫자로 이루어진 true가 나와야 하는 테스트 케이스가 없는 걸 확인하고 추가했더니 이게 계속 false로 나오면서 통과가 되지 않았다. 로직은 맞는데... 하면서 계속 보다가... 오타를 발견했다 ㅋㅋㅋ 하... ㅋㅋ 기존 코드 function solution(s) { const str = s.replace(/ /g, ''); let answer = false; if(str.length == 4 || str.legth == 6){ for(let i = 0; i < str.length; i++){ .. 2024. 3. 13. [typescript] 빌드에 대하여 typescript 강의를 다시 보고있는데, 문득 왜 react + typescript 는 컴파일을 하지 않았는데 vercel에 배포가 가능한건지 궁금했다. (역시 복습하니까 같은 강의를 봐도 좀 더 들리는 것 같다) 기초를 처음 배울 때 typescript 는 컴파일을 돌려서 js 파일을 만들었는데, 이번에 작업한 프로젝트는 컴파일된 js 파일이 보이지 않았다. 너무 기초적일 수 있는 질문이지만,,,, 궁금해서 튜터님을 찾아갔다. ts 는 npm run build 명령어로 컴파일해서 js를 만드는거로 알고있는데, 어떻게 빌드하지 않고 vercel 에 배포가 가능한지 여쭤봤다. 답변은 vercel이 빌드를 하고 배포하는 것이였다. 또한, 지금 프로젝트에 빌드된 js 가 보이지 않는 것은 내가 프로젝트에서.. 2024. 3. 7. [react + typescript] typescript 를 하면서 지정하게 된 타입들 useRef useRef에 값과 같은 데이터가 아닌 input을 담을 때는 HTMLInputElement 타입을 지정해야한다. const titleRef = useRef(null); const contentRef = useRef(null); form submit form submit의 매개변수 event 를 사용하기 위해서는 e: React.FormEvent 타입을 지정해야 한다. const form = e.target as HTMLFormElement; todo 추가 완료 후 form reset 하기 위해 선언. titleRef.current?.focus(); titleRef 와 contentRef 의 초기값이 null 이기 때문에 옵셔널 체이닝을 사용하여 에러 방지. const titleRef = u.. 2024. 3. 7. 유틸리티 타입 Partial 일부만 만족하면 되는 타입 Required 모든 속성을 필수로 제공해야 하는 타입 Readonly 읽기 전용으로 값을 변경할 수 없는 객체로 만드는 타입 재할당 불가 Pick 타입 T에서 지정한 K 속성들로 새로운 타입을 만드는 타입 type Person = { id: string; name: string; age: number; phone: string; } type PickType = Omit; const Component = ({name, age} : PickType) => { return ... } Omit 타입 T에서 K 속성을 제외한 속성으로 새로운 타입을 만드는 타입 (Pick의 반대) type Person = { id: string; name: string; age: numb.. 2024. 3. 5. typescript 기본 타입 1. boolean true / false 를 나타낸다. 주로 조건문, 비교 연산 등에서 사용된다. 2. number 다른 프로그래밍 언어와 다르게 모든 숫자 타입을 number로 나타낸다. 3. string 텍스트 데이터를 나타낸다. 4. array 값을 배열의 형태로 나타낸다. 나타내는 방법에는 2가지가 있으며 배열 요소들을 나타내는 타입 뒤에 [] 를 사용하는 방법과 제네릭 배열 타입이 있다. let numArr: number[] = [1, 2, 3]; let numArr: Array = [1, 2, 3]; 5. tuple 배열과 비슷하지만, 고정된 타입과 고정된 수를 가진다. (배열은 한가지 타입만 가질 수 있다) 선언된 순서에 맞는 타입을 가진 데이터를 넣지 않으면 에러가 난다. tuple은 아.. 2024. 3. 4. [react] Intersection Observer API 스크롤에 도달했을 때 이미지 로딩하기 lazy load 이번 프로젝트는 유튜브 api를 사용하여 추천 영상을 등록하고, 검색하는 프로젝트를 진행하였다. 한 페이지에 이미지가 많이 배치될 예정이라 이미지 렌더링을 한 번에 하지 않는 방법을 찾던 중 IntersectionObserver 를 알게 되었다. 먼저 useState와 useRef를 추가한다. 렌더링 될 이미지가 여러 개이기 때문에 배열로 useRef에 담는다. const [visibleIndices, setVisibleIndices] = useState([]); const imageRefs = useRef([]); useEffect로 data가 변경될 때마다 실행시킨다. data : supabase에서 검색해 온 데이터 IntersectionObserver(callback[, options]) : 대상.. 2024. 2. 27. 이전 1 2 3 4 5 6 다음
