🌙 이 블로그는 다크모드에서 코드 블록의 가독성이 더욱 향상됩니다. 화면 우측 하단의 달 모양 아이콘을 클릭하여 다크모드로 전환하시면 보다 쾌적한 읽기 환경을 제공받으실 수 있습니다. Debounce 적용하기상황프로젝트 검색 기능을 구현할 때, 한 글자씩 입력할 때마다 API 요청하도록 구현했었다.분석위와 같은 방법으로 기능을 구현하면 필요 이상의 요청이 발생할 것이라고 판단했다.검색 input 값을 콘솔창에 출력해봤더니 키워드 완성 전 필요 없는 값들이 입력이 발생할 때 마다 출력되고 있었다. 이렇게 순간적으로 많은 양의 데이터를 서버에 요청하면 서버에 부하가 발생하여 응답 속도가 느려질 것이다. 이 문제에 대한 해결책을 찾기 위해 구글링해본 결과, Debounce라는 기술을 활용할 수 있다고..
🌙 이 블로그는 다크모드에서 코드 블록의 가독성이 더욱 향상됩니다. 화면 우측 하단의 달 모양 아이콘을 클릭하여 다크모드로 전환하시면 보다 쾌적한 읽기 환경을 제공받으실 수 있습니다. 지난 편에 이어서 LCP 최적화를 진행해 보도록 하겠습니다. LCP 개선하기 - Reduce unused JavaScript번들사이즈 줄이기 LightHouse - Reduce unused JavaScript 조언은 웹페이지나 앱이 로드될 때 필요하지 않은 JavaScript 코드가 있을 경우 해당 코드를 최적화하여 성능을 향상하라는 의미입니다. 웹 페이지나 앱에서 사용되지 않은 JavaScript 코드가 많을 수록 페이지 로딩 시간이 늘어나고 사용자 경험이 저하될 수 있습니다. 따라서 사용되지 않은 JavaSc..
🌙 이 블로그는 다크모드에서 코드 블록의 가독성이 더욱 향상됩니다. 화면 우측 하단의 달 모양 아이콘을 클릭하여 다크모드로 전환하시면 보다 쾌적한 읽기 환경을 제공받으실 수 있습니다. 현재 상황모든 페이지 화면 및 기능 구현 -> mock 데이터로 구현다음 과제api 연동 -> React-query 사용해 볼 예정테스트 배포 마이페이지 성능 측정하기 초기 측정 결과 : 48점초기 점수 : 48점측정 도구 : LighHouse성능을 많이 신경 못써서 점수가 낮게 나올거라고 생각하긴 했지만 48점은 충격적이네요. 빨간색이라 더 충격적.. 간단하게 최적화 할 수 있는 방법으로 점수를 조금 올려보겠습니다 React.Memo, useCallbackReact.Memo : React에서 제공하는 고차 컴포넌..
1. Node 설치 확인하기 node --version 2. 프로젝트 생성하기 mkdir back yarn init-y 이 작업을 하고 나면 디렉터리에 pakage.json 파일이 생성됩니다. 3. Koa 웹 프레임워크 설치하기 yarn add koa 설치한 뒤 다시 한번 pakage.json을 열어 보면, koa가 dependencies에 추가되어 있을 것입니다. 4. ESLint와 Prettier 설정 두 기능을 VSC에서 사용하려면 VS 마켓플레이스에서 Prettier-Code formatter와 ESLint 확장 프로그램을 설치해둔 상태여야 합니다. yarn add --dev eslint yarn run eslint --init Prettier 설정하기 디렉터리에 다음 파일을 만드세요. .pret..
현재 상황 : Redux 사용해서 user reducer 생성해서 전역에서 사용 중 => 더미 데이터로 테스트 헤더에서 로그인 여부에 따라 UI 다르게 보여주는 기능 구현 다음 과제 : user api 연동 어려웠던 점 로그인 유지하기 (리렌더링의 잘못된 이해, Redux) 목표 : 로그인 성공하면 메인페이지로 이동 후 헤더 UI 바꾸기 상황 : /login에서 메인페이지로 이동했음에도 불구하고 메인페이지에 있는 헤더가 로그인 상태를 반영 안 함 분석 메인페이지가 리렌더링이 되고 있는지 확인 먼저 로그인이 성공하면 localStorage에 user를 저장해 둔다. 메인페이지가 리렌더링 되면 다시 마운트 될 것이므로 useEffect()를 적어두어 마운트시 해당 코드가 실행되는지 확인한다. => 실행이 안..
💡 로그인 & 회원가입 페이지 현재 상황 : 로그인&회원가입 페이지 마크업, CSS 스타일링 완료 임시 서버 구축해서 postman으로 api 일부 테스트 완료 다음 과제 : 회원인증 api 만들기 (feat. JWT) 로그인 여부에 따라 헤더 UI 동적 표시 (로그인, 회원가입 -> 마이페이지, 로그아웃) 진행 과정 서버 개발자님.. 회원인증 해주기로 했잖아요.. 돌아오세요... 서버 구축하기 (feat. Koa, JWT, 도망간 서버개발자님) 상황 서버 개발자님의 개인적인 사유로 인해 서버 개발 진행이 뒤로 밀려난 상황 (약 3개월?..) 간단한 api만 만들면 되므로 express기반 라이브러리 Koa로 임시 서버 구축하기로 결정 express보다 Koa가 커뮤니티와 생태계가 부족하지만 기능들이 단..
💡 레피시 상세 페이지현재 상황 : 페이지 마크업, CSS 스타일링 완료레시피별 단계 화면에 출력하기 완료(mock 데이터)다음 과제 : 레시피 저장하기 기능 추가 어려웠던 점컴포넌트 재사용목표 : RecipeCard 컴포넌트 재사용하기상황 : RecipeCard 컴포넌트는 클릭 이벤트와 CSS가 각 페이지 마다 다름 선택 페이지 : hover시 그림자가 생김, 클릭시 상세페이지로 이동상세 페이지 : hover시 그림자가 없음, 클릭시 반응 처리 없음분석:이벤트는 props를 이용해서 조건문으로 처리하면될 것 같은데 CSS에 조건을 걸어서 적용하는 방법을 모르겠다.해결법조건부 스타일링을 사용한다. isDetail 이라는 스타일 props를 내려받고 해당 값에 따라 CSS를 다르게 적용시킨다. 발생한 ..
3. Process (1) ✨ 프로세스의 개념 프로세스는 실행 중인 프로그램을 의미한다. (Process is a program in execution) 프로그램이 정확하게 언제 시작하고 종료하는지를 나타내기 위해 사용 프로세스의 문맥(context) 현재 프로세스의 상태를 나타내는 모든 요소 CPU 수행 상태를 나타내는 하드웨어 문맥 Program Counter CPU안에서 어떤 프로세스인지 구분해 줌 프로세스 code의 진행 위치를 알려줌 각종 register 프로세스의 주소공간 code, data, stack 프로세스 관련 커널 자료구조 PCB (Process Control Block) Kernel stack 프로세스의 문맥이 필요한 이유 타임 쉐어링 때문에 다시 작업을 이어서 하려고 할 때 문맥을..
System Structure & Program Execution (2) ✨ 동기식 입출력과 비동기식 입출력 동기식 입출력 (Synchronous I/O) i/o 요청 후 입출력 작업이 완료된 후에야 제어가 사용자 프로그램에 넘어가며, 다음 작업을 수행할 수 있음 처리하는데 데이터가 꼭 필요할 때 사용 read 구현 방법1 i/o 끝날 때까지 CPU일 안 시키고 대기시킴 => 낭비 매 시점 하나의 I/O만 일어날 수 있음 구현 방법 2 i/o 가 완료될 때까지 해당 프로그램에게서 CPU를 뺴앗음 i/o 처리를 기다리는 줄에 그 프로그램을 줄 세움 비동기식 입출력 (Asynchronous I/O) i/o가 시작된 후 입출력 작업이 끝나기를 기다리지 않고 제어가 사용자 프로그램에 즉시 넘어가 다음 작업을 수..
Chapter 2. System Structure & Program Execution(1) 🎈 컴퓨터 시스템 구조 Computer CPU + Memory를 (좁은 의미의) 컴퓨터라고 한다. I/O device 나머지는 IO 디바이스로 이루어져 있다. Input은 입력, Output은 출력이다. CPU는 매 클럭 사이클 마다 인터럽션 interruption을 수행해 input을 읽어오고, output을 수행한다. CPU 매 클럭 사이클마다 메모리에서 기계어를 읽어다가 실행한다 CPU는 메모리하고만 소통한다 Timer time sharing을 구현하기 위한 하드웨어 interrupt 발생 시간 설정한다 프로세스가 혼자서 계속 CPU 점유하는 것을 막는다 Memory main memory : CPU의 작업공간..
