본문 바로가기

분류 전체보기

 (134)
Sync vs Async Sync는 한줄씩 내려가면서 실행한다. Async 역시 한줄씩 내려가면서 실행하지만 async코드를 만나면 분기하여 비동기로 작업한다. JS에서 async로 인해 분기된 경우 한 코드 안에서 여러 쓰레드가 돌아가게 된다. 이는 오래 걸리는 작업을 효율적으로 처리하기 위해서이다. 하지만 비동기 코드의 실행순서는 복잡해질 수 있기 때문에 혼란을 야기한다. 비동기 코드를 만났다면 해당 코드가 처리되기를 기다릴 필요 없이 분기하여 다음 코드를 바로 실행시키면 된다. fetch와 같은 작업 역시 시간이 얼마나 걸릴지 모르기 때문에 비동기로 작업을 해준다. let a = 1 setTimeout(function() { console.log('timeout: ' + a) }, 100) a = 10 위 코드의 경우 콘솔..
Firestore Introduction Firestore은 백앤드, 프론트앤드에 모두 사용되는 유연한 NoSQL 클라우드 데이터베이스이다. Firebase와 Google Cloud을 기반으로 한다. Firebase Realtime Database와 같이 클라이언트 앱과 실시간 리스너를 동기화 해서 데이터를 제공한다 Firestore의 특징 유연성 Cloud Firestore은 유연하고 계층적인 데이터 구조를 제공한다. 데이터를 document에 저장하고, collection을 통해 조직화한다. 또한 nested한 형태 역시 저장 가능하다. 쿼리 표현 Cloud Firestore에서는 개별 혹은 모든 데이터를 쿼리를 통해 불러올 수 있다. 쿼리는 멀티플, 체인드 필터, 혼합 필터 그리고 정렬 기능을 사용할 수 있다. 실시..
React Build 빌드하기 터미널을 통해 리액트 프로젝트 폴더에서 아래 명령어 실행 npm run-script build 빌드를 완료하면 해당 폴더 아래 build라는 폴더가 새로 생성된다. 그 안에 index.html 파일과 static/js 안의 js 파일이 있다. package.json 파일의 script 부분에 다양한 스크립트가 등록되어 있다. react 프로젝트를 실행할 때 사용하는 커맨드인 npm start 역시 해당 부분에 등록되어 있다. 커스텀 스크립트를 npm 명령어를 통해 실행하고 싶을 때 사용하는 것이 run script라는 npm 명령어이다.
Image making denotative image는 사물 그 자체를 나타내는 이미지이다. 따라서 그 이상의 정보를 필요로 하지 않는다. 보통 image making에 기본이 되며, 다른 요소들을 추가해 의미를 부여해서 connotive image를 만들 수 있다. denotative Imagemaking을 할때 그 물체의 본질은 무엇인가를 고민해보자. 그 종류로는 형태, 색, 질감, 요소들 간의 비율이 될 수 있다. denotative Image는 정적인 의미를 갖고 있기 때문에 이미지의 형태 역시 그럴 것이라 착각할 수 있지만 그렇지 않다. 까만 선으로만 표현한 사과는 denotative Image이다. 그리고 물감을 이용해 색, 질감, 입체감을 부여한 사과 역시 denotative Image이다. 또한, 온전한 사과가 ..
MacOS Docker-Ubuntu VSCode https://code.visualstudio.com/docs/remote/containers-tutorial Get started with development Containers in Visual Studio Code Get started with development Containers in Visual Studio Code code.visualstudio.com https://code.visualstudio.com/docs/remote/containers Developing inside a Container using Visual Studio Code Remote Development Developing inside a Container using Visual Studio Code Remote D..
MacOS Docker Linux GUI https://stackoverflow.com/questions/40658095/how-to-open-ubuntu-gui-inside-a-docker-image How to open Ubuntu GUI inside a Docker image I have downloaded the Ubuntu image inside Docker on Windows. I can run Ubuntu by: docker run -it ubuntu I only see root, but I don't see the Ubuntu GUI. How do I install or configure the GUI for... stackoverflow.com https://hanseokhyeon.tistory.com/entry/Mac-Dock..
MacOS Docker Linux https://subicura.com/2017/01/19/docker-guide-for-beginners-2.html Mac에서 Docker 사용하기(Docker for Mac) 도커를 Mac에서 사용하려면 Docker for mac을 설치하면 된다. 프로그램이 마치 네이티브처럼 설치된 것 같지만, 도커는 리눅스 컨테이너이므로 실제로는 가상머신에 설치되어 있다. Docker는 가상머신이라는 느낌이 들지 않게 잘 만들어져 있다. 특히 포트 연결을 위해 도커 컨테이너의 특정 포트를 가상머신에 연결하고 다시 mac의 포트에 연결해야 하는데 이런 추가적인 부분을 도커는 아주 자연스럽게 처리한다. docker for mac은 xhyve라는 macOS에서 제공하는 가상환경을 이용한다. 설치확인하기 설치가 완료되었다..
Jest with React React에서 Jest를 사용하기 위해서는 Babel을 이용해 몇 가지 설정을 해주어야 한다. npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react 바벨 설정을 위해 babel.config.js파일을 생성하고 아래와 같이 설정해주자. module.exports = { presets: [ '@babel/preset-env', '@babel/preset-react', ], }; 자바스크립트의 유명한 컨밴션에 따라 Jest는 __test__폴더에서 테스트 파일을 찾는다. 또는 .test.js과 같은 형식으로 작성해도 무방하다. TDD는 개발자들 사이에서 상당이 핫한 주제이다. TDD란 함수를 작성하기 전에..

티스토리툴바