루루의 우당탕탕 개발 스토리 루루의 우당탕탕 개발 스토리

우선, ref는 React에서 DOM에 직접 접근하기 위해 사용한다. 사용방법은 우선 useRef hook을 선언하여 ref 객체를 생성한 다음 원하는 Element의 ref 값을 넘기면 된다. import { useRef } from 'react'; export default fuction App() { const inputRef = useRef(null); const focusHandler = () => { inputRef.current.disabled = false; inputRef.current.focus(); }; const resetHandler = () => { inputRef.current.disabled = true; inputRef.current.value = ""; }; return ..

Array(배열) List(리스트) 인덱스가 있는 자료형 객체 생성 시 크기 할당 필수 크기를 할당할 필요가 없음 순차적으로 자료 저장 👉자주 삭제되거나 추가되는 데이터는 적절하지 않음 앞의 요소가 삭제되면 새로 추가되는 요소가 그 공간에 저장될 수 있음 삽입, 삭제가 느림 (shift 해주는 비용이 생기기 때문) 👉 이 문제를 해결하기 위한 자료구조가 LinkedList 삽입, 삭제가 빠르지만 데이터 조회가 느림 LinkedList - 각각의 원소들은 자기 자신 다음에 어떤 원소인지만을 기억하고 있어 이 부분만 다른 값으로 바꿔주면 삽입과 삭제를 해결할 수 있음. - 원하는 위치에 한 번에 접근할 수 없음 - 삽입, 삭제 빠름, 조회 느림 ArrayList - 자바의 List 인터페이스를 상속받은 여러..

Java springboot 서버단에서 일부 작업을 하다가, 객체로 데이터를 전달해줘야되는 과정에서 순서를 보장해야되는 경우가 있었다. 이렇게 객체를 담는데 순서를 보장하며 넣어주고 싶을 때 사용하는 자료구조가 "LinkedHashMap" 이다. LinkedHashMap은 Map에 입력된 순서를 기억하는 자료구조이다. LinkeHashMap에 저장되는 키와 값은 Map.Entry 클래스를 구현한 Node 클래스에 저장된다. Node 클래스에는 before, after 멤버가 있는데 LinkedHashMap에 입력된 순서에 따라 연결 리스트 구조를 형성한다. LinkedHashMap은 기본적으로 HashMap이라 사용법이 HashMap과 동일하다. 차이점을 살펴보면 아래와 같다. HashMap HashMa..

네이버, 카카오, 구글 3사의 소셜 로그인을 오로지 React 웹 서버를 통한 구현방식을 우선 소개하고, 백엔드를 이용하여 보안을 강화하는 방법도 함께 소개하겠다. OAuth 란? 구글, 페이스북, 트위터와 같은 다양한 플랫폼의 특정한 사용자 데이터에 접근하기 위해 제3자 클라이언트(우리의 서비스, 앱)가 사용자의 접근 권한을 위임(Delegated Authorization)받을 수 있는 표준 프로토콜이다. 쉽게 말하자면, 우리의 서비스가 우리 서비스를 이용하는 유저의 타사 플랫폼 정보에 접근하기 위해서 권한을 타사 플랫폼으로부터 위임 받는 것 이다. 우선 전체적인 OAuth의 구동방식은 아래와 같다. 우리는 우선 웹서버를 통하여 구현할 예정이니 위 그림을 참고하자. 우리의 웹 서버에서 카카오 로그인 요..

vite + typescript 절대경로를 지정하기 위해서는 아래 두 파일을 건드려줘야한다. vite.config.ts, tsconfig.json 1. vite.config.ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import tsconfigPaths from 'vite-tsconfig-paths'; // https://vitejs.dev/config/ export default defineConfig({ base: './', plugins: [react(), tsconfigPaths()], }); 에서 base: './'를 추가하고, vite-tsconfig-paths를 설치하여 pulgins추가해..

일단, 리액트 라우터를 알기 전에 리액트가 SPA를 쉽게 만들수 있도록 하는 라이브러리라는 점에 주목해야한다. SPA의 경우 브라우저상으로 뒤로 가기, 앞으로 가기와 같은 내비게이션 사용이 불가하다. 그 이유는 기존방식은 url 변경시 새로고침되며 모든 페이지를 reload하여 로드 시간이 오래 걸렸지만, React는 SPA 체제로 새로고침 대신 Router를 사용하여 변경된 소스만 바뀌도록 하기 때문에 속도를 개선한다. 하지만 페이지에 따라 주소를 각각 만들기 위한 Routing이 필요하고 리액트에서는 다양한 라이브러리를 통해 이러한 기능을 제공한다. 그러한 라이브러리 중 대표적으로 React Router가 있다. React Router는 여러 화면으로 구성된 웹 애플리케이션을 만들 때 클라이언트 사이..

클로저 상태를 안전하게 변경하고 유지하기 위해 사용한다. 다시말해, 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다. 변수 값은 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 근본적 원인이 될 수 있다. 외부 상태 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에서 부수효과를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이기 위해 클로저는 적극적으로 사용된다. 아래는 함수형 프로그래밍에서 클로저를 활용하는 간단한 예제다. // 함수를 인수로 전달받고 함수를 반환하는 고차 함수 // 이 함수는 카운트 상태를 유지하기 위한 자유 변수 counter를 기억하는 클로저를 반환한다. function makeCounter..

this 바인딩은 함수 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다. 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프는 함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정한다. 하지만 this 바인딩은 함수 호출 시점에 결정된다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. 아래는 일반 함수 내부, 메서드 내부, 생성자 함수 내부에서의 this 사용의 예시이다. // this는 어디서든지 참조 가능하다. // 전역에서 this는 전역 객체 window를 가리킨다. console.log(this); //window fu..