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

어쩌다 보니 한 달 동안 투 두 리스트를 무려 세 번이나 만들고 있다 하핫... 물론! 몇 번이나 다시 만들어도 재밌게 만들 수 있지만... 아이디어 고갈이 가장 큰 난관이다. 다행히 마지막이라는 생각으로 쥐어짜다 보니 옥스포트 노트가 생각났고, 바로 만들었다. 예상하던 완성본에 비해서 많이 부족하지만, 아무튼 완성했으니 만족! 흐 이젠 JS 챌린지도 끝이다 리액트로!, 프로젝트로! 다시 돌아갈 시간! https://yongjin-todolist.netlify.app/ 최종 미션 todoList yongjin-todolist.netlify.app 모바일 말고 PC로 봐야 함! 미디어쿼어리이???? 반응혀엉?.? 그런 거 없습니다요...

12일 차 진도 11일 차와 마찬가지로 프로젝트 결과만 기록할 예정이다. [12일 차 미션] 더보기 12일 차 미션 12일 차 결과

11일 차 진도 프로젝트라 따로 정리할 게 없다. 코드만 올릴 예정이다. 1. 검색바 2. 명언 API 3. 북마크바 [11일 차 미션] 더보기 11일 차 미션 11일 차 제출

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

10일 차 진도 position 웹 문서상에 요소를 배치하는 방법을 지정 position 속성 값 : static, relative, absolute, fixed, sticky 요소의 최종 위치 결정 : top, right, bottom, left - position 값이 static일 때의 위치를 기준으로 웹 요소들의 위치를 변경하고 싶을 때 relative 설정 - position 값이 static이 아닌 속성을 가진 부모를 기준으로 움직이게 하고 싶을 때 absolute - sticky, fixed는 스크롤할 때 요소를 고정시킬 수 있는 기능을 제공한다는 공통점을 가짐 sticky 속성을 적용한 div는 스크롤을 내리다가 부모 요소의 마지막까지 도달하면 해당 요소도 스크롤에 따라 움직이지만, fix..