내일배움캠프_React_7기_TIL

pwd print working directory, 현재 작업중인 디렉토리ls / ls -alist, 디렉토리(directory)에 있는 내용(디렉토리, 파일 등)을 확인\-a 시 숨겨진 파일도 모두 볼 수 있음cd chage directory, 확인된 폴더로 이동 가

1주차 팀 프로젝트 - 팀 소개 페이지에 추가하게 될 방명록 기능 구현을 위해, firbase에서 지원하는 Realtime Database를 사용하여 구현을 테스트 했다.우선 firebase 프로젝트를 생성 후 프로젝트에 내 앱을 추가한다.프로젝트 생성 후 프로젝트 설

이전에 처리를 끝마치지 못했던 이미지 관련 처리를 fireBase의 Storage를 사용하여 해결했다.

Create와 Read기능은 순탄하게 잘 진행이 되었는데, U, D 기능에서 문제가 생겼다.선택된 멤버의 정보만을 업데이트 할 수 있도록 기능 구현이건 트러블은 아니였고, 구현해야 할 기능이였으나 기록해보자면snapshot.key 로 받아온 멤버 데이터의 고유 ID를

1주간 진행한 미니 프로젝트 '팀 소개 페이지' 관련 정리 및 회고를 하고자 한다

1주차 강의 정리.

ES6 신규 문법 , Map & Set

수학 못하면서 답지 죽어도 안보던 아이는 커서 알고리즘 한문제를 두시간 붙잡는 어른이 된다.

var, let, const 의 차이 명확화 / &&, || 연산자와 truthy, falsy 개념 / 알고리즘 - sort()함수 활용법

Vanilla JS 와 TMDB에서 제공하는 영화 API를 사용하여 영화 검색 사이트를 만들고자 한다.어제부터 작업을 시작하려고 했는데, TMDB 회원가입 이슈 (인증메일외않줌 이슈;)로 인해 오늘부터 작업을 시작하게 되었다우선 Git Repository 생성하고 Gi

클래스가 존재하지 않을 경우, 지정한 클래스가 요소의 클래스 목록에 없으면, toggle() 메서드는 그 클래스를 추가하고 존재하지 않는 경우 클래스 제거

동기 - 요청을 보낸 후 결과를 기다리는 방식, 하나의 작업이 끝나야만 다음 작업이 시작된다.비동기 - 요청을 보낸 후 응답을 기다리지 않는 방식, 다른 작업을 동시에 처리할 수 있다.js는 Non-Blocking I/O 를 가진 비동기를 지원하는 언어이다.Blocki

이번에 기록할 구현 기능은1. 제목 검색 기능(실시간 검색) 2. 최근 검색어 히스토리 남기기 기능

외로운 개인 프로젝트의 길. 마지막 메인 기능 - 북마크 구현 완료

Event란? 프로그래밍한 코드 내에서 발생하는 행동(사건) >이벤트 예시 유저가 어떤 요소를 선택하거나 어떤 요소 위에 커서를 올려둡니다(hover). 유저가 키보드에서 키를 선택합니다. 유저가 브라우저 창의 크기를 재조정하거나 닫습니다. 웹 페이지가 로딩을 완료했

JavaScript 문법 개인 과제 피드백까지 왔으니 종료 및 회고를 좀 작성해보고자 한다.

React 입문 2주차 정리.

React 입문주차 개인과제 Olympic Medal Tracker(메달 집계 관리 애플리케이션) - 로직구현

함수 메모제이션 useCallback

컴포넌트 분리 기준과 디자인 패턴, 디자인 시스템에 관한 수업 정리

리덕스란, “중앙 state 관리소”를 사용할 수 있게 도와주는 패키지(라이브러리) 이다.리덕스는 애플리케이션의 상태 관리를 효율적으로 하기 위해 사용된다. 상태 관리가 복잡해질수록 컴포넌트 간의 데이터 전달이 어려워지며, 이로 인해 코드의 가독성과 유지보수성이 떨어

“An application architecture for React utilizing a unidirectional data flow.”Flux란, 단방향 데이터 흐름을 활용한 리액트용 애플리케이션 아키텍쳐 (데이터 흐름 정의 방법론/패턴)Facebook이 React

effects란, 컴포넌트가 렌더링 될 때마다 실행되는 특정 작업(Side effect)을 말한다.

Hook은 React 16.8부터 새로 추가된 기능으로, 기존의 클래스 기반 코드 없이도 상태 값 관리와 여러 React 기능을 사용할 수 있게 해주는 함수이다.

라우팅이란, 사용자의 요청을 적잘한 페이지나 리소스를 반환해주는 방법이다.

배포 링크 : https://pokemon-dex-theta.vercel.app/디자인은 pokerogue의 색감을 참고해서 조금 바꾸고, 폰트도 1세대의 느낌을 비슷하게 주기 위해 픽셀 폰트로 변경했다.redux로 상태관리까지 한 상태의 폴더 구조이다. co

영화 정보 사이트를 주제로 Context, 커스텀훅, 라우터를 실습했다. 실습하면서 배운 내용들을 정리하고자 한다.

CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 보안상의 이유로 서로 다른 출처(origin) 간의 리소스 공유를 제어하는 메커니즘이다.

클린코드의 핵심은 의미 있는 변수명을 사용하는 것에서 시작한다!

데이터베이스(Database)는 데이터를 체계적으로 저장하고 관리하는 시스템이다. 데이터베이스는 대량의 데이터를 효율적으로 관리하고 처리할 수 있는 기능을 제공한다.

Promise.all은 JavaScript에서 제공하는 Promise 메서드로, 여러 개의 Promise를 병렬적으로 처리하고, 모든 Promise가 성공적으로 완료되었을 때 하나의 결과를 반환한다.

Fetch fetch란 브라우저 내장 함수로, 네트워크 요청을 보내는데 사용된다 Promise 기반으로 동작하며, 브라우저가 제공하는 표준 API이다. > "Promise 기반으로 동작한다?" ` fetch`는 항상 Promise 객체를 반환한다. 이 Prmoise의 상태에 따라 성공 또는 실패한 결과를 제공. fetch의 특징 내장 API이기 때문에 추...

TanStack Query (구 React Query) 는 React 애플리케이션에서 서버 상태를 효율적으로 관리하기 위한 라이브러리이다.

Zustand는 React 애플리케이션에서 상태 관리를 간단하고 직관적으로 처리할 수 있도록 도와주는 경량 상태 관리 라이브러리이다.

심화주차 개인과제 트러블슈팅

오늘의 기능구현은 프로필 수정. 작업 과정 정리

TanStack Query의 useInfiniteQuery 훅을 사용하여 페이지네이션/무한 스크롤 기능을 구현했다.

타입스크립트의 기본 개념!

내일배움캠프 react7기 - 주특기 플러스주차 과제 트러블슈팅

Next.js 라우트 핸들러(Route Handlers)