[JS] 모듈을 받아오는 import와 모듈을 내보내는 export
·
Learning-Log/Computer Science
Javascript에서 A파일에 작성한 코드를 B파일에서 쓰고 싶을 때 쓰이는 것이 바로 import와 export이다. export는 현재 파일에 있는 어떤 변수나 함수, class 따위를 import 가능한 상태로 전환시켜주는 기능을 하고, import는 현재 파일에서 다른 파일에 export 되어 있는 어떤 변수나 함수, class 따위를 쓸 수 있게 만드는 기능을 한다. 따라서, 먼저 export 부터 살펴보자. export export는 크게 두 가지가 있다. 이름을 지정하여 내보내기 (named) //변수, 함수, 클래스를 선언하고 초기화하면서 동시에 export 하는 방법 export const randomNum = Math.random //변수, 함수, 클래스를 선언하고 초기화한 뒤, 이미..
[ReactJS] styled-components와 함께 하는 즐거운 ReactJS
·
Learning-Log/Computer Science
styled-components를 이용하지 않고 React만을 통해서 웹 퍼블리싱을 하는 방법은 크게 3가지가 있다. 해서... 원래는 3가지 방법을 모두 설명하려 했지만.... 다음에 기회가 되면 하기로 하고, 바로 styled-components로 들어가보자. 어차피 지금 시점에서 React를 쓰면서, styled-components 를 쓰지 않는다는 것은 어불성설이다. 설치 npm i styled-components 주의할 점이 딱 하나 있다. styled-component가 아니라 styled-components 이다. 맨 끝에 s가 반드시 붙어야한다. 실제로 npm 에 styled-component라는 패키지가 이미 존재한다. 따라서 주의가 필요하다. 뭐 악성프로그램은 아니지만, 더 이상 관리가..
[NestJS] NestJS, 한 번 빠지면 벗어날 수 없는 마성의 늪(3) : NestJS를 이해하기 위한 First Class Function, Closure 그리고 Decorator
·
Learning-Log/Computer Science
NestJS를 이해하려면, Decorator를 알아야하고, Decorator를 알기 위해서는 Closure 개념과 비교하면 좋다. 근데 Closure 개념과 Decorator를 위해서는 First Class Function 이라는 개념에 대해 짚고 가는 것이 먼저이다. 따라서 이번 포스팅에서는 First Class Function, Closure, Decorator를 알아보려고 한다. 참고로 Decorator는 아직 ES의 정식 기능이 아니며, ECMA TC39의 실험적 기능이다. 하지만 Nest 등 최신 프레임워크 중에서는 Decorator를 지원하는 경우가 있고, Babel도 Decorator를 지원하고 있다. 이 이면에는 비밀이 있는데, Decorator는 새로운 문법이 아니라는 점이다! 사실 De..
[NestJS] NestJS, 한 번 빠지면 벗어날 수 없는 마성의 늪(2) : NestJS 시작하기 & Express 프로젝트를 Nest로 마이그레이션 하는 경우
·
Learning-Log/Computer Science
1. NestJS 시작하기 $ npm i -g @nestjs/cli cli 버전으로 설치하는 이유는 cli 버전을 통해 nest가 지원하는 '프로젝트 초기화' 기능을 활용하기 위함이다. 다시 말해, @nestjs/cli를 설치한다고 해서 nest의 실질적인 패키지가 다운로드 되지는 않는다. 이는 위 코드를 입력한 뒤 성공적으로 설치가 끝나더라도 package.json 파일상에서는 그 무엇도 변하지 않았다는 점을 통해서 확인할 수 있다. 참고로 -g는 global의 약자이다. 그렇다면 이제 진짜 nest를 다운받아보자. 아래의 코드를 입력하면, nest가 지원하는 '프로젝트 초기화' 기능이 작동하여, nest를 통해서 서버를 빌드하는데 있어 필요한 모든 기본적인 툴과 세팅이 제공된다. 가령, @nestjs..
[WSL] Ubuntu에서 현재 디렉토리를 윈도우 탐색기로 열기
·
Learning-Log/Computer Science
우분투에서 현재 경로를 윈도우 탐색기로 띄워보고 싶을 때가 있다. 그럴 때 쓸 수 있는 코드. $ explorer.exe . explorer.exe 를 실행하라는 명령어 + 현재 디렉토리 전체를 의미하는 마침표 '.' 의 조합이다.
[NestJS] NestJS, 한 번 빠지면 벗어날 수 없는 마성의 늪(1) : 소개
·
Learning-Log/Computer Science
NestJS란, MIT 라이센스 하에서 공개된 Node.js 기반의 프레임워크이다. NestJS는 Javascript계의 django이자, spring 이라고 볼 수 있다. 아래는 공식 홈페이지에 소개된 Nest의 문제 의식 및 철학 In recent years, thanks to Node.js, JavaScript has become the “lingua franca” of the web for both front and backend applications. This has given rise to awesome projects like Angular, React and Vue, which improve developer productivity and enable the creation of fast..
Tistory의 코드블럭을 이쁘게 만들어보자 : 코드블럭 테마 (highlight.js) 적용방법
·
Learning-Log/Computer Science
1. 준비사항 만약 Tistory에서 제공하는 코드블럭 플러그인을 쓰고 있다면 이를 먼저 해제하자. 안쓰고 있다면 다음 단계로~ highlight.js demo highlightjs.org 위 링크에서 자신이 원하는 테마를 찾자. 마음에 드는 테마를 찾았다면 그 녀석의 이름을 유심히 봐야한다. 2. 코드블럭 테마 입히기 블로그 관리 페이지 > 꾸미기 > 스킨 편집 > html편집 에서 HTML의 부분에 아래의 코드를 입력해주자. 이 때, 위 코드상 세번째 줄의 default.min.css 부분에서 'default' 부분에 앞서 유심히 봐둔 마음에 드는 테마의 이름을 입력해줘야한다. 테마의 이름은 소문자로 입력해주면 되고, 만약 띄어쓰기가 있다면 하이픈 (-)으로 표현하자. 예를 들어, Base16/Mat..