프로그래밍 공부하기

스터디: https://github.com/lghihl/CleanCode-Archetecture 작년에 클린코드 스터디를 진행했었다. 블로그에도 몇 가지 인상 깊었던 부분을 기록해보고자 한다. 코드란 요구사항을 상세히 표현하는 수단이며, 프로그래밍은 기계가 실행할 정도로 상세하게 요구사항을 명시하는 작업이다. 코드의 추상화 수준이 높아지면서 프로그래머가 작성하는 코드 수가 줄어들 수는 있겠지만 코드 자체가 사라지지는 않을 것이다. 좋은 코드란 어떤 것일까? 사람마다 생각하는 기준이 다를 수 있지만 책에서 몇 가지 기준을 유명인의 말을 인용하여 제시하고 있다. 좋은 코드 조건 읽기 쉽다. 다른 사람이 고치기 쉽다. 추측이 아닌 사실에 기반한다. 시스템 내 모든 설계 아이디어를 표현한다. 의미있는 이름을 쓴..

node 12버전이 필요해서 nvm install을 했더니 python: not found 라며 오류가 발생한다. 나의 경우 다음과 같은 해결책이 유효했다. 바로 nvm의 default alias를 바꾸는 것이다! 나의 노드 설치 역사가 node 14를 먼저 설치 -> homebrew로 nvm을 설치 -> node 12버전 설치 -> node 12 제거 -> node 12 설치(오류!) 라서 뭔가 내부에서 꼬인 것 같다. nvm alias default 14.19.2 nvm alias 명령어로 기존에 갖고있던 node 버전을 nvm의 default로 바꾼다. 바뀐 default alias를 확인 후, nvm install 12를 했더니 성공했다! 오류 메시지가 python: not found로 나와서 p..

/usr/local/bin/node ./app.js SyntaxError: Unexpected token '.' process exited with code 1 오랜만에 nodeJS를 디버깅을 하려는데 위와 같은 형식의 에러가 발생한다. 분명히 전에도 디버깅했던 프로젝트인데 무슨일인걸까..ㅜㅜ 의심가는 것은 내가 최근에 node를 12로 낮췄다는 것인데... https://stackoverflow.com/questions/61670459/importing-in-node-js-error-must-use-import-to-load-es-module Importing in Node.js: error "Must use import to load ES Module" I'm trying to import myArr..

리액트의 reportWebVitals에서 측정한 사용자 경험 수치들을 Google Analytics로 보낼 때 nonInteraction이라는 옵션을 볼 수 있다. 이 옵션이 어떤 의미인지, Bounce Rate와 Exit Rate는 무슨 차이인지 알아보자. import {getCLS, getFID, getLCP} from 'web-vitals'; function sendToGoogleAnalytics({name, delta, id}) { ga('send', 'event', { eventCategory: 'Web Vitals', eventAction: name, eventLabel: id, eventValue: Math.round(name === 'CLS' ? delta * 1000 : delta), /..

요즘 메타버스, 블록체인, NFT 등 알듯 말듯한 단어들이 들리고 있다. 심지어 이런 단어들이 세상을 지배할 것이라 한다. 앞으로는 대체 어떤 세상이 오는 걸까? 특히 메타버스라는 것은 대체 무엇일까? 메타버스에 대한 정의를 찾아보면 굉장히 다양하다. 현실 세계의 확장, 게임의 새로운 형태, 3D, VR 등등 사람마다 정의가 다르다. 책에 의하면 이러한 정의가 사실 거의 맞는 말이라 한다. 왜냐하면 메타버스는 굉장히 여러 개념이 포함되어있기 때문에, 마치 여러 맹인이 코끼리를 더듬어 설명하듯, 메타버스의 한 부분만 보고 이야기하는 것과 같다. 메타버스는 크게 사람-환경 축과, 증강(데이터->현실)-시뮬레이션(현실->인터넷세상) 축으로 이루어져 있다. 이 중 증강 현실은 환경에 데이터를 겹쳐 보이게 증강..

오늘은 dragEnd 이벤트가 발생하지 않는 오류를 기록해보려한다. DND(Drag & Drop)란, 위와 같이 마우스 포인터를 누른 채로 움직였다가 손을 떼는 동작을 의미한다. 일반적으로 화면상의 요소를 쉽게 움직이기 위해 사용한다. DND 이벤트는 dragstart, dragend, dragover, dragenter, dragleave, dragexit, drop 7가지가 있다. 그 중 나는 dragstart, dragend 이벤트를 사용하는 예제를 만들어 보았다. See the Pen draggable by ImHyeLim1209 (@imhyelim1209) on CodePen. dragstart 이벤트가 발생하면 'dragging', dragend 이벤트가 발생하면 'nothing' 이라는 텍스..

많은 사람들이 객체 지향 언어를 배우고, 자신의 프로그램을 객체 지향적으로 구성하기 위해 노력한다. 오늘날의 개발자라면 객체 지향이라는 단어를 알고 있는 것이 당연하다. 나 역시 객체지향이라는 단어를 많이 들었고, 내가 단어를 사용하기도 하였다. 그런데, 이 책을 읽고 객체지향에 대해 잘못생각하고 있는 부분들이 있다는 점을 깨닫게 되었다. 객체 지향의 대표적 오해는 객체지향이 현실 세계의 모방이라는 것이다. 예를 들어, 이상한 나라에 앨리스와 물병이라는 두 요소가 있다. 앨리스가 물병 안의 물을 먹는 행동을 취한다면, 물병 안의 물의 양이 줄어들 것이다. 반면, 객체 지향 나라의 앨리스와 물병에서 앨리스가 같은 행동을 한다면, 앨리스가 물병에게 물의 양을 줄이라는 요청을 보내고, 물병은 자신의 판단에 의..

JavaScript의 기본이 되는 6개의 원시 타입은 Number, String, Boolean, null, undefined, Symbol이다. 이 중 Symbol(심볼)에 대해 알아보자. 1. Symbol과 기존 JS 객체의 문제점 // 1. No Symbol const arr = [1,2,3,4,5]; console.log(arr.length); // output: 5 arr.length = 10; console.log(arr.length); // output: 10 심볼이란 ES6에서 도입된 원시 타입으로, 유일무이한 값, 고유한 값을 지정하기 위해 사용된다. 위 코드에 나타난 JS의 문제점은 무엇일까? 바로 객체의 내장 속성과 같은 이름으로 속성을 재정의 하면 속성의 값이 덮어쓰기 되어버린다는 ..

Web 발전사 Web 1.0 : 초창기 인터넷 환경 구글, 야후, msn, 넷이스케이프, 등 PC 기반 + 읽기 위주의 컨텐츠(상호작용이 거의 X) 플랫폼이 제공하는 인프라를 사용자가 정해진 방법으로 사용한다. Web 2.0 : 현재 SNS 중심의 참여형 플랫폼 위주의 인터넷 환경 AWS, twitter, facebook, chrome, dropbox, airbnb, 유튜브 스마트폰의 등장 언제 어디서나, 인터넷이 가능하면 서비스에 참가 가능 Cloud Driven 정해진 회사의 서버가 아니더라도, 동일한 서비스를 받을 수 있다. 읽기 + 쓰기가 가능한 컨텐츠(상호작용 다수) 유저가 적극적으로 환경 안에 게시물을 작성하는 등의 참여 사람들의 참여를 유도, 광고로 수익 창출 Web 3.0 : 참여자들이 함..

일반적으로 적은 양의 데이터는 모든 데이터를 화면에 렌더링 하는데 큰 리스크가 없지만, 너무 많은 양의 데이터가 있는 경우 데이터 전체를 렌더링 하기 위해 많은 시간이 걸려 사용자 경험을 해치는 상황이 발생한다. 이러한 상황을 극복하기 위한 대표적인 방법이 페이지네이션(Pagenation), 무한 스크롤(Infinity Scroll)과 가상화 목록(Virtualized List)이다. 가상화 목록은 전체 데이터를 모두 렌더링하는 대신, 유저 스크롤에 따라 현재 보이는 데이터만을 렌더링 하는 방법이다. 사용자가 볼 때 무한 스크롤과 유사할 수 있으나, 무한 스크롤은 스크롤이 발생할수록 화면에 렌더링 되는 항목도 많아지기 때문에 속도가 느려질 수 있으나, 가상화 목록은 현재 보이지 않는 항목은 unload ..