프로그래밍 언어

https://www.udemy.com/course/react-query-react/ udemy의 'React Query / TanStack Query : React로 서버 상태 관리하기' 강의를 보고 정리했습니다. 리액트 쿼리란? TanStack Query는 리액트 앱의 서버 상태를 관리하는 라이브러리이다. 클라이언트 상태란 웹 브라우저 세션과 관련된 모든 정보를 의미한다. 이는 서버와 관련이 없다. 서버 상태는 클라이언트에 표시하는데 필요한 데이터를 말하며, db에 저장되는 블로그 게시물 데이터 등이 이에 해당한다. 게시물을 표시하기 위해 클라이언트에 데이터가 있어야 하지만, 데이터는 여러 클라이언트에 표시될 수 있도록 서버에 저장된다. 리액트 쿼리는 클라이언트에서 서버 데이터 캐시를 관리한다. 리액..

이번 크리스마스🎄는 flex 개념과 함께합니다😎 프로젝트 전에 한 번 정리를 하면 좋을 것 같아서 예시 사진까지 다 만들어서 정리해 봤습니다.    flex속성은 기본적으로 안에 있는 모든 요소를 행(row) 방향으로 나열하고, 행의 왼쪽부터 요소를 배치한다.  flex 규칙 주축과 교차축레이아웃은 기본적으로 행(row) 형태이기에 자식 요소들이 가로로 정렬됩니다. 이것을 주축이라고 합니다.  display 속성을 flex로 지정하면 주축은 자동으로 수평축이 됩니다. 교차축은 주축과 수직을 이루는 축으로, 즉 주축이 행 방향 정렬이라면 교차축은 열 방향 정렬을 의미합니다.   flex container 속성 flex-directiondisplay: flex를 적용하면 flex-direction 속성의..

이번 프로젝트에서 사용할 URL 복사 기능을 구현해 볼 것입니다. 우선 '공유' 버튼을 눌렀을 때 띄울 모달창을 먼저 만들었습니다. '주소' 부분에 해당 페이지의 URL이 출력되게 하고, '복사'버튼을 눌렀을 때 URL이 복사되게 해야 합니다. 이를 위해서는 우선 해당페이지의 URL을 먼저 알아와야 합니다. 이를 위해 useLocation을 사용합니다. useLocation()은 현재 경로와 관련된 정보를 담고 있는 객체를 반합니다. 이 친구가 담고 있는 내용 중 pathname은 현재 url의 경로 부분을 나타내는 문자열입니다. 현재 로컬 주소를 baseUrl 변수로 저장하고 location 훅에서 가져온 경로를 pathUrl 변수로 저장합니다. 이후 출력해 보면 현재 페이지의 주소가 잘 나오는 것을 ..

리액트 API 호출 API(Application Programming Interface) 서로 다른 프로그램이 데이터를 주고받을 수 있도록 도와주는 인터페이스(매개체)이며, 일종의 규약이다. [프로그램 A 프로그램 B] 데이터를 주고받음 서로 다른 프로그램끼리 데이터를 주고받으려면, 당연히 서로 어떻게 통신하고, 어떤 데이터를 주고받을 것인지 미리 합의된 규약이 존재할 것이다. 프로그램 간 데이터를 주고받는 과정에서도 미리 합의된 규약이 존재해야 한다 그것이 API 두 프로그램이 서로 데이터를 주고받기 위해 소통할 때, 어떤 방식으로 서로 주고받을지 합의해서 매개체 역할을 해주는 일종의 규약 REST API란 웹 서비스를 개발할 때 가장 범용적으로 사용되는 API이다. HTTP 프로토콜을 기반으로 동작한..

React Router 라이브러리 설치 https://reactrouter.com/en/main Home v6.20.1 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com 리액트 라우터 공식 사이트이다 npm install react-router-dom 위의 명령어를 통해 리액트 라우터를 설치한다 package.json을 확인해 보면 설치가 잘 됐음을 확인..

오랜만에 바닐라 JS만 사용해서 무언가를 만드니까 어색함과 불편함을 느꼈어요. 하지만 덕분에 제 부족한 점을 찾을 수 있었습니다. 일단 저는 html 구조를 못 짜고요.. class명도 못 지으며, 코드 분리를 못 시킵니다... 마지막으로 코드를 굉장히 더럽게 씁니다... 예... 뭐, 개선해 나가면 되는 거죠! 교양과제 때문에 만들게 됐지만 제 부족한 점을 느낄 수 있어서 좋았습니다 아 그리고 색 조합이 구리구리 너구리니까 바꾸라는 의견을 들었는데, 전 구린게 개성이라고 생각합니다. 개성 왕만두 먹고 싶다 코드가 많이 더러워서, 올릴까 말까 고민을 했지만 그냥 올립니다. 더 성장했을 때 보면 감회가 새롭지 않겠습니까 하하 [HTML & JavaScript] 더보기 TO DO LIST 할 일 입력 입력 ..