프로그래밍 공부하기

세상에는 데이터를 저장하기 위한 여러가지 형식의 파일들이 존재한다. 기본적으로 파일은 바이너리 파일과 텍스트 파일로 나뉜다. 예를 들어 텍스트 파일은 사람이 이해할 수 있는 문자를 저장하기 위해 이를 기반으로 하는 코드(ASCII, Unicode...) 값을 저장한다. 반면, 바이너리 파일은 데이터의 컴퓨터 저장과 처리에 목적이 있기 때문에 컴퓨터가 사용하기 좋은 바이너리 형식으로 데이터를 저장한다. 예를 들어 .bin, .exe, .png 와 같은 형식 이있다. 어떤 파일은 여러 파일들을 모아 압축한 형식을 갖기도 한다. 개방형 문서는 여러 XML 형식의 텍스트 파일과 media 요소를 표현하기 위한 바이너리 파일을 압축한 형식이다. MS Word로 .docx 파일을 생성한 후 확장자를 .zip으로 바..

개발을 하다보면 코드를 수정하고 리팩토링하는 일을 자연스럽게 겪게 된다. 코드를 리팩토링하는 기준은 다양하겠지만 그 중 대표적인 것은 의존성이다. 의존성에 따라 하나의 코드를 고쳤을 때 다른 코드도 점검하고 수정해야하는 일이 발생할 수 있기 때문이다. 이러한 의존성을 점검하고, 설계를 진화시키는 방법을 알아보자. 1. 설계와 의존성 설계에서 사용하는 역할, 책임이란 말은 '의존성을 어떻게 관리할 것인가' 와 일맥 상통한다. 따라서 의존성을 관리하는 방법에 따라 설계는 변화한다. 설계란 코드를 어떻게 배치할 것인가를 의미한다. 같이 변경되어야할 확률이 높은 코드는 함께 뭉쳐놓고, 그렇지 않은 코드는 분리한다. 뭉쳐놓는다는 것은 같은 함수-클래스-패키지-프로젝트에 코드를 함께 넣는다는 것이다. 의존성은 변경..

코딩을 하다보면 Call By Value와 Call By Reference 라는 말을 들어본 적이 있을 것이다. 나는 지금까지 Call By XXX은 함수의 인자로 전달되는 타입에 따라 다르다고 생각했다. Primiteve Type을 넣으면 Call By Value, Reference Type을 넣으면 Call By Reference와 같은 식으로 말이다. 하지만 엄밀히 말하자면 대부분의 프로그래밍 언어는 Call By Value 이다. 왜 그런 것인지 알아보자. 1. Call By Value function addTwo(x) { x -= 1; console.log(x); } let x = 10; addTwo(10); console.log(x); // output: 10 Call By XXX과 같은 말은..

Jest에서 ES6 모듈(import-export)를 사용하면 위와 같은 오류가 발생한다. 이 방법을 해결하기 위해선 2가지 방법이 있다. Babel 사용하기 Jest 의 Expremental Support 사용하기 첫 번째는 Babel을 활용하여 코드는 ES6로 작성하되, 실행 시에는 Common JS 모듈로 변경하는 것이다. 이 방법은 이미 프로젝트에서 Babel을 사용하고 있다면 상관없겠지만, Babel을 사용하지 않고 있던 나의 입장에서 번거로운 일이었다. 따라서 이 방법은 사용하지 않았다. { "name": "tester", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "node --experime..

node express는 라우팅 및 미들웨어로 이루어진 서버 개발 프레임워크이다. 서버는 기본적으로 사용자의 요청을 받으면 이에 대한 응답을 주는 구조로 되어있다. express 에서 클라이언트의 요청은 미들웨어들을 거쳐 서버의 처리 로직으로 전달된다. 즉, 미들웨어는 클라이언트의 요청과 서버의 처리 로직 사이의 경유지라 말할 수 있다. 1. 미들웨어의 형태 const middle1 = (req, res, next) => { next(); }; 미들웨어 함수는 요청 객체(req), 응답 객체(res), 다음 미들웨어에 대한 호출을 인자로 갖는 함수이다. 미들웨어 함수는 req를 통해 요청 데이터에 접근 가능하고, 응답 객체를 이용하여 클라이언트에게 응답을 줄 수 있다. next를 호출하여 다음 미들웨어를..

eslint, prettier를 적용한 뒤 작업을 하던 중 어느 순간부턴가 저장을 해도 자동으로 변경이 안된다. 이를 해결하기 위해 먼저 eslint output panel을 살펴보았다. [Info - 2:16:58 PM] Must use import to load ES Module: /Users/user/Documents/development/practice/.prettierrc.js require() of ES modules is not supported. require() of /Users/user/Documents/development/practice/.prettierrc.js from /Users/user/Documents/development/practice/node_modules/pretti..

const element = useRef(); const triggerFull = () => { if (element.current.requestFullscreen) element.current.requestFullscreen(); }; const exitFull = () => { if (document.exitFullscreen) document.exitFullscreen(); }; 어떤 요소를 FullScreen으로 보여주기 위해선 위와 같이 requestFullscreen(), exitFullscreen() 함수를 사용하는 것이 기본이다. 그러나 브라우저 별로 메소드를 지원하지 않는 경우가 있기 때문에 브라우저에 맞는 메소드를 호출하도록 구현해주어야 한다. const triggerFull = () ..

11. 빠르게 성장하는 슈퍼루키로 거듭나기 NAVER Engineering | 네이버,NAVER,네이버테크콘서트,NAVER TECHCONCERT,Front-end,개발,개발자생활 발표자: 정영록 (NAVER) * 개요 비전공자로 개발을 시작해 인턴을 거쳐 신입 개발자가 되었습니다. 초심자에게 tv.naver.com 최근 좋은 기회를 얻어 다음주부터 2개월간 인턴으로 출근(재택근무)하게 되었다. 인턴이 되어 가장 좋은 점은 기술적인 어려움에 봉착했을 때 나와 비슷한 일을 겪었을 선배 개발자가 생긴다는 점이다! 이런 좋은 환경의 기회를 놓치지 않고 최대한 성장하기 위해 '빠르게 성장하는 슈퍼루키로 거듭나기'라는 영상을 보게되었다. * 프론트엔드 개발자로 성장하기 [슈퍼루키로 거듭나기위한 3요소] 1. 환경 ..

JavaScript로 비동기 작업을 JS 런타임에서 처리 후 연결된 콜백 함수를 JS 엔진의 콜스택으로 적절한 타이밍에 적재시키기 위한 장치가 Event Loop이다. 이벤트 루프에 의해 JS 엔진의 콜스택에 적재되기 전 콜백함수가 대기하고 있는 곳을 Callback Queue 혹은 Task Queue라고 한다. 태스크 큐는 2가지 종류의 우선순위 큐로 구성되어있으며, 두 개의 큐 간에도 우선순위가 존재한다. setTimeout(() => { console.log('A'); }, 0); Promise.resolve() .then(() => { console.log('B'); }) .then(function() { console.log('C'); }); console.log('D'); 위 코드의 출력결과는..

1. 정의 Attribute: HTML 요소의 추가적인 정보. HTML에서 정의된다. ex. Property: DOM Tree 내의 Attribute. DOM에서 정의된다. ex. const $div = document.querySelector(".root"); console.log(div.className); // root 웹페이지 개발을 하다보면 Attribute와 Property라는 단어를 접하게 된다. 두 단어는 어떤 차이가 있을까? 먼저 Attribute는 HTML 요소의 추가적인 정보를 정의하기 위한 것으로 HTML에서 정의된다. 반면 Property는 DOM Tree 내에서의 Attribute를 가리키므로 DOM 내에서 정의된다. *DOM: HTML 페이지를 객체로 구조화한 것. 프로그래밍 ..