printf("Hello dev_TORY!");

이번 포스팅에서는 cookie와 session의 이론적인 부분을 정리해보고 node.js에서 직접 사용해 볼 것이다. 우리가 알아 채지 못하는 부분도 있겠지만, cookie는 웹 서핑을 할 때 굉장히 빈번하게 사용된다. 예를 들어, "오늘 그만 보기"와 같은 공지/광고의 옵션은 해당 옵션을 선택하면 만료일이 24시간인 쿠키를 생성하여 처리할 수 있고, 자동 로그인 옵션은 자동 로그인 여부를 쿠키에 저장하여 처리할 수 있다. 그렇다면, 왜 cookie를 사용하는 것일까? HTTP 프로토콜의 특징이자 약점을 보완하기 위해서 사용한다. HTTP는 비연결지향적(요청을 보내고 응답을 준 뒤, 연결을 끊는 특성)이고 상태가 없는(연결을 끊는 순간, 상태 정보는 유지하지 않는 특성 statelss) 특징을 가지고 있..

이번 포스팅에서는, 지난 포스팅에서 공부했었던 sequelize를 활용하여 테이블 간 관계를 설정해보려고 한다. JOIN은 SQL의 핵심 문법이라고 할 수 있다. JOIN은, 2개 이상의 테이블에서 데이터를 결합하여 새로운 결과를 생성해낼 수 있기 때문에 테이블 간의 관계를 통해 의미있는 정보를 얻어낼 수 있다. JOIN에 관해서는 아래 포스팅에 간단히 정리해 놓았다. https://hellotoriworld.tistory.com/21 SQL 기초5 - 조인 이번 포스팅에서는 SQL의 핵심적인 문법이라고 할 수 있는 JOIN에 대해 다뤄보고자 한다. 조인이란 무엇일까? JOIN DB에서 2개 이상의 테이블을 연결하여 하나의 테이블로 합치는 것 데이터를 효율 hellotoriworld.tistory.com..

이번 포스팅에서는, Node.js에서 ORM과 Sequelize를 공부해 보려고 한다. 우선, Sequelize에 대해 공부해보자. Sequelize는 ORM 라이브러리 중 하나이다. 그러니, Sequelize에 대해 공부하기 전에 ORM이 무엇인지 짚고 넘어가보자. ORM이란 무엇일까? ORM(Object Relational Mapping) 객체와 데이터베이스 관계를 매핑(연결)하는 도구 어플리케이션과 데이터베이스 연결시, SQL 언어가 아닌 어플리케이션 개발 언어로 데이터베이스를 접근할 수 있게 해주는 툴 → 개발 언어의 일관성 및 가독성 향상, 재사용 및 유지보수의 편리성 향상 프로그래밍 언어의 객체와 데이터베이스 사이의 중계 역할 데이터베이스와 어플리케이션의 연결을 '객체지향적'으로 도와줌 즉, ..

이번 포스팅에서는 node.js에서 환경변수를 사용하는 방법을 공부해 보려고 한다. 환경변수란 무엇일까? 개발자들은 개발, 테스트, 운영 등 여러 환경에 애플리케이션을 배포한다. 어느 환경에 배포하느냐에 따라서 다르게 설정되야하는 값들은 보통 운영체제 수준에서 환경 변수를 통해 관리하게 된다. 대표적인 예로, 데이터베이스 설정을 들 수 있다. 운영 환경에서는 데이터 센터나 클라우드 인프라 상의 상용 DB를 사용하고, 개발 환경에서는 개발자의 PC 상에서 돌고 있는 로컬 DB를 사용하는 경우가 많다. 뿐만 아니라, 데이터베이스의 비밀번호나 서드파티(3rd-party) 서비스의 API 키와 같이 민감한 인증 정보는 GitHub와 같은 코드 저장소(repository)에 올리면 상당히 위험할 수 있기 때문에 ..

앞서, MVC 패턴의 기본 개념 및 실습에 대한 포스팅에서는 DB를 연결하지 않았기 때문에 Model에 임시 데이터를 넣어서 실습을 진행했었다. 이번 포스팅에서는, MySQL 을 사용하여 실제 DB를 연결해볼 것이다. 이번 실습은 방명록을 등록/수정/삭제하는 페이지를 구현하는 것이다. 만약 DB를 연결하지 않는다면? // DB 연결 전 exports.getVisitors = () => { return [ { id: 1, name: "allie", comment: "안녕하세요" }, { id: 2, name: "홍길동", comment: "hi" }, ]; }; 임의로 데이터를 넣은 후, 해당 데이터 배열을 반환하는 함수를 작성하여 임시 DB 역할하도록 작성해야 될 것이다. 이제, 임시 DB를 만들지 않고..

이번 포스팅에서는 리액트에서의 상태 관리에 대해 공부해 보려고 한다. 앞서, React - State & Props 포스팅에서 State와 Props에 대해 공부했었다. 상태 관리 공부를 하기 전에, State와 Props에 간단히 정리해보자. State는, 특정 컴포넌트 내부 안에서 선언되고 특정 컴포넌트가 갖는 상태(값)을 변경하기 위해 사용한다. Props는, 부모 컴포넌트에서 자식 컴포넌트로 데이터(상태)를 전달하기 위해 사용한다. (데이터 변경 불가 only 전달용) 왜 상태 관리 공부를 하기 전에 State & Props에 대해 먼저 짚어본 것일까? 상태 관리란, State & Props 사용시 발생되는 단점을 보완하기 위해 사용하는 것이기 때문이다. 리액트는, 페이지를 수많은 컴포넌트들로 쪼..

이번 포스팅에서는 리액트에서의 라우팅에 대해 공부해 보려고 한다. 리액트를 사용하면 하나의 페이지 안에 있는 요소를 여러 컴포넌트로 쪼개어 렌더링할 수 있다. 따라서 다양한 컴포넌트를 하나의 페이지에서 활용한다면, 하나의 웹페이지로도 웹사이트를 개발할 수 있을 것이다. SPA(Single Page Application) 단일 웹페이지로 동작하는 애플리케이션 브라우저에서 자바스크립트를 이용해 단일 웹페이지 상의 HTML 요소를 동적으로 생성 및 조작 검색 엔진 최적화(SEO)에 적합하지는 X React, Svelte, Vue.js와 같은 라이브러리로 개발 가능 리액트에서 라우팅은 어떻게 이루어질까? 먼저, 라우팅이란 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것을 뜻한다. 리액트에..

이번 포스팅에서는 react에서의 hooks에 대해 공부해 보려고 한다. Hooks React의 새로운 기능 클래스 컴포넌트에서만 가능했던 state(상태관리)와 lifecycle(라이프사이클)이 함수형 컴포넌트에서도 사용 가능하도록 돕는 기능 사용 규칙 최상위 단계에서만 호출 가능(최상위 컴포넌트X) 반복문, 조건문, 중첩된 함수 내부에서 호출X Hook은 React 함수형 컴포넌트 안에서만 호출 가능 커스텀 훅 이름은 "use"로 시작하는 것을 권장함 자주 사용되는 Hooks에 대해 간단히 정리한 표는 다음과 같다. Hooks 종류 설명 useState() 상태 관리를 위한 가장 기본적인 훅 useRef() ref를 생성하고 관리할 수 있는 훅(DOM 접근, 변수 보존 등) useEffect() 컴포..

이번 포스팅에서는 Ref와 Life Cycle에 대해 공부해볼 것이다. html에서 특정 요소에 접근하기 위해서는 어떻게 할까? html에서는 원하는 요소에 고유한 값을 갖는 id 속성을 할당하여 해당 id 값을 갖는 특정 요소에 직접 접근한다. 반면, react에서는 ref를 사용하여 특정 요소에 접근한다. ref에 대해 자세히 공부하기 전에, 왜 react에서도 html과 같이 id를 활용하여 특정 요소에 접근하는 방식을 사용하지 않는지에 대해 먼저 알아보자. react에서도 id를 사용할 수 있다. JSX 안에서 DOM에 id를 할당하면 해당 DOM을 렌더링할 때 그대로 적용이 된다. 하지만, 특수한 경우가 아니라면 권장하지 않는 방법이다. 왜일까? react는 UI 전체를 컴포넌트로 쪼갠다는 특징..

이번 포스팅에서는 React에서의 Event에 대해 공부해보려고 한다. React에서 이벤트를 처리할 때 몇 가지 주의할 점들이 있다. 1.React에서의 이벤트 이름은 소문자가 아닌 camelCase를 사용한다. 예로, 클릭시 발생하는 이벤트를 떠올려보자. html에서는 해당 이벤트를 걸 요소에 onclick = "~" 을 사용했지만, React에서는 onClick = {~} 으로 사용한다. 2. 이벤트 핸들러는 문자열이 아닌 JSX를 사용하여 전달한다. html에서는 문자열로 감싸서 함수를 실행시켰지만, React에서는 JSX를 사용하여 함수 자체를 전달한다. onClick = {함수명} 3. React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시..

모두의 네트워크의 마지막 챕터이다. 이번 포스팅에서는 무선 랜에 대하여 짧게 다루어보도록 할 것이다. 무선 랜 랜 케이블을 사용하지 않고 전파나 자외선을 이용하여 컴퓨터 통신을 가능하게 하는 네트워크 방식 랜 케이블을 사용하지 않으므로 미관상 깔끔 유선보다 속도가 불안정 전파가 약하면 연결이 잘 안됨 유선 랜에 비해 통신 내용 해킹 가능성이 높음(비교적 낮은 보안성) 따라서, 반드시 암호화나 인증 설정 필요 구성 - 무선 액세스 포인트 + 무선 클라이언트 무선 액세스 포인트(Wireless Access Point, WAP) 무선 인터넷 사용자가 인터넷 서비스를 이용할 수 있도록 무선 인터넷 접속을 도와주는 중계 장치 무선 공유기 or 무선 AP 라고도 함 무선 클라이언트 무선 인터넷 사용자 컴퓨터나 스마..

OSI 모델에서 각 계층의 역할 응용 계층: 애플리케이션 등에서 사용하는 데이터를 송수신하는데 필요 전송 계층: 목적지에 데이터를 정확하게 전달하는데 필요 네트워크 계층: 다른 네트워크에 있는 목적지에 데이터를 전달하기 위해 필요 데이터 링크 계층: 랜에서 데이터를 송수신하기 위해 필요 물리 계층: 데이터를 전기 신호로 변환하는데 필요 웹 사이트 접속 과정 위와 같은 구성의 네트워크가 있다고 가정해보자. 이 구성은 3개의 네트워크로 이루어져 있다. (192.168.1.0/24, 172.16.0.0/16, 192.168.10.0/24) 이 네트워크에서 컴퓨터가 웹 사이트에 접속하려고 할 때, OSI 모델의 각 계층에서 어떠한 일이 일어나는지 살펴보자. 위 사진은 그 위에 있던 네트워크 구성도를 보고 데이터..

이번 포스팅에서는 OSI 모델의 7계층인 응용 계층에서 일어나는 일들에 대해 다루어보고자 한다. 응용 계층(application layer) OSI 모델의 7계층 중 7계층으로, 최상위 계층 애플리케이션들이 동작하는 계층 다양하게 존재하는 응응 환경에서 공통적으로 필요한 기능을 함 상호 간에 통신하면서 일련의 업무를 처리할 수 있도록 필요한 서비스 기능 제공 이메일, 파일 전송, 웹 사이트 조회 등 애플리케이션에 대한 서비스를 제공하는 계층 애플리케이션과 데이터를 주고받기 위해 필요한 계층 클라이언트의 요청을 전달하기 위해 서버가 이해할 수 있는 데이터로 변환하고 전송 계층으로 전달 클라이언트 - 서비스를 요청하는 측 서버 - 서비스를 제공하는 측 클라이언트와 서버가 통신하기 위해 응용 계층의 여러 프로..

이번 포스팅에서는 전송 계층의 역할에 대해 알아보도록 할 것이다. 전송 계층(transport layer, 트랜스포트 계층) OSI 모델 7계층 중 4계층 목적지에 신뢰할 수 있는 데이터를 전달하기 위해 반드시 필요 신뢰할 수 있는 데이터를 순차적으로 전달하는 역할 상위 계층들이 데이터 전달의 유효성이나 효율성을 신경 쓰지 않도록 함 데이터가 중복되거나 누락되지 않고 오류 없이 순서에 맞게 전송되도록 관리 주요 기능으로는 오류 점검 기능, 전송된 데이터의 목적지 애플리케이션 식별 기능 존재 목적지 애플리케이션 식별 기능 컴퓨터에는 여러 애플리케이션 존재 해당 데이터가 어느 애플리케이션인지 식별 필요 연결형 통신, 비연결형 통신 존재 전송 계층의 특징에 따라 연결형 통신과 비연결형 통신이 존재한다. 두 가..

이전까지 물리계층, 데이터 링크 계층에서 데이터를 전송하기 위해 어떠한 일들이 발생되는지 살펴보았다. 이번 포스팅에서는 네트워크 계층에서 일어나는 일들에 대해 다루어보고자 한다. 네트워크 계층 OSI 7계층 중 3계층 데이터 링크에서는 같은 네트워크 안에서만 데이터 전송이 가능하지만, 네트워크 계층은 달라도 가능 다른 네트워크와 통신을 가능하게 하는 역할 다른 네트워크에 데이터를 보내기 위해서는 네트워크를 식별할 수 있는 IP 주소 필요 IP 주소 컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신하기 위해 사용하는 주소 어떤 네트워크의 어떤 컴퓨터인지 구분할 수 있게 하는 주소 인터넷 서비스 제공자(ISP)로부터 제공받음 버전에는 IPv4(32비트), IPv6(128비트) 존재 종류로는 공인 IP 주소와..

https://www.acmicpc.net/problem/24444 24444번: 알고리즘 수업 - 너비 우선 탐색 1 첫째 줄에 정점의 수 N (5 ≤ N ≤ 100,000), 간선의 수 M (1 ≤ M ≤ 200,000), 시작 정점 R (1 ≤ R ≤ N)이 주어진다. 다음 M개 줄에 간선 정보 u v가 주어지며 정점 u와 정점 v의 가중치 1인 양방 www.acmicpc.net 이 문제는 트리 자료구조의 BFS 알고리즘의 대표적인 기초 문제라고 볼 수 있다. 이 문제를 해결하기 위해서는 다음과 같은 정보가 필요하다. 1. 각 노드들과 인접한 노드들의 정보 → 그래야 인접한 노드들을 타고 타고 들어갈 수 있다. 2. 각 노드들의 방문 여부 → 방문하지 않은 노드만 탐색하기 위함이다. 3. 인접 노드..

https://www.acmicpc.net/problem/24479 24479번: 알고리즘 수업 - 깊이 우선 탐색 1 첫째 줄에 정점의 수 N (5 ≤ N ≤ 100,000), 간선의 수 M (1 ≤ M ≤ 200,000), 시작 정점 R (1 ≤ R ≤ N)이 주어진다. 다음 M개 줄에 간선 정보 u v가 주어지며 정점 u와 정점 v의 가중치 1인 양 www.acmicpc.net 이 문제는 트리 자료구조의 DFS 알고리즘의 대표적인 기초 문제라고 볼 수 있다. 이 문제를 해결하기 위해서는 다음과 같은 정보가 필요하다. 1. 각 노드들과 인접한 노드들의 정보 → 그래야 인접한 노드들을 타고 타고 들어갈 수 있다. 2. 각 노드들의 방문 여부 → 방문하지 않은 노드만 탐색하기 위함이다. 문제에서는 1부터..

https://www.acmicpc.net/problem/10799 10799번: 쇠막대기 여러 개의 쇠막대기를 레이저로 절단하려고 한다. 효율적인 작업을 위해서 쇠막대기를 아래에서 위로 겹쳐 놓고, 레이저를 위에서 수직으로 발사하여 쇠막대기들을 자른다. 쇠막대기와 레이저 www.acmicpc.net 이 문제는, 스택을 활용하는 대표적인 문제이다. 코드를 짜는 것은 어렵지 않으나, 풀이 알고리즘을 떠올리는 것이 어려웠다. 절단된 쇠막대기의 개수를 세기 위해 층별로 구분된 막대기에 레이저가 발사된 횟수를 세는 것이 아닌, 하나의 레이저가 발사될 때마다 해당 레이저가 몇 개(층)의 쇠막대기를 절단하고 있는지를 세어서 계산해야 한다. 로직은 다음과 같다. ')'이 들어오는 경우는 레이저이거나, 쇠막대기의 끝을..

https://www.acmicpc.net/problem/1931 1931번: 회의실 배정 (1,4), (5,7), (8,11), (12,14) 를 이용할 수 있다. www.acmicpc.net 이 문제는 시작 시간과 끝나는 시간으로 주어지는 여러 개의 회의 정보를 입력받아, 각 회의가 겹치지 않고 사용될 수 있는 회의실의 최대 개수를 구하는 문제이다. 그리디 알고리즘을 활용하는 대표적인 문제이다. 1. 끝나는 시간을 기준으로 오름차순 정렬 회의를 최대한 많이 하기 위해서는, 시작 시간이 중요할까? 끝나는 시간이 중요할까? 1시에 시작해서 5시에 끝나는 회의와 1시에 시작해서 9시에 끝나는 회의를 입력받았다고 가정해보자. 1시에 시작해서 5시에 끝난다면, 5시가 넘어서(5시도 포함) 진행되는 회의 전체가..

https://www.acmicpc.net/problem/18258 18258번: 큐 2 첫째 줄에 주어지는 명령의 수 N (1 ≤ N ≤ 2,000,000)이 주어진다. 둘째 줄부터 N개의 줄에는 명령이 하나씩 주어진다. 주어지는 정수는 1보다 크거나 같고, 100,000보다 작거나 같다. 문제에 나와있지 www.acmicpc.net 이 문제는 단순히 큐에 대한 문제이다. 그래서 큐를 열심히 구현했는데 시간초과가 나왔다. 아래 코드는 시간초과가 나온 코드이다. class MyQueue: def __init__(self): self.myQueue = [] def push(self, n): self.myQueue.append(n) def pop(self): if len(self.myQueue)==0: re..