전체 글(110)
-
[리팩토링] 파이어베이스 서비스 코드 분리
프로젝트 중에는 서비스 코드가 혼재 되어 있었다. 이미 데이터 관련 부분을 api 폴더에 분리했지만 이미지 부분를 처리하는 부분은 남아 있었는데 사실 이 코드는 그냥 따온 것이라 어떻게 해야할지 고민이 되었다. 일단 코드를 이해하는 것이 첫 번째 과제이다. const cleanFileName = (fileName: string) => { const cleanedName = fileName.replace(/[^\w\s.-]/gi, ''); return cleanedName; }; const readFileAsDataURL = (file: File) => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.on..
2023.09.15 -
[Revisited JS] strict mode를 이해해보자
20.1 strict mode란? 할당문으로 변수를 생성함 이때 전역 객체의 x 프로퍼티는 마치 전역 변수처럼 사용할 수 있다. 암묵적 전역 자바스크립트 문법을 엄격히 적용 20.2 strict mode의 적용 use strict; 20.3 전역에 strict mode를 적용하는 것은 피하자 20.4 함수 단위로 strict mode를 적용하는 것도 피하자 strict mode는 즉시 실행 함수로 감싼 스크립트 단위로 적용하는 것이 바람직하다. 20.5 strict mode가 발생시키는 에러 20.5.1 암묵적 전역 20.5.2 변수, 함수, 매개변수의 삭제 20.5.3 매개변수 이름의 중복 20.5.4 with 문의 사용 with 문은 전달된 객체를 스코프 체인에 추가한다. with문은 사용하지 않는 ..
2023.09.14 -
[공식문서 공략] Sharing State Between Components
그냥 하나에서 아래 내려주는 그런건 이상한건가? import { useState } from 'react'; function Panel({ title, children }) { const [isActive, setIsActive] = useState(false); return ( {title} {isActive ? ( {children} ) : ( setIsActive(true)}> Show )} ); } export default function Accordion() { return ( Almaty, Kazakhstan With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was it..
2023.09.14 -
[공식문서 공략] Choosing the State Structure
state 구조화 한번도 생각해보지 않았던 부분이다. 초창기 값이 무시된다는 걸 알 수 있도록 명명한다. 초기에만 들어오고 state color에 값이 들어오면 수정됨 이런 실수는 할 수 있을 것 같음; 지금 initialItems 가 items에 들어가 있는데 items[0]가 아래 state로 관리되고 있음. 중복되는데 input에 변해도 아래 ui가 안변함 선택된 아이템의 아이디를 찾아서 value를 변경시켜 다시 저장 그리고 리렌더링 되고 아래 메시지도 변경 import { useState } from 'react'; import { initialTravelPlan } from './places.js'; export default function TravelPlan() { const [plan, ..
2023.09.13 -
[공식문서 공략] Reacting to Input with State
선언형과 명령형의 차이 역시 리액트 공식문서, 하나하나 다 설명해준다.... 하나하나 다 설명하면 오류가 발생하기 쉽기 때문에 UI를 직접 조작하지 않는 방식 대신 표시할 내용 자체를 선언하는 방식으로 React가 개발 되었다. 택시를 타고 택시 기사에게 목적지만 말하면 알아서 처리해준다. 내부적으로 리액트가 알아서 처리해준다. 조건에 따라서 UI가 달라진다. 로딩, 데이터 온, 데이터 X, 에러 너무 복잡한 것을 안해봐서 그런가? 자연스럽게 이렇게 생각하고 있었다. state에 대한 고려를 어떻게 하는지 배웠다.
2023.09.13 -
[공식문서 공략] Updating Arrays in State
기존 객체랑 똑같음 새 배열을 만들어서 map, filter 는 얕은 복사로 원본 배열을 변화시키지 않음 역시 리액트 뭐 사용하라고 배열 함수까지 알려준다. 사실 이전 프로젝트에서 sort를 썼는데 복사하고 쓰라고 한다. 더할 때는 스프레드 문법을 사용한다. 제거할 때는 filter를 사용한다. 이거는 주의를 해야할듯 맵하고 if를 사용하여 원하는 조건을 만들어준다. 백에서 비즈니스 코드를 안적어주면 잘 처리해서 해야겠다. 원소의 순서를 바꾸는 것은 괜찮지만 원소 내용을 바꾸는 것은 문제가 되기 때문에 최상위 수준까지 복사본을 만들라고함 map, if로 소팅한다. 부끄러운 기억이 있네; 변화를 많이 가져야하는 경우면 useImmer를 사용해야될 듯하다. useState보다
2023.09.13