Daily Coding Daily Coding

📌 비동기 작업 서버의 API를 이용할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리한다. 비동기적으로 작업을 처리하면 웹 애플리케이션이 멈추지 않기 때문에 동시에 여러가지 요청을 처리할 수 있다. 예시) setTimeout 함수 setTimeout() 실행 시점에 3초 동안 멈추는 것이 아니라, 일단 코드가 위부터 아래까지 다 호출되고 3초 뒤에 printMe() 함수가 호출된다. function printMe() { console.log("Hello World!"); } setTimeout(printMe, 3000); console.log("대기 중..."); /* 대기 중... Hello React!..

1. 컴포넌트 종류 함수형 컴포넌트 import React from 'react'; funcion App() { return ... } export default App; 클래스형 컴포넌트 import React, { Component } from 'react'; class App extends Component { render() { ... } } export default App; 🧐 두 방식의 차이점 함수형 컴포넌트는 메모리 자원, 결과물의 파일 크기 등이 클래스형 컴포넌트보다 작다는 장점이 있다. But, 함수형 컴포넌트는 state와 라이플 사이클 API 사용이 불가하다 -> React v.16.8 이후 Hooks 기능으로 사용 가능해짐 2. 코드 작성하기 함수형 컴포넌트 function 키워드..

[React] JSX에 대해 알아보기 JSX란? - A synyax extension to JavaScript (자바스크립트의 확장 문법) - JavaScript + XML/HTML const element = Hello, world!; JSX의 역할 - XML, HTML을 JavaScript로 변환(createElement 함수 사용)하는 과정을 거친다 /* JSX를 사 zooozoo.tistory.com 1. 감싸인 요소 리액트 컴포넌트에서 요소 여러 개는 꼭 하나의 요소로 감싸주어야 한다. (root 필요) 이유🧐 Virtual DOM에서 컴포넌트 변화를 효율적으로 감지할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다. 2. 자바스크립트 표현 JSX 내..

✅ 회원가입 페이지 구현 [1 Week] - 가입 폼 페이지 컴포넌트화 - react router 적용하기 [2 Week] - 디자인 적용 # 첫 로그인 화면 버튼 클릭 시 모달 컴포넌트 띄우기 Modal.js - styled-components CSS-in-JS 라이브러리를 설치해서 버튼 디자인을 했다. import { useState } from 'react'; import ModalBasic from './ModalBasic'; import styled from 'styled-components'; // 모달을 노출하는 페이지 function Modal() { // 모달창 노출 여부 state const [modalOpen, setModalOpen] = useState(false); // 모달창 노..

똑같은 입력 Form을 복붙해야 하는 상황에서 특정 키워드만 바꾸고 싶을 때! ✨command + D 키를 누를 때마다 커서가 깜빡거리는 곳 이후부터 키워드 단위로 선택이 되서 한번에 바꿀 수 있다!

📕 JSON Web Token 인증에 필요한 정보들을 암호화시킨 JSON 토큰 웹표준으로서, 두 개체에서 JSON 객체를 사용하여 가볍고 자가수용적인(self-contained) 방식으로 정보를 안정성 있게 전달 JWT 기반 인증은 JWT 토큰(Access Token)을 HTTP 헤더에 실어 서버가 클라이언트를 식별하는 방식 📌 JWT 사용 순서 클라이언트 사용자가 아이디, 패스워드를 통해 웹서비스 인증 서버에서 서명된 JWT를 생성하여 클라이언트에 응답으로 돌려줌 클라이언트가 서버에 데이터를 추가적으로 요구할 때 JWT를 HTTP Header에 첨부 서버에서 클라이언트로부터 온 JWT를 검증 📌 JWT 구조 WT는 ‘.’을 구분자로 3가지의 문자열로 되어 있다. aaaaaa.bbbbbb.cccccc 헤..

📌 lazy loading 필요 시점까지 객체의 초기화를 연기시키기 위해 컴퓨터 프로그래밍에 흔히 사용되는 디자인 패턴의 하나이다. 페이지를 불러오는 시점에 당장 필요하지 않은 리소스들은 나중에 불러오자! 📌 React image placeholder 대역폭 사용량을 줄이고 사용자 경험을 개선하며 페이지 로딩 속도를 높이기 위해 뷰포트 외부에서 이미지 로드를 연기한다. 1️⃣ 코드 추가 이미지를 지연로딩 하는 방법 중 가장 쉬운 것은 img 요소 안에 loading=" lazy" 속성을 추가하는 것이다. 2️⃣ 이미지 블러 처리 라이브러리 사용 React Lazy Load Image Component 자바스크립트 라이브러리 사용 react-lazy-load-image-component React Comp..

1️⃣ DOM 요소 생성, 삭제, 이동 방법 - DOM 요소 생성 1. 새로운 element를 생성한다. createElement 2. 새로운 element를 가지는 부모 element를 선택한다. querySelector 3. 부묘 오소에 새로운 element를 삽입한다. append - DOM 요소 삭제 1. 삭제할 element를 선택한다. querySelector 2. 삭제한다. remove - DOM 요소 이동 부묘 오소를 선택한 후 이동한다. 이동할 element.parentElement.append(이동할 element) // 📌 Add an element, HTML 새 요소 삽입 // 1. Create the new element // 특정 이벤트가 발생했을 때 요소를 추가하고 싶은 경우 ..