본문 바로가기

📍 DEV/JS & TS5

모듈과 모듈 번들러란?! (feat. Webpack) react에서 create-react-app을 사용하면 리액트에 집중할 수 있지만 웹팩, 바벨 등 번들링 도구들이 어떻게 동작하는지는 잘 모르고 넘어가게 된다. 하지만 프론트엔드 개발 환경을 이해하기 위해선 꼭 알아야 한다고 생각하기 때문에 정리를 해보고자 한다. 📝❗️ 모듈(Module)이란?! 한줄로 정의하자면 모듈은 파일 하나하나, 특정 기능을 갖는 작은 코드 단위를 의미한다. 우리가 개발을 하면서 규모가 커지면 언젠가 파일을 여러 개로 분리해야 하는 시점이 온다. 이때 분리된 파일 각각을 모듈이라고 부르는 것이다. 목적에 따라, 기능별로 여러 개의 파일로 분리해서 관리할 수 있으며 모듈로 분리하는 과정을 모듈화라고 한다. 그렇다면 모듈을 왜 사용해야 하는 걸까?! 모듈이 필요한 이유 : 브라우저 .. 2021. 7. 27.
[17JAN, 2021]OOP2)Prototype in JavaScript. 자바스크립트는 Prototype 기반 언어이다. Class 기반의 언어에서는 Class 안의 내용을 기반으로 인스턴스를 생성하여 객체를 사용하지만 자바스크립트는 Class 가 존재하지 않는다. 그래서 자바스크립트는 프로토타입을 이용한다. 그럼 이 Prototype이 뭘까?! (ES6에서는 Class문법이 추가되었지만 자바스크립트가 클래스 기반의 언어로 바뀌었다는 것은 아니다.) 프로토타입에 대해 설명하기에 앞서 클래스와 인스턴스에 대한 개념을 한 줄로 정리하고 가고 싶다. 동기분들이 공유해준 블로그 중 하나에서 깔끔한 정리를 찾을 수 있었다. 객체(Object)는 소프트웨어 세계에 구현할 대상이고, 이를 구현하기 위한 설계도가 클래스(Class)이며, 이 설계도에 따라 소프트웨어 세계에 구현된 실체가 인.. 2021. 1. 17.
[14JAN, 2021] OOP1)What is Object-oriented Programming?! 객체 지향??!! 나처럼 프로그래밍을 처음 접한 사람들에게는 이 객체지향이라는 말이 생소하게 느껴질 것이다. 우리의 일상생활에서 쓰이지 않는 말이기 때문이다. 나는 프로그래밍을 접하기 전, 이 단어를 딱 들었을 때 '객체가 뭐길래 지향한다?? 지향이면 그래도 선호한다는 건데..?'이라는 생각을 했다. 그래서 이 객체 지향을 이해하는 데에는 우선 객체가 무엇인지 이해를 해야 객체지향도 이해할 수 있다고 생각한다. 객체(Object): 객체는 ''Thing', '어떤 것'으로 생각하면 조금 더 이해하기 쉽다. 그래서 객체는 사람이 될 수 있고, 자동차가 될 수도 있으며 컴퓨터, 책 등등 무엇이든 될 수도 있다. 클래스(Class): 그럼 자동차로 예를 들어보자. 자동차는 사람들이 이동할 때 타는 운송수단이다.. 2021. 1. 15.
[11JAN, 2021] Mac OS zsh: command not found: nvm 해결방법 11일 저녁부터 12일 AM4:00까지 찾은 나의 mac os 환경변수 설정!! nvm 깔고 버전 확인 다 했는데 다시 터미널 들어가서 nvm 버전을 확인하면 zsh: command not found: nvm 이 떠서 멘붕의 연속... 찾아낸 결과는!! 바로!! 하지만 그 전에 원인은!! 바로!!! Mac OS 중 Catalina부터는 터미널의 기본 셸이 zsh로 바뀌었기 때문이다!! 앞의 게시글처럼 설치를 했다면 우리는 bash에 저장을 한 것이다. 하지만 bash는 mac OS 중 Mojave 및 이전 버전의 기본 셸이고, Catalina이상은 zsh가 기본 셸이기 때문에 zsh에서는 입력된 환경변수가 없기에 에러가 나는 것이었다. 해결방법은 두 가지가 있다! 1. bash를 zsh에 사용하도록 만드.. 2021. 1. 12.