Suspense, Error Boundary를 사용하여 선언적으로 깔쌈하게 비동기 로딩, 에러 로직을 공통화합니다.

요즘 웹사이트에서는 가로 스크롤을 직접 움직이는 대신 어플리케이션처럼 마우스로 컨텐츠를 움직이는 좌우 드래그 스크롤 기능을 제공하는 사이트들이 많다. 따라서 이 기능을 구현해 보았다.1\. clientX, clientY브라우저 페이지의 왼쪽 상단 모서리를 기준으로 하는

이전까지 저는 Redux, Redux Tool Kit을 주로 사용해왔습니다. 이들을 사용하면서 느낀 점은 러닝커브가 크다는 것, action, reducer, store 등등 작성하는 코드가 많아 비효율적이다 라는 느낌을 많이 받았습니다. 그리하여 더 쉽고 강력한 라이

React vs Next.js React는 "사용자 인터페이스를 구축하기 위한 Javascript 라이브러리" Next.js는 React용 프로덕션 프레임워크 Next.js Next.js는 React 위에 사용되어 기능을 확장하고 개발 프로세스를 간소화합니다. Re

에디터를 도입하는 이유 제가 이 기능을 개발하는 이유는 충북대학교 각 단과대학, 학과 학생회 임원분들이 공지사항을 '카카오톡'으로 전달하는 것이 아닌 '충림이'를 통해 공지사항을 좀 더 효율적으로 올리기 위함이며 학생들 또한, 전달되는 공지사항들을 한 눈에 빠르고 쉽게

평소 Redux를 사용하다가 RTK의 장점을 깨닫고 이후로 진행하는 프로젝트에서는 RTK를 사용했다. RTK를 사용하며 Redux보다는 코드량이 많이 줄었지만 여전히 api요청하는 코드가 대부분이었고 이게 과연 클라이언트 스토어인가?라는 의문점도 있었다. 또한, 여전히

Effect는 sideEffect(부작용, 함수 외부에 영향을 주는 행위)을 의미하는데 이 이름이 붙여진 이유는 컴포넌트를 렌더링하는 본래 자신의 일이 아닌, 외부의 상태를 변경하는 작업을 하기 때문입니다.대표적인 부작용 예시로는 API 호출, 이벤트 처리 함수 등록

먼저, useEffect는 내용이 길어 따로 정리하여 업로드하는 점 미리 당부의 말씀 올립니다.

SPA 구현이 가능하려면 다음 두 가지 기능이 필요합니다.js에서 브라우저로 페이지 전환 요청을 보낼 수 있다. 단, 브라우저는 서버로 요청을 보내지 않아야 한다.브라우저의 뒤로 가기와 같은 사용자의 페이지 전환 요청을 js에서 처리할 수 있다. 이때도 브라우저는 서버

쉽게 말해 1개의 페이지만 있는 애플리케이션입니다. 하나의 페이지에서 내용만 바뀌는 것입니다. 서버로부터 새 페이지(html)을 불러오지 않고 현재 페이지를 동적으로 다시 작성하는 웹앱 혹은 웹앱을 작성하는 패러다임, 디자인 패턴입니다. 최초로 한 번 페이지 전체를 로

이 글은 공식 문서와 블로그 1, 블로그 2, 블로그 3에 있는 내용을 바탕으로 작성한 글입니다. 아직 공부량이 적어 부족한 점이 많으니 적극적으로 알려주시면 감사하겠습니다. 먼저, 예시로 사용되는 간단한 코드와 제가 직접 구현한 코드를 혼용하여 사용하는 것에 양해 부

요구 페이징 시스템은 프로세스가 특정 페이지를 요구할 때 해당 페이지를 물리 메모리에 로딩합니다.메모리에 필요한 페이지가 있을 때는 잘 진행되지만, 없을 경우에는 문제가 생깁니다. 프로세스가 필요로 하는 페이지가 없는 경우 페이지 폴트(page fault)가 발생하고

HTML5이 큰 특징 중 하나인 시맨틱 태그를 알아보자시맨틱 요소는 자신의 의미를 브라우저와 개발자 모두에게 명확하게 설명해준다.검색엔진이 HTML을 분석할 때 정확하게 컨텐츠를 식별하기 위해 정한 규약입니다.검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검

RAM의 부족한 용량을 보완하기 위해, 각 프로그램에 실제 메모리 주소가 아닌 가상의 메모리 주소를 할당하는 방식입니다. 프로그램 실행에 필요한 메모리 용량 전체를 RAM에서 할당받는 것이 아니라, 최소한의 메모리를 RAM에서 할당받아 저장하고 나머지는 HDD(가상 메

요청과 결과가 한 자리에서 동시에 일어난다. 요청을 하면 처리 시간에 관계없이 요청한 자리에서 결과가 주어져야 한다. 즉, 직렬적으로 업무를 수행한다.A 노드와 B 노드 사이의 작업 처리 단위(transaction)을 동시에 맞춰야 한다.ex - 카페에서 주문을 받을

프로그램 실행 순서위 그림과 같이, 프로그램이 실행되기 위해서는 운영체제가 프로그램의 정보를 메모리에 로드해야 합니다.또한, 프로그램이 실행되는 동안 CPU가 코드를 처리하기 위해서는, 메모리가 명령어와 데이터들을 저장해야 합니다.메모리 공간이렇게 프로그램이 운영체제(

공유된 자원에 여러 프로세스가 동시에 접근하면서 문제가 발생할 수 있습니다.이때 공유된 자원의 데이터는 한 번에 하나의 프로세스만 접근할 수 있도록 제한을 둬야 합니다. 이를 위하여 고안된 것이 바로 Semaphore 세마포어입니다.

프로세스와 스레드의 정의 > 프로세스 : 운영체제로부터 자원을 할당받은 작업의 단위. 스레드 : 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위. 프로그램 -> 프로세스 -> 스레드 프로그램 -> 프로세스 > 프로그램? 파일이 저장 장치에 저장되어

사용자가 강좌를 추가할 때, 강좌를 수강하는 학생들도 추가하게 되는데 그 컴포넌트를 작성하였다. 정말 기본적인 CRUD이지만 내맘대로 코딩하다가 이런 사태가 발생했고 map을 통해 해결하였다. 근본적으로 하위 컴포넌트를 상태로 만든 것이 문제였고 이렇게 만들었어도 ma

메인 메모리(휘발성) 밖에 있는 데이터를 저장하는 어떤 것전원이 나가도 데이터를 유지하고 있음(HDD, SSD)instruction의 직접적인 실행이 불가함.직접적으로 데이터를 read/write 불가함.용량이 메인 메모리보다 크고 싸고 느리다.지속적이다(전원이 나가도