잡학다식한 프로그래머 잡학다식한 프로그래머

python의 대표적인 자료구조는 list, Tuple, set, dictionary 4가지 입니다. List [ ] list는 js의 배열과 같다고 생각하시면 됩니다. li1 = list(range(5)); print(li) # li1 = [1,2,3,4] 기본 사용 방법으로 li = [1,2,3,4,5] print(li[0]) # 1 print(li.clear()) # [] 빈 list가 생성됩니다 print(li.append(6)) # [1,2,3,4,5,6] print(li.insert(3,'hello') # [1,2,'hello',3,4,5] # 등 count, extend, pop, remove, sort 메소드가 존재합니다 list는 javascript의 배열과 유사한 형태를 띄고있으며 사용..

프로젝트에서 Loading과 useEffect로 axios를 사용하여 data를 받아오는 작업을 사용해보았고 React-query 라는 것을 알게되어서 사용해보고 프로퍼티는 어떠한 것이 있는지 장단점, 설명 등에 대해 정리 하고자 한다. React-Query는 비동기 로직을 쉽게 다루게 해주는 라이브러리 React-Query는 Redux 처럼 전역적 데이터 관리를 할 수 있게 해주는 라이브러리 data 캐싱을 사용하기 때문에 API를 지속적으로 받아와 모든것을 리렌더링 할 필요없이 변경된 부분에만 리렌더링이 일어나서 성능적으로 우위를 점할 수 있는 라이브러리 라고 생각한다. data 뿐만아닌 여러 프로퍼티가 있어 Loading, Success, Error, Idle, status 관리를 쉽게 할 수 있다..

- 프로젝트를 진행하며 Navigate, Params, Location을 각각 사용해 보았는데 정작 왜 사용하는지에 대해서는 대답을 할 수 없었고 - 개별적으로 Hook에 대한 정보나 내용들을 정리해보려고 한다. useNavigate Hook useNavigate 훅의 리턴값은 함수 페이지를 이동시키는 함수를 반환한다. 인자값으로 정수값을 넣어주면 앞 뒤 경로로 탐색할 수 있다 const navigate = useNaviate(); 홈으로 이동하기 뒤로가기 뒤로 2페이지 가기 앞으로 useLocation Hook useLocation 은 경로 정보를 담고 있는 객체를 리턴한다. { hash: '', key: 'default' pathname: '/test/1', search: '', state: null..

가장 최신 출시된 JS표준에 의거한 것!! Top Level await 이전 에는 await을 사용하려면 async 함수 내에서 진행 (async function () { await startServer(); })(); ES2022에 와서는 이러한 규칙이 사라졌음 async 함수 없이 await 모듈을 사용할 수 있음 await startServer(); 이렇게 한줄로 변경시켜 버릴 수 있음 Error cause 오류의 원인을 설명하며 더 나은 오류 메시지를 띄울 수 있음 이전에는 이렇게 에러의 메시지를 작성해주어야했는데 new Error("Can't save comment"); ES2022에 와서는 new Error("Cant save comment", { cause: "Not allowed."}); ..

Q. 옵저버 패턴을 어떻게 구현하나요? 여러 방법이 있지만 프록시 객체를 써서 하곤합니다. 프록시 객체를 통해 객체의 속성이나 메서드 변화 등을 감지하고 이를 미리 설정해 놓은 옵저버들에게 전달하는 방법으로 구현 프록시 객체란? 프록시 객체는 어떠한 대상의 기본적인 동작 ( 속성 접근, 할당, 순회, 열거, 함수 호출 등) 의 작업을 가로챌 수 있는 객체를 뜻함 JS에서 프록시 객체는 2개의 매개변수를 가진다 target : 프록시할 대상 handler: 프록시 객체의 target 동작을 가로채서 정의할 동작들이 정해져 있는 함수 Q. 프록시 서버를 설명하고 사용 사례에 대해 설명해보세요 프록시 서버란 서버 앞단에 둬서 캐싱, 로깅, 데이터 분석을 서버보다 먼저 하는 서버를 말한다. 이를 통해 포트 번호..

목적 react-hook-form 에 대해서 설명, 얼마나 유용한지 간단한 input과 console.log 찍기 // 일반 js function TodoList() { const [toDo, setTodo] = useState("") const [toDoError, setTodoError] = useState(""); const onChange = (event: React.FormEvent) => { const { currentTarget: { value }, } = event; setTodoError(""); setTodo(value); } const onSubmit = (event: React.FormEvent) => { event.preventDefault(); console.log(toDo); ..

목적 스테이트 관리를 하기 위한것 스테이트 관리를 왜 하느냐? props drilling 을 방지 하기위한 것 props drilling 이란? 예를 들어 전체 테마를 변경하기 위한 global component가 최상위 app 혹은 index 파일에 있다. 전체 테마를 변경하지만 index 아래 -> app 아래 -> store 아래 -> 장바구니 아래 -> 특이한 버튼 특이한 버튼의 props하나를 변경시켜주기 위해 index, app, store, 장바구니 전부다 props를 생성하여 자식 컴포넌트에 물려 주어야한다. 거기다가 만약 타입스크립트까지 사용한다면? 변경 점이 없는 중간 단계의 컴포넌트들에 쓸모도없는 interface까지 만들어주어서 props를 보내주어야한다. 또한, props명 혹은 ..

기존 React.js 에서는 함수를 생성하고 evnet.target을 이용할때 button에 들어가던 div에 들어가던 문제가 없다 문제는 없지만 렌더링이 되지 않거나 코드가 실행되지 않는 경우가 있어서 문제를 해결해야할 경우 코드 전체를 뒤집어야하는 상황이 발생할 수 있다. 그 에따라 typeScripts 에서 const onSubmit = (event) => { ... } const onSubmit = (event: React.FormEvent) => { ... } event에 어떠한 evnet를 사용할껀지 타입을 설정해주고 Form Element 에서 사용될 코드가 잘못 되었다면 TypeScript에서 먼저 에러를 발생시켜 코드 실행을 더욱 안전하게 해줄 수 있다 https://reactjs.org..