공부기록 (165) 썸네일형 리스트형 멀티 프로세스 브라우저의 아키텍처 1. 프로세스 2. 스레드 3. CPU의 코어 와 프로세서 4. 멀티 프로세스 아키텍처 1. 프로세스 멀티 프로세스와 싱글 프로세스 멀티프로세스 프로세스란 프로그램이 OS에 의해 메모리 영역을 할당 받고 실행중인 것 프로세스는 실행의 흐름인 스레드가 있다 두개 이상의 프로세스가 동시에 OS에 의해 실행되는 상태를 멀티프로세스라고 부름 Inter Process Communication으로 Process간 소통이 필요 (서로 다른 영역에 존재하고 있는 메모리를 공유할 수 있음) 2. 스레드 싱글 스레디드 프로세스 멀티 스레디드 프로세스 싱글 스레디드 프로세스와 멀티 스레디드 프로세스 하나에 한개의 스레드가 있는 프로세스인가, 여러개의 스레드가 있는 프로세스인가 자바스크립트는 싱글스레드. 그러나 비동기 작업 .. git 초기 세팅 git repository만들기 +버튼을 클릭 Repository name을 마음대로 입력(영어) create repository 클릭 아래와 같은 화면이 뜬다 . 폴더 만들고 해당 폴더로 이동하여 에디터로 열고 origin 연결 echo "# [레포지토리명]" >> README.md git init git add README.md git commit -m "first commit" git branch -M main git remote add origin [프로젝트 URL] git push -u origin main object-fit이 적용 안될때 에러상황 이미지 크기를 부모태그인 div크기에 맞춰 비율에 따라 반응형으로 조절하게 하고 싶어서 object-fit 속성을 contain으로 설정하였으나 적용되지 않았음. 해결 방법 이미지태그에 width와 height를 100%로 적용하여 부모태그의 높이와 너비를 알려주고, 그다음에 object-fit을 설정하였더니 잘 적용되었다. 에러의 원인 Object-fit not affecting images I've been trying to use object-fit on a few images placed inside article elements, but it doesn't seem to affect them at all. The desired value for the object-fit property.. Data fetching 타입지정해보기, useEffect에서 async fetch의 타입 BlogPosts컴포넌트에 프롭으로 전달 error객체의 타입 지정 fetch의 타입 프로미스를 반환함 프로미스는 제네릭 타입인데 어떤 값을 생성할 프로미스 response 객체 response는 브라우저에서 제공되는 또다른 타입 (Response) response.json()으로 JSON데이터를 얻을 수 있음 .json은 promise를 또 반환 그런데 백엔드로부터 받는 데이터가 어떤 형식인지 모르므로 any타입으로 지정될 수밖에 없음 참고 : Zod 라이브러리 데이터를 유효성 검사하고 유효성 검사 결과에 따라 TypeScript에서 자동으로 타입을 추론할 수 있게 해줌 임시방편 as const data = response.json() as unknown; any보단 나은것이 unkn.. #76 setInterval은 useEffect안에 넣자 setState로 상태 업데이트를 하게 되면 컴포넌트를 다시 실행되고, 컴포넌트가 실행될 때마다 새 interval이 실행될 것이다. 이전 interval도 계속 실행되어 실제로 무한루프에 빠진다. setInterval(function () { setRemainigTime((prev) => prev - 50); }, 50); 그러므로 useEffect에 넣고 뎁스를 비워두면 컴포넌트가 렌더링 된 뒤 setInterval은 한번만 실행된다. import Container from "./UI/Container.tsx"; import { type Timer as TimerProps } from "../store/timers-context.tsx"; import.. # 65 Context Api 타입지정 베이스 셋업 import { createContext } from "react"; type Timer = { name: string; duration: number; }; type TimersState = { isRunning: boolean; timers: Timer[]; }; type TimersContextValue = TimersState & { addTimer: (timerData: Timer) => void; startTimers: () => void; stopTimers: () => void; }; const TimersContext = createContext(null); 초기에는 null값이 들어감 그래서 (null) Header컴포넌트에서 TimersContext에 접근 접근할 때는 v.. # 58 Form 래퍼 컴포넌트 타입지정 import { type ComponentPropsWithoutRef } from "react"; type FormProps = ComponentPropsWithoutRef; const Form = (props: FormProps) => { return {props.children}; }; export default Form; 이것은 정상작동된다 . 그러나 button을 children으로 넣어주었을 때 button을 클릭시 submit하는 액션이 동작하도록 하고 싶다. const Form = (props: FormProps) => { const handleSubmit = (e: FormEvent) => { e.preventDefault(); const data = new FormData(e.curren.. 선언형과 명령형 명령형 정의와 장단점 선언형 정의와 장단점 명령형 프로그래밍이란? 명령어를 명시적 지정하여 프로그램 동작 상태를 변경시키는 프로그래밍 방식 프로그램 동작의 흐름에 중점을 둠. 장단점 모듈 분리 없이 연속 계산과정. 실행속도 빠름 가독성 좋음 이해하는데 시간 비용 많이듦 선언형 프로그래밍이란? 추상화를 통해 명령어 제어의 흐름을 명시적으로 지정하지 않고 프로그램 수행 작업에 중점을 둔 패러다임. React는 왜 선언형 프로그래밍을 지향할까? 💄 UI 상태 관리에서 살펴보는 선언형 프로그래밍의 장점에 대해서 소개합니다. jinyisland.kr 이전 1 2 3 4 5 6 ··· 21 다음
