Frontend 개발자 - hyo.loui

🎯목적 : 웹페이지가 브라우저에 랜더링되는 과정을 기록합니다. 클라이언트에서 불러오고 싶은 파일을 서버에 요청한다 주소창에 직접 입력하거나, 클릭을 통해 해당 웹 페이지에 접근한다 클라이언트에서 요청한 URI를 DNS를 통해 IP 주소로 변환하고, 해당 IP를 가진 서버에 GET 요청을 보내게 된다 서버에서 응답으로 받은 HTML 데이터를 파싱한다 (바이트 > 문자 > 토큰 > 노드 > DOM) 서버에 존재하던 HTML 파일이 브라우저의 요청에 의해 응답된다 이때 서버는 브라우저가 요청한 HTML 파일을 읽어 들여 메모리에 저장한 다음 메모리에 저장된 바이트(2진수)를 인터넷을 경유하여 응답한다 브라우저는 서버가 응답한 HTML 문서를 바이트(2진수) 형태로 응답받는다 따라서 응답된 바이트 형태의 HTM..

❤️‍🔥TIL : Today I Learned 🤢 문제 내용 : 문제 참 많았다... 정리해 보자면 나는 게시글을 클릭 했을 때, router 가 변하며 해당 라우터에서 상세 내용(제목,내용,시간 등..)을 보여주는 페이지의 crud 기능 구현을 맡게 되었다. 문제는 이렇게 흘러갔다 해당 컴포넌트 렌더링 될 때 useLocation 사용하여 axios.get 요청 문제점 - 다른 액션 발생할 때(delete,update) 추후 데이터 수정의 어려움을 깨닫게 됨 thunk를 사용하여 detailSlice.js 생성하여 부모컴포넌트에서 onClick이 이루어 질 때 dispatch(__getDetail) 문제점 - 상세페이지에서 새로고침 하면 state 값이 리셋되어 결국 새로고침을 하면 상세페이지 내용 없..

❤️‍🔥TIL : Today I Learned JSON-server 아주 간단한 DB와 API 서버를 생성해주는 패키지 이다. 우리가 json-server를 사용하는 이유는 backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함이다. json-server 를 통해서 FE에서는 BE가 하고있는 작업을 기다리지 않고, FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업이 가능하다. json-server 설치하기 CRA로 프로젝트를 새로 생성하고, yarn 또는 npm을 이용해서 설치 합니다. 예시에서는 기존에 사용하던 yarn을 사용해서 설치하겠습니다. npm install json-server..

❤️‍🔥TIL : Today I Learned axios (서버통신 라이브러리) 공식문서에 따르면 axios 란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트 라고 소개하고 있다. 즉 http를 이용해서 서버와 통신하기 위해 사용하는 패키지다. 설치 명령어와, 실행 명령어 CRA를 통해서 새로운 프로젝트를 생성하고, 터미널에 아래의 명령어를 입력해서 axios를 설치. npm install axios npm의 경우 yarn add axios yarn의 경우 우리가 사용하는 json-server API 명세서 확인하기 우리가 Axios를 사용해서 GET 요청 코드를 작성하기에 앞서, 어떤 방식으로 요청 해야할지는 우리가 사용하는 json-server의 방식을 알아보아야 한다. 다시..