프로그래머스 알고리즘 풀이 https://school.programmers.co.kr/learn/courses/30/lessons/120844 사용 언어 : 자바스크립트 JavaScript JS 1. 배열 회전시키기 1) 문제 설명 정수가 담긴 배열 numbers와 문자열 direction가 매개변수로 주어집니다. 배열 numbers의 원소를 direction방향으로 한 칸씩 회전시킨 배열을 return하도록 solution 함수를 완성해주세요. 2) 제한 사항 3 ≤ numbers의 길이 ≤ 20 direction은 "left" 와 "right" 둘 중 하나입니다. 3) 입출력 예 numbers direction result [1, 2, 3] "right" [3, 1, 2] [4, 455, 6, 4, ..
1. TypeScript의 탄생 배경 1) JavaScript와 Node.js 원래 JavaScript는 HTML, CSS와 함께 사용되어 웹 페이지에서 동적인 효과를 주기 위해 만들어진 스크립트 언어 시간이 지나면서 자바스크립트의 성능을 높이고자 하는 니즈 발생 구글 V8 엔진의 탄생 → Chrome 브라우저에 내장되어 있음 구글 V8 엔진의 우수한 성능을 기반으로 Node.js라는 플랫폼이 탄생하고, 이를 통해 JS 언어로도 백엔드 프로그래밍이 가능해짐 2) Node.js의 잠재적 위험성 프론트엔드에서의 에러는 사용자가 보는 뷰를 해칠 수는 있어도, 웹 페이지를 이용하는데 전반적인 동작에 피해를 끼치는 경우는 많지 않다 하지만 백엔드에서의 에러의 경우, 에러에 대한 예외 처리가 제대로 되지 않으면 단..
1. React Query란 1) Client State vs. Server State Client State : 웹 브라우저 세션과 관련된 정보 ex. 유저의 언어, 테마 등 서버에서 일어나는 일과는 아무 관련이 없는 state들 단순히 사용자의 상태를 tracking하는 것 Server State : 서버에 저장,그러나 클라이언트에게 표시하는데 필요한 데이터들 ex. 블로그 포스트 data from DB 2) React Query의 역할 서버 데이터 캐시를 관리한다. React 코드에 서버데이터가 필요할 때 fetch나 axios를 사용해 서버로 바로 이동하지 않고, React Query 캐시를 요청 즉, React Query 클라이언트를 어떻게 구성했느냐에 따라 해당 캐시의 데이터를 유지 관리 하는..
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 설정 변경 콘솔 ➡ 해당 프로젝트 ..
1. Redux란? 상태관리 라이브러리, 중앙 state 관리소를 사용할 수 있도록 도와주는 패키지 컴포넌트 간에 state 데이터들을 부모-자식 관계로 설정하여 props를 통해 한정적으로 전달하지 않고, 중앙에서 관리하여 어떤 컴포넌트에서든 쉽게 접근하고 제어할 수 있도록 해준다. 1) Redux의 흐름 View에서 액션이 일어난다. dispatch에서 action이 일어나게 된다. action에 의한 reducer함수가 실행되기 전에 middleware가 작동한다. middleware에서 명령내린 일을 수행하고 난 뒤, reducer함수를 실행한다. reducer의 실행결과 store에 새로운 값을 저장한다. store의 state에 subscribe하고 있던 UI에 변경된 값을 준다. 2) Pro..
