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

HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요 ❤️‍🔥TIL : Today I Learned HTTP & HTTP messeage HTTP에 대해 설명하고, HTTP 메세지 구조에 대해 설명합니다. HTTP란? - HTTP는 HyperText Transfer Protocol의 약자로 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다. - 브라우저인 클라이언트에 의해 전송되는 메시지를 요청(requests)이라고 부르며, 그에 대해 서버에서 응답으로 전송되는 메시지를 응답(responses)이라고 부릅니다. 특징: 비연결성, 무상태성 비연결성: 리소스 응답이 정상적으로 받아지면 연결을 끊음 → 리소스 요청 때마다 연결해야하는 오버헤드 비용 ..

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

🎯목적 : Youtube API 활용 (비동기)서버통신 : React-Query 적용 response 로 UI구성 🤢 트러블 슈팅 : filter 메서드 문제 해결 1. react query Youtube API 활용에 있어 서버통신의 생산성을 위해 react-query 적용을 기획했다. api.js에서 데이터를 가져오는 함수를 관리하는 파일을 따로 분리했고 중복되는 url 과 api key는 따로 변수선언을 해주었다. 필요한 component에서 react-query를 연결해 위 함수를 사용하도록 import 했다. 별칭을 붙여 데이터의 목적을 정확하게 명시했다. 2. UI 생성 위에서 react-query로 가져온 AllPlayList 라는 배열형 데이터는 map 메서드로 하나씩 돌며, 이미지태그의 ..