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 받아 처음부터 다시 렌더링하는 방식으로 동작했..

🎯목적 :Restful API에 대해 기록하며, GET,POST 외에 알고있는 메소드와 그 기준을 설명하고Restful API 가 아닌 것들은 어떤게 있는지 기록합니다. Restful API란? - Restful API는 표준 HTTP 메서드 집합을 사용하여 리소스에 대한 작업을 수행하는 웹 서비스를 설계하기 위한 아키텍처 스타일입니다. - Restful API에서 각 리소스는 고유한 URI로 식별됩니다. 클라이언트(예: 웹 브라우저 또는 모바일 앱)는 표준 HTTP 메서드를 사용하여 이러한 리소스와 상호 작용할 수 있습니다. + 예를 들어, 클라이언트는 요청 본문에 사용자 데이터를 포함하는 JSON 객체와 함께 URI: https://example.com/users로 요청을 전송하여 서버에 POST 요..

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

친구가 차린 음식점에 드디어 테이블도 배치하고, 인테리어도 했다 오~ 밖에서 보니 괜찮아 보인다. 하지만 껍데기 뿐이다.... 주문을 받을 프론트 직원과, 주방 직원, 심지어 메뉴판 조차 없다 여기서 설명! 우리는 음식점 마다 메뉴판 = JSON(문법)이 필요하다 중국집에 가서 메뉴에 없는 초밥을 주문할 수 없는 것 처럼! JSON 형식에 맞는 키(음식이름) 을 주문해야 밸류(실제 음식)이 나온다 자, 여기서 더 나아가 우리가 주문 할 때 마다 '주문 하면 가게 밖으로 나갔다 와야한다면' 어떨까? (새로고침) 그래서 AJAX 가 생겼다!!! (새로고침 안해도 주문한 것들이 바뀜) 여기서 동기,비동기 처리는 추후에 포스팅하여 설명 해야겠다! 서버-클라이언트 통신 이해하기 1. 서버→클라이언트: "JSON"..