ISA(Instruction Set Architecture)란 컴퓨터를 사용하기 위한 매뉴얼을 의미한다. 여기서 컴퓨터란 CPU를 의미하는 것이라고 보아도 좋다. 우리가 매뉴얼을 보는 목적은 컴퓨터가 구체적으로 어떻게 구현되어 있는지 알기 위해서가 아니다. 몇 나노 공정을 했고 캐시 사이즈는 얼마며 최적화를 위한 어떤 기술이 적용되었는지 등은 우리가 알 필요가 없는 것이다. 매뉴얼은 컴퓨터의 사용자, 즉 프로그래머 입장에서 컴퓨터를 의도한대로 동작하기 위해 어떻게 명령해야 하는지를 아주 자세히 설명하고 있어야 한다. 프로그래머 입장에서 컴퓨터에 명령을 내리는 방법은 딱 하나 뿐이다. 명령어(=Instruction)을 입력하는 것이고, 이 때문에 컴퓨터의 매뉴얼을 Instruction Set Architecture라고 부른다.

프로그램은 여러 개의 명령어들이 모여 만들어진 것이고, 컴퓨터에는 이를 저장할 공간이 필요하다. 이를 메모리라고 부른다. 명령어는 메모리에서 실행될 수 없다. 명령어가 실행되는 공간은 CPU고, 따라서 CPU는 메모리로부터 명령어를 가져와야 한다. CPU와 메모리는 Bus로 연결되어, 실제 버스처럼 메모리에 있는 데이터를 CPU로, CPU에 있는 데이터를 메모리로 저장할 수 있게 도와준다. 도식화하면 위 그림과 같이 표현할 수 있다.

1. 명령어를 가져옴(Fetch)
2. CPU가 명령어를 해독(Decode)
3. CPU가 명령어를 실행(Execution)

위 과정을 끊임 없이 반복하는 것이 CPU가 하는 일이며, 이러한 컴퓨터의 구조를 폰 노이만 아키텍쳐라고 부른다. 또한 CPU가 메모리에서 명령어를 읽어오기 때문에 필연적으로 발생하는 병목을 폰 노이만 병목이라고 부른다.

폰 노이만 병목을 줄이기 위해서는 버스를 통해 메모리에 접근하는 횟수를 최대한으로 줄이는 것이 좋을 것이다. 예를 들어 내가 명령어를 어디까지 읽었는지에 대한 정보를 메모리에 저장해놓는 것 보다는 그냥 CPU가 들고 있는게 훨씬 빠를 것이다. 이런 목적을 위해 CPU에 데이터를 저장할 수 있는 작은 메모리를 만들게 되었고, 이를 레지스터(Registers)라고 부른다. 레지스터가 저장된 공간을 흔히 레지스터 파일(Register File)이라고 부른다.

게임보이도 마찬가지로 CPU와 메모리, 그리고 그 사이를 이어주는 Bus가 존재한다. 물론 그게 다가 아니다. 게임화면을 출력해줄 LCD 기판이 있어야 하며, 소리를 내줄 스피커가 있어야 한다. LCD 기판에는 Video signal을, 스피커에는 Audio signal을 공급해줘야 한다. 조이패드 입력도 처리해야 하며, 카트리지도 꽂을 수 있게 만들어야 한다.

기본적인 CPU/메모리를 제외한 기기를 주변기기(Periperhal Device)라고 부르고 일반적인 컴퓨터에서 NIC/GPU/SSD 등에 해당한다. 주변기기에 대한 내용은 미뤄두고, 먼저 CPU에만 집중해보자.

자, 이제 우리에게 게임보이 콘솔 하나가 주어 졌다고 하자. 우리가 게임보이에서 돌아가는 게임을 만들어보고 싶다고 하면, 뭘 읽어봐야 할까? 당연히 ISA를 읽어봐야 한다. 게임보이가 어떤 명령어 체계를 갖고 있는지 숙지하고 그에 맞춰서 프로그램을 짜야 한다. 일반적인 CPU(Intel, AMD, ARM 등)과 달리 닌텐도는 출시 당시 ISA가 공개되지는 않았으나 지금은 쉽게 찾아볼 수 있다(링크). 혹은 ISA는 아니지만 게임보이의 스펙에 대해 위키 형태로 잘 정리된 홈페이지도 존재한다.

위 그림에서 8-bit Microprocessor라고 표기되어 있는 부분이 게임보이의 CPU에 해당하는 부분이다. 위 그림은 게임보이의 구현이 어떻게 되어 있는지를 보여주고 있다. 그러나 프로그래머 입장에서 RAM의 크기가 얼마니 하는 것들은 중요치 않다. 우리는 명령어가 어떻게 되어 있는지, 레지스터는 몇 비트로 몇 개나 있는지가 더 중요하다.

게임보이는 8bit 레지스터(A, B, C, D, E, F, H, L)와 16bit 레지스터(PC, SP) 2가지 종류의 레지스터를 갖는다.

8bit 레지스터들은 하나씩 사용되기도 하며, ex) ADD A, B 두 레지스터가 묶여서 하나의 16bit 레지스터 처럼 사용되기도 한다. ex) LD BC, n16

일반적으로 명령어는 3가지로 분류할 수 있다.

1. 산술 및 논리 연산 명령어(ADD, SUB, OR, AND, ...)
2. 데이터 이동 명령어(LOAD, STORE)
3. 분기 명령어(JUMP, BRANCH)

1번의 동작은 자명하다. 2번은 어딘가에 저장된 정보를 가져오거나(=LOAD), 레지스터에 저장된 값을 어딘가에 쓰는 연산(=STORE)를 의미한다. 3번은 명령어를 순차적으로 읽지 않고 임의의 주소로 건너 뛰거나(=JUMP), 조건문에 따라 명령어를 순차적으로 읽을지 아니면 임의의 주소로 분기할지(=BRANCH) 결정하는 명령어를 의미한다. for 문이나 if-else 같은 고수준 문법이 3번 명령어들로 구현된다.

PC는 Program Counter를 의미하며, 현재 읽고 있는 명령어의 주소가 저장되어 있는 레지스터를 의미한다. SP는 Stack Pointer를 의미하는데, 설명이 길어지기 때문에 여기서는 생략하도록 하겠다(참고).

이제 예시로 ISA에서 명령어 하나를 가져와서 분석해보자. 위 그림은 게임보이의 8bit Load Instruction에 대한 부분을 일부 캡쳐한 것이다. LD r, r' 와 같이 명령어를 작성하고, r' 에 저장된 값을 레지스터 r 에 저장하게 만드는 명령어를 의미한다고 되어 있다. 각 레지스터는 표와 같이 decoding이 되어 있다(ex) LD 111, 000 이면 LD A <- B).

자세히 보면 CY, H, N, Z, CYCL이라는 칸이 존재한다. 먼저 C(Y), H, N, Z는 Flag인데, 산술 연산의 결과를 저장해서 다음 명령어가 이를 보고 명령을 수행할 수 있도록 하는 1비트 레지스터라고 보면 된다. 게임보이에서는 F 레지스터를 비트 단위로 나누어 Flag를 구현하였다. 예를 들어 XOR A, A 명령을 수행하면 A에는 0이 저장되고, 연산 결과가 0이므로 Z flag가 1로 assert된다. 이후 JP Z, a16 명령을 수행하게 되면 if(z == 1) goto a16; 과 같은 기능을 수행하게 된다.

    u8 result = regs.a ^ reg_val;
    flags.z = (result == 0) ? 1 : 0;
    flags.n = 0;
    flags.h = 0;
    flags.c = 0;
    regs.a = result;

위는 C++로 CPU의 동작을 에뮬레이션한 것이다. CPU는 위와 같은 동작을 하드웨어적으로 수행한다. 필자는 CPU가 명령어를 읽고 해석해서 실행하는 과정을 step() 이라는 함수로 CPU class 내의 member function으로 구현하였다. 즉 main.cpp 에서

while(1) {
    cpu.step();
}

이 무한루프를 도는게 아주 원시적인 컴퓨터라고 보면 된다. 여기에 PPU, APU, 인터럽트 등을 갖다 붙이면 제법 훌륭한 시스템이 되는 것이다.

필자는 step() 함수를 전부 구현하는데 꼬박 4일이 소요되었다. CPU가 처리해야 될 모든 명령어를 코드로 작성해야 하기 때문이다. 위 그림과 같이 많은 명령어 각각의 기능을 구현해야 하고, 그 때마다 flag가 잘 set되는지, 기능이 잘 동작하는지를 검사해줘야 한다. (위와 같은 표가 하나 더 있다, 출처)

엄청나게 큰 switch-case 문을 이용하여 step() 함수를 아래와 같이 구현해주었다.

 236         case 1: // ADC A, r8
 237           {
 238             u8 carry = (flags.c) ? 1 : 0;
 239             u16 temp = regs.a + reg_val + carry;
 240             flags.z = ((temp & 0xFF) == 0) ? 1 : 0;
 241             flags.n = 0;
 242             flags.c = (temp > 0xFF) ? 1 : 0;
 243             flags.h = ((((regs.a & 0x0F) + (reg_val & 0x0F) + carry) & 0x10) == 0x10) ? 1 : 0;
 244             regs.a = temp & 0xFF;
 245             return (reg == 6) ? 8 : 4;
 246           }
 247         case 2: // SUB A, r8
 248         case 7: // CP A, r8
 249           {
 250             u16 temp = regs.a - reg_val;
 251             flags.z = ((temp & 0xFF) == 0) ? 1 : 0;
 252             flags.n = 1;
 253             flags.h = ((regs.a & 0x0F) < (reg_val & 0x0F)) ? 1 : 0;
 254             flags.c = (regs.a < reg_val) ? 1 : 0;
 255             if(op == 2) regs.a = temp & 0xFF;
 256             return (reg == 6) ? 8 : 4;
 257           }
 258         case 3: // SBC A, r8
 259           {
 260             u8 carry = (flags.c) ? 1 : 0;
 261             u16 temp = regs.a - (reg_val + carry);
 262             flags.z = ((temp & 0xFF) == 0) ? 1 : 0;
 263             flags.n = 1;
 264             flags.c = (regs.a < reg_val + carry) ? 1 : 0;
 265             flags.h = ((regs.a & 0x0F) < ((reg_val & 0x0F) + carry)) ? 1 : 0;
 266             regs.a = temp & 0xFF;
 267             return (reg == 6) ? 8 : 4;
 268           }
 269         case 4: // AND A, r8
 270           {
 271             u8 result = regs.a & reg_val;
 272             flags.z = (result == 0) ? 1 : 0;
 273             flags.n = 0;
 274             flags.h = 1;
 275             flags.c = 0;
 276             regs.a = result;
 277             return (reg == 6) ? 8 : 4;
 278           }
 279         case 5: // XOR A, r8
 280           {
 281             u8 result = regs.a ^ reg_val;
 282             flags.z = (result == 0) ? 1 : 0;
 283             flags.n = 0;
 284             flags.h = 0;
 285             flags.c = 0;
 286             regs.a = result;
 287             return (reg == 6) ? 8 : 4;
 288           }

코드를 보면 함수가 4, 8 처럼 integer 값을 리턴하고 있는 것을 알 수 있다. 이는 한 명령어를 실행하는데 걸리는 사이클 수를 의미한다.

다음 글에서는 Multi-cycle CPU를 통해 cycle 수를 왜 return해야 하는지를 설명해보겠다.

3년이 지난 후 2011년, 마인크래프트라는 게임의 플레이 영상이 유튜브에 올라오고 있었다. 친구들과 함께 하고 싶었던 나는 마인크래프트 1.5.2 서버 여는 법을 네이버에 검색해가며 버킷을 다운받고, 파일을 메모장으로 열고, true를 false로 바꿔가며 결국 서버를 열었다.

컴퓨터가 뭘까? 뭐가 어떻게 돌아가는 걸까? 그런 의문이 가슴 속에 자리잡고 있었다. 고등학교 때 컴퓨터개론이라는 전공서적을 보게 되어 홀린 듯이 사서 읽었다. 진법이니, 프로그래밍언어니, 당시에는 도저히 알아들을 수가 없었다.

무섭게 치솟고 있던 컴퓨터공학과의 인기 탓에 나는 전기정보공학부로 진학하였다. 기초회로이론, 전자기학, 신호 및 시스템 등 무자비한 전공필수에 나는 컴퓨터에 대한 호기심이 들 새도 없이 시달리고 있었다.

4학년이 되어서야 나는 컴퓨터조직론이라는 수업을 듣게 되었다. 그 수업은 내 오랜 의문에 대한 길고 긴 대답이었고, 내 마음 속에 다시 한 번 작은 불씨를 피워 주었다.

이 시리즈는 그 수업의 내용을 기록하기 위해 연재될 것이다. 연재를 도와주기 위해 내 추억 속의 작은 닌텐도를 가져왔다.

닌텐도도 결국 작은 컴퓨터다(임베디드 시스템이라는 아주 멋진 이름이 있지만). 필자는 닌텐도 게임보이를 소재로 사용하여 일반적인 컴퓨터 구조에 대해 나름대로 정리하고 배운 바를 설명하고자 한다.

필자는 이번 방학의 목표가 C++기반 게임보이 에뮬레이터를 만들어 포켓몬스터 적 버전을 플레이하는 것이었다. 모든 코드를 최대한 AI의 도움 없이 작성하고자 노력하였고, 한 달 동안 도서관에 박혀 열심히 뚝딱거려서 목표를 달성할 수 있었다. 에뮬레이터는 github에 공개해놓았다.

본격적인 연재를 시작하기에 앞서 간단한 Introduction을 진행하고자 한다.

위 그림은 컴퓨터 시스템의 계층 구조를 잘 드러내주고 있다. 컴퓨터가 뭔가? 에 대해 대답하기 위해서는 각 레이어 및 인터페이스에 대해 전부 이해하고 있어야 한다.

전부 이해하기는 어렵고 너무 복잡하다. 컴퓨터조직론, 혹은 컴퓨터구조(Computer Architecture)라고 불리우는 수업은 가장 중앙에 위치하고 있는 하나의 레이어에 대해 알려주는 수업이다. 아키텍처 위에는 운영체제 및 응용 프로그램 같은 소프트웨어가, 아래에는 회로 및 소자 수준의 하드웨어 레이어가 있다. 각 레이어가 너무 복잡하다보니, 현대에는 각 레이어의 전문가들이 모여 하나의 시스템을 설계하게 되었다. 즉 다른 레이어에 대해 전부 알 필요는 없고, 뭉뚱그려서 이해하기 쉽게 만들게 표현하여 의사소통을 하게 되고 이를 abstraction이라고 부른다.

우리가 살펴볼 아키텍쳐는 컴퓨터가 어떻게 동작하는지(=functionality)에 관한 일종의 약속을 정하고, 이를 위/아래 레이어에 알려주는 역할을 한다. 자동차를 예로 들면 엑셀을 밟으면 앞으로 나아가고, 브레이크를 밟으면 자동차가 멈춘다는 사실은 제조사와 운전자 모두에게 이미 약속된 사항이다. 엑셀을 어느 정도의 힘으로 밟아야 60km/h에서 100km/h로 올라가는지는 아키텍쳐의 영역을 벗어난다. 이는 자동차 엔진의 스펙 등을 고려해야 하는 마이크로아키텍쳐의 영역이다.

즉 아키텍쳐란 컴퓨터 시스템의 개념적인 구조 및 동작을 프로그래머 입장에서 묘사하는 것을 의미하고, 실제 컴퓨터 시스템이 어떻게 구현되어 있는지와는 무관하다.

LG 그램에서는 돌아가는 게임이 애플 M2 맥북에서는 지원되지 않는 경우를 들어본 적이 있을 것이다. 이는 근본적으로 두 컴퓨터의 아키텍쳐가 다르기 때문이다. 위 사진을 보면 Ubuntu를 설치할 때 Intel or AMD 아키텍쳐인지 ARM 아키텍쳐인지에 따라 선택지가 나뉘어있는 것을 알 수 있다. 일반적으로 Windows에서는 Intel 아키텍쳐를, 애플 실리콘은 ARM 아키텍쳐를 사용한다. 아키텍쳐가 다르다는 것은 자동차로 치면 운전하는 방식이 아예 다르다는 것이다. 그렇기에 Intel 아키텍쳐에서 돌아가는 프로그램이 애플 실리콘에서 돌아갈리가 없는 것이다.

게임보이 역시 약속된 사항이 존재한다. 구체적으로 뭐가 어떻게 약속이 되어있는지 살펴보도록 하자.

0. 다중우주란?

여기서 이야기하는 다중우주란 가능성에 따라 우주가 분기하여 여러 개의 우주가 존재하는 것을 의미한다. 에브리씽 에브리웨어 올 앳 원스를 보면 생명체의 선택에 따라 하나의 우주가 여러 가지 갈래로 분기하는 장면이 나온다. Part 3의 초반부에서 주인공 에블린이 영수증을 왼쪽에 놓을지, 오른쪽으로 놓을지 고민하다가 양쪽의 우주를 겹쳐 보여주는 장면이 이를 잘 드러낸다고 할 수 있다. 이런 일상적인 선택에 의해서도 분기되는 우주니, 셀 수 없이 많은 다중우주가 존재할 것이다.

웹툰 쿠베라의 3부에서도 다중우주라는 개념이 등장한다. 영화와 마찬가지로, 생명체의 선택에 따라 우주가 분기한다는 것이다. 다만 에브리씽 에브리웨어 올 앳 원스와 쿠베라가 다른 점은, 쿠베라에서는 가능성의 세계와 현실 세계가 명확히 구분된다는 것이다. 작중에서 가능성의 세계로 남겨진 우주는 붕괴한다고 언급된다. 즉, 현실로 판정된 단 하나의 세계선을 제외하면 가능성의 세계는 사라진다는 의미이다.

이러한 설정으로 인해 딜레마가 생긴다.

• 가능성으로 남겨진 우주의 생명체들이 멸망하는 것이 정당한가?
• 가능성의 우주에 남겨진 생명체가 현실 우주를 대체하면 어떻게 되는가?

더 근본적으로, 가능성과 현실을 구분짓는 기준은 무엇인가?

1. 수많은 우주의 수많은 나

에브리씽 에브리웨어 올 앳 원스에서 가장 중요한 인간관계 2개를 뽑으라면 '에블린'-'조이'와 '에블린'-'웨이먼드'일 것이다. 흥미로운 것은 수많은 우주에서 내 손가락이 핫도그가 되든, 내가 돌이 되어버리든 상관없이 그 관계성은 일관적으로 유지된다는 것이다. 에블린이 어떤 가능성의 우주에 가도 상응하는 그녀의 웨이먼드가 있다. 비록 그와 그녀가 이어지지 않은 우주도 있지만, 그 우주의 성공한 웨이먼드는 그녀와 소박하게 세탁소를 운영하는 우주를 꿈꾼다. 하지만 그 말을 들은 에블린은 바로 그 빨래방을 운영하는 세계선의 에블린이었고, 크게 성공한 자신의 인생을 동경하고 있었다. 에블린은 이후 모든 날 모든 순간을 소중히 여기는 것이 중요하다는 것을 깨닫는다. 어떤 우주든 어떤 인생을 살든, 함께 존재하는 지금 이 순간이 가장 중요한 것이라는 메시지를 영화에서 일관적으로 계속 던져주는 것으로 느껴졌고 나에게는 굉장히 와닿았다.

또 한가지 흥미로운 점은 영화가 수많은 우주를 넘나들 정도로 스케일이 거대하지만 정작 그들이 묘사하는 범위는 굉장히 작다는 것이다. 메인 우주에서 국세청 직원으로 등장하는 디어드리가 처음에는 비중이 적은 줄 알았으나, 거의 모든 우주에 다양한 역할로 관객의 눈에 띄게 된다. 결국 우주가 아무리 많고 아무리 다양해도 한 개인에게 우주란 자신의 주변을 의미할 수 밖에 없다는 것이다. 이러한 측면에서 볼 때 웨이먼드는 멸망하는 세계를 구하기 위해 에블린에게 찾아왔지만, 에블린은 그런 대의보다는 그저 자신의 가족을 구하기 위해 고군분투하는 것 처럼 보인다. 쿠베라에서도 자신이 사랑하는 사람을 포함한 범위를 우주라고 지칭하는 경우를 자주 볼 수 있다. 그들에게는 우주를 구하는 것이 사랑하는 사람을 구하는 것과 같다. 앞서 언급했듯 쿠베라에서 가능성으로만 남겨진 우주는 멸망하기 때문에 이러한 상황에서의 사랑이 더욱 극적으로 표현되고 있다. 하나의 예시를 살펴보자. 적 챕터에서 가능성의 세계에 도착한 '란'은 자신의 아내인 '라나'와 아이들을 멸망으로부터 구해내기 위해 현실 세계로 넘어갈 것을 제안한다. 그러나 라나는 원래 우주에 있을 자신과 아이들의 몸을 빼앗을 수 없다며 이를 거절한다. 다중우주에서는 관계성이 변화하지 않는다는 것이 전제되기 때문에, 차마 다른 우주의 자신의 몸을 빼앗는 선택은 내릴 수 없었던 것이다. 지금 이 순간이 가장 중요하지만, 그건 다른 우주의 나에게도 똑같을 것이기 때문에.

2. 다중우주로 표현된 거대한 사랑

앞서 에블린-웨이먼드의 관계를 이야기했지만, 사실 에브리씽 에브리웨어 올 앳 원스는 에블린과 조이의 이야기라고 봐도 과언이 아닐 정도로 둘의 서사가 중요하다. 딸을 몰아붙이는 엄마라는 설정은 주변에 있을 법한 흔한 설정이지만 다중우주 SF라는 장르가 이를 극적으로 만들어버린다. 메인 우주에 있는 에블린은 조이가 여자친구를 두고 있는 것을 못마땅해 하고 살좀 빼라며 딸을 몰아붙이지만, 다른 우주의 과학자 에블린은 딸이 다중우주를 넘나들며 모든 능력을 학습하도록 딸을 몰아붙이게 된다.
쿠베라에서는 꿈이 다른 우주를 의미할거라는 추측이 있는데, 영화와 비슷하게 꿈을 이용하여 기술을 습득할 수 있다는 설정이 존재한다. 쿠베라에서는 긍정적인 의미로만 사용되는 기술이지만, 에블린은 자신의 딸을 어느 우주와 다름없이 끝까지 몰아붙여 결국 자신의 딸인 조이를 괴물 조부 투바키로 만들어 낸다. 조부 투바키는 다중우주에 있는 모든 자신에게 접속할 수 있으며, 그곳에서 일어나는 모든 일을 알 수 있다. 조부 투바키는 모든 것을 알게 되고 허무주의자가 되어 세상을 무로 되돌리려고 한다. 쿠베라에서 정확히 조부 투바키에 대응되는 인물이 존재한다. 앞서 쿠베라에서는 가능성의 우주가 붕괴한다고 했는데, 이 우주에 살던 생명체들의 원한이 뭉쳐 만든 괴물인 '유타'가 존재한다. 유타는 자신의 의지와는 상관 없이 뭉쳐진 원한 때문에 세계를 멸망시키게끔 움직인다. 한편, 영화에서 세계를 무로 돌리려는 조부 투바키를 막아서는건 가장 실패한 세계의 에블린이었다. 그녀는 남편 웨이먼드와 닮은 친절한 자세로 조부 투바키에게 다가가 그녀를 조이로 되돌려 놓았다. 에블린에게 대응되는 쿠베라 속의 인물인 리즈는 유타의 애인이다. 리즈도 에블린과 마찬가지로 가장 실패한 세계에 속해있다고 할 수 있다. 고향 마을이 폭격되고, 아버지가 살해당하고, 가장 믿었던 사람에게 배신을 당한다. 에블린과 조이가 모녀 관계이지만 세계의 존망을 두고 대립하였듯 리즈와 유타도 정확히 같은 이유로 대립하게 된다. 작중에서 유타가 가능성을 상징하는 존재라면, 리즈는 시간축을 상징하는 존재이다. 시간은 단 하나의 가능성을 선택하여 역사에 기록한다. 시간이 선택하지 않은 가능성의 우주들은 모두 에너지를 잃고 멸망하고 만다. 이러한 설정 때문에 둘의 사랑은 더욱 애절해진다. 자신에게 부여된 시간이라는 역할 때문에 수없이 많은 애인들을 모두 소멸시켜야 하는 운명인 것이다.

결국 우주를 구하는 것은 사랑이라는 메시지를 영화와 똑같이 던지고 있는 것이다.

출처 블로그

그 시절 메이플스토리를 해본 사람이라면 2,147,483,647 이라는 숫자에서 무언가 향수를 느낄지도 모른다. 백만 단위도 크게 느껴졌던 나에게, 학교에서 배운 방법으로 4자리씩 끊어가며 본 결과 저 숫자가 21억이라는 어마어마한 숫자라는 걸 알았을 때 무언가 압도되는 느낌을 받았었다. 그래서 저 숫자가 기억이 난다.

시간이 지나고 잊고 살다가, int 자료형을 배우게 되면 저 숫자가 2^31 - 1이라는걸 알게 된다.

대부분의 32bit 운영체제에서 int, long type의 자료형은 4byte, 그러니까 32개의 bit를 저장 할 수 있다. 그런데 2^32는 계산해보면 2,147,483,648이 아니다. 왜 그럴까?

그 이유를 컴퓨터가 Integer를 encoding하는 방법을 통해 알아보도록 하자.

(후술할 내용은 CS:APP 3rd edition을 참고하였습니다.)

1. Integer?

int num = 3;

Integer는 수학 용어로 정수를 의미한다. 그리고 CS에서의 Integer는 유한한 범위의 정수를 표현하는 _integral data type_을 의미한다.

위 표에 32비트 운영체제에서 integral data type의 range가 적혀 있다. 눈 여겨 볼 점은 음수의 범위가 양수의 범위보다 1만큼 크다는 것이다. 아마 0 때문이라고 직관적으로 추측은 되지만, 왜 그런지 정확히 설명해보라고 하면 할 말이 없다.

2. Unsigned encodings

위 표를 보면 알 수 있듯이 자료형은 음수 범위를 커버하는지에 따라 signed와 unsigned로 나뉜다. 그리고 signed인지 unsigned인지에 따라 정수가 encoding되는 방식이 다르다. unsigned의 경우 우리가 일반적으로 decimal(10진수)을 binary(2진수)로 변환하는 방법을 따른다. 이를 Unsigned encoding이라고 한다.

(B2U: Binary to Unsigned mapping) 이는 우리의 일반적인 상식과 일맥상통한다. 근데 이제 -1을 어떻게 표현하지??

3. Two's complement encodings

Two's complement form: Interpreting the most significant bit of the word to have negative weight.

Most Significant bit, 즉 첫번째 비트는 음수로 본다는 뜻이다. 예를 들어 보자.

(B2T: Binary to Two's complement) 예시를 통해 보면 이해가 쉽다. 이제 왜 음수 범위가 양수 범위보다 1만큼 큰지 이해가 되는가? 음수의 최댓값은 [100...000]이고 양수의 최댓값은 [011...111]이다. 이는 1만큼 차이가 난다. 조금 더 생각해보면 unsigned를 non-negative로 정의하면서 0과 양수가 하나의 집합으로 묶이게 되었다. 그래서 0 + 양수의 집합과 음수의 집합은 크기가 같다. non-positive를 unsigned로 정의한다면 양상은 반대가 될 것이다.

왜 two's complement라고 불릴까? 예를 들어 -5를 표현할 때 [1011] = -8 + 0 + 2 + 1로 계산이 된다. 즉 -2^3에 더하는 방식이기 때문에 two's complement라고 부른다.

4. 그 외의 Encoding 방법들

반면 one's complement는 0이 [11...11]로 표현되고, -x = [11...11] - x로 구해지기 때문에 one's complement라고 불린다.

처음 알고리즘을 모르고 백준 문제를 풀 때, 재귀와 백트래킹이 무엇이 다른지 그리고 DFS가 뭔지 알지 못해서 너무나 어려웠다. 특히 N과 M 문제를 끼워 맞추듯 풀었던 기억이 있는데.. 이번 기회에 정리해보고자 한다. 15649 N, M(1)

문제는 간단하다. N개의 자연수에서 M개를 고른 수열을 모두 출력하라는 것이다. 개수를 구하는 것은 간단하다. N Permutation M을 구하면 되니까. 경우의 수를 모두 구하는 것도 직접 종이에 쓰면서 하면 전혀 어려운 일이 아니지만, 이를 코드로 구현하는 것은 그렇게 쉽지 않다. 특히 처음하는 경우에는 더더욱 그렇다.

예시로 6개의 자연수에서 2개를 뽑아 중복 없는 수열을 만들어보자.

누구나 위와 같은 그림을 그릴 수 있다. 그리고 누구나 이렇게 하나하나 셀 것이다. 당연하게도 위와 같은 사고과정을 코드로 옮겨 주면 된다.

코드로 구현하기 전에 알고리즘을 먼저 말로써 표현해보자. 어떤 순서로 짜면 될까?

1. 첫 번째 자연수 부터 시작한다. 출력해야 하므로 어딘가에 저장해놓는다.
2. 다음 자연수로 이동한다. 중복을 허용하지 않으므로 자연수를 increment한다. 마찬가지로 어딘가에 저장해놓는다.
3. 2개를 모두 골랐으므로, 이전 상태로 돌아간다.
4. 다시 자연수를 increment한다 ...

여기서 3번이 백트래킹의 핵심이다. 탈출 조건에 도착했을 때 작업을 수행하고 이전 단계로 돌아가는 것. 이전 단계를 당연히 기억하고 있어야 한다. 그렇기 때문에 방문 정보를 담을 변수가 따로 필요하다. bool visited[]를 이용하자. 그리고 탐색하는 과정이 DFS의 과정을 따른다. DFS를 모르더라도 괜찮다. 일단 위 알고리즘을 하나씩 코드로 구현하여 보자.

1~N까지 자연수를 M-th depth까지 탐색하는 함수를 선언하면 된다. 가장 먼저 argument를 어떻게 받을지 정해야 한다. 몇 번째 깊이인지 알려주는 cnt 변수와 지금 가리키는 자연수의 위치를 알려주는 idx변수를 argument로 받으면 된다. void dfs(int idx, int cnt) 이렇게 선언하자.

void dfs(int idx, int cnt){
    if(cnt == m){
    // Print visited numbers
    }

그리고 함수의 Body를 작성해야 한다.

1. 어딘가의 현재 idx의 자연수를 저장하고
2. 자연수를 increment 시켜서 다음 depth로 넘어간다.(재귀)

3. 제일 깊은 곳을 찍고 돌아왔을 때 다음 자연수로 넘겨줘야 한다.

그림을 통해 이해해보자.

main 함수에서 dfs(0, 0)를 호출하면 하트의 위치에서 탐색을 시작할 것이다. 그렇다면 이제 6개의 화살표를 쏴줘야 한다. 1~6을 모두 탐색해야 한다. 자연스럽게 for문으로 한 바퀴 돌려보자는 생각이 든다.

for(int i = 1; i <= n; i++){
    dfs(i, cnt + 1); // depth++, i = current num.
    }

해야할 일이 세가지 더 남았다. 자연수를 저장하고, 방문 표시를 남기고, 돌아왔을 때 다음 자연수로 넘겨줘야 한다. 저장은 전역변수 int ans[]를 이용하면 될 것이고, 방문 표시는 visited = true로 설정한다. 돌아왔을 때 다음 자연수로 넘겨주는 것이 핵심이다.

이를 이해하는 것이 제일 중요하기 때문에 그림을 통해 과정을 이해해보자. 먼저 깊이 1에서 1을 탐색한다. ans배열에 1이 저장되었다. 한 칸 더 내려가자. 깊이 2에서 2를 탐색하고 2를 저장한다. 이때 cnt 값은 1이다. 한 칸 더 내려가면 탈출 조건에 걸려서 저장된 1, 2를 출력한다. return; 되는 순간 어디로 돌아가는가?? 깊이 1의 1을 가리키는 곳으로 돌아갈 것이다.

2는 방문이 완료되었으므로 다시 탐색해서는 안된다. 즉, for문에 추가되어야 하는 코드는 다음과 같다.

1. 현재 i값이 방문 표시가 되어 있는지 먼저 확인
2. 방문표시가 되어 있지 않다면 방문 표시를 하고 현재 i값을 ans에 저장한다.
3. 돌아 왔을 때 방문 표시를 해제한다.

방문 표시를 해제해 줘야 백트래킹 알고리즘이다. 밑으로 내려가면서 끝까지 찍고 다시 돌아오는 과정을 모두 수행하는게 백트래킹인데, 다시 돌아올려면 방문 표시를 해제해 줘야 한다. 다시 돌아오면서 이전에 저장해놓은 값들에는 방문하지 않은게 되기 때문이다.

이를 그대로 옮기면,

for(int i = 1; i <= n; i++){
    if(!visited[i]){
      visited[i] = true;
      ans[cnt] = i;
      dfs(i, cnt + 1);
      visited[i] = false;
    }
  }

이런식으로 모든 경우의 수를 순회할 수 있다. 전체 코드는 다음과 같다.

#include <bits/stdc++.h>

using namespace std;

int n, m;

int ans[9];
bool visited[9];

void dfs(int idx, int cnt) {
  if (cnt == m) {
    for (int i = 0; i < m; i++) {
      cout << ans[i] << ' ';
    }
    cout << '\n';
    return;
  }
  for (int i = 1; i <= n; i++) {
    if(!visited[i]){
      visited[i] = true;
      ans[cnt] = i;
      dfs(i, cnt + 1);
      visited[i] = false;
    }
  }
}

int main() {
  cin >> n >> m;
  dfs(0, 0);
}

이거 하다보니까 재밌다 크크 확실히 c++ 실력이 늘긴 느는것 같다

1. Binary Search

c++ 내장 함수를 사용해도 상관 없으나 직접 구현해보았다! LaTeX 쓰는게 재밌어서 psuedocode 열심히 만들어 보았다. 평균적으로 O(log n)의 time-complexity를 갖는다.

2. Solution

#include <iostream>
#include <algorithm>

using namespace std;
bool binary_search(int arr[], int size, int target) { 
  int left = 0;
  int right = size - 1;
  while (left <= right)
  {
    int med = (left + right) / 2;
    if (arr[med] < target) left = med + 1;
    else if(arr[med] > target)
      right = med - 1;
    else
      return true;
  }
  return false;
}

int main() {
  ios_base::sync_with_stdio(0);
  cin.tie(0);
  int N = 0;
  cin >> N;
  int integer_list[N];
  for (int i = 0; i < N; i++) {
    cin >> integer_list[i];
  }
  sort(integer_list, integer_list+ N);
  int M = 0;
  cin >> M;
  int check_list[M];
  for (int i = 0; i < M; i++) {
    cin >> check_list[i];
  }
  /*
  for (int i = 0; i < M; i++)
  {
    for (int j = 0; j < N; j++){
      if (check_list[i] == integer_list[j]) {
        cout << 1 << '\n';
        break;
      }
      if (j == N - 1) cout << 0 << '\n';
    }
  }
  */ // O(n^2) search algorithm (brute-force)
  for (int i = 0; i < M; i++)
  {
    if (binary_search(integer_list, N, check_list[i])) cout << 1 << "\n";
    else
      cout << 0 << "\n";
  }
}

3.

메모리 초과가 떴었는데 이는 동적 배열 때문인 것으로 파악하였고, 정적 배열을 쓰니 해결! 시간 초과는 브루트 포스 -> 이진 탐색으로 해결!

1. Pointers

Pointer definition: Memory address of a variable.

Memory location은 RAM에 수치화 되어 저장되어 있고, Address는 변수의 이름으로 사용된다. 이러한 개념은 이미 Call by Value VS Call by Reference를 배우면서 학습한 바가 있다. 간단하게 짚고 넘어가면.. CBV: 변수의 값을 참조한다(pass the value of a variable). CBR: 변수의 주소를 참조한다(pass the address of a variable). 전자는 값만을 가져오는 shallow copy와 관련이 있고 후자는 값의 주소를 가져오는 deep copy와 관련이 있다. 값만 가져오는 방법은 actual variable을 변화시킬 수 없지만 주소를 가져오는 방법의 경우 actual variable을 변화시킬 수 있다.

포인터 개념은 Address에 관한 것이기 때문에 Call by Reference을 배운적이 있다면 이미 알고 있는 것이다. 변수명 앞에 "***"를 붙이면 포인터 변수를 선언할 수 있다. 포인터 변수가 아닌 ordinary 변수의 앞에 "&"를 붙이면 변수의 값이 아닌 주소를 가리키게 된다. "***"는 주소가 가리키는 값을, "&"는 값이 저장된 주소를 나타낸다. 즉 서로가 서로의 inverse function이라고 생각할 수 있다.

int *p1;
int v1;
p1 = &v1;

일반적으로 변수가 선언되면 자동으로 메모리가 할당된다. 그러나 프로그래머가 직접 Heap(memory freespace)에 메모리를 할당시키는 방법이 있는데 이를 Dynamic Memory Allocation이라고 부른다. 자유롭게 메모리를 할당하고 해제할 수 있는 장점이 있으나 제거하지 못하면 memory leak이 발생한다. c++에서 "new", "delete" operator가 각각 메모리 할당과 해제를 도와준다.

2. Dynamic Arrays

고정된 Size의 Standard array와 다르게 Dynamic Array는 코드를 짤 때 Size가 결정될 필요가 없고 runtime에서 결정된다. cin >> n으로 배열 사이즈를 받아야 하는 우리는 Dynamic Array를 떠올릴 수 있어야 한다. 그리고 Array Variable은 pointer Variable이다. 아래의 두 변수 모두 pointer variable이다.

int v[10];
int *p;

배열 변수는 첫번째 indexed variable의 주소를 가리킨다. 이는 항상 상수이다. 즉 const int*에 더 가깝다. Standard Array가 Size를 먼저 명시해야 했다면 Dynamic Array는 필요에 따라 Size가 늘어나거나 줄어들 수 있다!

3. Solution

#include <iostream>
#include <sstream>
#include <string>

using namespace std;

int main() {
  int n = 0;
  cin >> n;
  string *answer = new string[n];

  for (int i = 0; i < n; ++i) {
    int best_price = 0;
    string best_athlete;
    int size = 0;
    cin >> size;
    string line;
    getline(cin, line);
    for (int j = 0; j < size; ++j) {
      int price;
      string name;


      if (getline(cin, line)) {
        istringstream iss(line);
        iss >> price;
        getline(iss >> ws, name);

        if (price > best_price) {
          best_price = price;
          best_athlete = name;
        }
      }
    answer[i] = best_athlete;
    }
  }
  for (int k = 0; k < n; k++) {
    cout << answer[k] << endl;
  }

  return 0; }

+) 5635번 문제 거의 똑같은 문제이다. 그런데 string 라이브러리의 getline함수를 사용할 때, 첫 번째 getline 함수는 값을 받아오지 않는 것 처럼 보여서 위 solution에서는 단순히 2번 쓰는 것으로 문제를 덮어 뒀는데, 알고보니 cin의 표준 입력 버퍼에 \n이 남아있어 이를 인식하는 것이라고 한다.

cin.ignore();

를 추가해 주면 깔끔해진다.

5635. solution

#include <iostream>
#include <sstream>
#include <string>

using namespace std;

struct Birthday {
  string name;
  int day;
  int month;
  int year;
};

int main() {
  int size = 0;
  cin >> size;
  string line;
  Birthday *answer = new Birthday[size];
  cin.ignore();

  for (int i = 0; i < size; i++) {
    if(getline(cin, line)){
      istringstream iss(line);
      Birthday birthday;
      iss >> birthday.name >> birthday.day >> birthday.month >> birthday.year;
      answer[i] = birthday;
    }
  }
  int least_idx = 0;
  int great_idx = 0;
  for (int i = 0; i < size; i++){
    if (answer[i].year < answer[least_idx].year) {
      least_idx = i;
    } else if (answer[i].year == answer[least_idx].year &&
               answer[i].month < answer[least_idx].month) {
      least_idx = i;
    } else if (answer[i].year == answer[least_idx].year &&
               answer[i].month == answer[least_idx].month &&
               answer[i].day < answer[least_idx].day)
      least_idx = i;


  if (answer[i].year > answer[great_idx].year) {
    great_idx = i;
  } else if (answer[i].year == answer[great_idx].year &&
             answer[i].month > answer[great_idx].month) {
    great_idx = i;
  } else if (answer[i].year == answer[great_idx].year &&
             answer[i].month == answer[great_idx].month &&
             answer[i].day > answer[great_idx].day)
    great_idx = i;
  }

  cout << answer[great_idx].name << endl << answer[least_idx].name << endl;
  return 0;
    }

int zero_count = 0;
int one_count = 0;

이렇게 했는데 어? 안되네? 왜 시간 초과?? 당황한 나는 문제 분류를 보았고 다이나믹 프로그래밍이라고 적혀있는 것을 보고 이게 뭐지 싶었다. 배운적 있나? 찾아보니 없다.. Dynamic Programming이란 무엇인가? 내가 여기저기 읽어보고 정리한 바는 다음과 같다.

어떤 문제 해결을 위해서, 문제를 작은 문제로 나눈 뒤 그 해답을 재활용하는 기법이다.

Dynamic.. 계속 생각하다 보니 왜 Dynamic이라는 이름이 붙은 것인지 궁금해졌다. Dynamic에 대해서 이해하려면 역시 Static 또한 알아야 한다. Static은 말 그대로 정적, 이미 정해져 있다는 뜻이다. Compile time에 fixed / bounded 되어 있다고 생각하면 된다. 그렇다면 Dynamic은 반대로 이해하면 된다. Complie time에서 fixed / bounded 되어 있지 않은 것이다. 즉 언제나 바뀔 수 있는 것이고, 이는 우리가 익히 알고 있는 Dynamic의 의미와 통하므로 이제서야 이해가 된다. 아하!

그럼 빠르게 1003번 문제로 넘어가 보자. 이 문제는 시간 제한이 걸려 있어 Static 하게 접근하면 무조건 시간 제한에 걸린다. Dynamic하게 접근하면 그냥 바로 풀린다. Dynamic Programming에서 문제를 잘게 쪼개는 것이 가장 중요하고, 이를 우리는 Recursion이라고 알고 있으며, 이 분야의 대표적 예시는 당연히 피보나치 수열이다.

이 문제에서 요구하는 "f(0)"과 "f(1)"의 호출 횟수는 몇 번 적어보면 감이 온다. 위 그림을 보면 알 수 있듯이 호출 횟수 역시 피보나치 수열을 따르므로 그냥 피보나치 수열 D.P로 하나 짠 다음 출력하면 끝! 코너 케이스 조심해서 짜면 오케이!

내 코드

#include <iostream>
#include <vector>

using namespace std;

int fibonacci(int n) {
  if (n == -2) return 1;
  if (n == -1) return 0;
  if (n == 0 || n == 1) {
    return 1;
  }

  vector<int> dp(n + 1, 0);
  dp[0] = 1;
  dp[1] = 1;

  for (int i = 2; i <= n; ++i) {
    dp[i] = dp[i - 1] + dp[i - 2];
  }

  return dp[n];
}

int main() {
  int T = 0;
  cin >> T;
  int n = 0;
  for (int i = 0; i < T; i++) {
    cin >> n;
    cout << fibonacci(n - 2) << " " << fibonacci(n - 1) << "\n";
  }
}

npx create-react-app <folder name>

프로젝트 폴더를 만들고 initialize한다.

npx create-react-app <folder name> --template typescript

(Typescript initialize)

npm start
yarn start // Open http://localhost:3000 at browser

react에서는 코드를 수정하면 자동으로 웹페이지가 reload된다. 안되는 경우 IDE에서 저장(Ctrl+s)하면 바로 반영된다..!

npm run build
yarn build

웹 배포에 사용하는 명령어이다. 배포 환경에서 사용할 파일을 만들어 준다!

npm? yarn?

갑자기 튀어나온 npm과 yarn은 무엇일까? 일단 둘다 package manager다. npm은 node.js와 함께 제공되는 기본 패키지 관리자이고, yarn은 페이스북에서 npm 문제를 해결하기 위해 개발된 패키지 관리자이다. 성능이나 보안 면에서 yarn이 우세하다고는 하지만 두 관리자 모두 꾸준히 업데이트 되고 관리되고 있어 개인의 취향이라고 한다. 예전 세미나를 들었을 때 뭐가 됐든 좋으니 하나만 정해서 그것만 써라고 하신게 기억난다.

prettier

협업할 때 코드의 간결함, 통일성, conflict 방지를 위해 prettier를 이용하여 항상 같은 양식을 유지하도록 하기 위해 초기에 설정해주어야 한다고 배웠던게 기억난다.

2. Basics

2-1. JSX

JSX는 자바스크립트 문법을 HTML style로 작성할 수 있게 만들어주는 문법이다. RTFM 예전에는 HTML, CSS, Javascript가 별개의 분리된 파일 내에 있었지만, 웹이 발전하면서 rendering logic(Javascript)과 markup language(화면에 표시되는 구조를 만드는 언어, HTML)를 함께 관리하게 되었다.

Rules

1. 2개 이상의 태그가 있으면 무조건 하나의 부모 태그로 묶여 있어야 한다. 보통 <div>...</div>로 묶는다. <>...</>로 크게 묶기도 한다(Fragment).
2. 모든 Tag를 닫아야 한다. 내용이 없는 태그거나 img등 관습적인 경우 Self-closing tag도 자주 쓰인다.

<img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
   />

3. camelCase를 적용한다. (컴포넌트는 PascalCase를 적용한다)
4. 주석은 {/* ... */} 로 적는다. 중괄호가 있어야 함!! 태그 내에서는 //...로 적을 수 있다.
5. {} 를 이용하여 javascript 문법을 적용할 수 있다.

2-2. props, state

주인공은 어렸을 때 백일장에서 만난 여주인공을 잊지 못하고 있다. 그녀는 자신이 그림자에 불과하다고 말하고, 진짜 자신은 벽 넘어에 있는 도시에 있다고 한다. 이후 여주인공은 연락이 끊겨버리고, 주인공은 여주인공을 잊지 못하고 살다 마흔 다섯이 되어 우연히 그 도시 속으로 빨려 들어간다, 그림자를 남겨 둔 채로. 그 그림자는, 역으로 현실(?)로 나와, 삶을 이어가고, 도서관이라는 공간에 이끌려 그곳에서 고야스 씨라는 인물을 만난다. 꿈에서 깬 것 처럼, 그림자는 그 공간을 무의식의 영역 너머로 보내버려 잘 기억하지 못한다. 그리고 도서관은 비밀이 있는 듯 하다. 고야스씨에 대해 이야기하지 않는 직원들, 지하의 장작 난로가 있는 방... 신기하게도 도서관 밖에는 사과나무가 있다. 그 도시에서, 소녀가 사과로 과자를 만들어 주었던 것이 문득 생각난다. 그리고 고야스씨의 손목시계에는 바늘이 없다. 꿈을 기억하지 못하는 것처럼 주인공의 생각은 무언가 거대한 벽에 막혀버린 듯 하다.

-- 어느날 고야스씨가 주인공을 지하 정사각형 모양의 방으로 부른다. 장작불에 비춰진 그의 모습에는, 그림자가 없었다. 그는 이미 1년 전에 심장마비로 죽은 사람이었고, 주인공과 소에다 씨만 그를 볼 수 있었다. 그림자를 잃어버린다는건, 어떤걸 의미하는 걸까. 자기 자신과 그림자의 관계를 이해하는게 이 소설을 이해하는 핵심이라는 생각을 했다. 고야스씨의 시계의 바늘이 멈춰 있는 것, 그 도시의 시곗바늘 없는 시계, 제거되어 버린 그림자... 그 도시는 죽음이 내려앉은 도시가 아닐까 하는 생각이 들었다. 그렇다면 죽음의 도시에 산다는 것은 무엇을 의미하는 걸까? 문제가 점점 좁혀져 간다.

고야스씨는 30여년 전 결혼을 하고 아이도 가졌지만 불의의 사고로 아이를 잃고, 이어서 아내도 잃었다. 그 뒤로 베레모를 쓰고, 스커트를 입는 기행을 하고 점점 다른 사람이 된 것 처럼 보인다.

주인공과 고야스씨는 공통점이 있다. 바로 한 여자를 순수한 마음으로, 온전히 사랑했다는 것. 주인공은 열여섯의 나이에 그런 사랑을 만나고 헤어졌고, 삼십년 동안 그녀만큼 다른 여자를 사랑할 수 없었다. 고야스씨 또한 아내를 그렇게 사랑했고, 그래서 아내가 죽은 후 다른 여자를 사랑할 수 없었고, 주변에서 혼담이 오가는 것이 싫어 스커트를 입어 이상한 사람으로 위장하였다. 고야스씨는 이를 '마음이 타버렸다'고 표현하고, 둘도 없는 행복인 동시에 어찌보면 성가신 저주라고도 이야기한다.

도서관에는 매일 와서, 말도 없이 책만 주구장창 읽는 '옐로 서브마린 소년'이 있다. 말 자체를 하지 않는 아이인데, 어느날 주인공에게 편지를 건넨다. 그 편지에는 높은 벽에 둘러 쌓인 그 도시가 그려져 있었다.

어느 한 사람을 수십년간 보지 못한다면, 우연한 재회의 순간에 눈치챌 수 있을까...??

(읽는중....)

프로그래밍을 진짜 기초부터 다시 공부해보려고 하니... 무슨 언어를 공부할까 고민이 많았다. 이제 java를 선택한 이유는 다음과 같다.

1. 배우기 쉬운 객체 지향 언어이며 전공 수업에서도 많이 쓰인다.
2. 나중에 backend를 공부할 일이 있으면(kotlin, spring) java를 할 줄 아는게 편할 것 같다.
3. 가장 인기있는 언어 중 하난데 그래도 java는 할 줄 알아야지.. 현재도 많이 쓰이고 이번 기회에 공부해 두는게 여러모로 편할 거 같아서!!

여담이지만.. 초등학생때 마인크래프트를 할 때 java를 설치해야 게임을 할 수 있었던 기억이 난다. 그땐 몰랐지 그게 이거라는걸.. 그때 공부해 놓을걸..

java가 가상 머신을 사용한다, garbage collection, oop.. 뭐 어디서 주워들은 이야기는 많은데 사실 설명할 줄은 모른다!! 나중에 면접때 java랑 c++ 차이가 뭐에요 물어보면 대답 못할 것 같고, 그래서 나중을 위해 이렇게 글로 남겨서 해보려고 한다.

1. JAVA byte code(.class)

byte code는 전체 컴파일 과정에서, 우리가 쓴 코드가 가상 머신이 알아먹을 수 있는 형태로 바뀐 것이다. javac라는 컴파일러에 의해 .java 코드가 .class로 컴파일 된다.

2. JVM(Java Virtual Machine)

그럼 가상 머신이 뭘까? 이는 하드웨어적인 기계를 말하는 것이 아니라 가상의, 즉 소프트웨어를 말하는 것으로, 특정 하드웨어나 운영체제에 구애받지 않고 보편적으로 작동할 수 있도록 설계된 것이다. kotlin 같은 언어도 우리가 보는 format은 다르지만 결국 byte code로 변환되어 JVM으로 들어가기 때문에 완벽하게 호환된다고 할 수 있는 것이다!

3. JDK(Java Development Kit)

Java환경에서 개발하기 위해 컴파일러, 디버거가 들어간 개발 키트를 의미한다. 나는 최근에 출시한 JDK 21을 사용하기로 했다.

그럼 Hello world 부터 보도록 하자 #2557. Hello world

public class Main {
    public static void main(String arg[]) {
        System.out.println("Hello World!");
    }
}

(주의: 백준에 올릴 때는 class 이름을 Main으로 지정해야 함) java로 hello world를 출력해 보았다. 자바는 class(.class)단위로 프로젝트가 돌아간다. 프로젝트는 보통 여러개의 class파일로 돌아가게 된다. class안에는 method들이 들어간다. 이는 다른 언어에서의 function과 유사하다. class가 작동하기 위해서는 main method가 필요하고 이는 위 코드에서

public static void main(String arg[])

이다.

c++에서 배운 class/inheritance 개념과 매우 비슷하다. c++을 배웠던걸 잘 기억해보자.. class Pet을 선언하고 Dog, Cat 등으로 inherit 해주고 member variable/function을 만들었던 게 기억이 난다! 새로운 객체를 만들때는 constructor를 이용하거나 dynamic programming 방식으로 new Class() 를 이용하기도 했다. java에서도 마찬가지인데, java에서는 member function/variable을 method라는 이름으로, 선언된 하나하나의 객체들을 instance라고 부른다.

public class Pet {
    String name; // member variable

    public void getName() { // method
        System.out.println(name);
        }

    public void setName(String input) { // method
        name = input;
        }
    public static void main(String arg[]){ // main method
        Pet cat = new Pet(); // declare instance
        cat.setName("zizi"); 
    }

}

좋은 참고글을 찾았다..!!

jvm, garbage collection 등 자세한 내용은 나중에 적어보기로 하고 여기서는 먼저 아주 기본적인 것부터..!!

4. 기본 명령어

4-1. Scanner

import java.util.Scanner;

사용을 위해 먼저 Scanner class를 import 해야 한다. Scanner class에 포함된 method는 다음과 같다.

(nextBoolean, nextDouble 등 모든 변수 타입에 대해 함수가 존재한다, 생략!) Scanner는 기본적으로 Token 단위로 입력을 받는다!

Token: 띄어쓰기, Tab, Enter 등으로 구분되어지는 하나의 요소를 의미함. 입력을 Tokenize 한다는 것은 Token 단위로 입력을 parsing 하겠다는 것!

자료구조 들을 때 Tokenize 하라는 말 듣고, 그냥 파싱한다고 하면 되지 왜 저렇게 말하나 했다.

(...작성중)

우리는 공간축으로는 이동이 자유롭지만, 시간축에서 탈선하는 것은 불가능하다. 그렇기에 시간을 다루는 소재는 무언가 경외심이 들고, 흥미롭게 느껴지는 것 같다.

이 영화에서 시간은 돈을 대체한다. 시간은 한 인간의 수명을 결정짓는 역할도 하지만, 재화의 역할도 수행하게 된다. 이 두가지 기능이 복합적으로 작용했을 때 발생하는 가장 큰 문제점이 무엇일까? 바로 재화가 고갈되면 죽는다는 것이다. 이러한 특징 때문에 이 영화는 사회의 빈부 격차 구조를 적나라하게 드러내게 된다. 주인공 커플이 이러한 사회 체제에 반하여 부의 재분배, 즉 시간의 재분배를 위해 탈선하게 되는 과정이 이 영화의 시놉시스라고 할 수 있겠다.

이 영화에 등장하는 대부분의 인물들은 시간에 귀속 되어 있다. 시간에 사로잡혀 하루 벌어 하루를 사는 빈민가 사람들, 시간을 지키려 하는 Time keeper들, 10년이라는 시간을 받고 바로 술에 탕진하고 죽은 주인공의 친구.. 반면 이 영화에서 눈길이 가는 인물들은 모두 시간축에서 벗어나 있다. 영화 초반에 주인공에게 100년을 주고 자살한 인물이 대표적인 예시 되시겠다. 시간에 얽매이지 않고 자신의 삶을 본인이 결정하였다. 죽기 직전 그의 표정에는 시간에 대한 미련 따위 없어 보인다. 이때 주인공은 100년이라는 시간을 받았지만 역설적으로 시간축에서 벗어났다.

그 후 주인공은 시간을 훔쳐 빈민가에 재분배하고, 모두에게 시간이 동일하게 주어진 사회를 만들 것임을 암시한다.

어쩌면 남은 시간이 보이지 않기에 더욱 행복하게 살 수 있는게 아닐까 생각이 드는 오늘이다.

인 타임에서 아웃 타임으로.

1. package 설치

이거 때문에 혼자 끙끙댔다.. 다른분이 설치한 패키지를 로컬에 받아오면서 npm install 로 설치했는데 무슨 생전 처음 보는 오류가..ㅜㅜ npm ci로 동기화 하니 깔끔하게 해결!!

AngularJS Github convention

(2023.11.10)~ 프로그래밍 방법론에서 git을 처음 배웠을 때, 실습 시간에 git에 관한 자료를 아무리 읽어봐도 이해가 되지 않았었던 기억이 난다. 그 후 반년이 지나 와플에서 React 세미나를 들을 때, 첫 과제로 PR을 날리는게 나왔을 때가 생각난다. 어려웠다. 과제, 프로젝트를 하면서 수없이 마주했던 conflicts.. 마감 기간에 쫒겨 만든 수많은 무질서한 hotfix branch들ㅋㅋㅋㅋ git을 마지막으로 쓴지 거의 2년이 넘어가는 지금, 막막하지만 다시 공부해보며 처음부터 정리해보고자 한다.

1. branch

Git

처음 배웠을 때에는 가장 중심이 되는 branch가 master라고 배웠는데, 인종차별 이슈로 인해 main으로 바뀌었다고 한다. 이번에 포켓몬 도감을 만들려고 새로운 repositary를 하나 팠는데 역시 main 브랜치가 자동으로 생성되었다. 일단 branch를 하나 만들어 보았다. 헤더 부분을 구현하고 있어서, header라는 branch를 하나 분기시켰다. git branch <branch_name> 위 명령어를 이용하면 새로운 브랜치를 생성할 수 있다. git log 명령어를 이용하여 commit history, HEAD의 위치 등을 알 수 있다.

HEAD가 main을 가리키고 있고 아직 commit한 내역이 없기에 initialize한 commit만이 존재한다. branch를 옮기려면 git checkout <branch_name> 명령어를 이용하면 된다.

git branch 명령어를 이용하면, 전체 분기된 branch들의 목록을 확인할 수 있다. 이제 header branch에서 header 작업을 하면 변경 사항이 생길 것이다. 이것들을 저장하고(add), 변경 사항을 확정하고(commit), remote server에 올리고(push) remote server에서 팀원들이 변경사항을 보고 이를 main branch에 반영하는(PR) 일련의 과정을 거쳐야 한다. 기억이 새록새록...!! ...

(2021)

특정 branch clone하기

기존 git clone {repository url}을 하면 main 브랜치가 클론된다. 특정 브랜치에 작업 중인 요소를 클론하는 경우 git clone -b {branch name} {repository url} 를 사용하면 된다.

Remote branch 가져오기

git remote update

npm 환경 통일

npm ci

공식문서(Eng)

비동기 처리와 Promise

비동기 처리

비동기 처리 방식(Aysnchronous Rendering)의 코드는 전체 코드가 순차적으로 실행되는 동기 방식(Synchronous Rendering)과 다르게 다른 코드들과 동기화 되어 있지 않다. 즉 렌더링을 하는 동시에 실행되어 일정 시간이 지난 후 개별적으로 끝난다. 출처 : 벨로퍼트 모던 자바스크립트 그림으로도 이해가 어렵다면, 직접 코드를 보자. 그림의 1~3번을 코드로 표현해 보았다.

// 동기 처리 방식
console.log('Hello!'); // 1

console.log('Bye!'); // 2

console.log('Hello Again!'); // 3

// Console
>> Hello!
>> Bye!
>> Hello Again!

위 코드에 대표적인 비동기 함수 setTimeout(callback, time)을 입혀보자. 지정된 시간이 지나면 콜백 함수를 호출하는 방식이다. (콜백 함수는 어떤 함수의 인자로 호출되는 함수를 의미한다.)

console.log('Hello!'); // 1

setTimeout(() => console.log('Bye!'), 3000); // 2

console.log('Hello Again!'); // 3

// Console
>> Hello!
>> Hello Again!
// 3초 후
>> Bye!

동기 처리와는 다르게 Bye!가 3초 후에 콘솔 창에 출력이 되는 모습을 확인할 수 있다. 즉 다른 코드들과 동기화 되어 있지 않고 개별적으로 동작한다. 따라서 다른 코드들이 동작하고 있을 때 비동기 처리를 이용하여 함께 실행되게 할 수 있다. 이러한 장점 때문에 비동기 처리를 주요 사용하는 경우가 여러 개 있다.

• Ajax Web API 요청: 서버에서 데이터를 받아야 할 때, 요청을 하고 서버에서 응답을 할 때 까지 기다려야 하기 때문에 비동기 처리를 이용한다.
• 파일 읽기: 주로 서버 쪽에서 파일을 읽어야 하는 상황에는 비동기적으로 처리한다.
• 암호화/복호화: 암호화/복호화를 할 때에도 바로 처리가 되지 않고, 시간이 어느정도 걸리는 경우가 있기 때문에 비동기적으로 처리한다.
• 작업 예약: 단순히 어떤 작업을 몇초 후에 스케쥴링 해야 하는 상황에는, setTimeout 을 사용하여 비동기적으로 처리한다.

그러나 콜백 함수와 비동기 처리만 이용하는 경우 발생하는 문제점이 존재하는데... 비동기 함수를 연쇄적으로 실행하고 추가적으로 출력 값 및 에러 처리를 해야 하는 경우이다. 이해를 돕기 위해 아래 코드를 보자.

// asynchronous function
const increaseAndPrint = (n, callback) => {
  setTimeout(() => {
    const increased = n + 1; // increase n
    console.log(increased); // print
    if (callback) {
      callback(increased); // run callback if condition is true
    }
  }, 1000);
};

increaseAndPrint(0, n => {
  increaseAndPrint(n, n => {
    increaseAndPrint(n, n => {
      increaseAndPrint(n, n => {
        increaseAndPrint(n, n => {
          console.log('끝!');
        });
      });
    });
  });
}); // 1. callback

코드를 보면 알겠지만 비동기 처리를 하는 부분의 가독성이 처참한 수준이다. 이런 코드를 콜백 지옥이라고 부르고, 이러한 문제를 해결하기 위해 ES6에 Promise라는 기능이 도입된다. 이러한 콜백 지옥 코드에 Promise를 이용하고, async/await를 입히며 얼마나 깔끔해지는지에 집중해보자.

Promise

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. MDN

Promise는 말 그대로 약속이다. 기본적으로 미래에 실행될 함수에 대한 내용을 담고 있으며, 3가지 상태가 존재한다.

A Promise is in one of these states:

• Pending: Initial state, neither fulfilled nor rejected.
• Fulfilled: Meaning that the operation was completed successfully.
• Rejected: Meaning that the operation failed. MDN

먼저 새로운 Promise가 선언되면 pending(대기) 상태가 되며, 값을 가진 fulfilled(이행) 상태가 되거나 에러를 가진 rejected(실패) 상태가 될 수 있다. 콜백 함수의 인자로 resolve와 reject를 받으며, 성공시 resolve를, 실패시 reject를 실행한다.

const myPromise = new Promise((resolve, reject) => {
  resolve();
  // or reject();
  }); 

선언 후 대기 상태가 되고, resolve나 reject를 실행하면 이행 상태나 실패 상태가 된다. 그러나 Promise를 사용하는 목적은 이후에 있다. 연쇄적으로 Promise를 사용해야 하는 경우 어떻게 해야 할까??

The methods promise.then(), promise.catch(), and promise.finally() are used to associate further action with a promise that becomes settled.

바로 then함수와 catch함수를 이용하는 것이다. then함수는 promise가 fufilled(이행) 상태인 경우 접근 가능하고 resolve된 값을 result로 받아온다. catch함수는 promise가 rejected(실패) 상태일 때 접근 가능하며 reject에서 발생한 에러를 받아온다.

const myPromise = new Promise((resolve, reject) => {
  resolve();
  // or reject();
  });
...
myPromise
  .then(res => console.log(res)) // 성공시 출력
  .catch(e => console.log(e)); // 실패시 출력

연쇄적으로 사용해야 하는 경우에는

const increase = (number) => {
  const myPromise = new Promise((resolve, reject) => {
   setTimeout(() => {
     const result = number + 10;
     if (result > 50) {
       const e = new Error("NumberBigError");
       return reject(e); // 실패시 reject 함수를 실행, rejected
     }
     resolve(result); // 성공시 resolve 함수를 실행, fufilled
   }, 3000);
  });
  return myPromise; // promise를 리턴
}


increase(0)
  .then(result => increase(result))
  .then(result => increase(result))
  .then(result => increase(result))
  .then(result => increase(result))
  .then(result => increase(result))
  .catch(error => console.log(error)); // 2. promise

위와 같이 작성한다. 콜백 함수만을 이용했을 때와 비교했을 때 가독성을 비교해보자.

async/await

Promise를 더욱 쉽게 사용할 수 있게 해주는 문법으로 ES2017에 도입되었다.

Async functions can contain zero or more await expressions. Await expressions make promise-returning functions behave as though they're synchronous by suspending execution until the returned promise is fulfilled or rejected. The resolved value of the promise is treated as the return value of the await expression. MDN

비동기 처리를 사용할 함수의 앞에 async 접두어를 붙이고, HTTP와 통신하여 비동기 처리를 하는 함수 앞에 await을 붙인다. await이 붙은 함수는 반드시 Promise 객체를 리턴해야 된다.

위 코드에서 increase(0).then()... 부분을 async/await을 이용해 다시 쓰면

async function runTasks() {
  try {
    let result = await increase(0);
    result = await increase(result); // 10
    result = await increase(result); // 20
    result = await increase(result); // 30
    result = await increase(result); // 40
    result = await increase(result); // 50
  }
  catch (e) {
    console.log(e);
  }
} // 3. promise + async/await

더욱 편하게 다룰 수 있다. 에러처리는 catch()대신 try...catch... 구문을 이용한다.

References

MDN Promise 문서 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function 벨로퍼트 Promise 강의 : https://learnjs.vlpt.us/async/01-promise.html 캡틴판교 Promise 강의 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

1. Offset-based 오프셋: 표시할 데이터 위치(=몇 번째 페이지인지), Limit: 표시할 최대 데이터 개수
2. Cursor-based 커서: 첫번째로 표시할 데이터의 위치(=현재 커서 위치), Limit: 표시할 최대 데이터 개수

이번 프로젝트에서 사용한 방법은 오프셋 기반 Infinite scrolling이다. 유튜브 영상을 참고하여 많은 도움이 되었다.

Ref라는 개념을 처음 다루게 되는데, Ref는 DOM을 직접 조작하는데 사용된다

1. 특정 input에 포커스 주기
2. 스크롤 박스 조작하기
3. Canvas 요소에 그림그리기 등등... 이번 프로젝트에서는 2번, 스크롤 조작을 Ref를 통해 관리하게 된다.

function App() {
  const [query, setQuery] = useState("");
  const [pageNum, setPageNum] = useState(1);
  const { loading, error, list, hasMore } = useSearchBook(query, pageNum);

  const observer = useRef(); 
  const lastBookElementRef = useCallback( 
    (node) => {
      if (isLoading) return;
      if (observer.current) observer.current.disconnect();
      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasMore) { // 마지막 요소가 보이고 더 로딩할 페이지가 존재하면 
          setPageNum((prev) => prev + 1); // 다음 페이지를 불러온다
        }
      });
      if (node) observer.current.observe(node);
    },
    [loading, hasMore]
  );

  const handleChange = (e) => {
    setQuery(e.target.value);
    setPageNum(1);
  };

  return (
    <div className="App">
      <h1>Infinite Scroll</h1>
      <input type="text" onChange={handleChange} value={query} />
      {list.map((item, i) => {
        const isLastElement = books.length === i + 1;
        isLastElement ? (
          <div key={i} ref={lastBookElementRef}> 
          {book}
          </div>
        ) : (
        <div key={i}>{book}</div>
        )
      })}
      <div>{isLoading && "Loading..."}</div>
      <div>{error && "Error..."}</div>
    </div>
  );

export default App;

1. url

우리가 흔히 보는 url의 구조이다. MDN참조 react-router 라이브러리를 이용하면 라우팅이 가능해진다.

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from 'components/Home';

const App = () => {
  const id = 1;
  return (
    <BrowserRouter>
      <Switch>
        <Route path='/student/:id' component={Home} />
      </Switch>
    </BrowserRouter>
  );
};

App.js에서 ~/student/1로 라우팅한다. 이때 Home 컴포넌트는 기본적으로 history객체를 props로 받게된다. 그리고 함수형 컴포넌트에서는 useHistory객체를 이용하여 history 객체에 접근 가능하며, push/goBack/replace/block 등의 함수를 이용하여 직접적으로 라우팅할 수 있다.

.catch((e) => {
        toast.error(e.message);
        history.push("/students");
      });

2. parameter?

url에 변수를 표현하는 방법은 2가지가 있다. 이번에 알아볼 urlQuery와 urlParams가 존재한다.

먼저 urlParams는 부모 컴포넌트로 부터 match 정보를 받아온다. match.params로 접근한 객체에는 현재 url이 Route 컴포넌트에서 임의로 정한 규칙과 어떻게 일치하는지에 대한 정보가 들어있다. 보통 urlParams는 id나 userName 같은 정적인 변수를 받아오는데 사용된다.

<Route path="/.../:parameters component={Page}" Page 컴포넌트에서 props를 받고, match.params.parameters로 url의 변수에 접근 가능하다. 함수형 컴포넌트에서는 useParams라는 Hook을 이용하면 더욱 쉽게 url에 접근이 가능하다.

const { id, userName } = useParams();

이제 urlQuery를 보자. Query는 라우터로부터 전달되는 props 개체의 location에 존재하는 search 값으로부터 받아올 수 있으며, 주로 검색 기능이나 페이지에 특정 옵션을 걸 때 사용한다.

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere'
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

함수형 컴포넌트에서는 useLocation을 통해 위 코드와 같은 location 객체에 접근할 수 있다. 우리가 분석하고자 하는 query-string은 search 값에 존재하며, ?A=B&C=D...의 구조로 params 보단 다소 복잡하게 되어 있다. 이 문자열을 파싱하여 분석하기 위한 라이브러리로 query-string(qs)나 URLSearchParams가 있는데, 여기서는 URLSearchParams를 이용해 보자. MDN useLocation Hook을 이용하면 더욱 쉽게 다룰 수 있다.

const { search } = useLocation(); // search ==="q=URLUtils.searchParams&topic=api"
// 맨 앞의 ?는 제거된 채로 인식됨
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

이번 프로젝트에서 사용한 방식은

1. 검색 버튼을 누르면 history.push를 이용해 /...?A=B&C=D로 보내고
2. location객체에서 search값을 받아오고
3. 적당한 파싱 라이브러리를 이용하여 key값과 value값을 관리하고 의 순서대로 진행되었다.

사실 디자인에 평소에 관심이 많았다. 조예가 깊다는 말이 아니고 그냥 막연히 배워보고 싶다, 디자인이 잘 된 사이트를 보면 멋지다 이정도..? CSS를 알게 되고 이런걸 내가 할 수 있구나, 직접 디자인 해봐야지 라고 마음 먹었는데 막상 하려니 참 막막했다. 뭔가 각잡고 하면 할 수 있을 거 같은데 막상 하려니 또 귀찮고 해서 그냥 볼 수 있을 정도로만 구현해야지 하면서 여태까지 손을 놓고 있었는데, 휴학도 했고 아직 시간도 많으니 깔끔하게 한번 만들어 보려고 글을 쓴다! 역시 이렇게 기록을 해두어야 의지도 생기고 대충하지도 않고 좋은 것 같다. 대학와서는 만사가 다 귀찮아서 이렇게 생산적인 행위(?)를 일절 안했는데 다시 시작해보자.

잘 반응해야 보기 편하다

지금까지 만든 사이트의 문제는 너무 정적이라는 것이다.. 사실 chrome에만 최적화시켜 놓아서 다른 플랫폼에서 보게되면 가관이 따로 없다. 유저가 보는 화면에 따라서 적절하게 반응하여(responsive) 보여주는 방법이 필요했다. react-responsive 라이브러리를 이용하면 유저가 사용하는 디바이스에 대응하여 알맞는 화면을 제공할 수 있다. 공식 문서에 나와있는 훌륭한 예시를 소개한다.

import { useMediaQuery } from 'react-responsive'

const Desktop = ({ children }) => {
  const isDesktop = useMediaQuery({ minWidth: 992 })
  return isDesktop ? children : null
}
const Tablet = ({ children }) => {
  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 })
  return isTablet ? children : null
}
const Mobile = ({ children }) => {
  const isMobile = useMediaQuery({ maxWidth: 767 })
  return isMobile ? children : null
}
const Default = ({ children }) => {
  const isNotMobile = useMediaQuery({ minWidth: 768 })
  return isNotMobile ? children : null
}

const Example = () => (
  <div>
    <Desktop>Desktop or laptop</Desktop>
    <Tablet>Tablet</Tablet>
    <Mobile>Mobile</Mobile>
    <Default>Not mobile (desktop or laptop or tablet)</Default>
  </div>
)

export default Example

조건문 형식으로 삼항 연산자와 null을 이용하여 화면의 minWidth값에 대응되는 component가 보여지게 된다. 그러나 width값에 따라서 다른 컴포넌트를 return하는 것 보다, 정렬 방식을 바꾸는 방법은 없을까?

media query

구글링을 하다가 적절한 방법을 찾았다. media query를 이용하여 max-width를 설정해놓고, flex-direction을 row와 column으로 바꾸면 아주 좋을 것 같다! 해보자!

CSS 정렬에 관한 좋은 글

0.

세상에 널린게 직업인데, 거기서 개발자를 고르고, 또 프론트엔드를 고른 이유는 무엇일까. 사실 언젠가 부터 컴퓨터를 이용하는 직업을 하고 싶었다. 요즘 세상에 컴퓨터를 쓰지 않는 직업이 몇이나 되겠냐만은.. 돌이켜보면 초등학교 때 인것 같다. 초 5때였나, 하마치를 이용해 직접 마인크래프트 서버를 열어서 친구들이랑 같이 했던 기억이 있다. 지금에서야 별거 아니지만, 당시엔 32비트 64비트 따져가며 버킷을 다운받고 C드라이브 깊숙한 곳을 탐험하고 하는게 참 신기했다. 하나의 다른 세상이었다. 그 시절 우리가 가장 자유롭게 사용할 수 있는 공간이었다. 아무튼 막연히 컴퓨터 컴퓨터 하다가, 고등학교때 아두이노 프로젝트를 하면서 이 분야가 정말 마음에 들었다. 막상 대학에 들어오니 PS스러운 것만 잔뜩 시키고 웹/앱 개발은 알려주지 않더라. 그래서 또 어떻게 배울 방법을 모색하다 보니 여기까지 왔다. 프론트엔드? 내가 개발한 것을 가시적으로 볼 수 있다는 것이 가장 마음에 들었다. 막연히 홈페이지를 만들어보고 싶다는 생각을 하기도 했고. 그냥 일단 해보자 라는 마인드였고, 그렇게 약 한달여간을 html, css, javascript, 그리고 React와 보내게 되었다.

1.

인생은 참 어쩌다 보니 살게 되는 것 같다. 물결에 떠밀려 목적지에 도착하면 그 과정은 잘 기억나지 않는다. 그렇기에 과거를 그리워하나보다. 참 일기라도 몇개 써둘걸 그랬다. 그런 심정으로 끄적이는 중이다. 평소에 잘 쓰지도 않는 글을, 굳이 블로그까지 만들며 쓰는 이유는 그냥 스물하나의 나를 기억하고 싶어서.. 뭐 다른 것들은 부차적이다. 프로젝트 계획, 배운 내용 정리 등등 막상 만들고 보니 별 거 없는 것 같지만..

2.

생각보다 사회는 나에게 많은 것을 해주지 않는다. 그걸 스물하나에 처음 깨닫다니. 연못 위의 오리는 평온한 것처럼 보이지만 그 아래에선 끊임없이 발을 움직이고 있다. 휴학을 결심했지만, 아무에게도 말 못하고 있다. 떳떳한 명분도 존재하고, 지금까지 열심히 달려왔다는 것을 부정하려는 사람도 없을 텐데.. 왜일까.
가장 큰 이유는 지쳐서. 너무 힘들었다. 낮게 기대면 의도치 않게 상대방을 짓누르고 높은데는 기대기는 커녕 우러러 볼수록 나를 좀먹는다. 결국 기댈 곳은 나밖에 없고, 그 조차 한계가 명확하다. 기댄다는 표현이 맞는지.. 그냥 흘러가는 대로 살게 되는 것이다. 현상유지 하는 것도 버거운데, 3학기동안 방 안에 틀어박혀서 남들만큼 하고 따로 생산적인 일을 하는게 쉬운 일이 아니다. 이미 3년을 그렇게 살았는데, 그 결과가 이렇다니 과거의 나에게 너무 미안하지 않은가.. 눈물이 날 지경이다. 머릿속에 하고싶은 말이 많지만 정리가 되지 않는다. 항상 머릿속에 있는 말들을 끄집어 내면 어딘가 변질되더라. 그저 후회하지 않기만을 바래야 겠다.