분류 전체보기

React Props와 State를 통한 데이터 관리

React는 컴포넌트 기반 라이브러리로, 데이터를 전달하는 두 가지 주요 방법인 Props와 State가 있습니다. Props (Properties)props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. props는 읽기 전용이기 때문에, 전달받은 자자식 컴포넌트는 props를 수정할 수 없습니다. (값을 수정하고 싶으면, 부모 컴포넌트에서 state를 변경시켜줘야 합니다.) props 기본 사용법부모 컴포넌트function ParentComponent() { const name = "yeo"; return } 자식 컴포넌트function ChildComponent(props) { return Hello, {props.name}!}  여러개의 props부모 컴포넌트funct..

React 리액트에서 UI를 정의할 때 사용하는 JSX: JavaScript XML

JSX: JavaScript XMLJSX(JavaScript XML)는 React에서만 사용하는 JavaScript 확장 문법입니다. JSX를 사용하면 JavaScript 코드 안에 HTML과 유사한 코드를 작성할 수 있습니다. 즉, JSX는 React 컴포넌트를 만들 때 UI를 정의하는데 사용합니다. JavaScript로 UI 표현`React.createElement`를 사용하여 React 요소를 생성할 수 있습니다.아래 코드는 type: h1이고, props: {className: 'hello'} 을 갖고, 자식: 'Hello, React!' 문자열을 갖는 React 요소를 생성합니다.// createElement(type, props, ...children)const element = React.c..

React 기본 구조 완벽 정리, SPA(Single Page Application) 이해하기

React 애플리케이션 구조아래는 `create-react-app`을 사용하여 생성된 기본 React 애플리케이션의 구조 예시입니다.my-app/├── node_modules/├── public/│ ├── index.html│ ├── favicon.ico│ └── ...├── src/│ ├── App.css│ ├── App.js│ ├── App.test.js│ ├── index.css│ ├── index.js│ ├── logo.svg│ └── ...├── .gitignore├── package-lock.json├── package.json└── README.mdnode_modules/프로젝트에서 사용하는 모든 외부 라이브러리와 모듈을 저장합니다.`npm install`..

React 리액트란? 기본 개념, 컴포넌트, 가상 DOM, 설치까지 한눈에 보기

리액트(React)란?React는 Facebook에서 개발한 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. 리액트와 같이 웹 개발을 위한 Tool로 Vue나 Angular도 많이 사용되지만, 최근 React의 수요가 더욱 증가하고 있습니다. 라이브러리인 ReactReact와 Vue, Angular의 가장 큰 차이점은 React는 라이브러리이고, Angular와 Vue는 프레임워크라는 점입니다. 라이브러리:  개발하는데 필요한 기능을 모듈화 해놓고, 개발자는 필요한 기능을 호출하여 사용하면 됩니다.프레임워크: 어플리케이션을 만들기 위한 기본적인 틀은 제공되어 있고, 개발자는 필요한코드를 규칙에 따라 작성해주어 사용하면 됩니다. (프레임워크에 라이브러리도 포함되어 있습니다. 프레임워크..

Spring Boot 로그(Log) 남기기, log4j2을 사용한 로깅 전략

로그(Log)란? 로그(Log) 남기기 어플리케이션을 운영할 때 작동 정보인 로그(Log)를 기록하는 행위를 해주어야 합니다. 로그를 기록하면 어플리케이션의 상태를 추적하고, 오류 인지 및 잠재적인 문제를 진단할 수 있습니다. 즉 로깅을 통해 로직의 흐름을 파악함으로써 서비스의 품질을 관리할 수 있기 때문에 로깅은 개발자들에게 필수적입니다. 그러나 로그를 무분별하게 기록하면 로그 파일의 볼륨이 너무 커져 문제를 야기할 수 있습니다. 따라서 예외가 발생하는 곳이나, 중요 기능이 실행되는 부분에 적절한 로깅을 남겨 효율적으로 처리하는 것이 중요합니다. 로그 레벨 로그 레벨은 로그 메시지의 중요도를 나타냅니다. 로그 레벨에는 총 6가지의 레벨이 있습니다. 로깅 레벨을 올바르게 선택하면 적절한 정보만 로그로 남..

RSA를 이용하여 페이로드(ex. 비밀번호) 암호화하기 (Vue.js / Spring Boot)

0. 상황 Vue.js에서 아이디(userId)와 비밀번호(userPassword)를 입력하여 로그인을 해봅니다. 개발자 모드(F12)를 켜서 페이로드를 살펴보면 다음과 같이 사용자가 입력한 아이디와 비밀번호를 바로 확인할 수 있습니다. 보안을 위해 비밀번호(userPassword)를 암호화하여 요청하고 싶습니다. 이때 우리는 바로 전 포스팅에서 생성한 비대칭 키 RSA를 사용할 것입니다. 1. Vue.js에서 RSA 공개키로 암호화 JavaScript 라이브러리인 jsencrypt를 사용하여 암호화를 수행할 것입니다. 이를 위해 먼저 jsencrypt를 설치해줍니다. npm install jsencrypt 그런 다음, Vue.js 컴포넌트에서 RSA 공개키로 암호화를 수행하는 코드를 작성합니다. 저는 ..

OpenSSL을 통해 RSA 공개키, 개인키 생성하기

1. OpenSSL 설치하기 Windows: https://slproweb.com/products/Win32OpenSSL.html 혹은 https://code.google.com/archive/p/openssl-for-windows/downloads 등에서 OpenSSL을 다운로드하여 설치하면 됩니다. Mac: brew install openssl 2. openssl.exe 파일 위치로 이동하기 openssl-0.9.8k_X64\bin\openssl.exe 위치로 이동해줍니다. 3. private_key 생성 1) private_key.pem 생성 openssl-0.9.8k_X64\bin> openssl genrsa -out private_key.pem 1024 생성된 private_key.pem (PK..

Git 초보자도 쉽게 이해할 수 있는 Git (2) 문법 정리 (feat. Github)

Git 초보자도 쉽게 이해할 수 있는 Git (1) 개념 및 용어 정리 Git 초보자도 쉽게 이해할 수 있는 Git (1) 개념 및 용어 정리 Git은 VCS(버전 관리 시스템)으로 협업 및 관리를 위한 강력한 도구입니다. 그럼 VCS는 무엇일까요? VCS VCS(버전 관리 시스템)는 소스 코드의 변경 이력을 관리하는 도구로, 개발자들이 소스 코드를 yeo-computerclass.tistory.com 1. Git 설치하기 먼저 Git을 사용하기 앞서 설치부터 해주어야 합니다. Git은 공식 웹사이트(https://git-scm.com/)에서 다운로드할 수 있습니다. 2. Git 설정 문법 git config --list: 해당 Git 저장소의 설정 확인 git config [설정할 키] [설정할 값]:..