분류 전체보기
-
Props와 StateFront-End/React.js 2022. 3. 4. 10:11
리액트 컴포넌트의 두 가지 데이터 우리는 앞선 게시글을 통해 리액트는 컴포넌트 기반 사용되는 라이브러리라는 것을 알았다. 모두 알고 있듯 컴포넌트는 코드를 필요에 따라 작게 나눈 단위다. 그렇다면 공통된, 혹은 공유해야 하는 데이터를 컴포넌트끼리 주고받을 때에는 어떻게 해야 할까? 이를 위해 나온 개념이 바로 Props와 State다. 리액트에서는 이 두 가지 데이터를 통해 컴포넌트 내부, 혹은 컴포넌트 사이의 데이터를 활용한다. Props Props는 Properties의 줄임말이다. 영어 사전을 뒤져보자. Property는 속성, 성질 등의 뜻을 가지고 있다. React에서도 이를 그대로 적용해서 생각하면 된다. props는 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 전달할 때 사용하는 개념이다. ..
-
DOM과 Virtual DOMComputer Science/Web 2022. 3. 2. 17:53
DOM(Document Object Model) DOM의 개념 문서 객체 모델(The Document Object Model, 이하 DOM)은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 출처 https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Intr..
-
React의 개념과 특징Front-End/React.js 2022. 3. 2. 12:39
서론 원래 프론트엔드 쪽으로는 뜻이 크게 있지 않았기 때문에 관련 라이브러리나 프레임워크 또한 잘 모르는 상태였다. 어쩌다 보니 회사에서 진행하는 프로젝트를 통해 프론트엔드 쪽 개발, 특히 리액트를 기반으로 한 개발을 맡게 되었다. 어찌어찌 프로젝트는 잘 마무리되었지만 리액트를 급하게 익혔기 때문에 개념적인 부분을 제대로 잡고 가지 못한 부분이 있었다. 프로젝트 진행 당시 이 건만 어느 정도 마무리되면 부족했던 부분을 채워 정리해놓아야겠다 생각했는데, 지금이 바로 적기라는 생각이 들었다. 리액트란 무엇인가? 개발 공부(+업무)를 하면서 한 가지 확실하게 배운 것은, 모르는 것이 있을 때는 '공식 문서'를 살펴보라는 것. 대부분의 경우 공식 문서에서 정의, 원리, 원인 등을 찾을 수 있다. 아무튼 Reac..
-
백준 3101번: 토끼의 이동(Python/Java)Algorithm/Algorithm Problem 2022. 2. 27. 00:45
https://www.acmicpc.net/problem/3101 3101번: 토끼의 이동 첫째 줄에 N, K가 주어진다. (1 ≤ N ≤ 100,000, 1 ≤ K ≤ 300,000) N은 행렬의 크기, K는 토끼가 점프한 횟수이다. 둘째 줄에는 'U','D','L','R'로 이루어진 문자열이 주어진다. 이 문자열의 길이는 K이며, 토 www.acmicpc.net 접근 이 문제의 중요 포인트는 '현재 토끼가 서있는 칸의 숫자'를 어떻게 찾아내냐는 것이다. 다들 알고리즘 문제를 풀며 생긴 소위 '짬바'가 있으니 벌써 감이 잡혔겠지만, 직접 표의 모든 부분을 구현하려고 하면 당연하게도 시간(혹은 메모리) 초과가 뜰 것이다. 최대 길이가 100,000이니 최대 길이로 문제가 나온다면 이에 따른 칸 수는 10..
-
백준 2931번: 가스관(Python/Java)Algorithm/Algorithm Problem 2022. 2. 21. 21:51
https://www.acmicpc.net/problem/2931 2931번: 가스관 www.acmicpc.net 접근 가장 간단하게 생각해보면, 각 칸마다 접근해서 인접 좌표의 블록 유형을 하나하나 확인해 끊겨있는지 확인하고 끊겨있다면 이를 이어 줄 수 있는 블록을 찾아 넣으면 된다. 단순 구현 문제기 때문에 이렇게 풀면 당연하게도 정답이 나온다! 나는 이 원리를 기본으로 코드 길이를 줄이고 더 효율적으로 작성할 수 있는 방법을 찾아보았다. 구현하면서 가장 신경 썼던 점은 해당 구간마다 블록 유형을 체크하지 않도록 하는 것이었다. 다시 말해 현재 탐색하는 구간의 블록이 "|"인지, "+"인지 체크하지 않아야 한다고 생각했다. 그렇다면 어떻게 해야 상하좌우와 연결되는 블록을 찾을 수 있을까? 내가 생각 ..
-
백준 9204번: 체스(Python/Java)Algorithm/Algorithm Problem 2022. 2. 17. 09:07
https://www.acmicpc.net/problem/9204 9204번: 체스 첫째 줄에 테스트 케이스의 개수 T가 주어진다. 각 테스트 케이스는 한 줄로 이루어져 있고, 시작 위치 X와 도착 위치 Y가 주어진다. 각 위치는 두 글자가 공백으로 구분되어져 있다. 글자는 열, www.acmicpc.net 접근 우선 알아둬야 할 두 가지 전제조건이 있다. 체스에 관해 잘 모르더라도 문제를 풀다 보면 자연스럽게 눈치챘을 부분이다. 우선 비숍은 본인이 있는 지점의 색상과 같은 지점만 갈 수 있다는 것을 알아둬야 한다. 즉, 현재 비숍이 있는 발판이 검은색이라면 흰색 발판 지점은 어떤 경우의 수를 생각하더라도 절대 도착할 수 없다. 다음으로 알아둘 것은 비숍의 이동 횟수다. 문제 조건에서 '최대 4번 움직일..
-
듀얼 모드(Dual Mode)란?Computer Science/Operating System 2022. 2. 13. 21:22
듀얼 모드(Dual Mode)란? 듀얼 모드(Dual Mode, 이중 동작 모드)란 공유된 시스템 자원을 유저 모드(User Mode)와 커널 모드(Kernel Mode), 두 가지로 나눠 사용하는 것을 말한다. 쉽게 말해 운영체제가 수행할 수 있는 기능 영역과 사용자가 수행할 수 있는 기능 영역을 각각 나눠놓았다고 생각하면 된다. 여기서 유저 모드는 커널 모드에 바로 접근하지 못한다는 것이 중요 포인트다. 유저 모드(User Mode) 우리가 일반적으로 프로그램을 사용할 때 OS의 모드를 뜻한다. 유저 모드에선 사용자가 실제로 사용할 수 있는 영역은 제한적이다. 즉, 유저 모드에선 허용된 범위 외의 시스템 자원에 함부로 접근하지 못한다. 커널 모드(Kernel Mode) 커널이란 운영체제의 가장 핵심적..
-
시스템 콜(System Call)이란?Computer Science/Operating System 2022. 2. 13. 20:54
시스템 콜(System Call)이란? '시스템 콜(System Call)'은 유저 모드에서 커널 영역의 기능을 사용하게 하는 인터페이스다. 즉, 프로세스가 하드웨어에 접근해 필요한 기능을 사용할 수 있게 하는 기능이다. 조금 풀어서 얘기하자면 응용 프로그램에서 운영체제에게 어떤 기능을 수행해달라고 신호를 보내는 것을 보고 '시스템 콜'이라고 한다. 시스템 콜을 왜 사용하는가? 운영체제는 유저 모드(User Mode)와 커널 모드(Kernel Mode)가 나누어져 있다. (이를 Dual Mode라고 한다.) 사실 유저 모드는 이름만 어느 정도 유추가 된다. 두 개로 나누어져 있는 운영체제에서 유저가 사용하는 부분이다. 유저 모드는 응용 프로그램을 실행할 때 사용된다. 우리가 컴퓨터를 사용할 때에는 보통 ..