본문 바로가기

분류 전체보기

 (290)
로그인&회원가입&로그아웃 기능 구현(lv.4) ⚙ features : 구현해야 할 기능 로그인, 회원가입 페이지를 각각 구현합니다. 아이디와 비밀번호가 모두 입력되지 않으면, API 요청을 보내지 않도록 합니다. 서버의 에러를 alert 또는 직접 만든 모달 등을 통해 유저에게 표시합니다. id가 중복된 경우 존재하지 않는 아이디를 입력한 경우 비밀번호가 잘못된 경우 로그인을 하지 않은 경우에는 로그인/회원가입 페이지만 접근 가능합니다. 로그인을 이미 한 경우 로그인/회원가입 페이지는 접근 할 수 없습니다. 로그아웃 기능을 구현합니다. [구현하지 못한 부분] JWT의 유효시간이 만료된 경우, 유저에게 재로그인을 할 것을 표시합니다. 로그아웃 기능구현(새로고침X, 쿠키 토큰 활용) 새벽 5시 마다, 모든 데이터 초기화 참고사항 mock 서버에서 발급된..
Hooks : useState, useEffect, useReducer, useRef, useMemo, useCallback 1. Hooks란 무엇인가? Hooks는 리엑트 v16.8에 새로 도입된 기능으로 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 도와줍니다. 2. useState 함수 컴포넌트에서 상태 관리를 위한 훅입니다 하나의 상태 값만 관리할 수 있으므로 관리해야 할 상태가 여러개라면 useState를 여러번 사용하면 됩니다. import {useState} from 'react' const [value, setValue] = useState(0) // value: 값 // setValue: 값의 상태를 변경하고 리렌더링됩니다. // useState(): 괄호 안에 기본 값을 넣어줍니다. 3. useEffect 리엑트 컴포넌트가 렌더링될 때마다 작업을 생명 주기(Lifecycle)와 의존성 배열..
컴포넌트 반복 1. 컴포넌트의 반복 이란? 웹 애플리케이션을 만들다 보면 다음과 같이 반복되는 코드를 작성할 때가 있습니다. import React from "react"; function App() { return ( 눈사람 얼음 바람 ) } export default App; 코드에서 다음 형태가 계속 반복되는 것을 볼 수 있습니다. ... 지금은 li 태그 하나뿐이라 그렇게 문제가 되지는 않을 것 같습니다. 하지만 코드가 좀 더 복잡하다면 어떨까요? 코드양은 더더욱 늘어날 것이며, 파일 용량도 쓸데없이 증가하겠죠.이는 낭비입니다. 또 보여 주어야 할 데이터가 유동적이라면 이런 코드로는 절대로 관리하지 못합니다. 2. 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 ..
컴포넌트 스타일링 1️⃣ 일반 CSS : 특징: 전역 범위 일반 CSS는 전역 범위를 가지고 있어서, 스타일이 다른 요소들에 영향을 줄 수 있습니다. 클래스명을 잘 관리하지 않으면 충돌이 발생할 수 있어 유지보수가 어려울 수 있어요. 1) 이름 짓는 규칙 BEM (Block Element Modifier): 요소를 논리적인 블록, 요소, 수정자로 분류하여 클래스 이름 작성. 작명 규칙 지키기: 명확하고 일관된 클래스 네이밍으로 유지보수와 확장성 향상. 장점: 직관성: 기본 CSS 문법으로 쉽게 이해하고 적용할 수 있음. 유연성: 모든 브라우저에서 지원되며, 프로젝트 규모에 상관없이 사용 가능. 성능: 별도의 전처리 과정 없이 브라우저에서 직접 해석되어 로딩 시간이 짧을 수 있음. 단점: 전역 범위: 스타일 충돌 가능성이 ..
Thunk 기본 세팅_setTimeout 3초(+ / -) https://github.com/webcreastory/react-lesson3-thunk.git GitHub - webcreastory/react-lesson3-thunk Contribute to webcreastory/react-lesson3-thunk development by creating an account on GitHub. github.com
[axios&api] http://localhost:3000/ & http://localhost:4000/ 깃헙 주소 : https://github.com/webcreastory/react-axios-lesson3.git // src > axios폴더 > api.js import axios from "axios"; const instance = axios.create({ baseURL: process.env.REACT_APP_SERVER_URL, // timeout: 1, // 0.001초 // 1000, // 1초 }); instance.interceptors.request.use( // 요청을 보내기 전 수행되는 함수 function(config){ console.log('인터셉터 요청 성공!'); return config; }, // 오류 요청을 보내기 전 수행되는 함수 function(error){ c..
이벤트 핸들링(Event Handling) ✅ 1. 이벤트 핸들링(Event Handling)이란? 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 합니다.예를 들어 버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행, 클릭했을 때는 onclick 이벤틀를 실행, Form 요소는 값일 바뀔 때 onchange 이벤트를 실행합니다.리액트에서의 이벤트 시스템은 이러한 HTML에서 DOM요소에 이벤트를 설정하는 방법과 매우 유사합니다.그럼 한번 살펴 봅시다. ✅ 2. 리액트의 이벤트 시스템 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷합니다.아래에서 살펴 봅시다. import React, { useState } from "react"; fun..
ref : DOM에 이름 달기 ✅. ref? 리엑트 프로젝트 내에서 DOM 요소에 직접 이름을 지정할 수 있습니다. HTML id와 유사하지만 재사용되는 컴포넌트 안에서 유일해야하는 id를 중복해서 가진 DOM이 생겨 문제가 될 수 있습니다. ✅. ref 사용 상황 DOM을 꼭 직접적으로 조작해야 할 때 사용됩니다. 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 ✅3. ref 사용 방법 콜백 함수, createRef 두 가지 방법이 있습니다. ✅ 3.1. 콜백 함수를 통한 ref 설정 ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달합니다. this.input=ref}/> this.input은 input 요소의 DOM을 가리킨다. this.input의 input name은 자유..
컴포넌트 분리's 정석 //App.jsx import React from 'react'; import Modal from './components/modal'; import Button from './components/button'; import Input from './components/input'; import Select from './components/select'; function App() { return ( ); } export default App; // Button.jsx import React from 'react'; import { StButton1, StButton2, StButton3, StButton4 } from './styled'; function Button() { }; return ( Bu..
React : Button Modal Input Select 기본기능 구현 // App.jsx import React from 'react' import Button from 'conponents/Button'; function App() { return ( ) } export default App; // Button.jsx import React, { useState, useRef, useEffect } from 'react'; import ReactDOM from 'react-dom'; import styled from 'styled-components'; import Select from './Select'; function Button() { // Button 영역 const btnClick = () => { alert('버튼을 만들어보세요'); }; const btnI..

티스토리툴바