안녕하세요! 이번 글에서는 요새 핫한 프로젝트인 nextjs 를 활용하여 프로젝트를 생성하는 법을 기술하고자 합니다. 가장 먼저 Node.js와 Node Package Manager인 npm을 설치해보도록 하겠습니다. $ brew install node$latest $ brew install npm 그리고 설치가 완료되면 npx 명령어를 활용해 nextjs 프로젝트를 생성합니다. $ npx create-next-app@latest --typescript 다음으로 추가적으로 설치하는 패키지를 물어봅니다. Need to install the following packages: create-next-app@latest Ok to proceed? (y) y 다음으로 프로젝트의 이름을 물어봅니다. What is ..
콘솔은 크게 두가지의 목적으로 사용합니다. 첫번째로는 로그 메시지를 확인하는 용도, 두번째로는 자바스크립트를 실행하는 용도입니다. 로그 메시지 확인하기 자바스크립트가 제대로 작동하고 있는지 확인하기 위해서 종종 콘솔을 활용합니다. console.log(data)와 같은 코드를 이용해서 data의 형식을 알아낸다거나, console.log("1") 와 같은 코드를 코드의 작동 순서를 알아낼 때에도 유용하게 사용합니다. 이렇게 작성한 코드는 실행되어 Console 탭에 나타나게 됩니다. 위의 사진에서 볼 수 있듯 출력 내용과 위치가 탭에 표시되게 됩니다.. Console API 콘솔 탭은 따로 알아볼 것들이 그닥 많지는 않기 때문에 Console API 또한 확인하고 가겠습니다. console.assert(..
TypeScript의 Enum은 딱 열거형으로서만 사용할 수 있습니다. 다른 언어에서 Enum을 Static 객체로 사용해본 경험이 있는 분들이라면 이 지점이 굉장히 답답하다는 것을 느낄 수 있는데요. Java에서 Enum을 객체로 활용하면 어떤 큰 장점을 얻게되는지는 배민 기술 블로그 를 참고해보시면 좋습니다. 저와 똑같이 답답함을 느끼신 분이 계시는지, 이미 TypeScript도 Java의 Enum과 같이 Static 객체로 Enum을 다룰 수 있도록 ts-jenum 을 만들어주셨습니다. 이번 시간에는 ts-jenum 을 이용해 응집력 있는 Enum 활용법을 소개드리겠습니다. 1. 설치 ts-jenum 은 Java의 java.lang.Enum 과 같은 사용성을 얻기 위해 제공하는 라이브러리입니다. 별..
https://toolbox.signalsupply.co/ SignalSupply Toolbox Various visual tools & generators by SignalSupply toolbox.signalsupply.co 위 사이트는 그라데이션을 자유롭게 사용할 수 있는 사이트이며, https://9elements.github.io/fancy-border-radius/full-control.html#46.51.58.33-48.90.74.76-517.517 Fancy Border Radius Generator Generator to build organic shapes with CSS3 border-radius 9elements.github.io 위 사이트는 border-radius 를 자유롭게 표..
white-space: normal; 기본값, 공백, 줄바꿈, 연속되는 여러개의 공백을 모두 하나의 공백으로 처리합니다. 또한 크기에 맞게 자동 줄바꿈 됩니다. white-space: nowrap; normal과 같은 처리를 하지만, 자동 줄바꿈 되지 않습니다. white-space: pre; pre 태그처럼 줄바꿈 공백 연속공백이 그대로 보존됩니다. 그러나 줄바꿈한 곳에서만 줄바꿈이 일어나고 자동줄바꿈 되지 않습니다. white-space: pre-wrap; 줄바꿈 공백 연속공백이 보존되면서 크기에 따라 자동줄바꿈이 일어납니다. white-space: pre-line; 연속된 공백은 하나의 공백으로 처리하고, 줄바꿈은 보존되며 크기에 맞게 자동 줄바꿈됩니다.
ECMAScript 모듈 시스템(import와 export 키워드)은 기본적으로 자바스크립트 코드만 가져올 수 있습니다. 하지만 애플리케이션의 설정을 JSON 파일에 저장하는 것이 편리할 때가 많고, 결과적으로 JSON 파일을 ES 모듈로 직접 가져오고 싶을 것입니다. 오랫동안 JSON 가져오기는 commonjs 모듈 형식으로 지원되었습니다. 다행히 현재 TC39 제안 3단계인 JSON 모듈은 JSON을 ES 모듈로 가져오는 방법을 제안합니다. JSON 모듈이 어떻게 동작하는지 알아보겠습니다. 1. config.json 가져오기 config.json이라는 JSON 파일을 가져오는 걸로 시작해보겠습니다. config.json에는 애플리케이션에서 유용하게 사용하는 설정값인 이름과 현재 버전이 담겨 있습니다...
웹 개발을 할 때 ajax 통신을 자주 사용합니다. ajax를 사용할 때 XHR, JQuery, Fetch 등의 선택지가 있지만 셋 다 사용해봤을 때 JQuery와 Fetch가 당연한 소리지만 압도적으로 좋은 것 같습니다. (생산성 측면에서) 앞으로 추세가 JQuery를 쓰지 말자는 추세이기 때문에 Fetch를 사용해야겠습니다. 이번 기회에 Promise, async, await, fetch에 대해서 기록하고 다음 부터는 문법만 검색해보도록 하겠습니다. MDN 문서 읽어보기 Fetch는 네트워크 요청/응답에 관련된 일반적인 Request/Response Object를 제공하는데 즉 범용성이 좋다는 말입니다. 캐시, 웹 서비스 핸들링 등 Response를 프로그래밍 언어로 조작하는 모든 것을 허용한다는 뜻..
콤보박스를 만들 때 흔히 사용하는 select 태그와 관련해 유용한 플러그인을 하나 소개해드릴까 합니다. select 태그에는 일반적으로 option 값에 대한 검색이 불가능합니다. 하지만 select2 플러그인을 추가하면 option 값을 검색할 수 있습니다. 클라이언트의 요청으로 어떻게 구현하면 좋을지 구글링하던 중 발견한 플러그인으로 사용법이 간단하여 편하고 유용하게 잘 사용했던 기억이 납니다. 1) 프로젝트에 Import 하는 방법이 있고, 파일을 내려받아 Import 하는 방법이 있습니다. 아래 사이트에서 자세한 설명 확인이 가능합니다. Installation | Select2 - The jQuery replacement for select boxes Installation In order to..