React
1.[SeSAC Front-end] React로 간단한 할일 앱 만들기😎
지금부터 리액트 기초를 익히고 나서 많은 사람들이 만들어보는 간단한 todo 앱을 만들어 보도록 하겠습니다. todo 앱을 만드는데 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨서 html 태그들을 그려주는 작업을 해보겠습니다.
2.[SeSAC Front-end] React Router v5 -> v6 빠른 정리
이번 장에서는 'React Router v6 튜토리얼'을 참고하여 리액트 라우터 5버전에서 6버전으로 변경된 부분을 이미지로 이해해보겠습니다.라우터란 무엇인지 알아보겟습니다.폴더 구조를 확인하고, 각 컴포넌트 내부 구조를 알아보겠습니다.라우팅이란 출발지에서 목적지까지의
3.[SeSAC Front-end] [React] state & event 기초 실습하기
이번 시간에는 React에서 state와 event를 실습할 수 있는 문제를 풀어보도록 하겠습니다.React에서 변수를 저장할 때 useState를 이용해서 저장하고, state값을 바꿔주는 함수를 이용해서 state값을 바꾸는 방식을 살펴보겠습니다.부모 컴포넌트에서
4.[SeSAC Front-end] [React] Hooks 실습하기 (useState, useEffect, useRef)
React의 Hook 중에 useState와 useEffect, useRef를 이용한 실습 문제를 풀어보도록 하겠습니다.문제를 풀면서 useEffect의 사용방법을 살펴보겠습니다.useRef를 이용했을 때 어떠한 효과를 누릴 수 있는지도 알아보겠습니다.변수를 저장할 s
5.[SeSAC Front-end] [React] Hooks 알아보기(useReducer, useMemo, useCallback)
useReducer()는 컴포넌트의 상태를 관리할 때 사용하는 Hooks 입니다.특징컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리 가능합니다.다른 컴포넌트에서도 해당 로직을 재사용 가능합니다.useReducer() 사용 방법state : 컴포넌트에서 사용할 상태 값d
6.[SeSAC Front-end] [React] useReducer 실습문제 풀기
React에서 useState 대신 상태관리를 할 수 있는 useReducer를 이용한 실습문제를 풀어보겠습니다.실습 문제를 풀면서 useReducer를 어떻게 사용하는지 알아보겠습니다.😀CSS styling은 본인의 취향에 맞게 적용하시면 됩니다. 없어도 무방합니다
7.[SeSAC Front-end] [React] Context 알아보기
리액트에서 Context를 사용해서 상태관리 할 수 있는 방법을 알아보도록 하겠습니다.Context는 컴포넌트가 중첩되어 있는 상황에서 상태 값을 전달하기 편리합니다.예시를 살펴보면서 Context 개념에 대해서 자세히 보겠습니다.어플리케이션에서 전반적으로 사용할 값을
8.[SeSAC Front-end] React Router
이번 장에서 리액트 라우터에 대해서 알아보겠습니다.라우팅에 대한 자세한 설명과 예시를 보면서 이해하도록 하겠습니다.초기 웹 사이트각 화면에 해당하는 웹 문서를 일일이 제작서버에 저장된 값을 화면에 반영하는 동적인 웹 문서 도구 개발서버 사이드 렌더링(Server Sid
9.[SeSAC Front-end] Firebase (with React)
이번 장에서는 Firebase에 대해서 알아보겠습니다.Firebase를 이용해서 프로젝트를 생성하고 어플리케이션을 등록하겠습니다.그리고 React에서 DB를 연결하고 데이터를 조작해 보겠습니다.구글의 모바일 및 웹 어플리케이션 개발 플랫폼입니다.백엔드 서버 기능을 클라
10.[SeSAC Front-end] [React] 과일 데이터 베이스 만들기 (with Firebase)
이번 장에서는 아래에 게시된 과일 데이터 베이스를 만들어 보겠습니다.firebase를 이용해서 서버데이터를 저장하고 react로 가져와서 사용하는 작업을 하겠습니다.저는 CSS 파일은 생성해 놓았지만, CSS 코드는 적용하지 않았습니다. 기호에 맞게 CSS를 적용하시면
11.[SeSAC Front-end] [React] Input value 관련 오류(defaultValue, Controlled Component)
value에 값을 지정하면 input 태그가 읽기 모드가 됩니다. 더 이상 input 태그 내용을 수정할 수 없게 됩니다. 만약에 초기값을 두고 input 태그의 데이터를 수정하려면 defaultValue 속성을 사용하라고 합니다.오류나 경고문 없이 input 태그 안
12.React TypeScript (To-do App)
React에서 TypeScript를 적용해서 Todo 앱을 만들어 보겠습니다. 본론에서는 파일마다 코드가 바뀌는 스냅샷을 두었습니다. 정리란에는 각 파일의 코드를 넣었으니 코드를 참고하면 좋습니다.
13.[SeSAC Front-end] react-redux & redux-toolkit
이번 장에서는 react에서 react-redux과 redux-toolkit을 사용하는 방법을 알아보도록 하겠습니다.이 모듈을 사용하면 데이터를 중앙에 저장할 수 있습니다.또, 원하는 컴포넌트에서 원본 값을 가져와서 사용할 수 있고 조작할 수 있게 됩니다.지역에서 데이
14.Redux-toolkit thunk로 비동기 상태 처리하기
redux-toolkit을 이용해서 비동기 데이터 처리하는 방법에 대해서 알아보겠습니다.비동기 처리는 createAsyncThunk함수를 사용합니다. 이 함수를 사용하는 방법을 알아보고 어떤 기능이 있는지 확인해 보겠습니다.
15.[SeSAC Front-end] React MUI 너무 쉬워서 눈물이 납니다😭
자주 사용하는 기능 몇 가지 중에 테이블만 확인할 것입니다. 다 읽는데 정확히 5분 걸립니다. 갑시다.
16.글자 타자기 효과 내는 방법 10초만에 만들어보기(with React)
개인 포트폴리오 사이트를 만들면서 글자에 타자기 효과를 주고 싶은 경우가 종종 있습니다.이때 이번에 소개할 라이브러리를 사용하면 쉽게 타자기 효과를 낼 수 있습니다.현재 리액트 최신 버전인 18버전에서도 잘 동작하는 것을 확인했습니다. 그러므로 손쉽게 타자기 효과를 사
17.Firebase Realtime Database CRUD 이거 보면 해결! (with React)
Firebase Realtime DB를 통해서 CRUD하는 작업을 해보겠습니다.시작하기 전에는 어려워서 시도 조차 못할거라는 두려움이 있습니다.하지만 생각보다 어렵지 않습니다. 아래 내용만 잘 따라가면 Firebase Realtime DB로 CRUD 쉽게 가능합니다.출
18.Firebase Authentication (with React)
Firebase Auth를 사용하여 사용자 아이디를 데이터 베이스에 저장해 보도록 하겠습니다.먼저 Firebase 프로젝트를 생성하고, React 프로젝트에서 Firebase DB에 데이터를 저장하겠습니다.프로젝트 설정을 클릭한 후 하단에 있는 firebaseConfi