종구's Tech Blog

UseEffect 란?React Hooks 의 기능 중 하나이다.컴포넌트가 렌더링된 후 부수적인 작업(side effect) 을 수행할 수 있도록 도와준다.함수 컴포넌트 내에서만 사용할 수 있다.부수 효과란? (side effect)데이터 가져오기 (fetch)이벤트 리스너 추가  / 제거하기타이머 설정하기UseEffect 기본 문법import React, { useEffect } from 'react';function MyComponent() { useEffect(() => { // 실행할 코드 return () => { // 정리(clean-up) 코드 -> 사용하는 useEffect 를 언마운트 시 제거하여 메모리 정리 }; }, [// 의존성 배열 : 이 배열에 포함된 값이 변경될..

React Hooks 란?함수형 컴포넌트 ( function / 익명함수 const ??? = () => {} ) 에서도 상태 관리와 생명주기 메서드를 사용할 수 있게 해주는 기능React 16.8 버전부터 도입간결한 코드 작성이 가능하게 도와준다. 주로 쓰이는 React HooksuseState : 컴포넌트의 상태(State) 를 선언하고 관리할 수 있다.React : useState란? import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( 현재 카운트: {count} setCount(count + 1)}>증가 );}버튼 클..

UseState 란?React 에서 데이터의 상태를 관리하기 위한 객체컴포넌트의 동작과 화면에 표시되는 데이터를 동적으로 업데이트 할 수 있게 함. State의 특징내부적으로 관리 : 컴포넌트 내부에서 생성 및 관리되며, 다른 컴포넌트에서 접근 불가능동적 업데이트 : State 값이 변경되면 해당 컴포넌트 -> 하위 컴포넌트들이 자동으로 리렌더링불변성 : 직접 수정하지 않고 항상 React 에서 제공하는 함수를 사용해 업데이트 (ex. setState) State는 언제 필요할까?동적인 사용자 인터페이스를 만들기 위해 필요ex) 카운트 버튼, 실시간으로 변하는 값import React, { useState } from 'react';function Counter() { const [count, setC..

CRP, Critical Rendering Path (브라우저 렌더링 과정)HTML > DOMHTML 문서를 일종의 객체 모델 (Object Model)로 알기 쉽게 변환하는 과정 HTML (Hyper Text Markup Language) - 하이퍼 텍스트 마크업 언어 웹 페이지의 구조를 정의하기 위한 마크업 언어 Hello, World! DOM (Document Object Model) - 문서 객체 모델HTML 문서를 브라우저가 이해할 수 있는 객체 트리 구조로 변환한 것.- html - head - title - body - h1CSS > CSSOM CSS 스타일 시트를 브라우저가 이해할 수 있는 객체 트리 구조로 변환한 것 (HTML > CSSOM 과정과 비슷하다고 ..

React의 기술적인 특징컴포넌트를 기반으로 UI를 표현한다.화면 업데이트 구현이 쉽다.화면 업데이트가 빠르게 처리된다.컴포넌트(Component) 란?컴포넌트 = 구성요소 > 화면을 구성하는 요소, UI를 구성하는 요소리액트에서는 페이지의 모든 요소들을 "컴포넌트"의 단위로 모듈화해서 개발하기 때문에여러 페이지에서 공통으로 사용하는 요소들의 유지보수가 쉽다.선언형 프로그래밍 / 명령형 프로그래밍선언형 프로그래밍 : 과정은 생략하고 목적만 간결히 명시하는 방법 (React 활용 구현)명령형 프로그래밍 : 목적을 이루기 위한 모든 일련의 과정을 설명하는 방법 (Javascript 만으로 구현)리액트에서는 각 컴포넌트의 상태를 저장하는 State라는 특수한 변수를 저장할 수 있다.State 값이 바뀌면 즉각..

*** 웹3에서 가장 중요한 것 : 함수, 변수, 조건문, 반복문, (배열) *** 01. 함수: 같은 작업을 필요할때 필요한 곳에서 (스코프를 딱 한번) 사용 가능  필요한 값을 바꿔가면서 사용 가능 : (매개변수)  같은 이름으로 함수 생성 금지( 같은 이름으로 여러개면 코드상 마지막에 읽히는 함수가 동작함 )=== 함수명 생성 규칙 ( 변수와 동일 ) ===- 첫번째글자 영문, $, _ 만 가능- 예약어 금지- 대소문자 금지- 띄어쓰기 금지- 같은이름 금지=== 함수 종류 ===1 ) 선언적 함수 : 함수명이 있는 함수 (호이스팅 가능)          function 이름( ) { }2 ) 익명함수 : 함수명이 없는 함수 (호이스팅 불가)          function( ) { }3 ) 화살표 ..

01. 조건문 : if- 조건을 명시해놓고 조건이 참인 경우에만 실행되는 코드 ( 중첩 가능 )   01. if ( 조건식 )         - 단독으로 사용 가능         - 조건식이 참일때만 실행되는 코드         - 중첩 가능   02. else if ( 조건식 )         - 단독으로 사용 못함 ( 위에 있는 조건식이 거짓인 경우, 내 조건식을 확인해서 참인 경우 실행 )         - 조건이 여러개가 필요하면 else if() 문을 무한대로 생성 가능         - 중첩 가능   03. else          - 단독으로 사용 못함 ( 위에 있는 조건식이 거짓인 경우 실행됨 )         - *조건식이 없음         - 중첩 가능let num = 10;if(nu..

01. JAVA Script 기본- 자바스크립트 위치 (어디든 가능)1. 내부: 2. 외부: - 주석 -// : 한줄 주석/**/ : 범위 주석- js는 기본적으로 파일을 로드하고 실행해야 다음 코드를 실행한다.로드를 실패하는 파일, 시간을 잡아먹는 js 구문이 있다면 다음 코드가 아예 동작하지 않고 멈춤 = 로드 지연 or 런타임 오류 대안으로 async 와 defer 가 있음 - async - 장점 : 스크립트를 다운받는 시간이 별도로 없기때문에 상대적으로 기본 js 보다 로드가 빠름 단점: script가 다 받아지면 DOM 을 멈추고 스크립트 구문들을 실행하기 때문에 어차피 오래걸리는 스크립트가 있을 시 기본 로드와 비슷함 - defer - 외부파일이 여러개면 DOM 그려지는 동안 다 불러와..