수빈이의 개발새발

백앤드랑 협업해 프로젝트를 진행하면서 카카오 소셜 로그인 구현을 맡게 되었다! 찾아보니 여러 가지 방식들이 있었지만 다 방식이 달라서 엄청 헤맸던.. 소셜 로그인 부분에서 프론트와 백의 역할이 있지만 나는 프론트 담당이었으므로 프론트에서 해야 할 일만 포스팅하겠다! 우리 프로젝트는 REST API를 사용해 카카오 로그인을 구현하였다 관련 문서는 ↓ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 생각보다 프론트가 해야 할 일은 많이 없다! 제대로 정리된 글이 별로 없어서 어렵게 느껴졌지만 ㅜㅜ 위의 그림처럼 백쪽은 다 빼고 오직 프론트 부분만 다..

포트폴리오 프젝을 하면서 이런 식으로 해당 태그를 클릭하면 그 태그가 나타내는 부분으로 스크롤이 이동해야 하는 기능이 필요했다 그래서 useRef를 통해 해당 DOM에 접근을 했다 이동할 DOM에 ref를 담아준다 배열을 통해서 담았다 아니면 useRef 3개나 만들어야해서 .. 개스레기코드다... const scrollRef = useRef([]); /// { scrollRef.current[0] = el; }} > A { scrollRef.current[0] = el; }} > B { scrollRef.current[0] = el; }} > C onClick시 실행될 함수이다 const handleScroll = (ref) => { ref.scrollIntoView({ behavior: "smooth..

이어서.. [React Project: 포트폴리오 웹페이지(0)] 디자인 - Figma 어느 정도 리액트를 익혔으니 개인프로젝트를 진행하려 한다! 리액트로 개인포트폴리오 페이지를 제작할 것이다 웹페이지를 제작하기 전에 가장 먼저 해야 할 것은 웹페이지를 어떤 식으로 만 su-vin25.tistory.com 앞서 디자인을 완성하였다면 차례대로 페이지를 만들어주면 된다 나는 기초세팅과 main페이지인 Home부터 제작을 하였다 페이지 라우팅 퍼블리싱 이 정도를 한 거 같다 1. 페이지 만들기 내 프로젝트에 필요한 페이지를 pages폴더를 생성해 그 안에 만들어주었다 2. 페이지 라우팅 나는 페이지 라우팅을 하기 위해 react-router 라이브러리를 사용하였다 Home v6.8.0 I'm on v5 The..

어느 정도 리액트를 익혔으니 개인프로젝트를 진행하려 한다! 리액트로 개인포트폴리오 페이지를 제작할 것이다 웹페이지를 제작하기 전에 가장 먼저 해야 할 것은 웹페이지를 어떤 식으로 만들지에 대한 디자인이라고 생각한다. 그래서 웹페이지 디자인에 유용한 Figma를 통해서 디자인해 보았다 Figma가 css코드도 뱉어주진만 완벽하진 않아서 사용하지 않을 거고 색상코드와 페이지 제작 시 보면서 만들용으로 사용하였다 내 피그마 페이지이다! page는 Home/ Me/ Project/ Contact 총 4개의 페이지로 이루어질 것이다 뭐 만들다 추후 수정이 있을 수 있겠지만! 1. Home Home페이지 이자 프로젝트의 Main페이지다 깔끔하고 가독성 좋게 만들고 싶었기 때문에 Mac의 Dock 바에 영감을 받은 ..

Open Graph 콘텐츠의 요약내용이 SNS에 게시되는데 최적화된 데이터를 가지고 갈 수 있도록 설정하는 것 이런 식으로 sns에서 링크를 보냈을 때 링크에 대한 썸네일, 미리 보기 제목, 내용이 보이게 하는 것이 Open Graph태그이다 사용할 썸네일파일은public 디렉터리 밑에 넣어준다 각각이 나타내는 영역이다 //썸네일 //제목 미리보기 //내용 이렇게 생성해준다 수정을 한 것이므로 다시 한번 빌드와 배포를 해주자 npm run build firebase deploy 아라랏 근데 적용이 안된다... 데이터를 링크가 공유가 될 때마다 가져오는 게 아니라 캐시처럼 보관해 두었다 쓰기 때문에 open graph설정을 바꿨다고 바로바로 바뀌진 않는다! 그렇다고 가만히 내버려두면 아예 적용이 안될 수 ..

리액트로 개발한 프로젝트를 배포해 보자 뭐 서버를 구축해서 배포하는 방법은 구축비용이라던가 너무 복잡하기 때문에 firebase를 사용해 좀 더 편리하게 배포를 해볼 것이다. firebase 사이트로 이동해 새로운 프로젝트를 만들어보자 Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com react-project로 이름을 지정해 준 후 애널리틱스 사용설정을 해제하고 프로젝트를 만들어준다 만들어진 프로젝트에 가 Hosting 메뉴에 들어가 시작하기를 눌러주고 설치코드를 복사 후 터미널로 실행해 준다 다음 내가 만든 프로젝트 위치로 이동해 준다 그냥 vscode에서 터미널에서 하면 된다! 두..

리액트로 만든 감정일기장이다 이 프로젝트 빌드 전 몇까지 배포준비를 해보자! 1. 타이틀 변경 우선 웹페이지 타이틀을 고쳐보자 index.html의 태그를 감정일기장으로 바꿔주자 ↓ 그리고 맨 위에있는 x o lang 설정도 영어가 아닌 한국어로 바꿔쥬쟈 메인타이틀은 감정일기장이지만 그 페이지마다 페이지가 하는 행동으로 타이틀을 변경시켜 볼 것이다 페이지마다 useEffect의 mount때를 이용해 보자 useEffect(() => { const titleElement = document.getElementsByTagName("title")[0]; titleElement.innerHTML = `감정일기장 - ${id}번 일기`; }, []); title태그의 0번 요소가 우리가 원하는 태그이기 때문에 이..

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com [React Project: 간단한 일기장(9)] 로직 분리하기 -useReducer 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응 su-vin25.tistory.com 이어서... 두 번째 upgrade를 진행해볼 것이다 현재상태이다 보시..

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com [React Project: 간단한 일기장(8)] 최적화3 - useCallback 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응 su-vin25.tistory.com 이어서... 간단한 일기장 만들기는 최적화도 했으니 모두 완료가 되었다!..

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com [React Project: 간단한 일기장(7)] 최적화2 - React.memo 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응 su-vin25.tistory.com 이어서... 앞서 다룬 useMemo와 React.memo를 통해서 지금까..