1. 💫 Custom Hook 1) 너무나도 궁금했던 내용 드디어! 저번 뉴스피드 프로젝트 할 때 계속해서 input값을 핸들링하는 hook들을 반복적으로 사용하는데 이걸 어떻게 하면 더 클린하게 리팩토링 할 수 있을지 고민을 했었다. 2) 사용방법 hooks 폴더 생성 후 use~로 시작하는 (ex. useHookName.js) 파일 생성 useState, useEffect, useRef 등 기존 리액트 훅을 이용해서 반복적으로 사용하는 로직을 custom hook으로 만들어준다. ➡️ 이 때, custom hook에는 state와 handler 두 가지를 정의해준다. export default 해준 뒤 필요한 곳에서 import하여 사용하면 끝! // useInput.js (예시) import { u..
1. 프로젝트 개요 1) 프로젝트명 및 내용 🛒 알뜰살뜰 살말 서비스 사고싶은 물건에 대한 글을 게시글로 올리면, 해당 게시글의 리스트를 조회할 수 있고, 제품의 구매 여부를 댓글로 평가해주는 뉴스피드 사이트 Vercel 배포 https://news-feed-ten.vercel.app 알뜰살뜰 살말 news-feed-ten.vercel.app 2) 프로젝트 기간 2023. 6. 26 - 2023. 7. 3 3) 사용 스택 React, Firebase, Redux, Styled-components, React-Router 4) 프로젝트 구조 📦src ┣ 📂components ┃ ┣ 📂authentication ┃ ┃ ┣ 📜Login.jsx ┃ ┃ ┗ 📜SignUp.jsx ┃ ┣ 📂comments ┃ ┃ ┣..
이번 주에 팀원들과 프로젝트를 하면서, 브랜치를 이전에 했던 것과 다르게 더 세분화하며 작업하게 되어서 git branch에 대한 개념 정립을 다시 해야 할 필요성을 느꼈다. 이전까지만 해도, 나 혼자 과제할 때는 main-develop 이 정도로 1개의 추가 브랜치만 만들어서 커밋을 했었다. 사실 브랜치를 나누는 큰 의미가 없는 수준이긴 했다. 직전 팀 과제에서도 마찬가지로, main 브랜치 밑에 각자의 브랜치만 1개씩 만들고 진행했어서 main에 merge할 때 많은 충돌과의 싸움은 있었지만, 브랜치 자체에 대한 고려는 크게 하지 않았던 것 같다. 그리고 당시엔 나도, 팀원들도 지금보다도 더 Git이 어색하다보니 다른 사람꺼 pull해오다가 본인 코드 날아가고 이런 일도 여러 번 있었더랬다. 예전에 ..
firebase를 이용해서 프로젝트를 하는 중인데, firebase에서 사용하는 API key를 .env 파일에 따로 관리하는 방법을 알게 되었다. 그래서 .env 파일에 대해 간단히 정리해보려고 한다. 1. 환경변수(.env) 1) 환경변수란? 운영 체제(Operating System)나 애플리케이션에서 사용되는 변수 이 변수들은 시스템 설정, 애플리케이션 구성 및 동작에 영향을 미칠 수 있는 값들을 포함 2) 환경변수 파일 (.env) .env 파일은 주로 프로젝트의 환경 변수를 설정하기 위해 사용되는 파일 "env"는 "environment"의 줄임말로, 환경에 따라 다른 설정 값을 제공하는 데 사용됨 일반적으로 .env 파일은 프로젝트의 루트 디렉토리에 위치 환경 변수를 키-값 쌍으로 정의 2. ..
🚨 발생 문제 ERROR in ./node_modules/react-router-dom/dist/index.js 13:0-810 export 'AbortedDeferredError' (reexported as 'AbortedDeferredError') was not found in 'react-router' (possible exports: Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, ..
🚨 발생 문제 Firebase: Error (auth/account-exists-with-different-credential) 현재 상황 1. 이전부터 GitHub 계정에서 Google 아이디를 사용하고 있었던 상황 2. 내가 만든 웹앱에서 Google 계정으로 로그인 후 로그아웃 ➡ GitHub 로그인을 시도하는 과정에서 GitHub 로그인이 되지 않고 위의 에러 발생 🤔 문제 원인 같은 이메일 주소가 다른 인증 방법으로 접속되었기 때문에 발생 // 예시 GitHub : myemail@gmail.com Google : myemail@gmail.com // 위와 같이 같은 gmail 아이디를 공유하고 있는 상황에서 발생 💊 해결 방법 Authentication 설정 변경 콘솔 ➡ 해당 프로젝트 ..
20230522 - 20230526 Week 2 자바스크립트 문법 개강 후 정신없는 한 주가 지나갔다.. 수업부터 첫 개인 과제 발제까지 😱 매일매일 TIL을 쓰고 싶었는데 강의 보고 부족한 부분 좀 찾아보고 하다보니(딴 짓을 그렇게 많이 한 것도 아닌데) 새벽 12시, 1시가 뚝딱 되어있더라.. 그날 그날 정리하고 싶은데 공부를 막 시작하는 단계라 한꺼번에 지식이 쏟아져 들어오니 정리가 쉽지 않았다. 앞으로 공부하면서 이해가 잘 가지 않거나, 헷갈리는 개념 등 특별히 정리가 필요하다고 느껴지는 내용은 따로 정리할 계획이다. 개인과제1 개요 1. 순수 바닐라 자바스크립트만으로 영화 리스트 조회 및 검색 UI 구현 2. 학습해온 자바스크립트 문법을 최대한 활용 3. 스타일링 작업하며 css와 친해지기 1...
오늘 강의 키워드 ECMAScript 6(ES6) 문법, 일급객체로서의 함수, Map과 Set 프로그래머스 문제 풀이 문자열 연습하기 ❓ 문제 설명 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. ❗ 제한사항 - 문자열 s의 길이 : 50 이하의 자연수 - 문자열 s는 알파벳으로만 이루어져 있습니다. 어제 고민했던 1주차 문자열 연습문제..
📌 오늘 강의 키워드 변수와 상수, 데이터 타입, 형 변환, 연산자, 함수, 조건문, 반복문, 객체와 객체 메소드, 배열과 배열 메소드 📌 강의 들으면서 내가 실수한 것 & 놓친 부분 💡 0부터 10까지의 수 중 2의 배수만 console.log로 출력하도록 작성 for ( let i = 0; i 0 ) { if ( i % 2 = 0 ) { console.log(i); } } } 위의 for문을 작성했는데 자꾸 아래와 같은 에러가 발생하면서 console.log가 제대로 출력되지 않았다. if ( i % 2 = 0 ) { ^^^^^ SyntaxError: Invalid left-hand side in assignment 그래서 무엇이 문제인가 자세히 봤더니 i % 2와 0을 비교하는 연산자를 ===가 아..
20230515 - 20230519 Week 1 5/21 일요일 정보처리기사 필기 시험 준비하느라 금~일요일이 정신없이 지나가서 이제서야 첫째 주 회고록을 쓴다. 심지어 토요일에 생일이었는데.. 생일 날 놀지도 못하고 벼락치기 공부 😂 일요일에 시험 끝나고 좀 쉬다가 나가서 맛있는 것도 먹고.. 푹 쉬느라고 한 박자.. 아니 네 박자 늦게 작성하는 WIL ✏️ 이번 한 주동안 미니프로젝트하면서 느낀 점 KPT로 정리 Keep 팀원들 모두 연락이 잘 됐고 전반적으로 약속 시간이 잘 지켜진 점 모르겠는 것/원하는 것을 주저하지 않고 말하는 태도 부족한 부분을 자세히 알려주고 피드백해준 것 Problem 첫 주차라서 깃에 대한 이해와 사용법이 아직은 미숙했던 점 CRUD를 고려해서 API 구현을 해보지 못한 ..
