javascript
package.json의 패키지들을 모두 버전 업 하고 싶다면
package.json의 패키지들을 모두 버전 업 하고 싶다면
2020.12.07package.json의 패키지들을 모두 버전 업 하고 싶다면 프로젝트를 진행하면서 사용하던 라이브러리들이 너무 노후화된 경우 날을 잡아서 최신 버전으로 업데이트하곤 합니다. 이때, 하나하나 제거하고 설치하면서 버전업을 할 수도 있지만, 커맨드 한 번이면 현재 설치되어있는 패키지들을 모두 버전업할 수 있습니다. 사용 방법 아래의 yarn upgrade-interactive 커맨드를 입력하면 됩니다. yarn upgrade-interactive --latest 현재 버전과 업그레이드 버전을 비교하여 세가지 색으로 나타냅니다. red : 이전 버전 호환이 안될 수도 있는 메이저 업데이트 yello : 이전 버전 호환이 되는 마이너 업데이트 green : 이전 버전 호환이 되는 버그 수정을 위한 패치 업데이트..
HTML5 Canvas Tutorial : 화면에 튕기는 공 만들기
HTML5 Canvas Tutorial : 화면에 튕기는 공 만들기
2020.12.06
Creative Coding 개발환경 설정 및 기본 프로젝트
Creative Coding 개발환경 설정 및 기본 프로젝트
2020.11.22개발 환경 설정 코드 에디터 Visual Studio Code Visual Studio Code 확장 프로그램 ESlint, jslint - JavaScript용 코드 lint 확장 프로그램 Beautify - 코드 포메터 확장 프로그램 Live Server - HTML 파일을 서빙하는 가상의 서버를 띄우는 확장 프로그램 추가 팁 파일이 크지 않기 때문에 로컬영역이 아닌 클라우드에 저장해서 사용하는 것도 좋다. 구글 드라이브 + 드라이브 파일 스트림으로 로컬 드라이브처럼 사용 가능) 기본 프로젝트 index.html style.css * { outline: 0; margin: 0; padding: 0; } html { width: 100%; height: 100%; } body { width: 100%;..
Creative Coding을 들어가며
Creative Coding을 들어가며
2020.11.14Creative Coding 몇 년전에 김종민님이라는 개발자분의 포트폴리오를 보고 엄청 놀랐던 기억이 난다. 웹에서 예술을 구현했다고 해야할까 웹이라는 접근 편의성과 인터페이스를 이용한 인터렉티브를 정말 제대로 이용하였고, 몇몇 작업물만 보아도 내공이 느껴지는 작품들이였다. 그 당시, FE 개발자를 희망하고 디자인에 관심이 있다보니 저런 작업물을 만들어보고 싶었지만, 현재까지 생업을 핑계삼아(라고 쓰고 귀찮아서라고 읽음) 이런 생각들을 구석에처박아 놨었다. 그러다가 해당 개발자분이 운영하는 채널의 영상이 드문드문 유튜브에서 추천되어서 봤더니 올 해부터 유튜브 영상으로 작품에 대한 스토리 혹은 튜토리얼 등을 올리시는 걸 알게되었다. 이렇게 본격적으로 알려주는데 구석에 쳐박아 놓았던 나의 생각을 이제 꺼내볼..
Next.js에서 Apollo Client 사용하기
Next.js에서 Apollo Client 사용하기
2020.11.14Apollo Client @apollo/client 라이브러리를 이용합니다. Apollo는 GraphQL 서버에서 필요한 정확한 데이터를 쉽게 query할 수 있는 GraplQL 클라이언트입니다. 데이터를 가져오고 변조하는 것 이외에도, Apollo는 query와 그 결과를 분석하여 클라이언트 사이드 캐시를 구성하며 이를 통해 추가 query와 mutation이 실행될 때 최신 상태로 유지되게 합니다. Next.js에서 Apollo Client 사용하기 SSR을 할 수 있는 Next.js 프레임워크에서 Apollo Client를 사용하는 방법이 여러가지 있다. next-with-apollo라는 라이브러리가 유명하지만 아쉽게도 최신 스펙인 getServerSideProps나 getStaticProps를 정..
Monorepo와 lerna
Monorepo와 lerna
2020.06.05Monorepo vs Polyrepo ☝️ Monorepo Monorepo는 여러 프로젝트의 소스 코드를 관리하는 데에 하나의 저장소(repository)만 사용하는 것을 의미합니다. 예를 들어 Monorepo를 이용하면 웹 앱 프로젝트, 모바일 앱 프로젝트, 서버 프로젝트가 한 저장소에 있게 됩니다. Monorepo와 대비되는 개념으로는 Polyrepo(혹은 Multirepo)가 있습니다. 🖐 Polyrepo Polyrepo는 여러 프로젝트의 소스 코드를 관리하는 데에 여러 개의 저장소를 사용하는 것을 의미합니다. Monorepo와 달리 Polyrepo에서는 웹 앱 프로젝트, 모바일 앱 프로젝트, 서버 프로젝트가 각각의 저장소를 갖게 됩니다. 👍 Monorepo의 장점 통합적인 test, build, ..
tsconfig.json 컴파일 옵션 정리
tsconfig.json 컴파일 옵션 정리
2020.05.28tsconfig.json Typescript는 동적 타입언어인 JavaScript를 타입이 있는 형태로 코딩할 수 있게 해주는 언어입니다. 따라서 TypeScript로 짜여진 코드를 JavaScript로 변환해 줄 트랜스파일러(컴파일러)가 필요합니다. 컴파일은 다음과 같은 커맨드로 사용 가능합니다. tsc foo.ts 해당 컴파일 과정에 여러 옵션을 정할 수 있는데 이 옵션을 작성하는 파일이 tsconfig.json입니다. tsconfig.json의 기본 형태는 다음 커맨드를 통해 생성할 수 있습니다. npx tsc --init 해당 커맨드로 생성되는 기본 형태의 tsconfig.json 및 옵션들은 다음과 같습니다. tsconfig.json의 컴파일 옵션 정리 { "compilerOptions": { ..
[Next.js] 공유된 컴포넌트 사용하기
[Next.js] 공유된 컴포넌트 사용하기
2020.01.21이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다. 오역 및 오탈자 발견시 댓글로 제보해주시면 감사하겠습니다. Next.js는 결국 페이지라는 것을 알 것입니다. 리액트 컴포넌트를 내보내고 해당 컴포넌트를 pages 디렉토리 안에 넣으면 페이지를 만들 수 있습니다. 그 결과로 파일명에 기반한 고정된 URL을 얻을 수 있습니다. 내보내진 페이지들은 자바스크립트 모듈이기 때문에, 다른 자바스크립트 컴포넌트도 불러올 수 있습니다. 무슨 자바스크립트 프레임워크를 쓰던지 이와 같은 기능을 기대할 것입니다. 이번 수업에서 우리는 공통된 헤터 컴포넌트를 만들고 여러 페이지에서 이를 사용할 것입니다. 마지막으로는 레아아웃 컴포넌트를 구현하고 이것이 어떻게 여러 페이지가 어떻게 보일 지를 정하는 데 도움을 줄 것..
[Next.js] 페이지 간 이동하기
[Next.js] 페이지 간 이동하기
2020.01.20이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다. 오역 및 오탈자 발견시 댓글로 제보해주시면 감사하겠습니다. 이제 간단하게 Next.js 앱을 생성하고 실행하는 법은 알 것입니다. 이 앱은 오직 하나의 페이지를 가졌지만, 우리는 가능한 많은 페이지를 추가할 수 있습니다. 예를 들어, pages/about.js에 다음과 같은 내용을 추가하여 "About" 페이지를 생성할 수 있습니다. export default function About(){ return( This is the about page ); }이제 http://localhost:3000/about 페이지에 접근할 수 있을 것입니다. 다음으로는 이 페이지들을 연결해야하는데, 우리는 HTML의 태그를 사용해왔습니다. 그러나 클라이언트 사이..
[JavaScript] {} + {}의 결과는 뭘까?
[JavaScript] {} + {}의 결과는 뭘까?
2019.12.14해당 글은 JavaScript values: not everything is an object를 번역한 글입니다. 질문 {} + {}의 결과는 뭘까? 자바스크립트에서 객체나 배열들을 더할 때 우리는 종종 예상치 못한 결과물을 얻곤한다. 이러한 결과물이 생긴 이유에 대해서 알아보자! 자바스크립트의 더하기 연산 법칙은 간단한다. 오직 숫자(number)나 문자열(string)만 더할 수 있다. 숫자와 문자열 이외의 다른 모든 값들은 더하기 연산을 만나면 이 둘 중 하나로 변하게 된다. 해당 변환이 어떻게 이루어지는 지 알기 위해서는, 몇 가지 사실에 대해서 이해해야한다. 자바스크립트는 원시값(primitives)과 객체(objects) 두 종류의 값으로 이루어져 있다. 원시값에는 undefined, null..
[JavaScript] Ajax
[JavaScript] Ajax
2019.12.11웹 어플리케이션의 사용성은 데스크톱 어플리케이션에 비해 현저히 떨어져있었다. 고전적인 웹 어플리케이션 유저가 폼 영역을 채우고 폼을 제출한다. 브라우저가 서버에게 보낼 요청을 생성한다. 서버가 브라우저가 렌더할 정확한 페이지를 포함한 응답을 생성하고 보낸다. 브라우저가 새로운 페이지를 로드하고, 잠시 브라우저의 윈도우가 깜빡거린다. 클라이언트는 서버의 답을 기다리고 전체 페이지를 새로운 데이터로 다시 로드한다 동기적인 요청이 서버에서 처리되는 동안, 유저는 클라이언트 웹 브라우저와 상호작용할 수 없다. 동기적 모델은 하이퍼텍스트 문서들의 웹을 위해 고안되었다. Ajax 웹 어플리케이션 Ajax 어플리케이션에서, 유저는 페이지와 상호작용한다. 클라이언트는 요청을 처리하기 위해 XMLHttpRequest라는..
[HTML] HTML DOM(Document Object Model)
[HTML] HTML DOM(Document Object Model)
2019.11.27HTML DOM(Document Object Model)이란? DOM은 W3C(World Wide Web Consortium) 표준으로 DOM은 문서를 접근하기 위한 표준을 정의합니다. W3C DOM은 프로그램들과 스크립트들이 콘텐츠나 구조, 문서의 스타일에 동적으로 접근하고 수정하기 위한 플렛폼이자 언어 중립적 인터페이스입니다. W3C DOM 표준은 3개로 나뉘어져 있습니다. Core DOM - 모든 문서 종류에 대한 표준 모델 XML DOM - XML 문서에 대한 표준 모델 HTML DOM - HTML 문서에 대한 표준 모델 DOM은 문서의 구조화된 표현 제공을 통해, 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여 그들의 문서 구조 및 스타일이나 내용등을 변경할 수 있게 합니다. 우리..