TIL (Today I Learned)

자주 사용하는 CSS / JQuery / Fetch / Firebase 사용법

오늘은 일주일 동안 배운 개념들을 정리하고 JS 프로젝트를 진행하면서 JS에 대한 개념을 이해해보았다.

오늘은 JS를 사용하여 팀 프로젝트를 진행하였다. 기본적으로 JS를 사용하였고 JQuery 라이브러리를 사용했다. 데이터베이스를 구축할 때는 좀 더 쉽게 데이터베이스를 연동할 수 있도록 Firebase를 사용했다.

라이브러리 및 프레임워크를 활용하지 않은 vanila Javascript만을 사용하여 간단한 웹페이지를 만들어보았다.

오늘을 vanila JS로만 영화 데이터를 가져와 검색 기능을 실행할 수 있는 웹페이지를 만드는 프로젝트를 진행하였다. 실습을 진행하면서 DOM 요소를 다루는 방법과 배열 메서드 forEach(), map(), filter()의 사용법에 대한 이해를 할 수 있었다.

오늘은 JS로 프로젝트를 진행하면서 모달창을 구현하는 방법과, 검색 기능을 구현할 때 대소문자를 구분하지 않고 키워드를 포함할 경우 결과를 출력하는 방법, 엔터키를 사용할 경우 함수가 실행되도록 하는 방법을 알아보았다.

오늘은 html의 canvas 요소를 사용하여 화면에 그림을 그리는 실습을 진행했다.

오늘은 JS에서 비동기 처리가 필요한 이유를 알아보았고, 비동기 처리를 하는 방법 중 Callback과 Promise를 사용하여 처리하는 방법을 배워보았다.

비동기 처리에 대해 이해해보고 Promise로 비동기 처리할 때 사용하는 .then, .catch, .finally 메서드에 대한 개념을 알아보았다.

오늘은 Promise 비동기 처리를 async와 await를 활용하여 간단하게 처리하는 방법을 알아보았다.

오늘은 CSS의 flex와 grid에서 사용하는 속성을 알아보았다.

오늘은 협업 프로젝트를 시작하기 이전에 git으로 협업하기 위한 흐름과 명령어를 이해해보는 시간을 가졌다.

오늘은 localStorage를 사용하여 데이터 저장 및 불러오기 실습을 진행하면서 locaStorage에 대해 알아보았다.

오늘은 JavaScript에서 사용하는 배열 메서드 map과 forEach에 대해 알아보았다.

오늘은 React 프로젝트를 생성하기 위한 개발환경을 구축하고, CRA을 통해 React 프로젝트를 생성 및 실행하는 실습을 진행했다.

오늘은 React Component와 React Props에 대해 배웠다. React에서 Component를 사용하는 이유와 이점을 알 수 있었고, Props로 상위와 하위 컴포넌트 간 값을 넘겨주는 방법을 이해할 수 있었다.

실습을 진행하면서 참조형 데이터의 불변성이 react에 미치는 영향과 react가 state 변경을 인식하지 못하는 이유로 리렌더링 되지 않는 경우의 해결 방법을 순서대로 알아보았다.

오늘은 React에서 불변성이 중요한 이유와 불변성을 지키기 위한 방법에 대해 알아보았다.

React에서 사용하는 Hoooks 중 useState, useEffect, useRef, useContext에 대해 알아보았다.

전역 상태 관리 라이브러리중앙 데이터 관리소state를 공유할 때 부-모 관계가 아니어도 된다.global statelocal stateyarn add redux react-redux!\[스크린샷 2023-11-08 오전 10.41.07.png]redux: 리덕스 관련

yarn add react-router-dom 페이지 컴포넌트 생성Router.js 생성 및 router 설정 코드 작성App.js에 Router import 및 적용a 태그의 기능을 대체하는 API새로고침 방지동적 라우팅

함수는 객체이므로 새로운 값을 넣어주게 되면 새로운 주소값을 갖게 되어 함수를 호출하는 컴포넌트가 리렌더링 된다. 이런 문제점을 해결하기 위해 useCallback 사용새롭게 갱신되지 않고 메모리제이션 된 상태로 남아있게 된다.\-> 최초의 주소값으로 유지 -> 스냅샷

확장 프로그램 설치yarn add styled-componentsCSS-in-JS 자바스크립트로 CSS 코드를 작성하는 방식조건부 스타일링 가능import 해서 사용최상위 컴포넌트 바로 아래에 추가태그에 사용된 기본적인 스타일을 제거한 후 스타일링을 해야 한다,!\[스

배치 처리 - 리액트에서의 불필요한 렌더링을 줄이기 위함state 하나가 변경될 때마다 화면에 반영한다면 엄청나게 많은 layout-shift가 발생!\-> 같은 로직의 setState()는 단일 렌더링 하기 위해 배치 처리한다.diffing re concilation

(1) 변수 관리(2) 요소 접근(3) focususeRef를 사용하여 변수 관리 하기let으로 변수를 생성한 후 count를 올려주면 렌더링시 다시 초기화가 되기 때문에 화면에 값이 반영되지 않는다.렌더링 수 기록하기의존성 배열이 벗으면 어떤 stat든 변경될 시 u

먼저 기본값이 false인 state를 만든다.원하는 요소 선택시 state를 true로 만들어 주는 이벤트 핸들링을 구성한다.조건부 렌더링을 통해 modalOpen이 true이면 LetterForm을, false이면 InputBox를 보여주도록 한다.창을 다시 닫기

함수가 동일한 계산을 반복해야 할 때 이전에 계산한 값을 메모리에 저장해서 동일한 입력이 다시 발생할 때 캐시된 결과를 반환하여 프로그램의 속도를 높이는 최적화 기술이다. 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기법이다."불필요한 리렌더링

:idsuseParamsstyled components에 값을 넘겨주기 위해 변수를 사용할 때카멜케이스를 사용하는 경우는 앞에 꼭 $를 붙힌다.Date is not a constructorwindow.Date() 로 사용하니 해결1) context 파일 !\[스크린샷

https://prettier.io/패키지 설치yarn add -D prettierpakage.json 에 추가하는 방법scripts "format": "prettier . --write"현재 위치의 모든 파일에 적용하고 덮어씌우기.prettier.

React에서 Redux 사용하기

Firebase > 서버리스 플랫폼 Baas(Backend as a Service)

Firebase Firebase console로 이동 > 프로젝트 생성 cloud Firebase https://firebase.google.com/docs/firestore?authuser=0&hl=ko cloud Firebase > 데이터베이스 만들기 > 컬렉

프로젝트 기획: 자유로운 사람들을 위한 취미 공유 사이트 구현하기prettierrc 구성 순서(prettierrc 문서 참조)firebase 프로젝트 생성환경변수 (.env.local) 셋업 \- root 경로redex로 firebase 관리하기

리덕스를 더 편하게 쓰기 위한 기능들을 흠수해서 만든 것yarn add @reduxjs/toolkit기존 코드redux tool kit액션 생성자

컨트롤러: 모델의 데이터를 조회하거나 업데이트하는 역할모델의 변화는 뷰에 반영된다.사용자는 뷰를 통해 입력하여 모델에 변화를 줄 수 있다.그리고 의존성 때문에 모델이 다른 모델을 업데이트 해야할 때도 있다.이와 같이 MVC 아키텍처를 사용했을 때변경은 비동기적으로 생길

리덕스 미들웨어를 사용하면 액션이 리듀서로 전달되기 전에 중간에 하고 싶은 작업들을 넣어서 할 수 있다.대부부 서버와의 통신을 위해 사용한다.그 중 가장 많이 사용되고 있는 것이 Redux-thunk이다.dispatch를 할 때 객체가 아닌 함수를 dispatch 할

Thunk 함수를 통해 API를 호출하여 비동기 통신을 할 수 있다.1) thunk 함수 구현2) 리듀서 로직 구현extraReducers 사용: reducers에서 바로 구현되지 않는 기타 Reducer 로직을 구현할 때 시용한다. 주로 thunk 함수를 사용할 때

아주 간단한 DB와 API 서버를 생성해주는 패키지Frontend 개발에 임시적으로 사용할 mock data를 생성하기 위해 사용할 수 있다.공식 문서: https://www.npmjs.com/package/json-server1) 패키지 설치 yarn a

React Query Query 데이터에 대한 요청 Mutation 데이터를 변경 - 추가, 수정, 삭제 Query Invalidation 기존의 쿼리를 무효화 시킨 후 최신화 시킴 가져온 Query는 서버 데이터이기 때문에 언제든지 변경이 있을 수 있다.

순수 JS 라이브러리를 React에 적용하기window. 을 통해 전역으로 접근하여 사용할 수 있다.전역적으로 선언한 모든 객체들은 window 안에 들어있다.window.b()와 같이 사용할 때 똑같은 값이 반환된다.index.html에 api 키 등록플랫폼 등록

열정git PR 및 commit을 자주한 것역할 분담컴포넌트 분리팀 화합프로젝트 아이디어반응형까지 구현한 부분주어진 기간 내 프로젝트 완성계획한 기능 모두 구현API 로딩시간이 발생할 때 UX를 고려한 랜더링이 없었다.코드리뷰 미실시빈폴더, 불필요 콘솔/주석 정리가 안

자바 스크립트에 타입을 부여한 언어타입스크립트는 컴파일 과정이 필요하다자바 스크립트 - 동적 타입 - 런타임에서 동작할 때 타입 오류 확인타입 스크립트 - 정적 타임 - 컴파일 타임 코드 작성 단계에서 오류 확인개발 환경에서 에러 잡는 것을 도와준다오직 개발 환경에서

TypeScript는 JavaScript의 타입을 상속한다.stringnumberbooleannull : null 값을 가진다. undefined : 초기화되지 않은 변수의 기본값을 가진다.symbol : 고유한 상수 값을 나타낸다.functionarrayclasses

사용자의 브라우저 내에서 관리되는 상태 useState 또는 상태 관리 라이브러리를 통해 관리된다.로컬 데이터: 로컬에서만 필요한 데이터 ex) isShown...성능: 네트워크 지연 없이 빠른 상태 변경 가능수명 주기: 페이지 새로고침 및 종료 시 초기화서버에 저장되

버전 지정하여 설치nvm install \[version]가장 최신 버전 설치nvm install node사용할 버전 지정nvm use \[version]디폴트 버전 지정nvm alias default \[version]버전 확인node -v

useDispatch와 useSelector의 타입을 지정해주어야 한다.먼저 store에서 타입을 가져온다.hooks > redux 파일에 생성한 타입을 각각 지정해준다.사용할 때 useDispatch와 useSelector가 아닌, 타입을 지정한 useAppDispa

프레임 워크장점SEO(Search Engine Optimization: 검색 엔진 최적화)를 위한 SSR을 지원한다SSR: Server Side Rendering파일 기반 라우팅을 통해 라우팅을 쉽게 구현할 수 있다.별도의 복잡한 Server 구축 없이 API를 배포할

src > api > todos.js사용할 데이터를 CRUD 할 수 있게 해주는 비동기 함수를 구현하여 export 한다.src > query > useTodosQuery.js방법 1)useTodosQuery의 반환값으로 구현하여 사용하기방법 2)useMutation(

React를 위한 전역 상태관리 라이브러리 중 하나이다.Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다.컴포넌트가 구독할 수 있는 상태의 단위recoi

호출 시그니처 생성타입을 재사용하기 위해 호출 시그니처를 생성하여 사용할 수 있다.속성의 모든 이름을 미리 알지 못하지만 값의 형태는 알고 있을 때 인덱스 시그니처를 사용하여 가능한 값의 Type을 지정할 수 있다.

useState()의 타입을 지정해준다. (값을 괄호안에 넣으면 자동으로 타입이 지정된다.)props를 받는 컴포넌트에서 props의 타입을 지정해준다.setState를 넘겨 받을 경우 타입은 React.Dispatch<React.SetStateAction<

이번에는 react-hook-form을 사용하여 로그인과 회원가입을 구성해보았다.1) 컴포넌트 나누기로그인과 회원가입 페이지를 따로 나눌까 하다가 일단 조건부 렌더링으로 로그인과 회원가입의 UI를 변경하는 것으로 구현해봤다.<Auth /> 페이지 안에 <fo

마이페이지의 게시글과 프로필을 불러오기 위해 React Query를 사용하면서 현재 유저의 데이터를 가져와야 하기 때문에 저장된 user의 id를 가져온 후, useQuery의 queryFn에 id값을 전달하여 데이터를 가져오는 로직을 짜기로 했다.이때 실수한 게 있는

ux를 위해 모달 뒷배경 클릭 시 스크롤이 되지 않도록 설정하였다.모달 커스텀 훅을 만들어서 모달 바깥 영역 클릭 시 모달을 닫을 수 있도록 구현하였다.먼저 ref로 사용할 모달 박스 영역을 설정한다.설정한 모달 ref 값과 함수를 넘겨줘서 useEffect 안에서 렌

스크롤업 버튼 구현

김은비각자 맡은 부분을 끝까지 완성도 있게 구현하려고 노력한 점이동탁역할 분담이 확실하여 각자 맡은 부분을 개발하면서 놓치거나 겹치는 부분이 없는것처음써보는 라이브러리나 아키텍쳐를 써보면서 경험을 한것이다원 :프로젝트를 성공적으로 완료했습니다. 프로젝트로 인해서 우리는

MVP(Minimum Viable Product) : 최소 기능 구현 제품제품의 기능(Feature)에만 집중하기보다는, 실제로 고객들이 중요하다고 생각하는 목표(Goal)를 우선적으로 고려하고 이를 해결하려는 목적에서 MVP를 제작해야 한다.개발자들이 포트폴리오를 위

상태 관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?렌더링과 컴포넌트 간 데이터 전달을 위해 상태 관리를 합니다. React에선 virtual DOM을 사용하여 상태 변경시 변경 사항을 감지하여 UI를 업데이트 하는데 state가 바뀌어야 변경 사항

페이지 구성app > projects > page.tsxNestJS에서 예약된 파일 이름page.tsxloading.tsxerror.tsxlayout.tsx다이나믹 페이지 생성app > projects > \[id] > page.tsx \- id 형식으로 적으면 pro

앱라우터와 페이지라우터의 차이?앱라우터는 페이지가 전환됐을 떄 전환되는 페이지만 리렌더링 된다. \-> 페이지라우터의 경우는 전체 페이지가 다 리렌더링 된다. 앱라우터의 특징 file convention \- layout.js \- page.js \- rou

사용자의 브라우저 내에서 관리되는 상태 useState 또는 상태 관리 라이브러리를 통해 관리된다.로컬 데이터: 로컬에서만 필요한 데이터 ex) isShown...성능: 네트워크 지연 없이 빠른 상태 변경 가능수명 주기: 페이지 새로고침 및 종료 시 초기화서버에 저장되

가장 하위 요소에 해당하는 target요소를 클릭하면 three -> two -> one 순으로 알림창이 뜨는 것을 확인할 수 있다. 이벤트 핸들러가 등록된 중첩된 요소들에서 이벤트가 발생했을 때, 하위요소에서 상위요소로 이벤트가 전파되는 것이다.실제로 이벤트 버블링으

데이터베이스는 supabase, 서버 상태 관리로는 React Query를 사용하고 있는 환경에서 페이지네이션을 구현해보았다.대부분의 CSS 라이브러리는 페이지네이션을 제공하고 있기 때문에 마음에 드는 것으로 선택하여 사용하면 된다. 물론 각각의 사용방법이 다르기 때문

Next.js는 기본적으로 렌더링 할 경우 서버에서 사전 렌더링(pre-rendering) 하는 방식을 사용합니다. HTML을 미리 렌더링 한 후 사용자의 요청이 오면 Chunk 단위로 Javascript를 보내주어 이벤트가 작동하도록 합니다. 이를 Hydrationd

테이블로부터 전체 데이터를 가져와야 할 경우 .from("테이블 이름").select("\*") 를 사용할 수 있다. 이때 select("컬럼")으로 지정하면 해당하는 컬럼 데이터만 가져올 수 있다.조인 테이블 project_tech으로부터 project_id 값이 같

Next.js는 렌더링 작업과 데이터 요청을 캐싱하여 애플리케이션 성능을 향상시키고 비용을 절감합니다. Next.js는 기본적으로 정적으로 렌더링되고 데이터 요청을 캐시 됩니다. 캐싱 동작은 경로가 정적 또는 동적으로 렌더링되는지, 데이터가 캐시되는지 또는 캐시되지 않

Next.js 13버전에서 portal을 사용하여 커스텀 모달(custom alert, custom confirm)을 만들어보았다. 1. layout.tsx 2. 커스텀 모달 레이아웃 및 핸들러 구성하기 useCustomModal hook 만들기 4. hook을

주니어 개발자들의 성장을 위해 손쉽게 아이디어 좋은 프로젝트에 참여하거나 프로젝트에 필요한 팀원을 찾을 수 있고, 개발 능력을 향상시키기 위한 튜터링 및 자료 공유를 할 수 있는 플랫폼주니어 개발자의 성장을 돕는 사이트를 만들자!전체적인 리팩토링/ 최적화DB 쿼리 최

이전에 mui 라이브러리를 사용해서 페이지네이션을 구현했었다.mui 라이브러리를 사용한 페이지네이션 구현💬 아무래도 페이지네이션 하나만을 위해 CSS 라이브러리를 설치해 사용하는 것은 사용에 비해 무거울 수 있다는 생각이 들어 tailwind로 다시 만들어보기로 했다

자바스크립트와 타입스크립트의 가장 큰 차이로는 타입 안정성이 있습니다.자바스크립트는 동적 타입언어로, 변수의 타입을 선언하지 않고 런타임 시에 동적으로 결정합니다. 이 때문에 간편하지만 런타임에 타입 에러가 발견될 수 있습니다.타입스크립트는 정적 타입언어로 변수의 타입

context와 전역 상태 라이브러리 모두 Prop Drilling과 같은 문제점을 해결하기 위해 사용해왔다. 이 둘의 차이와 적절한 사용 방법에 대해 알고 정확히 알고 싶어져서 조사해봤다. >👀 여기서 Prop Drilling의 문제점은 prop을 깊이 전달할 경

디자인에 맞게 체크박스를 커스텀하기 위해 조사를 해봤는데 다른 요소보다 커스텀하는게 더욱 까다로운 것 같았다.label을 사용해서 커스텀 하는 방법과 checkbox 자체를 커스텀하는 방법이 있는데나는 가장 간단한 방법으로 커스텀해보고 싶어서 이 방법 저 방법 찾아보다

지금 진행하고 있는 프로젝트에서 텍스트 에디터로 작성한 글을 리스트에서 태그 없이 보여주기 위해 dangerouslySetInnerHTML를 사용하고 있었다. dangeouslySetInnerHTML? 말 그대로 innerHTML을 위험하게 설정한다 라는 뜻인데 사용하

문제: 클라이언트 컴포넌트 내에 서버 컴포넌트를 넣어 사용할 때 클라이언트에서 구현할 것들이 적절하게 동작하지 않는 문제가 발생하였습니다.https://nextjs.org/docs/app/building-your-application/rendering/comp

프로젝트 SSR을 적용하기 위해 useQuery에서의 SSR 사용 방법에 대해 알아보았다.참고: https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr공식 문서를 참고하면, 서버 구

윈도우 너비에 따라 탭메뉴가 보이지 않아야 하는 상황이 생겼다.resize와 debounce를 이용해서 이를 처리하도록 했다.window 너비에 따른 setState일단 기본적으로 window.innerWidth를 이용해서 아래와 같이 간단하게 state를 변경할 수

Next.js에서 정의하는 미들웨어란 페이지를 렌더링하기 위해 서버 측에서 실행되는 함수입니다. 특정 요청 전에 무언가를 수행할 수 있게 해주는 기능입니다. 미들웨어에서는 Request 객체와 Response 객체에 접근할 수 있으며 이를 활용해 요청 정보를 받아와 부

순서가 없는 중복되지 않는 데이터의 집합배열은 데이터의 순서를 보장하여 저장하고 동일한 값을 여러 번 저장할 수 있지만 Set은 중복된 값을 저장하지 않고 순서가 보장되지 않는다.JavsScript에서 Set은 Class이다.new 키워드와 생성자를 사용하여 객체를 생

Map과 Set은 JavaScript의 자료구조 중 하나로, 데이터의 구성, 검색 및 사용을 객체나 배열보다 효율적으로 처리할 수 있게 한다. Map key-value 쌍을 저장한다. 객체와 비슷하나, 객체와 달리 키로 사용할 수 있는 모든 유형을 사용할 수 있다.

정해진 방향으로 쌓아 올린 형태의 자료구조로 한 곳을 통해서만 삽입, 삭제가 이루어진다.LIFO (Last In First Out): 후입선출삽입 연산: push()삭제 연산: pop()가장 마지막 자료 위에 삽입되고, 가장 마지막 자료가 먼저 삭제된다.이전의 작업 내

React Hook Form의 사용법에 대해 알아보자