본문 바로가기

전체 글212

148. [CSS] CSS Position TIL23.04.11 static position 속성의 기본값 요소를 문서 흐름에 따라 배치 relative 요소를 원래 위치를 기준으로 상대적으로 배치 top, right, botto, left 속성으로 위치 조정 가능 absolute 절대 위치 지정 요소 요소를 가장 가까운 부모 요소를 기준으로 배치 문서의 흐름에 영향을 받지 않음 부모 요소 중 position 속성이 static이 아닌 요소를 찾아 기준으로 삼는데, 만약 부모 요소가 없다면 body 요소를 기준으로 삼는다. top, right, bottom, left 속성으로 위치 조정 가능 fixed 요소를 뷰포트 기중으로 고정하여 배치 스크롤을 내려도 요소가 화면에 고정되어 있음 top, right, bottom, left 속성으로 위치 조정 가능 sticky 요.. 2023. 4. 11.
147. [CS] RESTfull API TIL23.04.06 RESTfull API RESTful API는 HTTP 프로토콜을 기반으로 구현된 API 디자인 패턴 중 하나로, 클라이언트와 서버 간의 상호작용을 위한 아키텍처 스타일이다. 이를 통해 클라이언트가 서버의 자원에 접근하고 CRUD(Create, Read, Update, Delete) 기능을 수행할 수 있다. RESTful API는 자원의 식별, 표현, 상태 전이를 위한 규칙과 제약을 따르며, 확장성과 유지보수 및 운용이 편리하다. 👉 RESTful API HTTP 주요 메서드 GET - 서버에 지정한 리소스의 정보를 요청하는 메서드 POST - 지정한 리소스에 새로운 데이터를 추가하는 메서드 PUT - 지정한 리소스를 수정하는 메서드(클라이언트가 서버에 수정 요청) DELETE - 지정한 리소스를 삭제하.. 2023. 4. 6.
146. [JavaScript] this의 4가지 동작 방식 TIL23.04.04 this의 4가지 동작 방식 JS에서 this는 함수를 호출하는 방식에 따라 다르게 동작한다. 일반적으로, this는 현재 실행 컨텍스트(Execution Context)에서 바인딩되는 값이다. 이때, 함수를 어떻게 호출하는지에 따라 this의 값이 결정된다. 1. 전역 컨텍스트(Global Context)에서 this (기본 바인딩) 전역 컨텍스트에서 this는 전역 객체를 참조한다. 브라우저 환경에서 window 객체를, Node.js 환경에서는 global 객체를 의미한다. 2. 객체 메서드에서의 this (암시적 바인딩) 객체 메서드에서의 this는 해당 메서드를 호출한 객체를 참조한다. 예를 들어, obj.method() 와 같이 객체의 메서드를 호출하면, this는 obj를 참조한다. 3. 함.. 2023. 4. 5.
145. [React-Query] Query data cannot be undefined 에러 TIL.23.03.31 Query data cannot be undefined 에러 발생 이유 useQuery에 등록한 함수가 Promise를 반환하지 않아서 발생 👉 호출만 하고 리턴을 안 했을 수 있음 아래 코드처럼 const { data, status} = useQuery(['videos', keyword], () => { youtube.search(keyword) }); 해결방법 Promise를 반환해주면됨 화살표함수로 바로 리턴하거나, 중괄호 내부에서 return을 적어주면 됨 1. 화살표함수로 바로리턴 const { data, status} = useQuery(['videos', keyword], () => youtube.search(keyword) ); 2. 중괄호 내부에서 return const { data, s.. 2023. 3. 31.
144. [React] react-query useQuery, useMutation 사용처 TIL 23.03.28 useQuery useQuery는 React Query 라이브러리 훅으로, 비동기 API 호출 결과를 캐시 하고, 캐시 된 결과를 사용하여 컴포넌트를 렌더링함. 이를 통해 반복된 요청이 반복되더라도 서버에서 계속 가져오는 것이 아니라 캐시 된 데이터를 사용해서 프로젝트 성능을 향상시킬 수 있음. 서버에서 데이터를 가져오는 GET 요청에 대한 데이터를 가져옴. useMutation useMutation은 API에서 데이터를 가져오는 것뿐만 아니라, API에 새로운 데이터를 추가하거나 업데이트하는 등의 작업을 수행할 때 사용됨 이 훅은 API 요청에 대한 상태를 관리함. 성공, 실패 및 로딩 상태에 대한 콜백을 제공하고, 결과 데이터를 캐시 하고, 컴포넌트가 다시 렌더링 되면 결과를 자동으로 업데이트함. 서.. 2023. 3. 28.
143. [React] cashe(캐시)란? TIL 23.03.15 cashe react를 공부하다가 cashe라는 용어가 나왔음. react에서도 내가 기존에 알고 있는 저장소 같은 개념인지 궁금해서 찾아봤음. 찾아보니 react에서도 비슷한 개념이라고 함. (컴포넌트의 이전 렌더링 결과를 저장) 캐시는 react 앱에서 컴포넌트의 렌더링 속도를 높이기 위한 기능. react앱에는 여러 개 컴포넌트가 있고 props와 state도 다양하게 가지고 있음. props와 state가 변경될 때마다 컴포넌트가 다시 렌더링 되어 새로운 결과를 만들어 내는데, 이때마다 불필요한 작업이 수행될 수 있음 캐시는 컴포넌트가 렌더링 될 때, 해당 컴포넌트의 가상 DOM을 생성하고, 이전에 렌더링 된 결과와 비교함 이전에 렌더링된 결과와 같은 경우, React는 캐시 된 결과를 사용하고,.. 2023. 3. 15.
142. [React] useNavigate로 state 넘기기 TIL23.03.14 useNavigate로 state 넘기기 해당 item을 누르면 itemDetail 페이지로 넘어가는 방법을 찾던 중 전에 사용했던 useNavigate 사용해봄 useNavigate는 첫 번째 인자로 내가 이동할 주소를 받고 두 번째 인자로 {replace, state}를 받음. 사용하기 1. 라이브러리 설치 yarn add react-router-dom 2. 해당 item을 클릭했을 때 useNavigate로 화면이동하면서 state도 넘겨줌 //itemCard.jsx import React from 'react'; import { useNavigate } from 'react-router-dom'; function itemcard({ items }) { const navigate = useNavig.. 2023. 3. 14.
141. [CSS] opacity 와 filter: brightness() 차이 TIL 23.03.13 opcity opacity는 요소의 투명도를 지정하는 속성. 속성은 값이 0에서 1 사이의 숫자를 가질 수 있으며, 0은 완전히 투명하고 1은 완전히 불투명함을 나타냄. 이 속성은 요소의 텍스트 및 배경색생의 투명도를 변경할 수 있음 filter: brightness() filter brightness는 요소의 밝기를 조정하는 속성. 속성은 값이 0에서 100% 사이의 숫자를 가질 수 있으며, 0은 완전히 어둡고 100은 원래 이미지의 밝기를 유지함. 이 속성은 내부의 콘텐츠의 밝기만 조정하며, 콘텐츠의 색상이나 투명도를 변경하지 않음. opacity, filter: brightness() 차이 opcity는 요소의 불투명도를 조정하고, brightness는 밝기를 조정함 요소 자체를 투명하게 만들고 싶.. 2023. 3. 13.
728x90