REturn 0;

2023년 7월 26 ~ 8월 26일까지, 이 기간동안 멋쟁이 사자처럼 프론트엔드 파트에서 활동하며, 교환학생 매칭 서비스 "오리챗(All-It-Chat)"의 프론트엔드 개발자로 전체 해커톤에 참가하였다. 개발을 시작하고 참여한 첫 프로젝트로, 2달간 공부한 React를 잘 활용할 수 있을지에 대한 걱정을 안고 시작했었다.| 프로젝트에서 구현한 기능https://zza-lng.notion.site/All-It-Chat-c6e7240f004c456fb0bf5ea2a0785d05?pvs=4 오리챗(All-It-Chat) | Notion기술 스택zza-lng.notion.site | 프로젝트에서 만족했고, 앞으로 지속하고 싶은 부분팀 분위기가 너무 좋았다. 모두가 열심히 하고, 서로가 열심히 하는 모습을 보며..

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

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..

import { useState } from "react"; export const useForm = () => { const [value, setValue] = useState(""); const onChange = (e) => { setValue(e.target.value); }; return [value, onChange]; }; 1. useForm() 내장된 useState, useEffect와 같은 hook을 커스텀하여 재사용성을 높이기 위해 사용 2. onChange() 입력된 값을 저장해야되는 input이나 textarea에 onChange함수로 넣어서 입력값의 변경이 이루어질 때마다 함수 실행 입력 요소의 현재값을 매번 value에 저장하는것 3. return [ value, onChang..

프로젝트를 시작하기 전 가장 중요한 것은??? ⭐설계⭐ 팀 프로젝트는 개발 전 논의를 통해 설계하는 것이 중요하다 커밋 컨벤션, 폴더 구조, 스타일링, 컴포넌트 등을 미리 얘기를 나눠야 한다. 어떤 배포 환경을 사용할 것인지?? 해커톤을 통해 개발 전 설계를 경험해보자👍🏻 폴더 구조 각 컴포넌트들을 용도에 맞게 분류하고 모아놓는 과정 라우트에 따라 기능 or 유형에 따라 atomic 아토믹 디자인 방식? 규모에 따라서 파일을 나눌 수도 있다. 가장 작은 단위로 컴포넌트가 분리 재사용성 보장 but 개발자마다 분류 기준 애매 폴더 구조는 리액트에서 정해준 표준이 존재하지 않기 때문에 각자 상황에 맞게 구성하고 사용하는 것이 좋다! 컴포넌트 규모에 따라 커지는 컴포넌트들 어떻게 관리? 폴더 구조 설계를 하면..