1. 프로세스 주소 공간에 대해서 설명해주세요 . 프로세스 주소 공간에 대해서 설명 드릴려면, 먼저 프로세스가 메모리를 나누어 쓰는 방법인 메모리 가상화에 대해서 설명해야할 것 같습니다. 메모리 가상화란, 계속 해서 동일 자원을 돌려 쓰던 CPU 가상화와 달리, 물리적인 메모리를 쪼개고, 각 부분을 현재 실행 중인 프로세스에 대응시키는 방식을 말합니다. 이를 통해, 각 프로세스들은 마치 하나의 메모리를 자신이 혼자 쓰고 있는 것 같은 착각을 하게 되고 이 쪼개진 하나하나의 메모리를 가상화된 메모리라고 합니다. 이때 프로세스 하나 하나에 대응되는 가상화된 메모리를 프로세스의 주소공간이라고도 표현합니다. 프로세스의 주소 공간은 크게 코드 영역, 데이터 영역, 스택 영역, 힙 영역으로 나뉩니다. 1. 코드 영..

Enum은 열거형이라고 부른다. (영어로는 enumerated type이라 하고 이것의 줄임말이다.) Enum은 ‘요소’ 혹은 ‘멤버’ 라 불리는 명명된 값의 집합을 이루는 자료형이다. 여기서 ‘명명되다.’란 어떤 물건이나 일에 이름이 지어져 붙여지는 것을 말한다. Enum의 멤버가 되는 녀석들은 주로 어떤 물건이나 일을 식별하기 위한 상수 역할을 한다.

스프링에서 제공하는 HTTP Client REST API 호출에 필요한 함수를 제공하는 클래스이다. HTTP Client Rest API란? 먼저 웹이 어떻게 돌아가는지 살펴봐야한다. 웹은 클라이언트와 서버로 나뉜다. 클라이언트 부분은 사용자에게 필요한 정보를 서버에게 요청하고, 서버는 그에 맞는 데이터를 클라이언트에게 제공한다. 해당 과정에서 클라이언트가 서버에게 원하는 정보를 요청하는 부분을 HTTP Client REST API라고 한다. 우리가 사용하려는 SPRING은 백엔드 프레임워크로 서버의 역할을 담당하는 경우가 많지만, 때에 따라서 외부 API에게 데이터를 요청해야하는 클라이언트의 역할을 해야할 수도 있다. 원래 JAVA에서는 URLConnect나 HTTPClient 같은 클래스를 사용하여 ..

본 프로젝트는 스프링 웹소켓 채팅서버 만들기 를 실습하며 공부하기 위한 프로젝트 입니다. branch 별로 총 6단계 모두 진행할 예정입니다. 0. STOMP란 무엇인가? Stomp란 SimpleTextOrientedMessagingProtocol의 약자로, 텍스트 기반 양방향 통신을 효율적으로 하기 위한 통신 규약이다. Stomp의 원리는 다음과 같다. Stomp에는 3가지 개념이 존재하는데, Topic, Publisher, Subscriber가 그것이다. Topic은 우체통이라고 생각하면 된다. publisher는 메세지 발행자이다. Publisher가 어떤 Topic을 EndPoint로 잡고 메세지를 보내면 해당 우체통으로 메세지가 들어간다. 이때 해당 Topic을 구독하고 있는 Subscriber..

1. 폴더 구조 2. Comment.jsx import React from "react"; const styles = { wrapper: { margin: 8, padding: 8, display: "flex", flexDirection: "row", border: "1px solid grey", borderRadius: 16, }, imageContainer: {}, image: { width: 50, height: 50, borderRadius: 25, }, contentContainer: { marginLeft: 8, display: "flex", flexDirection: "column", justifyContent: "center", }, nameText: { color: "black", fon..

1. 개요 이번 장에서는 컴포넌트를 합치고 잘게 쪼개는 방법에 대해서 배우겠다. 아시다시피 React의 신념은 '레고처럼 조립' 이다. 여기서 레고의 역할을 하는 것이 컴포넌트이다. 그때 그때 입맛에 맞는 컴포넌트를 붙이고 떼고를 반복해서, 원하는 모양을 조립하면 된다. 그 레고를 붙이고 떼는 법을 배우자. 2. Component 합성 위와 같이 하나의 큰 컴포넌트를 만들기 위해 작은 컴포넌트들을 조합하는 행위를 컴포넌트 합성이라 한다. 예제에서는 하나의 컴포넌트를 여러번 썼지만, 각기 다른 컴포넌트를 합쳐도 된다. 3. 컴포넌트 추출 컴포넌트 추출은 너무 큰 컴포넌트를 재사용성을 위해서 여러 작은 컴포넌트로 잘게 쪼개는 작업을 의미한다. 큰 컴포넌트로 들어오는 props 중 일부를 다시 props로 받..

1. 개요 이제 컴포넌트, React Elements, DOM Elements에 대한 개념적 이해는 저번 포스팅들을 통해 잡혔을 것이다. 이제는 컴포넌트를 진짜 사용하기 위해 컴포넌트의 종류와 그것을 만드는 방법에 대해 알아보겠다. 2. 컴포넌트의 종류 컴포넌트의 종류에는 크게 함수형 컴포넌트와 클래스형 컴포넌트가 있다. 클래스형 컴포넌트는 쓰는 방법이 복잡하고 어렵다는 의견이 많아서 요즘 자주 사용되는 것은 함수형 컴포넌트이다. 함수형 컴포넌트는 말 그대로 함수 형태로 되어있다. 다음 예시를 보자. 이거 말고 익명 함수 형태로 써도 된다. const Welcome = (props) => { //... } 클래스형 컴포넌트는 우리가 자바 같은 객체지향 언어를 쓸 때 확인할 수 있는 형태 그대로 이다. 다..

1. 개요 여기서는 Props의 특징과 사용법에 대하여 알아보겠다. 2. Props의 특징 Props의 가장 중요한 특징은 READ_ONLY 라는 특징이다. 읽기 밖에 못한다라는 말은 다시 말해 "값을 변경할 수 없다."라는 의미이기도 하다. 저번 포스팅에서 컴포넌트를 붕어빵 틀, 거기서 나온 Elements를 붕어빵, Props를 붕어빵 속 재료로 표현했는데, 이미 만들어진 붕어빵 속 재료를 바꿀 수 없는 것과 같은 이치이다. 만약 사용자 입력으로 새로운 화면을 그려야 한다면, 새로운 Props를 만들어 컴포넌트에 넣고 새로운 Elements를 Re-Rendering 하여 화면에 띄워야 한다. 그러니까, 새로운 붕어빵이 먹고 싶으면 손에 쥔 붕어빵을 버리고 새로 구워달라 해야한다는 것이다. 이 특징을 ..

1. 개요 React는 Component-Based Language이다. 따라서 컴포넌트라는 개념자체가 매우 중요하다. 또 함수에서 인수의 역할을 Component에서는 Props라는 녀석이 한다. 따라서 Component가 중요해진 만큼 Props에 대한 개념 이해도 중요해진다. 같이 살펴보자. 2. Component에 대하여 Component란 하나의 기능을 하는 JavaScript Code를 의미한다. 컴포넌트가 함수와 형태가 매우 유사한데, 이는 하나의 기능이 의미가 있으려면 입력을 받아 특정 결과값을 출력 해야하는데, 그래서 컴포넌트의 형태가 함수를 따라간게 아닌가 싶다. 기본적인 JavaScript의 함수와 차이점이 있다면 당연히 입력을 받는 값과, 출력하는 값이 다르다는 것이다. 함수는 당연..

1. 코드 작성 먼저 화면 계층 구조 chapter_04를 만들고 Clock이라는 jsx를 만든다. ⓐ Clock.jsx 생성 import React from "react"; const Clock = (props) => { return ( 안녕 리액트! 현재 시간: {new Date().toLocaleTimeString()} ) } export default Clock; 해당 함수는 시간을 찍는 함수이다. ⓑ index.jsx 변경 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals..

1. React Elements의 특징에 대하여 React의 랜더링 과정과 원리에 대해서 다루기 위해서는 먼저 React Elements의 특징에 대하여 알아야 한다. 이전 포스팅에서 다룬 바와 같이, React Elements는 불변성을 가진다. Elements의 불변성이란, Elements 생성 후에는 Elements 속 children이나 attributes를 바꿀 수 없다! 이다. 그러면 다음과 같은 질문이 나올 수가 있다. 어? 그렇다면, 사용자의 입력에 따라 화면을 갱신해야할 경우는 어떻게 해야하나요? 화면 속 Dom Elements의 원본인 React Elements가 불변성이면, 갱신을 구현할 수 없지 않나요? 좋은 질문이다! 분명 React Elements는 불변하지만, 앞에 조건이 붙었..

0. 개요 본 포스팅에서는 ⓐ React Element란 무엇인가? ⓑ 그것이 어떻게 DomElement로 변환되어 랜더링되는지 에 대해서 알아보겠다. 1. React Element란? (0) Element에 대하여 먼저 Element가 무엇인지 알아보겠다. Element의 사전적 의미는 '물체를 구성하는 성분'을 뜻한다. Html을 공부하면서 DomElement에 대해 들어 봤을 것이다. DOM Element는 화면을 구성하는 하나의 성분을 의미한다. 예를 들어 설명하겠다. 위의 화면을 F12 개발자 모드로 둘러보면 다음과 같다. 여기서 Div 태그 하나하나, 혹은 그 Div 태그 속 h1, h2 태그 하나하나가 화면을 구성하는 성분 중 하나임으로 DOM Element에 해당한다. ⓑ 그렇다면 Reac..

1. 개요 지금까지 JSX에 대한 이론을 간단하게 정리하였다. 이제 JSX 문법을 이용한 간단한 실습을 하고자 한다. create-react-app 을 이용하여, react에 대한 기본적인 스켈레톤 코드를 받고 그 src 폴더 밑에 Chapter_03이라는 폴더를 하나 만든다. 그리고 위와 같이 Book.jsx 와 Library.jsx 파일을 하나씩 만들겠다. 2. Book.jsx import React from "react"; function Book (props) { return ( {`이 책의 이름은 ${props.name} 입니다.`} {`이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`} ); } export default Book; 코드에 대한 설명을 하겠다. Book이..

1. JSX의 장점 ⓐ 간결해진 코드 > 높은 가독성 > 오류 잡기 쉬움 저번 포스팅에서 말했듯이, JSX를 쓰면 하나의 JSX 코드 내에서 JS와 HTML 코드를 혼용해서 사용할 수 있었다. 이는, JS 로직과 그것을 연결하려고 하는 HTML 요소를 특정하는 로직을 한번 더 작성할 필요가 없기 때문에 코드가 짧아지고, 간결해진다. 이는 엄청난 장점이다. ⓑ Injection attack 해킹 방어에 용이 이건 그렇게 와닿는 내용이 아니라서 깊게 듣지는 않았다. JSX를 쓰면 해당 주입성 공격을 방어하기 더 용이하다고 한다. 2. JSX 사용법 ⓐ HTML 요소를 하나의 JS 변수로 사용한다. const element1 = Hello World!! 요렇게 하나의 요소를 변수로 특정이 가능하다. 당연히 해..

1. JSX의 정의 원래 프론트 코드는 화면을 띄우는 HTML, 그 HTML을 꾸미는 CSS, 프리젠테이션 로직을 담당하는 JS 총 3가지로 나뉜다. 이렇게 영역을 구분하여 작성하는 것은 때때로, 피로감을 유발한다. 왜냐하면, JS로 만든 모듈(특정 기능을 하는 코드)을 연결할 특정 HTML 요소(elements)와 연결하는 작업을 항상 해줘야하기 때문이다. 해당 작업을 위해 따로 코드를 작성해야 하기에 가독성이 더욱 안 좋아진다. JSX는 JavaScript & XML/HTML의 약자로, 위에서 보여진 프론트 엔드 전반의 약점을 보완하기 위해 만들어진 개념이다. JSX에서는 Javascript 코드 안에서 HTML 코드를 작성하는 것이 가능하다. 따라서 밑과 같은 코드 작성이 가능해진다. const e..

문제 설명 https://www.acmicpc.net/problem/9663 N*N 체스판이 주어진다. 체스판에 Queen을 서로가 서로를 죽이지 못하게 모든 행에 놓아라 이떄 놓을 수 있는 경우의 수는 어떻게 되는가? 푸는 원리 백트래킹을 사용해야 한다. 백트래킹이란 깊이 우선 탐색을 하되, 가능성이 없는 루트를 탐색한다고 판단될 경우 과감하게 그 루트를 포기하고 다음 경우의 수를 체크하러 떠나는 것이다. 해당 길이 답을 도출할 수 있는 유망한 길인지 아닌지 체크하는 것은 문제마다 다르다. 따라서 유망성 체크 조건을 알아차리는 감각은 많은 백트래킹 문제를 풀어보며 익혀야 하겠다. 본론으로 돌아와서 N-Queen 문제를 풀어보자. 체스에서 퀸은 비숍과 록을 합친 움직임을 할 수 있는 가장 쎈 장기말이다...

본 프로젝트는 스프링 웹소켓 채팅서버 만들기 를 실습하며 공부하기 위한 프로젝트 입니다. branch 별로 총 6단계 모두 진행할 예정입니다. 해당 내용으로 만든 프로그램입니다. 첫 단계라서 firstStep이란 branch에 저장하였습니다. https://github.com/dalcheonroadhead/WebSocketBEPractice/tree/firstStep 1. 전개도 1-1 Server Logic 해당 블로그의 Basic WebSocket의 전개도 이다. 아주 간단하게 처리했기 때문에 아직 DB와 연결하지 않고, 서비스와 컨트롤러, 모델, 웹소켓 설정 디렉토리만 필요했다. 1-2 Server와 Client 전체 Logic 먼저 내가 헷갈렸던 부분은 Rest API와 소켓이 다른 장소에서 ma..

1. 문제 설명 https://www.acmicpc.net/problem/5525 5525번: IOIOI N+1개의 I와 N개의 O로 이루어져 있으면, I와 O이 교대로 나오는 문자열을 PN이라고 한다. P1 IOI P2 IOIOI P3 IOIOIOI PN IOIOI...OI (O가 N개) I와 O로만 이루어진 문자열 S와 정수 N이 주어졌을 때, S안에 PN이 몇 www.acmicpc.net IOI 형태의 문자열 Pn이 주어질 때, 전체 문자열 S에서 Pn이 몇 번 등장하는지 등장 횟수를 출력해라 2. 푸는 원리 이것도 안 풀려서 답지를 봤다. 문자열 알고리즘을 공부 해야겠다. 나는 문자열을 투포인터로 한번 쭉 훑으려고 했는데 해당 문제는 숫자로 이루어진 것이 아니다 보니, 반복문의 i를 계속 star..

1. 문제 설명 2565번: 전깃줄 두 전봇대 A와 B 사이에 하나 둘씩 전깃줄을 추가하다 보니 전깃줄이 서로 교차하는 경우가 발생하였다. 합선의 위험이 있어 이들 중 몇 개의 전깃줄을 없애 전깃줄이 교차하지 않도록 만들려고 한다. www.acmicpc.net 두 개의 전봇대가 존재한다. 두 전봇대 사이엔 여러 전깃줄이 존재한다. 전봇대의 높이는 1~10으로 표현되는데, 전깃줄은 다음 그림과 같이 겹칠 수 있다. 최소한의 전깃줄을 제거해서 모든 전깃줄이 서로 교차하지 않도록 만들어라. 2. 푸는 원리 해당 문제를 LIS로 생각만 할 수 있다면 쉽게 풀리는 문제다. 하지만 그렇게 생각하기가 꽤나 어렵다. 따라서 필자는 먼저 전깃줄 문제를 어떻게 LIS 문제로 볼 수 있는지부터 설명하고자 한다. 위 사진의 ..

1. 문제 설명 14002번: 가장 긴 증가하는 부분 수열 4 수열 A가 주어졌을 때, 가장 긴 증가하는 부분 수열을 구하는 프로그램을 작성하시오. www.acmicpc.net 수열이 주어졌을 때, 가장 긴 증가하는 부분 수열의 길이를 구하고, 해당 조건을 만족하는 부분 수열 중 하나를 출력하라. → 원래 최장 증가 부분 수열의 길이만 구하던 문제에서 이제 그 구성요소를 구하는 문제로 바뀌었다. 2. 푸는 원리 처음에 문제 푸는 데 정말 헤맸는데, 그 이유는 해당 문제도 다른 LIS처럼 이분탐색을 써서 풀려고 했기 때문이다. 하지만 이분탐색의 경우 큰 문제가 있는데, 바로 LIS의 구성요소를 구하기 힘들다는 점이다. 왜 그런지 한번 보자. 먼저 값을 구하기 위해 조작하는 배열을 A, 수열 전체를 담는 배..

1. 문제 설명 11000번: 강의실 배정 수강신청의 마스터 김종혜 선생님에게 새로운 과제가 주어졌다. www.acmicpc.net 강의의 시작 시간과 종료 시간이 주어졌을 때 해당 강의들을 전부 소화할 수 있는 최소 강의 수를 구하여라. 2. 푸는 원리 저번에 풀었는데 틀렸다. 틀리는 방법도 똑같았다 ㅜㅜ. 다시 푸는 방법을 정리해 보겠다. 배열 혹은 List에 강의 시작 시간이 빠른 순으로 강의를 정렬한다. 강의의 끝 시간을 기준으로 값들을 정리하는 Priority Queue를 만든다. 자 이제 List에 존재하는 값들을 차례로 순회할 것이다. 우리가 현재 조회하는 강의를 A라고 해보자. A의 강의 시작 시간이 오후 1시라고 할 때, 현재 시각을 오후 1시라고 가정하는 것이다. 이렇게 list에서 현..