CPU는 User Application이 시스템을 손상시키는 것을 막기 위해 이중 동작 모드를 제공한다. 이중 동작 모드란, 유저 모드, 커널 모드로 나누어서 동작하는 것을 말한다. 컴퓨터에는 중요한 자원들이 많이 저장되어 있는데, 사용자가 이러한 자원에 함부로 접근할 수 있다면 악의가 없다고 해도 시스템을 망칠 수 있기 때문에 시스템을 보호하기 위해 나누어서 작동하는 것이다. *️⃣커널(Kernel)이란? 컴퓨터는 하드웨어와 소프트웨어로 나뉘고, 소프트에어는 다시 응용 프로그램과 운영체제로 나뉜다. 운영체제는 또 시스템 프로그램과 커널로 나뉘게 된다. 프로그램이 실행되기 위해서는 컴퓨터 메모리에 해당 프로그램이 올라가 있어야 한다. 하지만 메모리는 한정적이기 때문에 안 쓰는 프로그램까지도 메모리에 올라..

개요 리액트에서 상태관리를 할 때 리덕스를 쓰는 이유!! 1. 전역으로 상태 관리가 가능하다. 그냥 간단하게 하나의 파일 안에서 상태를 바꾸고 싶으면 간단하게 useState를 사용하면 되지만, 파일은 하나가 아니기에... 모든 파일을 넘나들 수 있도록 관리하는 게 필요하다. 2. 따라서 리덕스를 쓰면! 무한 props 지옥에서 탈출할 수 있다... 리덕스를 쓰면 아주아주 깔삼하게 상태 관리를 할 수 있다. 처음에는 리덕스가 너무 어려웠는데 이젠 아주 편하게 사용 중이다. 리덕스를 어떻게 사용해야 할지 잘 모르겠다면 밑에 있는 내용대로만 하면 아주 편할 거다. 사용법 1. 우선 리덕스를 설치해준다. npm install @reduxjs/toolkit react-redux 2. 루트(App.js와 동일한 ..

개요 프로젝트에서 소셜 로그인을 쓰기로 해서 카카오 로그인을 구현해야 했다. 카카오 developers 공식 문서와 많은 블로그들(진짜 거짓말 안 하고 모든 블로그를 다 본 것 같다...) 을 봤는데도 어려운 점이 있었다... 프로젝트 시작할 때 포기했다가 프로젝트가 중후반쯤 온 지금에서야 드디어 완성을 했다...ㅠㅠ 결론은... 프론트에서 카카오 로그인을 구현하는 건 진짜 간단하다..!! 백엔드 개발자분과 충분히 회의를 안 하고 바로 시작해서 좀 엉켰던 것 같다. 프론트에서 인가코드를 백엔드로 넘겨주고, 토큰을 받는 형식으로 진행해야 편한 것 같당☺️☺️ [카카오 소셜 로그인 과정] 1. 로그인 버튼을 누른다. (클릭하면 kakaoAuthUrl로 가게 설정) 2. KakaoAuthUrl에서 로그인 처리..

개요 프론트엔드가 백엔드와 협업할 때, 자바스크립트 fetch함수를 쓰거나 axios를 사용하여 api를 호출할 수 있다. 설명 기본 구조는 다음과 같다. 1. api 주소를 써준다. 2. HTTP METHOD를 써준다. 이때, GET은 method를 따로 써주지 않아도 된다. 3. header, body가 있으면 써준다. 4. .then()으로 다음 로직을 써준다. fetch("api주소", { method: "POST", // HTTP Method(post, put, delete, get) headers: { "Content-Type": "application/json" }, body: JSON.stringify({name : cowboysj}) }) .then((response) => respons..

개요 프로젝트에서 클릭한 위치에 이미지를 배치하고, 새로고침을 해도 이미지가 고정되어야 하는 페이지가 있었다. 그런데 문제는 웹앱이다보니 기기가 달라지면 그 위치가 달라지는 문제가 있었다. 해결법 1. 현재 창의 X,Y 좌표를 구한다. getBoundingClientRect().x getBoundingClientRect().y 2. 브라우저에서 사용자에게 웹페이지가 보여지는 영역의 x,y 좌표를 구한다. clientX clientY 3. 2번에서 1번을 뺀 값을 이미지가 들어갈 컴포넌트의 높이, 너비로 나누어주고, 100을 곱한다. 매번 컴포넌트 높이, 너비가 달라지기 때문에 비율을 구한 것이다. ✳️컴포넌트의 높이, 너비 구하는 법 컴포넌트 속성에 ref = {componentRef}를 해주고, 아래 ..

개요 웹 프로젝트를 하고 있는데 아직 서버 API가 없어서 mock 서버를 파기로 했다..! json server는 그냥 npm으로 설치하면 돼서 프론트엔드가 테스트용으로 서버를 팔 때 간단하고 쉽게 만들 수가 있다. Json Server 설치 & 실행 1. json server 설치 npm install -g json-server 2. 폴더 생성 mkdir mockserver //mockserver 폴더 생성 cd mockserver //mockserver로 가기 mkdir db //mockserver 안에 db 폴더 생성 폴더를 생성해주고 db 폴더 안에 db.json 파일을 하나 추가해주면 된다. 3. Mock Json db.json안에 원하는 데이터를 넣어준다. { "posts": [ { "id"..