인트로 이메일을 클릭했을 때 복사하는 기능을 만들어봤습니다. Clipboard API를 사용해서 아주 간단하게 해결할 수 있었습니다. Clipboard: writeText() 인자로 넣어준 텍스트 문자열을 시스템 클립보드(복사한 데이터를 저장해줌)에 저장합니다. read()나 readText()를 사용해서 저장한 문자열을 다시 읽을 수 있습니다. 전체코드 //컴포넌트 함수 내부 const copyEmail = async (email) => { await navigator.clipboard.writeText(email); alert("이메일 복사에 성공했습니다"); }; //return { copyEmail("당신의 이메일"); }} > email : 당신의 이메일 결과 강제로 내 이메일 심기 완료

오늘 배운 것useLocation 훅 정리MVC패턴react PortaluseEffect cleanup기억할 것포탈이란? 렌더링된 HTML 내용을 다른 곳으로 옮기는 모달이나 백드롭의 경우 리액트 포털을 이용하는 것이 좋다.clean-up 작동 순서 ( re-render -> 이전 effect clean-up -> effect )내일 공부할 것리덕스까먹고 4월 10일 TIL 임시저장만하고 포스팅을 안했다는..

인트로각자 포트폴리오 사이트를 만드는 스터디를 진행하면서 개인적으로 사이트를 만들어보고 있는데 nav에서 살짝 멈칫했습니다.nav 목록을 클릭했을 때 현재 페이지에 해당하는 목록만 스타일을 다르게 적용하고 싶은데 이걸 어떻게 쉽게 해결할 수 있을까... 고민했습니다.  고민을 하던 중 페이지마다 /path에 차이가 있으니까 이걸 이용하면 쉽지 않을까라는 생각이 들게 되었고 useLocation이라는 훅을 발견했습니다.useLocation 사용법npm install react-router-domimport { useLocation } from "react-router-dom";//컴포넌트const location = useLocation();useLocation이란?이 훅은 현재 경로에 대한 Locatio..

intro오늘은 원형 프로그래스 바 라이브러리를 가지고 왔습니다.생각보다 마음에 드는 원형 프로그래스 바 찾기가 너무 힘들었어요.. 1시간~2시간정도 찾아볼 정도로... 제가 사용한 라이브러리는 react-circular-progress-bar입니다.깃헙: https://github.com/tomickigrzegorz/react-circular-progress-bar예시: https://tomickigrzegorz.github.io/react-circular-progress-bar/?path=/story/circular-progress-bar--minimalinstallnpm install @tomickigrzegorz/react-circular-progress-barcodeimport { Circula..

Summary삽질은 아니고 강의 따라 하기 전에 제가 미리 만들어보는 데 제 코드에서 warning을 발견했습니다.동작에 큰 문제는 없었고 강의 내용대로 하나만 추가하니 바로 고쳐졌지만 혹시나 나중에 같은 warning 메서지가 떴을 때 당황하지 않기 위해 기록해보려고 합니다.Problemwarning이 발생하는 경우는 위와 같습니다.저 Cancel 버튼을 클릭했을 때 warning 문구가 뜹니다. 저 버튼은 Form 태그 안에 속해있고요. 생략... Cancel Add Expense Solved해결방법은 아주 간단합니다. button type으로 'button'을 추가하면 더 이상 ..

오늘 배운 것styled-componentsSet, Map -> 딥다이브기억할 것Set이나 Map 객체를 반환해주는 메서드의 경우 연결해서 사용할 수 있다.내일 공부할 것유데미 강의styled-components 강의에서 다뤄주어서 살짝 맛봤는데 저는 module 기능이 더 취향이네요.주말에 할게 많아진다.. css 공부도 더 해야하는데..

인트로공부하기 싫을 때마다 돌아오는 프로그래머스 풀기 시간.. 문제레벨1 : https://school.programmers.co.kr/learn/courses/30/lessons/176963나의 풀이function solution(names, yearning, photos) { const score = new Map(); const answer = []; names.forEach((name,idx) => { score.set(name, yearning[idx]) }) photos.forEach((photo) => { let sum = 0; photo.forEach(people => {sum += score.get(people) ? score.get(people) : 0}) answer.push(..

오늘 배운 것express 기초 사용법react 함수형 컴포넌트 렌더링 과정useMemo 기억할 것함수형 컴포넌트가 호출되는 경우함수형 컴포넌트 렌더링 순서 내일 공부할 것리액트 유데미 강의과제가 생각보다 오래 걸려서 강의를 못들었네요.. 슬프다..