매우 매우 삽질 많이한 .. oauth 구현이 이렇게 어려웠나 싶은 .. 일단, 구글 oauth 방법이 딱 두가지 정도 있다.1. react-oauth를 통해 클라이언트 단에서 access-token을 받는 방법2. 클라이언트 단에서는 인가코드만 부여받고, 그 인가코드를 서버에 보낸 뒤, 서버가 구글에 요청하여 access-token을 받는 방법 1번은 보안상 많이 추천하는 방법은 아니고, 보통 보안 고려해서는 2번 방법을 추천한다. 1. [클라이언트] 구글 console에서 clientID 생성 이 방법은 이미 인터넷에 아주 많이 나와있으므로, 설명을 생략하도록 하겠다. 2. [클라이언트] redirect uri는 클라이언트 주소로 설정 (서버 주소 이런걸로 설정 x, 정보를 그 주소로 보내주고 이런 ..

1. 여러장의 이미지 파일 업로드하고 미리 보여주기 input 태그에서 onChange일때 addImageFile이라는 함수를 호출해준다.const [imageFiles, setImageFiles] = useState([]);const addImageFile = (e: React.ChangeEvent) => { let tmp = e.target.files; if (tmp) { const reader = new FileReader(); reader.readAsDataURL(tmp[0]); reader.onloadend = () => { if (reader.result) { setImageFiles(prev => ..

goodplassu 글 상세보기 페이지에서 댓글 작성하는 부분을 만들겁니다!결과 미리 보기 ↓더보기 1. 자동으로 크기 조절되는 textarea 만들기 (react + typescript)const textRef = useRef(null);const changeHandler = (e: React.ChangeEvent) => { setComment(e.target.value); if (textRef.current) { textRef.current.style.height = `auto`; textRef.current.style.height = `${textRef.current.scrollHeight}px`; }}; { changeHandle..

TailwindCSS & react-icons 이용해서 만들었다.먼저 사용해보면서 느낀 장단점을 정리하자면 .. Tailwind CSS 장점1. 다른 스타일 라이브러리에 비해 스타일마다 이름을 생각할 필요가 없다.2. 원래 스타일 정의할 때보다 짧게 스타일을 정의할 수 있다.ex) width: 24px; -> w-6 3. 디자인 하다보면 가볍게 패딩이나 마진 주고 싶을 때가 있는데 그때마다 class명 짓고 쓰는게 불편하지만, tailwind는 간단하게 p-2로 줄 수 있다.Tailwind CSS 단점단점은 뭐 .. 코드가 보기 안좋아지는정도(class이름이 길어질 경우)가 있지만 장점이 뛰어 넘는다는 것을 느꼈다. 아이콘을 사용할 일이 간간히 있을거 같아서react-icons 라이브러리를 사용했다. 그..

goodplassu는 2년전 2022년에 전공 수업에서 진행했던 프로젝트이다.당시 react, javascript 모두 하나도 몰랐기에 지금보면 완성된게 놀라울 정도이다. ㅎㅎ일단 코드 부터 당시에 잘 안됐던 기능이 몇몇개 있었는데리팩토링 + 오류 고치기 + typescript적용을 목적으로 다시 시작하게 되었다. 먼저 기존 react에 typescript를 적용하려면 패키지 설치가 필요하다.npm install typescript @types/node @types/react @types/react-dom @types/jest 근데 문제는 이후에 npm install 했더니 react scripts와 typescript간의 버전 문제가 났다.npm ERR! code ERESOLVEnpm ERR! ERES..