분류 전체보기

State & Lifecycle이번 내용은 리액트 컴포넌트 종류 중 주로 Class 컴포넌트와 관련된 내용이다.물론 State라는 개념은 Function 컴포넌트에서도 사용하기 때문에 개념을 확실히 이해하고 넘어가는 것이 좋고 Lifecycle의 경우 최근에는 Class 컴포넌트를 거의 사용하지 않기 때문에 이런게 있다 정도로만 이해하고 넘어가자.특히 state는 리액트의 핵심 중의 핵심이라고 할 수 있기 때문에 완벽하게 이해가 될 때까지 반복적으로 학습을 하자.State일반적으로 영단어 state는 한글로 상태라는 뜻을 가지고 있는데, 리액트에서의 state는 리액트의 컴포넌트 상태를 의미한다.다만 상태라는 단어가 정상인지 비정상인지를 나타내는 것이라기보다 리액트 컴포넌트의 데이터라는 의미에 더 가깝다..

Component 실습 Component 합성컴포넌트 합성은 여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것이다.리액트에서는 컴포넌트 안에도 다른 컴포넌트를 사용할 수 있기 때문에 복잡한 화면을 여러 개의 컴포넌트로 나누어서 구현할 수 있다. // Welcome.jsximport React from "react";const Welcome = (props) => { return Hello, {props.name};};export default Welcome;// index.js...const App = (props) => { return ( );};root.render( );Welcome 컴포넌트를 사용해서 컴포넌트 합성을 하는 예제..

PropsProps의 특징Props의 중요한 특징은 read-only 즉 읽기 전용이라는 것이다.읽을 수만 있다는 것은 값을 변경할 수 없다는 말이기도 하다.props의 값은 리액트 컴포넌트가 엘리먼트를 생성하기 위해서 사용하는 값이다.그런데 이 값들이 엘리먼트를 생성하는 도중에 갑자기 바뀌어 버리면 제대로된 엘리먼트가 생성 될 수 없다.마치 붕어빵이 다 구워진 이후에 속재료를 바꿀 수 없는 것과 마찬가지다.다 구워진 이후에 속재료를 바꾸려면 붕어빵의 배를 갈라야 하는데 그렇게 하면 제대로된 상품으로 판매할 수 없을 것이다.그렇다면 다른 Props의 값으로 엘리먼트를 생성하려면 어떻게 해야 할까?그럴 때는 새로운 값을 컴포넌트에 전달하여 새로 엘리먼트를  생성하면 된다.이 과정에서 엘리먼트가 렌더링 되는..

Components컴포넌트는 React, Vue등에서 중요한 부분이다. 모든 페이지가 컴포넌트로 구성되 있고 하나의 컴포넌트는 또 다른 여러개의  조합으로 구성될 수 있다. 그리고 이러한 컴포넌트들을 마치 레고 블록을 조립하듯이 끼워 맞춰서 새로운 컴포넌트를 만들수 있는 것이다. 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있어서 자연스레 개발시간과 유지 보수 비용을 줄일 수 있다. 컴포넌트는 개념적으로는 자바스크립트의 함수와 비슷하다. 함수가 입력을 받아서 내뱉는 것처럼 리액트 컴포넌트도 입력을 받아서 정해진 출력을 내뱉는다. 그래서 컴포넌트를 그냥 하나의 함수라고 생각하면 좀 더 쉽게 개념을 이해할 수 있다. 하지만 컴포넌트의 입력과 출력은 일반적인 함수와는 조금 다르다. 리액..

JSX A syntax extension to JavaScript (자바스크립트의 확장 문법)JavaScript + XML/HTML 이라고 보면 된다.JSX를 사용하는 이유  React.createElement()를 사용할때보다 가독성, 유지보수 관점에서 유리하다injection Attacks 이라고 불리는 해킹 방법을 방어함으로써 보안성이 올라간다.인젝션 어택은 쉽게 말해서 입력창에 문자나 숫자 같은 일반적인 값이 아닌 소스 코드를 입력하여 해당 코드가 실행되도록 만드는 해킹 방법이다.예를 들어 아이디를 입력하는 입력창에 자바스크립트 코드를 넣었는데 그 코드가 그대로 실행이 되어버리면 큰 문제가 생길 수 있다.기본적으로 React DOM은 렌더링하기 전에 임베딩된 값을 모두 문자열로 변환한다. 그렇기 ..

리액트란리액트란 사용자 인터페이스를 만들기 위한 라이브러리(자주사용되는 기능들을 모아놓은것)이다.라이브러리 VS 프레임워크리액트를 설명하기 앞서 프레임워크와 라이브러리의 차이를 간단히 알아보자면 프로그램의 흐름에 대한 제어 권한 차이다 쉽게말해 프레임워크는 제어 권한이 개발자가 아닌 프레임워크가 가지고 있는 반면, 라이브러리는 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 사용하는 형태기 때문에 자유로울 수 있다고 얘기 할수있다.리액트의 장점DOM장점을 설명하기 앞서 DOM 대해 간단히 설명해보자면 Document Object Model의 약자로 웹페이지를 정의하는 하나의 객체다. 쉽게 말해 하나의 웹사이트에 대한 정보를 모두 담고 있는 큰 그릇이라고 보면 된다.Virtual DOM그렇다면 Vir..

😈 이중우선순위큐 📗 문제 설명이중 우선순위 큐는 다음 연산을 할 수 있는 자료구조를 말합니다.명령어수신 탑(높이)I 숫자큐에 주어진 숫자를 삽입합니다.D 1큐에서 최댓값을 삭제합니다.D -1큐에서 최솟값을 삭제합니다.이중 우선순위 큐가 할 연산 operations가 매개변수로 주어질 때, 모든 연산을 처리한 후 큐가 비어있으면 [0,0] 비어있지 않으면 [최댓값, 최솟값]을 return 하도록 solution 함수를 구현해주세요.👀 제한사항operations는 길이가 1 이상 1,000,000 이하인 문자열 배열입니다.operations의 원소는 큐가 수행할 연산을 나타냅니다.원소는 “명령어 데이터” 형식으로 주어집니다.- 최댓값/최솟값을 삭제하는 연산에서 최댓값/최솟값이 둘 이상인 경우, 하나만..

Nuxt에선 index.html이 없기 때문에 nuxt.config에서 수정해주자// nuxt.config.tsexport default defineNuxtConfig({ app: { head: { viewport: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no", }, }, ...});meta에 viewport를 수정해주고// app.vue후에 app.vue에 추가해주자

Vue => NuxtVue에서 Nuxt로 마이그레이션을 진행했다.그러한 이유를 설명하겠다. 1.  초기 렌더링이 프로젝트는 여러가지 툴들을 다루는 어플리케이션이다.초기에 모든 툴들의 리소스를 가져오면 초기 렌더링 시간이 너무 오래걸린다.사용자가 필요로 한 툴의 데이터만 가져오면 되기 때문에 CSR 방식은 부적합하다. 2. SEO 여러가지 툴들이 사용되기 때문에 각각의 툴에 맞는 meta가 필요하다.Vue에서도 meta를 지원하지만 내가 원하는 것은 각 페이지마다의 meta가 필요하기 때문에 SPA방식은 부적합하다. 이러한 이유로 Nuxt3로 마이그레이션을 진행하였다. 마이그레이션을 진행하면서, 기존의 Option API로 짜여진 로직을 Composition API로 리팩토링 하였고,상태관리 라이브러리는 ..

📝 PDF Viewer 및 SVG or canvas & HTML Convert 웹 애플리케이션 프로젝트 개요  PDF Viewer 및 SVG or canvas 형태의 HTML로 Convert 하여 PDF에 원하는 페이지를 로컬에 저장할 수 있는 웹 애플리케이션입니다.이 애플리케이션은 Vue3의 Composition API로 작성되었으며, 스타일링에는 SCSS를 사용했습니다.서버 측에서는 Node.js와 Express를 사용하여 구현되었습니다. 기술 스택 Vue.js 3.XVuexHTML/CSSSCSSNode.jsExpress 📚 스토리보드 📖 초기 화면Page Input에 원하는 Page number를 입력 후 Enter keydown 시 그 Page로 이동합니다.Scale은 -,+ button으로..