Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned this this가 동작하는 원리와 용법을 설명하고, 어떤 부분에서 가장 큰 차이가 생기는지 비교합니다. this란? - 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 결정된다. this 바인딩 - 바인딩이란 식별자와 값을 연결하는 과정을 의미한다. 예를 들어, 변수 선언은 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩 하는 것이다. this 바인딩은 this(키워드로 분류되지만 식별자 역할을 한다)와 this가 가리킬 객체를 바인딩 하는 것이다. ..

❤️‍🔥TIL : Today I Learned AJAX Ajax !== "아작스" Ajax == "에이잭스" JSON !== "제이썬" JSON == "제이슨" Ajax 란? 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. + 특정 기술이 아니고, 새로운 접근법을 설명하는 용어이다. 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작 + 이러한 비동기 방식으로 웹의 페러다임이 획기적으로 변했다고 할 수 있다. 기존 전통적인 방식은 html태그로 시작하여 html태그로 끝나는 완전한 html을 response 받아 처음부터 다시 렌더링하는 방식으로 동작했..

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

❤️‍🔥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의 방식을 알아보아야 한다. 다시..