yh-jeon Full stack

[리액트의 특징]컴포넌트를 기반으로 UI를 표현한다.화면 업데이트 구현이 쉽다.화면 업데이트가 빠르게 처리된다.[컴포넌트를 기반으로 UI를 표현한다.]컴포넌트 - 화면을 구성하는 요소, UI를 구성하는 요소 각각의 JAVASCRIPT 파일로 모듈화하여 레고 블록처럼 만들 수 있음 ⇒ 중복 코드를 재사용 가능!페이지의 모든 요소를 컴포넌트화하여 생성 → 이후 불러와서 사용[화면 업데이트 구현이 용이]업데이트란? 사용자의 행동(클릭, 드래그)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용 하는 것렌더링? UI 요소를 화면에 그려내는 것을 말함 선언형 프로그래밍 : 과정은 생략하고 목적만 간결히 명시하는 방법 ex) 식당에 가서 주문하는 것처럼 “토마토 파스타 하나 주세요” 처럼 말하고 토마토 파스타 만드는..

마지막 주차에는 구내식당 ui 화면을 구현하였습니다. 또한, 이제까지 구현하였던 코드들을 정리하여 합치는 시간을 가졌습니다.아래에는 구현한 구내식당 ui 화면 및 이제까지 구현한 파트와 시연 동영상입니다.   수정된 로그인 ui 화면 구현 tailwindcss로 구현 완료로그인을 할 때, 이메일 주소에 @가 들어가지 않으면 경고 메시지를 보여주면서 로그인 주의사항을 표시비밀번호를 입력할 때, 비밀번호가 6자리 이상이 되지 않으면 경고 표시를 보여주면서 비밀번호는 6자리 이상으로 작성하도록 알림 설정 기능 추가로그인 버튼을 사용자가 클릭하면 아래의 빨간 글씨로 이메일 주소와 비밀번호가 나타나게 되면서 사용자의 로그인 정보를 표시하도록 설정회원 가입 및 아이디 / 비밀번호 찾기를 마우스로 올렸을 때, hov..

함수전개 연산자(Spread 연산자, ...)const a = [1,2,3]const b = [4,5,6]console.log(...a) 1,2,3 -> 대괄호가 없어짐!console.log(1,2,3) 1,2,3 -> 아래의 결과와 위의 결과가 동일함! 😎데이터 병합 메서드const c = a.concat(b) console.log(c); 1,2,3,4,5,6 이 병합되어 출력const d = [...a,...b] -> 1,2,3,4,5,6 으로 바뀌게 됨😎console.log(d) [1,2,3],[4,5,6] -> [1,2,3,4,5,6] 으로 배열이 출력됨{전개 연산자}const a = {x: 1, y: 2}const b = {y: 3, z: 4}const c = Object.assign({..

변수(변하는 수)와 상수(변하지 않는 수)let (변수) - 값을 변할 수 있음let age = 27; age는 변수 선언, 27은 변수의 값을 초기화 age = 30; //변수는 언제든 선언하여 값을 재할당할 수 있기에, 초기화 하지 않고 선언하여도 상관없습니다. let age; // undefined로 값이 초기화된 상태 age = 30; let age = 25; // 중복된 이름으로 사용 불가능! [오류]const (상수) - 초기화하고 값을 변화 시킬 수 없음const birth; // 상수는 초기화 없이 작성할 수 없음 [오류] 💡 [변수 명명 규칙(= 네이밍 규칙) ] $ , _ 제외한 기호는 사용 불가능 (위치 상관없음) ex) let $_name (가능) 변수의 이름은 숫자로 시작할 수 없..

- 로그인 화면 부분 '회원가입' 클릭 시 회원가입 모달 창 ui 구현 및 열고 닫기 기능 추가- 회원 가입 step 2, 3 화면 ui 구현 - 구내 식당 로딩 중 및 로딩 성공 이후 화면 ui 홈페이지 작업 진행 중 아래는 진행한 상황에 대한 결과물 및 사진입니다.  이제까지 구현한 내용 코드 : https://github.com/JeonYongHak/KKongGui/tree/feature/OFF-111

주어진 피그마 디자인을 보고 수정된 로그인 화면 ui를 구축 완료하였습니다. 또한 로그인 상태 관리 및 유효성 검증을 위해서 react hook form을 이용하여 로그인 화면에 유효성 검증 기능을 추가완료하였습니다. 이번 주차에는 로그인 화면에 비밀 번호 및 인증 키에 대한 경고를 주는 등 로그인 화면에 대한 검증 기능과 상태 업데이트에 대한 기능을 많이 추가해 놓았습니다.다음은 구현한 로그인 화면 ui와 관련 영상입니다.  수정된 로그인 ui 화면 구현 tailwindcss로 구현 완료로그인을 할 때, 이메일 주소에 @가 들어가지 않으면 경고 메시지를 보여주면서 로그인 주의사항을 표시비밀번호를 입력할 때, 비밀번호가 6자리 이상이 되지 않으면 경고 표시를 보여주면서 비밀번호는 6자리 이상으로 작성하도..

데이터 통신리액트에서 데이터 통신을 할 때는 axios 라이브러리나 fetch API를 사용하여 처리합니다. 여러가지 편의 기능은 axios 라이브러리가 더 뛰어나지만, 별도의 라이브러리를 설치해서 사용해야 한다는 단점이 있습니다. 따라서 일반적인 fetch API를 사용하여 데이터 통신을 하는 방법을 살펴봅니다.사용법기본리액트에서 데이터 통신은 보통 컴포넌트 내부에서 useEffect() 훅을 사용하여 처리하는 경우가 대부분입니다.import { useEffect, useState } from "react";import MovieItem from "./MovieItem";const DataFetch = () => { const [url, setUrl] = useState(""); const [dat..

useContext정의리액트의 useContext는 리액트 훅 중 하나로, 컨텍스트(Context)를 쉽게 사용하게 해주는 훅입니다. useContext를 사용하면 컨텍스트 API를 통해 전역적으로 상태를 관리하거나, 컴포넌트 트리에서 prop drilling을 피할 수 있습니다.zustand전역 상태 관리의 대표적인 라이브러리import { create } from "zustand";type CountStore = { count: number; increment: () => void; decrement: () => void; reset: () => void;};export const useCountStore = create((set) => ({ count: 0, increment: () =>..

useCallbackuseCallback 훅은 함수형 컴포넌트에서 함수를 메모이제이션 하는 데 사용됩니다. 여기서 메모이제이션이란, 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장하여 사용함으로써 동일한 계산의 반복 수행을 제거하여 성능 향상을 도모하는 기술을 말합니다.문법const cachedFn = useCallback(fn, dependencies)예제ex1)import React, { useState } from "react";const functionSet = new Set();const App = () => { const [count, setCount] = useState(0); const [count2, setCount2] = useState(0); ..

useId리액트 18에서 추가 된 중복되지 않은 고유한 값을 생성할 때 사용하는 훅입니다.문법const uuid = useId();사용법import { useId } from "react";const App = () => { const uuid = useId(); return ( );};export default App;useTransition리액트 18에서 추가된 훅으로 동시성 모드(Concurrent Mode)에서 제공하는 훅입니다. 동시성 모드란, 리액트가 작업들을 무조건 순차적으로 처리하는 것이 아니라 각 작업에 우선 순위를 지정하여 동시 다발적으로 처리하는 개념을 말합니다.문법const [pending, startTransit..