간단한 것은 실은 간단하지 않습니다. 디자인이라는 분야는 발전하면서 깔끔함과 조화를 더 중요하게 생각하는 방향으로 나아갑니다. 개별 요소의 화려함보다는 전체적인 분위기의 통일성을 추구하는 움직임이 있습니다. 깔끔하다는 것은 언뜻 보면 그냥 뭔가 대충 선 긋고 네모 그려서 뚝딱 만들어내는 것만 같은 느낌이 있습니다. 이는 미술에서도 마찬가지입니다. 디자인은 어떨지 몰라도, 현대미술은 왼쪽 그림처럼 어린 아이도 만들어낼 수 있을 것만 같은 그림이 매우 높은 가격에 거래되는 현상을 보고 기시감을 느끼는 사람들이 적지 않습니다. 저도 대부분의 사람들과 같이 현대미술의 의미에 대해 잘 모릅니다. 기시감을 느끼는 것 역시 마찬가지입니다. 그러나 이게 그렇게 비싼 가격을 받을 가치가 있는가에 대한 부분에서는 조금 공..
여행의 이유 e-Book으로 책을 읽다 버튼을 잘못 눌러 김영하의 를 읽게 되었습니다. 이미 알고 있는 이야기를 반복하는 것은 지루하게 다가옵니다. 이런 까닭에 우리는 이전에 봤던 영화, 드라마, 소설을 다시 접하지 않는 경향이 있습니다. 이 책 역시 군대에서 킬링타임용으로 한 번 읽었던 기억이 납니다. 다시 원래 읽던 책으로 돌아갈까 하다 200페이지 남짓 되는 분량은 부담스럽지 않은 분량이기 때문에 몇 페이지만 다시 읽어보자는 마음으로 페이지를 넘기기 시작했습니다. 왜 그 때 미처 몰랐을까? 싶을 정도로 이 짧은 분량의 책이, 너무나 향기롭게 다가왔습니다. 같은 사람이 같은 책을 읽었는데 감상이 다른 이유는 아마도 사람이 변했기 때문일 겁니다. 군대를 전역한지 얼마 되지 않았음에도, 그 기간의 경험이..
ESP는 생태계교란종인가, 타노스인가? IoT나 코딩에 대한 분위기가 이렇게 좋지 않았던 몇 년 전까지만 하더라도 3.3V를 사용하는 회로는 시장에서 조금은 마이너한 분위기였습니다. 그도 그럴것이, 이 시작에 대변혁을 일으켰다고도 볼 수 있는 Arduino UNO가 5V를 기준으로 동작했기 때문입니다. 당시 3.3V에서 동작했던 Arduino Pro Mini는 영 인기가 없는 편이었습니다. 그러다 이 시장에 3.3V 관련 제품과 이야기가 오가기 시작하는 큰 변화의 물결이 일어납니다. Espressif의 ESP 시리즈가 등장한겁니다. ESP-**모듈은 아두이노보다 훨씬 저렴한 가격에 훨씬 나은 성능과 넉넉한 SRAM을 제공합니다. 거기다 WiFi도 사용할 수 있게 되면서 활용도가 말도 안되게 무궁무진해졌습..
대부분의 기술 블로그는 토사구팽 당하는 존재다. 제 블로그에 오랜 기간 꾸준히 방문하는 사람은 거의 없을거라 생각합니다. 지금까지 IT/기술 관련해 수많은 블로그를 스쳐 지나 온 경험에서 우러난 생각입니다. 있다면 만나뵈어 커피라도 사드리고 싶습니다. 제가 운영하는 블로그와 같은 형식의 페이지에 방문하는 사람들은 대부분 필요한 정보를 얻으면 그냥 지나갑니다. 혹은 그 내용만으로 충분치 않으면 이메일이나 전화번호를 남겨 추가적인 도움을 구합니다. 이걸 정말 잘 알고 있는 이유는 제가 블로그 방문자이자이면서 동시에 블로그 운영자이기 때문입니다. 그리고 아마 저와 같은 카테고리의 블로그를 운영하는 대부분의 사람들은 저와 같은 현상을 경험할 것입니다. 방문자는 필요한 정보만 찾아 눈 앞의 문제를 해결하기만 하면..
Express를 사용해보겠습니다. 근데 이제 Firebase를 곁들인... 시작하기 전에 간단히 Firebase에 대한 설명을 하겠습니다. Firebase는 서버리스 앱을 만들 수 있도록 하는 플랫폼 같은 겁니다. 기존에 웹 앱이나 홈페이지를 만드려면 서버가 필요했습니다. 백엔드 서버가 존재함으로써 홈페이지가 회원가입, 데이터 저장 / 불러오기 등의 기능을 수행할 수 있었습니다. 그런데 이렇게 되면 작은 규모의 프로젝트도 모두 서버를 관리해야 한다는 불편함이 따라옵니다. Firebase는 DB, 인증 등 백엔드 서버가 했던 일들을 모두 구글 서버에서 처리할 수 있도록 이 모든 기능을 api 형태로 제공해버립니다. 이에 따라, React같은 프레임워크로 프론트엔드만 깔끔하게 잘 짜도 쓸만한 웹 앱을 만들 ..
💻Irritating Things When You Are About To Buy A New PC:( PC를 구입할 때 고민할 것이 굉장히 많습니다. 특히 노트북은 무게가 어떻니 CPU가 어떻니 GPU가 어떻니 NVME 지원하니 램클럭과 용량은 어떻니, 배터리는 몇 Wh니 터치패드, 키감은 어떻니, 디스플레이는 또 어떻니, 포트 구성은 어떻니 와이파이 스펙은 어떻니 ac니 ax니 WiFi6니...요즘은 여기에 USB-C는 어디까지 지원하니 썬더볼트니 USB 3.1 Gen 1이니 Gen2니 USB4니 하는 이런 문제들이 있습니다. 좋은 물건을 구입하기 위해 공부를 많이 해야 합니다. 물론 PC라는게 편의점에서 삼각김밥 사는 것 만큼 단순하지는 않으니 공부를 할 필요는 있습니다. 그런데 한 번 생각해봅시다. ..
Code Name : Cherry | Level : CLASSIFIED | Declassified : 2021-07-24 이런 기믹성 글은 포스팅하고 싶지 않지만 이게 정말 웃긴 이야기이기도 하고 프로젝트에 들인 시간이 있다보니 소개를 안할 수 없을 것 같습니다. 일단 시작해보겠습니다. 친구에게 전화를 걸어 뭘 하고 있는가 물어본적이 있었습니다. PC방에서 약초 캐고 있답니다. 저는 메이플스토리를 하지 않아서 그게 무슨 헛소리인가 하고 들었는데, 단순히 요약해보니 "쥬니퍼베리라는 아이템을 캐다 보면 확률적으로 돈이 되는 아이템이 나온다. 이걸 한 시간 내내 캐면 4000원 정도 벌 수 있다." 정도의 이야기를 해줬습니다. 이후에 PC방을 한 번 같이 간 적이 있는데, 아니 친구 두 명이 돈이 없다고 한 ..
죽은 Pro Micro 살리기. Arduino Pro Micro 제품을 2개 가지고 있었습니다. 그 중 하나는 PC에 연결해도 인식을 하지 못합니다. 지금이었으면 조금 고민하다 버렸겠지만, 당시 저는 돈도 없었고 알리익스프레스에서 장장 한 달을 기다려 구입했던지라 차마 버릴 수가 없었습니다. 그렇게 수 년동안 공구함 어딘가에 짱박혀있는 Pro Micro를 꺼내봤다가 한 번 살려 보기로 했습니다. 부트로더를 다시 업로드하든 뭘 하든 해서 살려보겠다는 굳은 각오를 하고 방법을 찾아봤습니다. 허무하게도 생각보다 굉장히 간단한 방법으로 살려버렸습니다. 아두이노 프로 마이크로 usb 장치 인식 문제 (벽돌상태 해결방법) 아두이노 프로 마이크로 arduino pro micro 벽돌상태 해결방법 아두이노 IDE에서 ..
Introduction 지금까지 React로 Frontend를 만들고, fetch를 통해 React와 Express가 서로 통신하도록 만들었습니다. 이렇게 서로 통신이 가능하게 되었으니 express-session과 Firebase Realtime Database를 가지고 React에서 유저 인증을 할 수 있도록 해 보겠습니다. *내용이 조금은 길어질 수 있습니다. Session 이 부분에 대한 정확한 정보는 사실 저도 잘 모르겠습니다만, 우선 제가 파악 내용대로 설명을 드리자면, Session은 유저에 대한 인증 정보를 서버에 저장합니다. 유저가 페이지에 접속했을 때, Express는 유저의 디바이스에 저장된 쿠키 값을 불러옵니다. 이 쿠키 값이 서버에 저장된 값과 인증 정보가 같다면 유저의 세션을 유..
Form을 만들었으니 이제 작동할 수 있도록 만들어 보겠습니다. Front-end와 Back-end간에 통신이 이루어지도록 하는 것은 그리 어렵지 않으면서도 세심함을 요하는 작업입니다. 주소가 틀리거나, 주고 받을 데이터의 형식이 다르거나, 전송 속도와 앱의 실행 속도 간에 발생하는 시간 차이를 고려해야 합니다. 일단 이 포스팅에서는 그런 모든 복잡한 것을 뒤로 하고 단순히 데이터 통신에만 집중해보도록 하겠습니다. React에서 fetch로 요청 보내기 이전에 작성했던 /client/src/pages/Login.js 파일의 handleSubmit함수에 fetch관련 내용을 추가해줍니다. const handleSubmit = (e) => { const requestOptions = { // 데이터 통신의 ..
이번 편은 조금 길어질 수 있어 프론트엔드와 백엔드로 나눠서 포스팅하겠습니다. 우선 이번 포스팅에서는 React + react-bootstrap으로 페이지를 구성하고 백엔드에 요청을 보내는 페이지를 만들겠습니다. 이전에 맛보기로 만든 FormTest.js 컴포넌트를 지우고 시작하겠습니다. 컴포넌트 구성 및 Blueprint components 폴더에 LoginForm.js 컴포넌트를, pages 폴더를 만들고 Login.js를 추가합니다. Login.js는 로그인 페이지 자체를 표현하고, LoginForm.js는 로그인을 위한 폼들이 구현되는 컴포넌트입니다. 여기에도 역시 react-bootstrap을 적용해서 페이지를 만들어 보겠습니다. 지금 만드는 로그인 페이지는 기존 홈페이지의 로그인과 조금 다릅니..
이전 포스팅에서 Component, State, Props의 개념을 아주 약간 맛봤습니다. Reactful한 페이지를 만들었다는 데 일단 축하한다는 말씀을 드립니다. 이번에는 react-bootstrap이라는 React UI 라이브러리를 사용해보겠습니다. bootstrap이 무엇인지 모르는 분도 있을 수 있어 간단하게 설명드리자면, 블로그 스킨 같은 겁니다. 근데 특별한 identitiy가 있다기보다 누가 봐도 깔끔한 느낌이 들도록 하는 스킨같은 겁니다. 기존에 HTML + CSS를 사용했다면 그냥 bootstrap.min.css를 다운로드 받아 html파일에 적용하는 것만으로 bootstrap을 사용할 수 있었습니다. 그러나 React에서는 별개의 패키지를 설치해서 적용해야 기존 html에서 boost..