프론트엔드
-
WebSoket(stompJS + React)프론트엔드 2023. 1. 18. 00:54
웹소켓이란? 클라이언트에서 Request를 날리면 서버에서 Response를 한다. 즉, 클라이언트와 서버의 관계는 stateless하다. 하지만, 웹소켓은 statefull protocol로 요청을 매번 보낼 필요 없이 connection을 유지해서 양방향 통신을 가능하도록 만든 기술이다. 즉, connection을 하고 데이터를 주고받다가 connection을 끊기만 하면 된다. 웹소켓으로 최초접속을 할 경우, 클라이언트에서 랜덤하게 생성한 키값을 서버에 전송하고, 서버는 이 키값을 바탕으로 토큰을 생성하여 클라이언트에 Response를 보내어 클라이언트와 서버간의 handshacking을 해야한다. 웹소켓 프로토콜? soket.io 인터넷 익스플로어 구버전의 사용자는 웹소켓으로 작성된 웹페이지를 볼..
-
컴포넌트 성능 최적화(함수형 업데이트, 리덕스)프론트엔드 2022. 8. 18. 14:50
컴포넌트가 리렌더링하는 순간 1. 자신이 전달받은 props가 변경될 때 2. 자신의 stat가 바뀔 때 3. 부모 컴포넌트가 리렌더링 될 때 4. forceUpdate 함수가 실행될 때 컴포넌트 2000개가 리렌더링 된다면? 앱의 성능이 급격히 저하된다. 따라서 컴포넌트 리렌더링 성능을 최적화해줄 필요가 있다. 1. React.memo : 컴포넌트의 props가 바뀌지 않았다면, 리렌더링을 하지 않도록 한다. const TodoList = ({ todos, onRemove }) => { return ( {todos.map((todo) => ( ))} ); }; export default React.memo(TodoList); 컴포넌트를 만들고 감싸주기만 하면 된다. 2. useState의 함수형 업데이..
-
-
케이커 웹/앱 - 4 (파일 업로드, 드래그 앤 드롭)프론트엔드 2022. 8. 14. 23:33
DND 코드,, 이거 구현하려고 일주일이나 걸렸다. 코드 정보가 워낙 없어서 조금 힘들었던😂 이미지 파일 2개를 한 번에 업로드 해야했어서 js파일에 변수명만 다르게 작업을 해봤지만 import { useDropzone } from "react-dropzone"; 에서 제공하는 변수명이 고정되어 있어서 어쩔 수 없이 컴포넌트 2개로 나누어 작업을 진행했다. Fileupload > ShopImgUpload.js import styled from "styled-components"; import React, { useEffect, useState } from "react"; import { useDropzone } from "react-dropzone"; const ShopIntroduceName = sty..
-
케이커 웹/앱 - 3 (사이드바)프론트엔드 2022. 8. 14. 23:25
Sidebar > SidebarData.js export const SidebarDataGuest = [ { title: "CAKER 소개", path: "/about" }, { title: "전체 제안서 리스트", path: "/allproposal" }, ]; //가게-인증o export const SidebarDataBaker = [ { title: "CAKER 소개", path: "/about" }, { title: "전체 제안서 리스트", path: "/allproposal" }, { title: "마이페이지", path: "/caker/mypage" }, ]; //가게-인증x export const SidebarDataShop = [ { title: "CAKER 소개", path: "/abou..
-
케이커 웹/앱 - 2 (마이페이지)프론트엔드 2022. 8. 14. 12:47
CakerMyPage.js import TopBar from "../../components/Common/Sidebar/TopBar"; import styled from "styled-components"; import PageTitle from "../../components/Common/PageTitle"; import { Link } from "react-router-dom"; import { useState, useEffect } from "react"; import http from "../../common/http"; import { useAppSelector } from "../../store"; const ShopCakerMyPage = () => { const [Mydatas, setMy..
-
케이커 웹/앱 - 1 (가게 정보 등록 및 수정, 가게 정보 미리보기)프론트엔드 2022. 8. 14. 10:37
const.js 상수 데이터 모음 default 생략 시, 한 파일에 여러 export 구현 가능 export const SHOP_DATA = [ { key: "name", height: "60px", placeholder: " 정확한 상호명을 입력해주세요.", keyword: "가게 이름", }, { key: "readme", height: "125px", placeholder: " 자신의 가게를 자유롭게 소개해주세요! (최대 300자)", keyword: "가게 소개", }, { key: "phoneNumber", height: "60px", placeholder: " ex. 02-0000-0000", keyword: "전화번호", }, { key: "address", height: "60px", p..