TO

const [data, setData] = useState(); if (modalName === 'recruit') { setData([ { id: 1, title: '다운 받기', link: 'https://drive.google.com/drive/folders/17KHI_vdVBZch6hGUGlbtzlFg9AOYFlRy?usp=drive_link', subtitle: 'Going to Google Drive', }, { id: 2, title: 'Notion 보러 가..

https://portpolio-brown.vercel.app/ Vite + React + TS portpolio-brown.vercel.app기존 포트폴리오다.학원 수료 전까지 피드백 받고 싶기도 했고추천서 써주신다하셔서 부랴부랴 만들어서 제출했더니차라리 처음부터 다시 만드는게 어떠냐는 피드백이 돌아왔다.그래서 다시 만들기로 결정! 이번엔 해외 사이트 위주로레퍼런스를 찾아보았다.굉장히 많은 레퍼런스를 참고하였다.전 사이트와는 다르게페이지도 나누고 좀 더 화려한 느낌으로 가려고 한다.GSAP이 문젠데... ㅠ우선 할 수 있는 곳 까지 최선을 다해보자 참고 레퍼런스https://www.cssdesignawards.com/ CSS Design Awards - Website Awards - Best Web D..

공유 할 수 있는 popup 창을 만들었다. 발표가 끝나고 해보고 싶었던 기능 추가하는 중이라디자인에 공을 들이진 않았다.공유 클릭 시 나오는 popup 창 디자인이다.x 버튼을 누르면 popup 창이 사라지고로고 아이콘을 누르면 해당 SNS에 공유할 수 있는 창이 뜨고복사 버튼을 누르면 링크가 복사되는 식이다. import { useLocation } from 'react-router';import { SharePopupWrap } from '../style';import CopyToClipboard from 'react-copy-to-clipboard';import { useEffect } from 'react';const SharePopup = ({ shareToggle, imageUrl }) =>..

OTT 사이트 프로젝트의 기간이 끝났다.솔직히 JS 기초도 부족하다고 느꼈었고, 2주 간 바짝 Redux를 배워기능 구현 위주 역할을 맡았을 때 잘할 수 있을지무척 걱정이 많았는데 생각보다 잘 끝나서 홀가분하고 뿌듯한 기분을 느꼈다. 프로젝트 발표는 내가 맡았다.아무래도 발표 경험이 비교적 많았기 때문에 그랬던 것 같다.(내가 어필하기도 했다..ㅎㅎ)  발표자로 중 일부인데 좀 아쉬운 점은나도 급하게 만드느라 그저 제목, 사진 복붙한 것이 크게 아쉬웠다.다른팀들은 ppt도 되게 디자인 적으로 잘 꾸며놨어서잘한 느낌이 팍팍 들었다.확실히 디자인도 중요한 요소 중 하나라는 것을새삼 깨닫게 되었다. 나중에 시연 영상도 따로 찍어야 한다.내 포폴에도 쓰고 싶으니 조만간 찍도록 해야겠다.

회원정보 수정 기능을 구현하였다.가장 먼저 구현하고 싶은 것들을 정리해보았다. 1) 변경할 수 있는 값들과 변경 불가한 값 구분변경할 수 있는 값들은 전화번호, 비밀번호, 이름 등이었고변경할 수 없는 값들은 이메일 등이 있었다.이는 readOnly 기능을 사용해 쉽게 구현 가능했다. 예시 ✅ value vs defaultValue 차이  둘다 input 초기값을 설정하는 attribute이나 값을 변경하는 방식이 다르다.속성동작 방식상태 관리value"제어 컴포넌트" → 상태(state)와 동기화됨useState와 같은 상태 변수 필요defaultValue"비제어 컴포넌트" → 초기값만 설정되고 이후 변경되지 않음상태 변수 없이 사용 가능 ✅ readOnly와 defaultValue를 함께 사용하는 이유..