정글 수료 후 동기들과 함께한 React 공식 문서 읽기 스터디가 드디어 끝났다! 🎉 다음 스터디 주제를 정하기 위해서 모여서 지난 스터디 회고와 앞으로 공부할 것을 정하는 시간을 가졌다. 이 스터디원들과 제일 먼저 공부했던 것은 면접 준비를 위한 모던 자바스크립트 Deep Dive 책 읽기였고, 책을 다 읽고 나서는 본격적으로 리액트를 공부해 보기 위해서 공식 문서를 읽었다. 리액트 공식 문서를 전부 읽는 데 걸린 기간은 무려 199일... (Sep 28, 2023 ~ Mar 25, 2024) 1. 이전 스터디 회고 1) 좋았던 점 성범) 모르는 것을 알게되어 좋았다 주희) 스터디 안 했으면 아예 공부 안 했을 것 같은데 조금이라도 하게 되어서 좋았다 성범) 개발이 재밌어보인다. 새로운 것을 배워서 적..

리액트를 쓸 수 있게 해주는 루트를 만드는 API들! Next.js 같은 프레임워크를 쓴다면 별로 쓸 일이 없을 것 같긴 한...🫠 📄 Docs 🔗 createRoot 🔗 hydrateRoot createRoot 브라우저의 DOM 노드 안에 React 컴포넌트를 표시하는 루트를 생성하는 API 1. Reference import { createRoot } from 'react-dom/client'; const domNode = document.getElementById('root'); const root = createRoot(domNode); 루트를 생성한 후, 그 안에 React 컴포넌트를 표시하기 위해 root.render(;)를 호출해야 한다. 온전히 React만으로 구축된 앱은 보통 루트 컴포넌..

모달 짱 쉽게 만들 수 있을 것만 같은 API..🩵 📄 Docs 🔗 createPortal createPortal cratePortal을 사용하면 컴포넌트의 일부를 DOM의 다른 부분에 렌더링할 수 있다. 포털을 생성하려면 createPortal을 호출하고 JSX와 렌더링할 DOM 노드를 전달한다. {createPortal(children, domNode, key?)} 포털은 DOM 노드의 물리적 배치만 변경한다. 포털에 렌더링하는 JSX도 이를 렌더링하는 React 컴포넌트의 자식 노드 역할을 한다. 예를 들어, 자식은 부모 트리에서 제공하는 컨텍스트에 접근할 수 있고, 이벤트는 React 트리에 따라 자식에서 부모로 버블링된다. Parameters children React로 렌더링할 수 있는 모든 ..

form 액션의 결과에 기반하여 상태를 업데이트할 수 있게 해주는 Hook 마지막 양식 제출의 status 정보를 제공하는 Hook 📄 Docs 🔗 useFormState 🔗 useFormStatus useFormState 💡 현재는 Canary와 experimental channel에서만 사용할 수 있다. 💡 useFormState을 사용하는 이점을 얻으려면, React 서버 컴포넌트를 지원하는 프레임워크에서 사용해야 한다. form 액션의 결과에 기반하여 상태를 업데이트할 수 있게 해주는 Hook이다. const [state, formAction] = useFormState(fn, initialState, permalink?); 1. Reference useFormState(action, initia..

hook을 작성할 때는 반드시 컴포넌트의 최상위 레벨 혹은 커스텀 훅 안에서만 작성할 수 있다. 즉, 조건문, 반복문, 함수 내부에서는 hook을 호출할 수 없다. 왜 이런 규칙이 생겼는지 알아보자!! 🔗 참고한 글 React hooks: not magic, just arrays Untangling the rules around the proposal using diagrams medium.com State: 컴포넌트의 메모리 – React The library for web and native user interfaces react-ko.dev useState를 호출하는 코드를 보면, 인자로 초기값만을 전달하고 있다. const [index, setIndex] = useState(0); 어떤 state..

리렌더링을 일으키지 않고 정보를 "기억하는" 방법을 알아보자. 컴포넌트가 특정 정보를 기억하도록 하고 싶지만 그 정보가 새로운 렌더링을 촉발하지 않게 하려면 ref를 사용하면 된다! 📄 Docs 🔗 useRef 🔗 Referencing Values with Refs 🔗 Manipulating the DOM with Refs 0. useRef useRef(initialValue) 컴포넌트의 최상위 레벨에서 useRef를 호출해서 ref를 선언한다. import { useRef } from 'react'; const ref = useRef(0); useRef가 반환하는 객체 { current: 0 // The value you passed to useRef } ref.current 속성을 통해 ref의 현재..

초안 발표에서 탈탈 털린 우리 팀은 기획을 전반 수정해야 했다. 그렇게 나온 아이디어가 이름도 장황한 캐주얼 노래 배틀 게임 ㅋㅋ 캐주얼은 왜 붙인 건지 아직도 모르겠음 노래를 부르면 실시간으로 채점을 해주고 동시에 다른 친구와 대결을 할 수 있는 게임이다. 노래만 부르면 아쉬우니까 여기에 아이템으로 공격을 할 수 있고 방어 아이템을 쓰거나 특정 행동으로 공격을 회피할 수도 있다. 처음에는 내가 엄청 반대했다. 이유는 '난 이걸 만들 수 없어..' 웹만 만들어봤는데, 게임을 만드는 건 상상도 못 해봤고 어떻게 해야 하는 건지 도무지 감이 잡히지 않았다. 그래픽 관련 기술을 새로 배워서 하기엔 시간이 너무 촉박할 것 같고, 이 프로젝트에서 잘할 수 있는 걸 하고 싶었지 겨우겨우 해내는 걸 하고 싶지 않았다..

너무너무 늦었지만 이제라도 작성하는 나만의 무기를 갖기 회고 Start~! 지금은 나만무 최종 발표(7/8)가 끝난 지 3개월이나 지났다 ㅎㅎ 우선 나만무에 대한 나의 생각부터 기록해 보자면.. 부트캠프를 하고 남는 것은 프로젝트뿐이라고 생각하였고, 나에겐 무려 세 번째 부트캠프인 만큼 굉장한 프로젝트를 해내야 하고 해낼 수 있을 것이라는 자신감이 가득했다. 리더 지원 당연하게도 리더에 지원했다. 지원한 이유는 프로젝트 경험이 있다. 원래 나서는 거 좋아함. 답답할 바에 내가 뛸래 ! 앞으로 사회에 나가면 리더가 되기까지 몇 년은 더 기다려야 한다. 내가 스스로 리더가 될 수 있는 마지막 기회니까 애초에 크래프톤에서 발표하는 영상 보고 반해서 나도 하고싶어서 정글 지원했음 취업에도 당연히 도움이 될 것 ..

1. Redux 📄 Redux 📄 React Redux 1-1. Installation npm install redux npm install react-redux1-2. Setting 1) Redux Store를 이용 가능하게 해주는 컴포넌트인 로 index.js의 을 감싼다. 는 react-redux에서 가져온다. store는 별도의 파일에서 만들어서 가져온다. import { BrowserRouter } from "react-router-dom"; import { Provider } from "react-redux"; ~~~ 생략 ~~~ root.render( ); ~~~ 생략 ~~~2) reducer 생성 store를 만들기 위해서는 reducer가 필요하므로, reducer를 먼저 만들어주자! s..

1. Installation npm install react-router-dom@6 2. Setting 1) src/index.js 로 App을 감싼다. import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); 2) src/App.js 안에서 필요한 페이지들을 태그를 이용해 정의해둔다. path 속성에 담은 값이 각 페이지의 경로가 된다. import "./App.css"; import { Routes, Route } from "react-router-dom"; import Homepage from "./page/Homepag..

1. 기본 형태 클래스 컴포넌트의 기본 형태를 먼저 보자! ES7 React/Redux/React-Native/JS snippets Extension을 사용하고 있다면 rcc를 입력하면 기본 형태를 자동으로 입력할 수 있다. import React, { Component } from 'react' export default class AppClass extends Component { render() { return ( ) } } 2. State 1) state 만들기 클래스 컴포넌트는 hook이 없다! 따라서 function 컴포넌트처럼 useState를 사용할 수 없다. constructor 메서드 안에서 state 객체를 만들어주고 안에 필요한 state들을 요소로 넣어준다. (이 c..

📄 Docs 2023년에 리뉴얼된 리액트 공식 문서의 "Describing the UI" 내용이다. 📚 You will learn React Component import / export JSX props 조건부 렌더링 목록 렌더링 컴포넌트 순수성 유지 1. React Component 1-1. 컴포넌트: UI 구성 요소 리액트는 markup, CSS, JS를 사용자 정의 컴포넌트로 결합할 수 있게 해주며, 이는 앱의 재사용 가능한 UI 요소가 된다. 1-2. 컴포넌트 중첩 컴포넌트는 일반 JS 함수이므로 한 파일에 여러 컴포넌트를 포함할 수 있다. 컴포넌트가 다른 컴포넌트를 렌더링할 수는 있지만, 아래처럼 정의를 중첩해서는 안 된다!! export default function Gallery() { /..

📄 Docs 2023년 3월에 리뉴얼된 리액트 공식 문서의 첫번째 장, "Quick Start"의 내용이다. 📚 You will learn 컴포넌트 생성 및 중첩 마크업과 스타일 추가 데이터 표시 조건부 렌더링과 목록 렌더링 이벤트 응답 및 화면 업데이트 컴포넌트 간 데이터 공유 1. Creating and nesting components 리액트는 컴포넌트로 구성된다. 컴포넌트는 자체 로직과 외관을 가진 UI의 일부이다. 컴포넌트는 버튼만큼 작을 수도 있고, 한 페이지 전체만큼 클 수도 있다. 리액트 컴포넌트는 마크업을 리턴하는 JS 함수이다. 컴포넌트의 이름은 대문자로 시작한다. 1-1) 컴포넌트 생성 function MyButton() { return ( I'm a button ); } 1-..

Optimistic UI 유저가 네트워크 응답을 기다려야 할 때, 예상 응답을 미리 표시해주어 지연을 숨기는 방법이다. 전제 조건 실패할 가능성이 낮고, 실패해도 문제가 없는 상황에 적용해야한다. 배제해야 하는 경우 여러 테이블에 데이터를 함께 저장하는 경우. 👉하나라도 실패하면 전체 API가 실패로 처리되기 때문에 실패 확률이 높기 때문 활용 예시: 좋아요 프로세스 일반적인 방식 브라우저에서 좋아요를 누르면 백엔드에 `좋아요 API`를 요청하고 DB에 접근해서 기존의 좋아요 수에 +1을 한다. DB에서 돌려받은 값을 백엔드를 거쳐 브라우저에서 받아서 화면에 보여준다. 👇🏻 Optimistic UI를 적용하면 ~ state에 좋아요의 값을 +1 해놓고 state를 화면에 먼저 보여준다. 실제 요청의 결과..

state가 바뀌면 바뀐 state로 컴포넌트가 다시 만들어지는데, 불필요한 재렌더링은 성능에 악영향을 미친다. 컴포넌트가 어떻게 재생성되고, 다시 만들지 않게 하는 방법은 무엇인지 알아보자! memoization 새로 만들 컴포넌트를 메모해놓고, 다음에 다시 만들어야 할 때 새로 만들지 않고 메모해 놓은 것을 가져다 쓴다고 생각하면 된다. 재렌더링 시 새로 만들어지는 것들 컴포넌트 안의 hook을 제외한 나머지는 전부 새롭게 다시 만들어진다. 부모가 새로 만들어지면 자식들도 새로 만들어진다. 렌더링이 일어나면 hook을 제외한 모든것이 새로 만들어진다. 1. let과 state let으로 선언한 변수는 값이 바뀌어도 화면에 반영되지 않는다. 반면, state가 변경되면 렌더링이 일어나고 화면에 반영된다..

HOC가 가능해지는 원리부터 알아보자! 컴포넌트를 가져올 때 사용하는 일반적인 방법이다. (Aaa 컴포넌트에서 Bbb 컴포넌트를 불러오고 있다.) 이때, Bbb 컴포넌트를 불러오는 방식을 함수를 호출하는 형태로 변경할 수 있다. 여기에 컴포넌트를 하나 더 추가해보자. 추가하는 컴포넌트는 Aaa가 Bbb를 불러올 때 그 사이에 실행시킬 것이다. `먼저 실행 컴포넌트`를 보면, 함수 안에서 함수(Component)를 리턴하면서 리턴하는 함수의 props를 리턴되는 컴포넌트에 전달해주고 있다. 이를 활용하면 Aaa를 실행시키면 Bbb 컴포넌트에 props는 그대로 전달하고, 먼저 실행 컴포넌트에서 필요한 로직들을 먼저 실행시킬 수 있게 된다. 이렇게 중간에 추가한 `먼저 실행 컴포넌트`를 Higher Orde..

Closure 클로저는 함수가 선언된 렉시컬 환경을 '기억'하여, 해당 함수가 선언된 범위 바깥에서 호출되더라도 그 환경에 있는 변수를 접근하고 조작할 수 있게 하는 프로그래밍 패턴이다. 함수는 보통 호출되고 나면 실행이 끝나고, 그 안에서 선언한 모든 변수는 메모리에서 해제된다. 이렇게 되면 일반적으로 해당 함수의 변수에는 접근할 수 없게 된다. 그런데, 클로저가 있는 경우에는 얘기가 달라진다. 클로저가 있으면 외부 함수가 종료되어도, 내부 함수가 외부 함수의 지역 변수에 계속해서 접근할 수 있다. (외부 함수의 변수를 기억하고 계속 사용할 수 있게 된다.) 우선 함수 내부에 함수가 있는 유형을 먼저 만들어보자. 외부함수 aaa의 지역변수에 내부함수인 bbb가 접근할 수 있다. apple이 외부함수에 ..

브라우저의 저장공간 브라우저에 데이터를 저장할 수 있는 공간을 먼저 알아보자! 개발자 도구 > Application에서 볼 수 있다. 1. Local Storage 브라우저를 껐다가 켜도 남아있는다. ex) 비회원으로 장바구니 담기한 경우 저장 보안상 중요한 데이터를 저장하는 것은 옳지 않다. console에 찍으면 다~ 나오기 때문,, 2. Session Storage 브라우저를 끄면 사라진다. 3. Cookies 브라우저와 백엔드 간 연결 시 데이터 전달 통로가 될 수 있다. 지정한 시간이 지나면 사라진다. 백엔드 API와 통신할 때 같이 보낼 수 있다. 만료 시간을 지정할 수 있다. 이렇게 객체 형태로 저장해서 사용할 수 있다. 그런데, Next.js 환경에서 이러한 브라우저 저장소에 접근하려고 하..

Pintos Project4에서는 FAT 방식으로 파일 데이터를 할당한다. FAT 방식은 파일이 할당된 블록의 위치 정보를 chain 형태로 관리하는 Linked Allocation 방식에 해당한다. 이외에도 파일 데이터를 할당하는 방식은 여러가지가 있다. Contiguous Allocation Linked Allocation Indexed Allocation 1. Contiguous Allocation 연속 할당 방식은 각 파일을 디스크의 연속적으로 이어지는 공간에 할당한다. 이 상황에서 중간에 있는 길이가 5인 주황색 파일이 삭제되어 공간이 비었을 때, 길이가 6인 노랑색 파일을 저장하려고 한다면, 실제 디스크의 공간이 6 이상 비어있음에도 불구하고, 연속된 공간이 아니기 때문에 할당할 수 없어 4 ..

Memory-mapped page Memory-mapped page는 Anonymous page와 달리 파일을 기반으로 매핑하는 페이지이다. 즉, 이 페이지에 담기는 내용은 실제 디스크에 존재하는 파일의 데이터가 담긴다. 🤔 왜 매핑을 해야 하지? 파일과 메모리를 매핑하면, 파일을 메모리처럼 접근할 수 있게 되어서 파일 입출력의 효율성을 향상할 수 있다. 이렇게 파일과 매핑된 메모리 영역은 가상 주소 공간에서 접근 가능하며, 해당 영역에 대한 읽기/쓰기 작업이 가능해진다. 쓰기 작업으로 인해 파일의 내용이 변경되면 매핑이 해제(unmap)될 때 디스크의 실제 파일에 해당 변경 사항이 반영된다. Mapping 파일과 메모리 매핑은 System call인 mmap()을 통해 이루어진다. Pintos에서는 v..

💡 이번 파트에서는 Anonymous page라고 불리는 non-disk based image를 구현한다. Anonymous Page란? 파일을 기반으로 하는 file-backed page와 달리, 이름이 지정된 파일 소스가 없기 때문에 anonymous라고 불리며, 스택과 힙 영역에서 사용된다. Lazy Loading을 이용한 페이지 초기화 Lazy loading은 메모리 로딩을 필요한 시점까지 미루는 디자인 패턴이다. Lazy Loading을 구현하기 위해서는 페이지를 할당할 때 해당 페이지에 대응하는 page 구조체만 만들고, 물리 frame 할당 ❌ 실제 내용도 ❌ (아직은 로딩하지 않는다!) 그럼 내용은 언제 로드하지 ?! 👉🏻 실제로 내용이 로드되는 시점은 page fault가 발생하는 시점이..

Pintos Project 3의 첫번째 과제인 Memory Management에서는 supplemental page table을 먼저 다루고, Physical Memory와의 매핑하는 함수를 구현한다. Implement Supplemental Page Table 현재 상태에서 Pintos는 가상 및 물리적 메모리 매핑을 관리하기 위한 페이지 테이블(pml4)을 가지고 있다. pml4 이외에 추가로, page fault 및 리소스 관리를 처리하기 위해 supplementary page table이 필요하다. 💡 Implement supplemental page table management functions in vm/vm.c. 0) supplemental page table hash table을 이용해서..

Pintos Project 2 관련 포스팅 목록 Argument Passing (User 프로그램 인자 설정하기) System Calls - 1 (System Calls이 호출되는 과정) System Calls - 2 (exec, wait, fork) & Deny Write on Executables System Calls - 3 (File System) & User Memory User Memory Access system call의 일환으로, 커널은 종종 사용자 프로그램이 제공한 포인터를 통해 메모리에 접근해야 합니다. 그러나 사용자는 1) null 포인터, 2) 매핑되지 않은 가상 메모리를 가리키는 포인터 또는 3) 커널 가상 주소 공간(KERN_BASE 이상)을 전달할 수 있으므로, 커널은 이를 ..

Pintos Project 2 관련 포스팅 목록 Argument Passing (User 프로그램 인자 설정하기) System Calls - 1 (System Calls이 호출되는 과정) System Calls - 2 (exec, wait, fork) & Deny Write on Executables System Calls - 3 (File System) & User Memory Argument passing user 프로그램이 실행되기 전에 프로그램에 대한 인자를 설정해야 한다. 👇🏻 인자를 어떻게 처리해야 하는지 예시를 통해 먼저 알아보자! 예시) "/bin/ls -l foo bar"의 인자 처리하기 명령어를 단어로 분할한다: /bin/ls, -l, foo, bar 각 문자열과 널 포인터를 스택에 오..

Stack Growth Project 2까지 사용하던 스택은 USER_STACK을 시작으로 하는 단일 페이지였으며, 프로그램의 실행은 이 크기로 제한되어 있었다. Stack Growth를 구현하면 스택이 현재 크기를 초과하면 추가 페이지를 할당한다. 즉, 접근한 가상 주소에 매핑된 frame이 없어서 page fault가 발생한 경우 중에서 접근한 가상 주소가 Stack 영역 내에 존재할 경우에는 추가 페이지를 할당해 page fault를 해결해보자! 우선 접근한 주소가 Stack 영역 내에 존재하는지 판별해야 한다. 접근한 주소가 Stack 영역 내에 존재하는지 판별하기 page fault가 발생했을 때 접근한 주소가 stack 안에 있는지 판별하고, stack에 접근한 경우에는 stack growth..

Pintos Project 2 관련 포스팅 목록 Argument Passing (User 프로그램 인자 설정하기) System Calls - 1 (System Calls이 호출되는 과정) System Calls - 2 (exec, wait, fork) & Deny Write on Executables System Calls - 3 (File System) & User Memory Pintos 프로젝트 2 과제로 시스템콜을 구현했다. 1.5주동안 열씸히 구현한💦 유저 프로그램을 실행시키고 시스템콜을 호출하는 그 과정이 어떻게 이루어지는지 알아보자! system call을 호출하는 open-normal 테스트 파일이 실행되는 데까지 어떤 과정을 거치게 될까?? open-normal 👇🏻 System call..

면접보는 승범이네 # 문제 마포구에는 모든 대학생이 입사를 희망하는 굴지의 대기업 ㈜승범이네 본사가 자리를 잡고 있다. 승범이는 ㈜승범이네의 사장인데, 일을 못 하는 직원들에게 화가 난 나머지 전 직원을 해고하고 신입사원을 뽑으려 한다. 1차 서류전형이 끝난 뒤 합격자들은 면접을 준비하게 되었다. 면접자들은 서로 다른 N개의 도시에 거주한다. 승범이는 면접자들의 편의를 위해 거주 중인 N개 도시 중 K개의 도시에 면접장을 배치했다. 도시끼리는 단방향 도로로 연결되며, 거리는 서로 다를 수 있다. 어떤 두 도시 사이에는 도로가 없을 수도, 여러 개가 있을 수도 있다. 또한 어떤 도시에서든 적어도 하나의 면접장까지 갈 수 있는 경로가 항상 존재한다. 모든 면접자는 본인의 도시에서 출발하여 가장 가까운 면접장..

Pintos Project 2 관련 포스팅 목록 Argument Passing (User 프로그램 인자 설정하기) System Calls - 1 (System Calls이 호출되는 과정) System Calls - 2 (exec, wait, fork) & Deny Write on Executables System Calls - 3 (File System) & User Memory 1. exec 1-1. exec 요구사항 현재 프로세스를 cmd_line에 주어진 실행 파일로 변경하고, 필요한 인수를 전달합니다. 이 함수는 성공한 경우 반환하지 않습니다. 프로그램이 로드되거나 실행될 수 없는 경우 종료 상태 -1로 프로세스가 종료됩니다. 이 함수는 exec를 호출한 스레드의 이름을 변경하지 않습니다. 파일 ..

벌써 정글에 입소한 지 두 달이 지났다. 정글의 커리큘럼을 보니 딱 중간 단계에 와있다. 지금까지 정글에 와서 정말 많은 공부를 했다. 배운 것들을 머릿속에만 남겨놓기 아까우니 여기에 남겨놔야지~! 1 ~ 4주차 :: 컴퓨팅 사고로의 전환 첫 4주동안은 난생처음 들어보는 자료구조와 알고리즘을 배우면서 정말 많은 알고리즘 문제를 풀었다. 이 세상엔 다양한 알고리즘이 very many 존재한다는 것을 알게 되었고, 이걸 모르고 살았던 인생이 아까울 정도였다. 복잡한 문제를 코드 몇 줄로 뚝딱 간단한 문제로 바꿔버리는 것이 아주 매력적이다. 요즘은 특히 다익스트라에게 아주 빠져버렸다 ㅎㅎ dijkstra

Donation Donation 구현사항 lock을 보유하고 있는 스레드가 낮은 우선순위를 가진 스레드일 경우, 대기하고 있는 스레드의 우선순위를 보유한 스레드에게 기부한다. 이 때, 재귀적으로 기부가 이루어질 수 있다. 🤔 Donation을 하는 이유 :: Priority Inversion 높은 우선순위 스레드가 낮은 우선순위 스레드가 가진 공유 자원(lock)을 사용하기 위해 대기할 때 Priority Inversion이 발생한다. 높은 우선순위 스레드는 블록되어 CPU 시간을 할당받지 못하고, 대기 상태에서 머물러 있게 된다. 이럴 경우 중간 우선순위의 스레드가 ready_list에 존재한다면, 높은 우선순위 스레드는 우선순위가 더 높음에도 불구하고 CPU 시간을 할당받지 못하고 대기 상태에 머물러..