우당탕탕 개발일지

Hook이란? Hook은 react 버전 16.8부터 도입된 기능입니다. 함수형 컴포넌트에서 state와 Life cycle 기능을 연동할 수 있게 해줍니다. useState, useEffect등의 기능을 사용하여 함수형 컴포넌트에서 할 수 없는 다양한 작업을 할 수 있게 해줍니다. useState class Test extends React.Component { constructor(props) { super(props); this.state = { name: "Ujam" }; } render() { return this.setState({ name: e.target.value })} />; } } 기존 class의 state와 setState로 상태들을 관리했습니다. import { useState ..

React란? React는 자바스크립트 라이브러리 중 하나이며 UI(User Interfact)를 만들기 위해 사용되는 웹 프레임워크입니다. 특징 데이터 흐름(Data Flow)이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다. 컴포넌트 기반 구조로 재사용성이 뛰어납니다. Virtual DOM기반으로 가볍습니다. 컴포넌트는 props와 state를 가집니다. Data Flow 위 특징과 같이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다. 규모가 큰 프로젝트에서도 데이터 흐름에서 일어나는 변화들을 쉽게 예측 가능할 수 있습니다. (양방향 데이터 흐름을 가지게 되면 프로젝트 규모가 클 경우 데이터 흐름을 추적하기 복잡해지는 경향이 있습니다.) Virtual DOM (가상돔) DOM은 Docume..

자바스크립트는 여러가지의 반복문이 존재합니다. for for in for of forEach() while do while for문 for (let i = 0; i < 10; i++) { console.log(i) } // 출력결과 0 1 2 3 4 5 6 7 8 9 for in문 for in문은 특정 객체의 열거 가능한 모든 프로퍼티(enumerable properties)를 순회할 수 있게 합니다. 열거 가능한 프로퍼티는 enumerable 플래그가 true인 프로퍼티를 뜻 합니다. const obj = { name: "ujam", job: "engineer", age: 25 } for (const key in obj) { console.log(`${key} : ${obj[key]}`); } /* 출..

프록시(Proxy) 프록시는 대신이라는 의미로 프로토콜에 있어서 대리 응답 등에서 사용하는 개념입니다. 보안상의 이유 때문에 직접 통신을 주고 받을 수 없어 중간에 프록시를 이용하여 중계한다고 생각하면 될거 같습니다. 여기서의 프록시를 이용하여 중계하는 기능을 프록시 서버라고 합니다. 특징 프록시 서버는 클라이언트와 서버 입장에서 볼 때 서로 상반되는 역할을 하는 것 처럼 보여집니다. 클라이언트 입장에서 프록시를 보면 서버처럼 동작하는 것이고, 서버 입장에서 프록시를 보면 클라이언트처럼 동작하는 것 입니다. 프록시 서버를 이용하는 이유는 보안상의 목적으로 이용하는 경우가 많지만 꼭 보안상의 이유만으로 이용하지는 않습니다. 프록시 서버는 프록시 서버에 요청된 내용들을 캐시를 이용하여 저장해 둡니다. 캐시를..

const { stdin } = require('process'); const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); rl.on('line', (line) => { const input = line.split(','); let queue = []; counter = Number(input[0]); for (let i = 0; i < counter + 1; i++) { const command = input[i].split(' '); if (command.length == 1) { if (command[0] === 'pop') { if..

AWS AWS 는 Amazon Web Service의 약자이며, 클라우드 서비스라고도 합니다. 클라우드 서비스란 컴퓨터가 가상의 공간(클라우드)에 있다 가정하고 자유롭게 사용하는 것 입니다. 사용하려는 유저가 직접 설치할 필요없이 AWS에서 간편하게 서버를 구축하고 사용할 수 있습니다. 이런 클라우드 서비스들에는 이런 장점들이 있습니다. 초기 비용이 저렴합니다. 서비스를 확장하기가 쉽습니다. 서비스 장애에 있어서 클라우드 업체에 의뢰할 수 있습니다. AWS에서는 굉장히 많은 서비스들을 제공합니다. 그 중에서 일반적으로 많이 사용되는 서비스를 소개하겠습니다. EC2(Elastic Compute Cloud) 독립된 컴퓨터를 임대하여 사용할 수 있는 서비스입니다. EC2 서버에 API를 배포하여 사용합니다. ..

thisIsCamelCase 첫번째 문자(첫번째 단어의 첫번째 글자)만 소문자로 표기, 두번째 문자(두번째 단어의 두번째 글자)부터는 대문자로 표기 합니다. Java programming에서 권장되는 표기법입니다. ThisIsPascalCase 모든 단어의 첫번째 글자는 대문자로 표기 합니다. 함수 혹은 클래스명을 지정할 때 권장되는 표기법입니다. this_is_snake_case 한 단어마다 _를 붙이는 표기법입니다. 변수명, 데이터 타입 등에 권장되는 표기법입니다. this-is-kebab-case 한 단어마다 -를 붙이는 표기법입니다. html 태그에서 많이 사용하는 표기법입니다. THIS_IS_SCREAMING_CASE 모든 문자를 대문자로 표기하고 한 단어마다 _를 붙이는 표기법입니다. 상수 이..

앱이란? 앱은 Application 줄인 말로 써 PC나 스마트폰 등 기기들에서 구동되는 어플리케이션입니다. (일반적으로는 네이티브 앱을 지칭합니다.) 네이티브 앱 (Native App) 보통 우리가 흔히 말하는 앱, 어플리케이션을 의미 합니다. 모바일 기기에 최적화 된 언어로 개발 된 앱 입니다. ex) 카카오톡, 유튜브, 인스타그램, 페이스북 등 장점 Android, IOS 기반 API로 개발하여 웹 앱, 하이브리드 앱에 비하여 성능이 좋습니다. 단점 앱스토어에 심사를 통과해야 되기 때문에 업데이트가 늦게 반영된다. 개발 비용이 많이 듭니다. 웹 앱 (Web App) 모바일 웹과 네이티브 앱의 장점을 합쳐 놓은 앱 입니다. 장점 네이티브 앱 처럼 설치할 필요 없이 브라우저 접근 가능하다. 업데이트가 ..

트랜잭션이란? 데이터베이스의 상태들을 변경시키기 위해 수행하는 작업 단위를 뜻 합니다. 데이터베이스의 상태들을 변경시킨다는 의미의 작업들은 SELECT INSERT UPDATE DELETE 이와 같은 행동들을 뜻 합니다. 연산 커밋(Commit) 모든 부분 작업이 정상적으로 완료되면 변경사항들을 한꺼번에 데이터베이스에 반영하여 변경합니다. 롤백(Rollback) 부분 작업이 실패하게 되면 트랜잭션을 실행하기 전으로 되돌립니다. (한 부분의 트랜잭션 작업이 비정상적으로 종료되어 데이터베이스 일관성을 깨뜨렸을 때 다른 트랜잭션 작업들이 정상적으로 처리가 되었어도 트랜잭션의 원자성을 구현하기 위해서 트랜잭션이 수행한 모든 작업을 취소합니다.) 특징 원자성(Atomicity) 트랜잭션 작업 처리가 데이터베이스에..

const { stdin } = require('process'); const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); rl.on('line', (line) => { const input = line.split(/\r?\n/); let stack = []; counter = Number(input[0]); for (let i = 0; i < counter + 1; i++) { const command = input[i].split(' '); if (command.length == 1) { if (command[0] === 'pop') ..