공부하는 블로그

Stack? 스택(Stack)은 한 쪽 끝에서만 자료를 넣거나 뺄 수 있는 선형구조(LIFO - Last In First Out)로 되어있다. 자료를 넣는 행위를 푸시(Push), 넣어둔 자료를 꺼내는 행위를 팝(Pop)이라고 한다. *LIFO : 나중에 넣은 값이 가장 먼저 나오는 것을 LIFO 구조라 한다. 스택은 프로그래밍 언어마다 라이브러리로 구현되어 있지만 직접 사용자가 연결 리스트를 이용하여 구현해낼 수도 있다. Stack Method · pop() : 스택에서 가장 위에 있는 데이터를 제거한다. · push() : 스택의 가장 위에 데이터를 추가한다. · peek() : 스택의 가장 위에 있는 항목을 반환한다. · isEmpty() : 스택이 비어있을 때에 true를 반환한다. Stack C..

Multiple Statements 비동기 방식을 따르는 Node.js에서는 다중 쿼리를 처리하려면 하나의 쿼리문을 처리 후 콜백 함수를 계속 사용해서 처리해야 한다. 그러나 쿼리가 많아질수록 코드가 복잡해지므로 이를 간단히 하기 위해 mysql 모듈에는 다중쿼리를 한번에 처리할 수 있도록 지원한다. 1. mysql 모듈을 사용하기 위해 임포트 const mysql = require('mysql'); 2. DB 연결 객체 생성 const connection = mysql.createConnection( { host: 'ip', port: 'port_number', user: 'user_name', password: 'pwd', database: 'db_name', multipleStatements: tr..

Iterator 반복자(Iterator)는 객체 지향적 프로그래밍에서 배열이나 그와 유사한 자료 구조의 내부 요소를 순회(traversing)하는 객체이다. 즉, 반복자는 배열 객체 내에서 순회하며 저장된 요소에 접근하여 각각의 요소에 원하는 로직을 구현하는(processing) 일반화된 방법을 제공한다. Java에서는 'Iterator()'라는 인터페이스가, React에서는 배열 객체에 내장된 메서드인 'map()'이 반복자의 역할을 수행한다. Array.map() 'arr.map(callback, [thisArg])'의 문법으로 사용된다. 콜백 함수는 새로운 배열의 요소를 생성하는 함수로 다음 세가지 파라미터를 가진다. · currentValue : 현재 처리되고 있는 요소 · index : 현재 처..

Router Props 브라우저와 리액트앱의 라우터를 연결하게 되면 그 결과 라우터가 history api에 접근할 수 있게 되며 각각의 Route와 연결된 컴포넌트에 props로 match, location, history라는 객체를 전달하게 된다. import React from 'react'; import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; import Home from './components/home'; import Community from './components/community'; import Mypage from './components/mypage'; function App() { retu..

이전 포스팅에서 SPA의 한계를 극복하고자 라우터를 이용하여 경로에 알맞은 컴포넌트를 불러오는 방법에 대해 공부했다. React | Router : URL로 페이지 접근하기 Single Page Application(SPA) SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 컴포넌트를 통해 동적으로 다시 작성하여 클라이언트와 소통하는 웹 애플리케이션이다. 필요한 모든 소스.. gongbu-ing.tistory.com 라우터를 이용하여 경로를 설정할 수 있으니 이제 url로 파라미터를 전송하는 것이 가능해진다. path와 query string을 이용하여 파라미터를 전송하여 라우팅된 페이지에서 해당 파라미터를 받아서 사용해보자. Path를 이용한 파라미터 전송(match) 전송 방법..

Single Page Application(SPA) SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 컴포넌트를 통해 동적으로 다시 작성하여 클라이언트와 소통하는 웹 애플리케이션이다. 필요한 모든 소스는 하나의 페이지에 불러와진 후 페이지의 새로고침 없이 동작하게 된다. 그러나, SPA를 기반으로 개발할 때 흔히 겪는 어려움 중 하나는 웹페이지의 라우팅이다. 기본적으로 SPA에서 라우팅을 구현하게 되면 url path가 아닌 현재 어떤 컴포넌트가 렌더링 되어야 하는지 state를 통하여 관리를 한다. 이렇게 되면 다음과 같은 문제가 발생하게 된다. 1. 컴포넌트가 전환되어도 브라우저 주소창의 URL은 고정되어 있기 때문에 특정 페이지에 대한 즐겨찾기 등록이 불가능하다. 2. 뒤로가..

Form Data 처리 HTML의 기본 폼 데이터 제출은 action 속성에 지정된 url로 데이터가 전송되어 해당 페이지로 이동되었지만 페이지 새로고침을 최소화하는 리액트에서는 다른 방식으로 데이터를 전송한다. 리액트에서는 HTML 기본 폼 동작을 막고 자바스크립트 함수로 사용자가 폼에 입력한 데이터에 접근하여 폼의 제출을 처리한다. 예제로 기본적인 회원가입 폼을 만들어보자. 폼이 제출될 때(onSubmit) 실행되는 함수 handleSubmit을 만들었다. 우선 'e.preventDefault()'로 폼이 제출되면서 새로고침되는 것을 방지한다. 'e.target..value'로 제출되는 폼의 각각의 input 데이터를 가져올 수 있다. props로 상위 컴포넌트에서 전달한 메소드인 handleAcco..

Event Handling 리액트에서 이벤트를 처리하는 방식은 DOM에서 처리하는 방식과 몇 가지 문법적 차이를 제외하면 유사하다. 1. 리액트의 이벤트는 소문자가 아닌 캐멀 케이스(camelCase)를 사용한다. 2. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. click! click! 3. 리액트에서는 false를 반환해도 태그의 기본 동작을 방지할 수 없으므로 반드시 preventDefault()를 사용해야 한다. click click 여기서 'e'는 합성 이벤트(Syntheic Event)로 네이티브 이벤트를 감싸는 객체이다. 순수 자바스크립트에서 HTML 이벤트를 다룰 때와 똑같이 사용하면 된다. 기본적으로 자바스크립트에서 클래스 메소드는 바인딩이 되어 있지 않으므로 JSX..