Bin's Blog

📖 회고 👉 오늘 두 번째 프로젝트 팀장 회의가 열렸다. 깃허브 레포지토리 설정에서 Turborepo를 활용한 Monorepo로 구성하기로 했다. 커밋룰은 husky를 활용해서 commit convention을 설정하기로 했다. 👉 Github Projects를 활용해서 각 팀장이 관리하기로 했다. 👉 DB는 파이어베이스로 사용하기로 했다. 👉 나에게는 생소한 툴들이 많다. 하지만 이번기회에 도전해보고 싶다. 배움에 있어 망설임은 사치라고 생각한다. 팀장이라는 자리가 쉽지 않지만 그만큼 얻어가는 것도 더 많다고 생각한다. 감사한 마음으로 하고 싶다. 👉 세부적인 계획을 잘 짜는 연습을 해야겠다. 본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 회고로 작성 되었습니다.

📖 회고 👉 팀원들과 같이 예산 계획서를 짜면서 이렇게 예산안을 구성해보는 게 처음이서 신기했다. 어떻게하면 더 알차게 구성할지 고민이었는데 주어진 자원 안에서 효율적으로 사용하는게 중요하다라는 것을 알게 됐다. 👉 어제 LMS 프로젝트에서 우리팀이 커뮤니티 시스템 제작 및 마이페이지 파트를 맡게 됐다. Next.js, TypeScript 등 교육과정에 없던 기술을 적용해야하니 나에게는 큰 도전이다. 👉 이번 프로젝트때 내가 가진 모든 역량을 발휘할 수 있게 준비를 단단히 하고 싶다. 이번 프로젝트를 통해 한 걸음 더 크게 성장하는 프론트엔드 개발자가 되고 싶다. 해보지 않았지만 포기하거나 주저하고 싶지 않다. 본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 회고로 작성 되었습니다.

📖 회고 👉 어제 4명의 팀원들이 모여서 처음으로 인사를 나누고 대화를 통해서 서로 친해지는 시간을 가졌다. 이제 최종 프로젝트 4주간 짧지만 긴 여정을 떠난다. 이번에 팀장을 맡게 돼서 나한테는 또 다른 도전이다. 팀원들을 잘 이끌면서 갔으면 좋겠다. 👉 어제 최종면접에서 떨어졌다. 처음에는 마음이 조금 힘들었지만 오히려 감사하다. 내가 자기중심적으로 생각하고 얘기하다보니 내가 생각하는것을 남도 좋게 봐주리라고 생각했지만 그건 나의 욕심이자 착각이었다. 👉 이번 프로젝트를 거치면서 리액트를 더 깊게 팔 예정이다. 나의 장점을 살려서 실력있는 프론트엔드 개발자가 되고 싶지 흔한 개발자가 되고 싶지 않다. 본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 회고로 작성 되었습니다.

🤔 firebase란? 👉 Google에서 제공하는 클라우드 기반 개발 플랫폼이다. 이 플랫폼을 이용하면 개발자들이 모바일 애플리케이션과 웹 애플리케이션을 보다 쉽고 빠르게 개발할 수 있게 돕는다. 👉 개발자들이 백엔드 서버를 걱정하지 않고, 앱 개발에 집중할 수 있다. 또한 Goggle Cloud Platform과 잘 통합되어, 크기가 크거나 복잡한 프로젝트에도 적합하다. 👉 firebase의 기능들 1️⃣ Realtime Database: 실시간으로 정보를 동기화해주는 NoSQL 데이터베이스이다. 이를 통해 여러 사용자가 동시에 앱을 사용하더라도 데이터가 실시간으로 업데이트되어 각 사용자에게 반영한다. 2️⃣ Authentication: 이메일과 비밀번호, 전화번호, Google, Facebook, ..

🤔 Redux란? 👉 Redux는 리액트 생태계에서 가장 사용률이 높은 라이브러리이다. 리덕스를 사용하면 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리할 수 있으며 상태 관리를 손쉽게 할 수 있다. 👉 Redux는 useState와 마찬가지로 변하는 값들을 관리해주는 관리 시스템이다. 다만 차이가 있다면 Redux는 전역으로 데이터 상태를 관리한다. 👉 Props를 가지고 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해주는 방식을 사용하지만 간단한 상황에서는 잘 작동하지만, 애플리케이션이 복잡해지고 컴포넌트의 계층이 깊어질수록 상태 관리가 복잡해질 수 있다. 특히 여러 컴포넌트가 동일한 상태를 공유하거나, 비동기 작업으로 상태가 변경되어야 하는 경우에..

1️⃣ useReducer 👉 React 내장 훅 중에 하나로, 간단한 컴포넌트 상태를 관리할 때는 useState()를 사용하는 반면에 보다 복잡한 컴포넌트 상태를 관리하는데 useReducer()가 사용된다. 👉 reduce함수에 분리시킴으로써 복잡한 상태 로직을 캡슐화하는데 도움이 된다. 👉 기본 형태 const [state, dispatch] = useReducer(reducer, initial); reducer: (state, action) => newState 형태의 함수다. 이 함수는 현재 상태와 분배된 액션을 받아 새 상태를 반환한다. initial: Reducer에 전달한 초기 상태 값이다. useReducer훅은 상태 값(state)과 해당 상태를 변경하기 위한 디스패치 함수("disp..

📚 커스텀 훅(Hook) 👉 커스텀 훅(Custom Hooks)은 사용자가 직접 만든 훅을 말하며, 여러 컴포넌트 간에 상태 로직을 재사용하는 데 사용된다. 👉 커스텀 훅은 기본 훅을 활용하여 만들어지며, 이름은 "use"로 시작해야 한다. 📖 사용예시 👉 커스텀 훅 import {useState} from "react" function useCounter(initialCount) { const [count, setCount] = useState(initialCount); const increment = () => { setCount(count + 1) } return {count, increment}; } export default useCounter 👉 컴포넌트 import useCounter fro..

1️⃣ useParams 👉 React Router의 useParams는 현재 URL의 파라미터를 가져올 수 있는 React Hook입니다. 👉 예시 import React from 'react'; import { useParams } from 'react-router-dom'; function User() { let { id } = useParams(); return User ID: {id}; } 👉 /user/:id와 같은 경로가 있을 때, :id는 URL에서 동적으로 변경되는 값으로 취급된다. 이 :id를 쉽게 가져오기 위해 useParams를 사용할 수 있다. 👉 User 컴포넌트가 /user/123라는 경로에서 렌더링될 경우, useParams를 통해 { id: "123}라는 객체를 얻게 된다...

🤔 리액트 훅(Hook)이란? 👉 리액트 훅은 함수형 컴포넌트에서 상태관리와 생명주기 기능을 사용할 수 있게 해주는 도구이다. 👉 이전에는 이러한 기능을 사용하기 위해서 클래스형 컴포넌트를 사용해야 했다. 🤔 왜 생명주기가 필요할까? 👉 생명주기 메서드는 컴포넌트가 페이지에 처음 렌더링될 때, 컴포넌트의 상태나 속성이 변경될 때, 컴포넌트가 페이지에서 제거될 때에 실행된다. 👉 다양한 활용사례가 있다. 1️⃣ 메서드에서 API를 호출해서 초기 데이터를 가져오는 작업을 수행한다. 2️⃣ 이벤트 리스너, 타이머, 등록된 구동 등을 설정한 후에 컴포넌트가 사라질 때 이들을 정리해야 한다. 이는 메모리 누수를 방지하고, 성능을 유지한다. 3️⃣ 컴포넌트의 상태나 속성이 변경되면 특정 작업을 수행할 때 사용한다...

🤔 리액트는 뭐지? 👉 사용자의 인터페이스를 구축하기 위한 JavaScript 라이브러리이다. 👉 페이스북이 개발하고 유지 관리하며 개발자들이 웹 페이지 혹은 앱의 복잡한 사용자 인터페이스를 구성할 수 있도록 지원한다. 👉 Vue와 비교했을 때 라이브러리로 분류되는 이유는 프레임워크가 제공하는 전체적인 기능 집합을 제공하지 않기 때문이다. 예를 들어, React는 라우팅, HTTP 요청, form validation 등의 기능을 직접 제공하지 않는다. 📖 리액트 특징 👉 컴포넌트 기반: 컴포넌트라는 개념을 사용한다. 컴포넌트는 독립적이고 재사용 가능한 코드 조각으로, 각 컴포넌트는 자체 로직을 가지며, 그 로직은 JavaScript 함수를 통해 작성된다. 이로 인해 UI를 재사용 가능한 개별적인 조각으로..