useState 훅을 사용할 때, 상태를 업데이트하는 데에는 두 가지 방식이 있다. 하나는 값으로 직접 상태를 업데이트하는 방식이고, 다른 하나는 이전 상태를 기반으로 새로운 상태를 계산하는 함수를 사용하는 방식이다. 후자를 함수형 업데이트라고 한다. 함수형 업데이트 // 기존에 우리가 사용하던 방식 setState(number + 1); // 함수형 업데이트 setState(() => {}); 위 코드와 같이 setState의 ( ) 안에 수정할 값이 아니라, 함수를 넣고, 인자에서는 현재의 state을 가져와서 변경할 수 있다. // 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것 입니다. setState((currentNumber)=>{ return currentNumber + ..
JS
1. 불변성 불변성이란 메모리에 있는 값을 변경할 수 없는 것. 자바스크립트의 데이터 형태중에 원시 데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성 없습니다. 2. 변수를 저장하면 메모리에 어떻게 저장될까? num1과 num2는 변수의 이름은 다르지만, 같은 메모리 공간을 바라보고 있다. let num1 = 1; let num2 = 1; console.log(num1 === num2); // true //같은 메모리 공간을 참조하고 있다는 의미 데이터를 수정해도, 원시 데이터는 불변성을 가지고 있다. 기존 메모리에 저장 되어 있는 1이라는 값은 변하지 않고, 새로운 메모리 저장 공간에 2가 생기고 num1이 그 공간을 참조하는 것이다. 하지만 원시 데이터가 아닌 값. 객체, 배열..
스타일드 컴포넌트(Styled Components)는 리액트(React) 애플리케이션에서 사용되는 자바스크립트 라이브러리 중 하나로, 컴포넌트 기반 스타일링을 위한 솔루션 중 하나. 스타일드 컴포넌트를 사용하면 자바스크립트 파일 안에서 컴포넌트와 함께 스타일을 정의할 수 있다. 1. 설치 npm install styled-components yarn add styled-components 2. 사용 - 기본 스타일드 컴포넌트 작성 헬로우 //스타일컴포넌트라는 표시로 St + 명명 const Span = styled.span` //백틱 안에 CSS를 작성 ` 헬로우 //form 태그와 같이 특수한 태그의 경우, 기능을 잃어버릴 수도 있음 //그때는 이렇게 속성을 다시 넣어주기 - 조건부 스타일링 부모 컴포..
1. 기본 타입 지정 let name : type = 내용 기본적으로 타입을 지정할때는 변수 옆에 : 을 찍은 후 type을 적어준다. let str: string = 'hi'; let num: number = 10; let isLoggedIn: boolean = false; 배열 타입은 타입을 적은 후 [] 로 배열을 표기한다. //배열안에 무조건 string만 가능 let 팀: string[] = ["수지", "철수"]; let arr: number[] = [1,2,3]; let arr: Array = [1,2,3]; //제네릭표기 객체 타입은 객체를 만들어 key는 그대로, value에 타입을 적어주면 된다. //객체 타입 지정 let 내정보 : { age : number } = { age : 20..
1. 자바스크립트 냅두고 타입스크립트를 사용하는 이유는 뭘까? 자바스크립트는 매우 유연한 언어. let answer = 1 + [1,2,3] // 11,2,3 숫자 + 배열 을 실행해도 오류 없이 계산해준다. 프로젝트 규모가 작을때는 금방 오류를 찾을 수 있지만, 규모가 커질수록 위와 같은 오류들이 발생했을때 찾기 어려워진다. 이런 자바스크립트의 위험성에서 벗어나 더욱 안전하게 개발할 수 있도록 도와주는게 타입스크립트다. 2. 타입스크립트 사용의 이점 정적 타입 검사: 타입스크립트는 코드를 작성할 때 변수, 함수 및 객체의 타입을 명시적으로 지정하므로 코드의 오류를 사전에 발견할 수 있다. 이로써 런타임 오류를 줄이고 안정성을 향상시킨다. 코드 가독성과 유지 보수성 향상: 타입스크립트는 코드에 타입 ..
1. reCAPTCHA 란? 투표를 하거나, 사이트에 새로 가입할 경우 이 "로봇이 아닙니다" 박스를 종종 보게 되는데, 이게 리캡차(reCAPTCHA)이다. reCAPTCHA(리캡차)는 구글에서 개발한 자동화된 프로그램이나 봇으로부터 웹사이트를 보호하기 위한 보안 기술 중 하나. 주로 웹 양식의 자동 제출을 방지하고, 스팸 댓글을 막는 등의 목적으로 사용된다. 즉, 사용자가 사람인지 봇인지를 판별해준다. 2. reCAPTCHA flow 플로우는 위의 사진에 적힌 순서대로 이루어진다. 화면에서 사용자가 어떤 동작을 했을때(회원가입, 글작성 등) 구글에 토큰을 요청한다. 구글에서 화면으로 토큰을 전달한다. 전달된 토큰을 백엔드 서버로 전송한다. 백엔드 서버는 구글서버에 토큰을 전달한다. 구글에서 사용자의 ..
1. 스켈레톤 UI 란? 어떤 화면에 딱 들어왔을때, 데이터가 채워지기 전에는 사용자에게 빈 화면이 보여질 수 있다. 순간적으로 일어나는 일이지만, 빈 화면을 사용자에게 보여주는 건 사용자 경험을 떨어트리게 한다. 이 화면을 보게 되면 어떨까? 데이터가 로딩중이라는 생각보다는 사이트에 문제가 있다는 생각이 먼저 들것이다. 이럴때 빈 화면 대신 '데이터가 통신 중입니다~' 알려주는 대체화면으로 Progress Indicator 를 사용한다. Progress Indicator는 시스템이 중단되거나 사용자 입력을 기다리고 있지 않음을 확인하기 위해 작업이 진행 중임을 사용자에게 알리기 위한 명령줄 인터페이스이다. 대강 말하면 지금은 화면에서 일하는 중이니 잠시만 기다려봐~ 하는 용도이다. 사이트마다 특성에 맞..
