프로세스 생명주기 프로세스 상태 (Status) 신규 (New) 프로세스가 막 메인메모리에 올라온 상태 아직 실행은 불가능 수용 (admit) 동작을 거쳐야 준비단계로 넘어감 준비 (Ready) 변수 초기화 등 기초 준비작업을 모두 끝내고 실행을 할 수 있는 상태 스케쥴러를 통해 dispatch되어야 수행상태가 됨 준비상태가 되는 경우 신규 프로세스가 수용됐을 때 대기 프로세스의 입출력/이벤트가 완료됐을 때 수행 프로세스가 중단됐을 때 수행 (Running) CPU가 실제로 프로세스를 수행하는 상태 선점 스케쥴링에 의해 중단되면 준비상태가 됨 (CPU 과부하) 입출력/이벤트가 필요하면 대기상태가 됨 수행이 완료되면 종료상태가 됨 수행상태가 되는 경우 준비 프로세스가 스케쥴러를 통해 발송될 때 대기 (Wa..
날짜별 페이지네이션 목표 : 날짜 마다 장소를 추가할 수 있는 화면을 구현하기 dates = ["2023-08-23","2023-08-24","2023-08-25"] dates는 날짜가 하나씩 담긴 배열로 이루어져 있다. const [currentPage, setCurrentPage] = useState(0); const handleNextPage = () => { setCurrentPage(currentPage + 1); }; const handlePreviousPage = () => { setCurrentPage(currentPage - 1); }; ... return ( ... ⬅️ {dates[currentPage]} ➡️ ... ) 페이지넘버 state를 만들고, 페이지넘버를 증감시키는 함수를 ..
1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? 각각의 컴포넌트에 같은 데이터를 사용해야 할 때, 컴포넌트의 관계가 부모자식이 아니면 데이터를 직접 전달해줄 수 없다.그리고 만약 전달이 가능 하더라도, 수많은 컴포넌트를 거쳐서 porp을 전달하면 prop drilling이 일어나서 어디에서 데이터가 왔는지 확인하기가 어렵다. 그러므로 state를 잘 추적하기 위해 상태관리를 꼭 해야한다. 평소에는 상태관리를 위해 중앙 저장소의 역할을 하는 Redux 같은 툴을 사용한다. 2. Redux가 무엇인가요, 왜 Redux를 사용하시나요? Redux는 애플리케이션에서 상태를 관리하는 라이브러리이다. Redux는 애플리케이션의 상태를 하나의 store에 저장하고, 상태 변경을 예측 가능..
Supabase Supabase에서 내보낸 타입 사용하기 Supabase에서 table을 생성할 때 타입을 지정하는데, 그 지정한 타입을 ts파일로 내보낼 수가 있다. table의 모든 type이 interface로 지정되어있어서 평소처럼 export에서 원하는 컴포넌트에서 타입을 사용하면 된다. 밑에 쓰여진 형식으로 필요한 부분을 지정해서 export해서 사용할 수 있다. 해당 방법이 번거롭다면, 그냥 컴포넌트에서 Database['public']... 으로 불러와서 사용해도 된다. export type PinType = Database['public']['Tables']['pins']['Update']; export type UserType = Database['public']['Tables']['u..
CPU CPU란? 사용자의 명령에 대한 작업을 수행하는 처리장치 CPU 구성 산술논리 연산장치(ALU) : 비교, 판단, 연산 제어부(CU) : 명령어의 해석과 올바른 실행을 위해 CPU를 내부적으로 제어 메모리 유닛 레지스터 : 처리할 명령어 저장 캐시 메모리(L1) : 처리속도를 높여줌 제어부 Control Unit 명령어를 실행하는 순서를 제어하고 스케쥴링 제어부 주기억 장치에 저장되어 있는 명령어를 순서대로 호출하여 해독하고, 제어 신호 발생시킴 컴퓨터의 각 장치를 동작하도록 함 내부버스 CPU와 주기억 장치, 입출력 장치, 외부 기억 장치, 주변 장치, 통신 처리 장치 등의 제어부 사이를 연결하는 버스 연산장치 Arithmetic Logic Unit 산술 논리 장치 논리 연산을 계산하는 디지털 ..
https://github.com/rmdkak/Quiz-Play-Ground GitHub - rmdkak/Quiz-Play-Ground Contribute to rmdkak/Quiz-Play-Ground development by creating an account on GitHub. github.com 튜터님 피드백 로딩중 이미지 굿 로그인 유도 할 장치 필요( 댓글 투명, 로그인 해야 볼 수 있도록..) eslint 굿 커스텀 훅 굿 optimistic 하고 debouncing 처리까지 해주면 더 굿(불필요한 클릭까지 고려) 트러블 슈팅 설명 굿굿 K - Keep Eslint 사용으로 인해 수월해진 디버깅 (너무너무 철저한 예외 처리) 공용 컴포넌트를 다양한 커스텀 조건으로 생성 논리적인 이유를 근거..
타입스크립트로 로그인 유효성 검증하기 버튼에 disabled 설정하기 input에 모든 값이 작성되지 않으면 버튼을 비활성화 시키도록 disabled를 설정하기 위한 내용이다. 자바스크립트로 작성할 때는 조건문 자체에 변수를 넣는다던가 등등 편하게 true, false를 신경쓰지 않고 사용했었는데, 타입스크립트에서는 적용되지 않는다! (eslint 설정 때문인지도 모른다.) const id = '' const password = '' //기존 js 코드 작성시 const disabled = !id || !password; if(id){ //실행할 내용~~ } if(password){ //실행할 내용~~ } //ts 작성시 const isId = Boolean(id); const isPassword = B..
Progress bar 만들기 완성 이미지 tailwind animaton 추가하기 사용자 지정 animation을 추가하려면, tailwind.config 파일을 수정해야한다. extend: { keyframes: { progress: { '0%': { width: '0%' }, '100%': { width: '100%' } } }, animation: { progress3: 'progress 3s ease-in', progress5: 'progress 5s ease-in', progress7: 'progress 7s ease-in' } } 원하는 이름으로 keyframe을 추가한다. (progress bar를 만들 것이라서 progress로 만들었다!) 0%, 100% 만 설정하는 경우에는 from ..
