REturn 0;

대한민국의 98%는 카카오톡을 사용하고 있다. 그래서인지 현재 대부분의 서비스에서 소셜로그인, 그 중에서도 카카오 로그인을 이용하여 서비스를 사용 할 수 있도록 하고있다. 내 기억에도 서비스에서 로그인이 필요할 때, 카카오 로그인을 이용해서 로그인 한 경험이 많았었다. 그래서~ 이번 프로젝트에서 소셜 로그인을 맡아서 진행하기로 했다. 이번 프로젝트는 프론트와 백엔드가 협업하여 프론트에서 로그인을 요청하여 인가코드를 받아와서 백엔드로 넘겨주면 인가코드를 이용해 카카오 서버에서 토큰을 받아와 얻은 정보를 이용해 자체 jwt 토큰을 제작해서 프론트에서 사용자 정보를 받아올 것이기 때문에 REST API를 사용했다. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카..

시작하기 전에 왜 프론트를 공부하다가 NodeJs를 공부하게 되었는지 설명하자면 프론트를 공부하면서 백엔드와 함께 2번정도 프로젝트를 진행했는데, 백엔드에 대해 전혀 아는게 없다보니 서비스를 기획 할 때도 이 기능 구현이 가능한지, 구현이 힘든건지 모를 때가 많았다. + 소통할 때 모르는 부분이 나오면 답답함... 그래서 백엔드를 공부하면 앞으로 프론트 개발자를 공부하고 일하는데 큰 도움이 될 것 같다는 생각이 들었다! 그리고 뭔가 프론트 쵸큼 할 줄 아니까... 백엔드도 공부하면 프로젝트를 할 기회가 더 많이 생기지 않을까? 하는 생각도 들고, 혼자서 백과 프론트를 모두 맡아서 프로젝트를 진행하는 사람들을 봤는데 멋있다고 느껴져서 이렇게 공부를 시작하게 되었다. ⭐목표⭐ 가능한 목표인지 모르겠지만.....

해커톤 프로젝트를 진행하면서 역할을 분담해서 했더니 팀 프로젝트 코드인데 내가 모르는 코드가 몇개 있는 것 같아서 공부해서 이해하고 넘어가야된다는 생각이 들었다. + 게시글에는 보통 이미지를 첨부할 수 있게 하기 때문에 알아두면 좋겠다는 생각이 들어서 프로젝트에 팀원이 작성한 코드로 공부를 해보았다. const insertImg = (e) => { let reader = new FileReader(); // 업로드 파일 세팅 부분 const file = e.target.files[0]; setUploadedImage(file); // 프리뷰 이미지 세팅 부분 if (e.target.files[0]) { reader.readAsDataURL(e.target.files[0]); } else { setPrev..

Slack과 Github 협업을 하면서 가장 많이 사용하고있는 Github와 Slack을 연동할 수 있다고해서 알아보았다. 슬랙 채널들을 쭉 내려보면 앱을 추가할 수 있는 칸이 나온다. 앱 추가 버튼을 누르고 검색창에 github를 검색하면 설치가 가능하다. 검색 결과로 나온 Github를 클릭하면 자동으로 앱이 추가된다. 아직 끝이 아니다. 원하는 채널에 들어가서 명령어 입력을 해야되는데 /github만 쳐도 전체 명령어를 확인할 수 있다. 따라서 채팅창에 /github subscribe [깃허브 계정 이름]/[연결할 레포지토리 이름] 을 입력하면 해당 깃허브 레포가 연결된다. 요렇게 입력하면 해당 채널에 아래와 같은 메시지가 온다. connect 버튼을 누르면 위 화면으로 연결되는데, Connect ..

1. React 프로젝트 생성하기 기존에는 터미널에 yarn create react-app Lucy-Arti(프로젝트명)을 입력하여 프로젝트를 생성했다. 프로젝트를 생성하는데 약 1분 정도의 시간이 걸린다. 지루할 정도로 서버 구동 시간이 길고 코드가 길어질수록 코드 갱신 시간 또한 증가하는 페인포인트가 있었다. Vite를 이용하면 생성하는 시간도 단축되고 코드 갱신 시간도 줄어든다. 왜 Vite를 이용하면 빠른지는 https://ko.vitejs.dev/guide/why.html 참고 Vite로 React + TypeScript 프로젝트를 생성하려면 터미널에 yarn create vite Lucy-Arti --template react-ts를 입력한다. 진짜 3초만에 생성된다. 2. React 프로젝트..

import catUrl from "./images/cat.png" // src 폴더 하위의 이미지 경로 import function Thumbnail() { return ; } 보통은 위와 같은 코드로 이미지파일 링크를 통해 import하여 변수에 저장하고 src안에 해당 변수를 링크로 넣는 방식으로 이미지 파일을 불러와서 사용한다. 하지만 이번 프로젝트에 들어가는 이미지가 너무 많아서 매번 import하기가 힘들어 방법을 찾아보았다. 모든 이미지파일을 React 프로젝트 생성하면 자동생성되는 public 폴더 내에 img 폴더를 만들어서 그 안에 이미지 파일을 저장하면 {isMentor ? ( ) : ( )} 이런식으로 ../../로 상위 폴더로 찾으러 갈 필요없이 /img/~~~.png만으로 바로 ..

import { useEffect } from "react"; import { useLocation } from "react-router-dom"; // 페이지 이동 시 스크롤을 맨 위로 export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; } 스크롤을 맨 밑으로 내리고 다른 컴포넌트가 렌더링 되어도 스크롤이 맨 아래인 상태에서 렌더링된다. 위 코드는 새로고침이나 새로운 컴포넌트가 렌더링 됐을 때, 스크롤을 맨 위로 올려주는 함수이다. import ScrollToTop from "./component..

import React, { useState } from "react"; import styled from "styled-components"; const StarRate = ({ onChange }) => { const [rate, setRate] = useState(0); const handleStarClick = (select) => { setRate(select); onChange(select); }; return ( {[1, 2, 3, 4, 5].map((star) => ( ★ ))} ); }; export default StarRate; const StarContainer = styled.div` display: inline-block; `; const Star = styled.span` fo..