원래는 도커를 제대로 공부해보고 그 다음에 사용해보려 했었다. 근데 노트북 데탑을 왔다갔다하면서 개발할때마다 자꾸 에러를 뿜는다.... 홧김에 세팅해보았다. 일단 미리 말하자면 나는 도커이미지로 개발환경 세팅만 해놓고 이미지 내부에 구현코드는 존재하지 않게 만들었다. 준비된 개발환경은 다음과 같다. node + vite + vue 이번에 할 것은 1. Dockerfile 작성 2. docker compose 파일 작성 3. 핫 리로딩 개선 이 정도를 해보려고 한다. 배포환경 세팅은 다음에 따로 글을 작성해야겠다. 1. Dockerfile 작성 프로젝트 경로 최상단에 Dockerfile을 작성해준다. # 만들려고 하는 image의 베이스가 되는 image FROM node:lts-alpine # base ..
@keyup.enter를 사용하면 새로고침이 된다. .prevent를 뒤에 붙여봐도 소용이 없다. 그럴 때는 keydown.enter.prevent를 사용해보자. 새로고침 없이 잘 된다.
조건이 많아지면 많아질수록 if문과 switch문은 보기 더러워진다. 조건이 값식문같은 명확한 조건이면, if문이나 switch문을 쓰지 않고도 구현이 가능하다. 코드가 클린해지게 리팩토링해보자. if문 코드를 보기만 해도 머리 아프다. 내부로직을 생략해서 그렇지 아찔하다. if (category === 'total') { // ... } else if (category === 'a') { // ... } else if (category === 'b') { // ... } else if (category === 'c') { // ... } else if (category === 'd') { // ... } else if (category === 'e') { // ... } else { // ... } S..
Vite를 사용할 때 '@/components/Helloworld.vue' 이런 식으로 경로를 설정하고 싶을때 사용하는 방법입니다. javascript는 vite.config.ts만 설정해줘서 손쉽게 가능합니다. 이 방법은 vite를 사용하는 react, vue, svelte 등 모든 프레임워크에서 사용가능합니다. Javascript vite.config.js import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, './src') } } }) Typ..
Vite는 Vue 3 를 기반으로 작동합니다. 그러므로 Vue 3를 사용하면 별다른 설정 없이 사용할 수 있습니다만... Vue 2는 설정을 좀 만져줘야 합니다. 저와 같이 Vue 2에서 Vite를 사용하고 싶은 분들을 위해 이 글을 바칩니다... Vite 프로젝트를 생성해보신분들은 프로젝트 생성 부분은 건너뛰시면 됩니다. Vite 프로젝트 생성 방법 방법은 아주 간단합니다. 일단 Vite 설치부터 진행하겠습니다. 프로젝트 폴더를 만들 경로에서 아래 명령어를 입력하면 됩니다. ex) abc 라는 폴더 내부에 프로젝트 폴더를 생성할 경우 abc 폴더에서 아래 명령어를 실행하면 됩니다. npm npm init vite@latest Yarn yarn create vite 이후에는 프롬프트 창에 출력된 메시지를..
나의 경우에는 서버는 express 테스트 라이브러리는 mocha, supertest를 사용했다. mocha로 테스트코드를 실행시키는데 명령어 끝에 -exit를 붙이니 잘 종료가 된다. mocha index.spec.js -exit package.json에 실행 명령어를 작성해놓았다면 한번 수정해보자
회사에서 사용할 키보드를 하나 구입하게 되었습니다. 키보드를 사기 전에는 외부모니터 아래에 맥북을 두고 직접 맥북 키보드를 사용하고 있었는데요. 아래와 같은 느낌입니다. (아이패드를 맥북이라고 생각해주시면 됩니다.) 아이패드 위치에 맥북을 놓고 맥북을 직접 타건했었는데... 사용감은 정말 괜찮았습니다. (13인치 맥북이라 모니터를 가리지 않았습니다) 하지만 노트북 키보드는 키캡이 얇아서, 타건하다보면 손가락에 피로감이 오더라고요. 회사에서 제공된 키보드가 있기는 하지만, 기계식 키보드를 사용하고 싶어서 지르고 말았습니다 ㅋㅋㅋㅠ 개봉했을 당시의 사진입니다. CapsLock, ScrollLock 버튼을 하나 더 제공하는데요. 버튼 옆으로 LED 불빛을 비춰주는 여분의 키캡이 있습니다. 취향에 따라 교체하라..
1. 학습의 주도권을 가져오자. 공부할 때 목적을 정하고 하자. (= 키워드를 정하고 하자) 공부할 때 책 한권을 끝낼 필요는 없다. 호이스팅을 공부한다고 예를 든다면, 책 10권을 가져와서 호이스팅 부분만 골라서 공부하는것이 오히려 확실하게 이해하고 넘어가는 방법일 수도 있다. 호이스팅을 공부했다면 스스로 의문을 가지며 직접 사용해보며 이해가 될 때 까지 끝까지 파본다. 책을 보고 정리하는것에서 그치지 않고, 내가 책을 쓰는 것처럼 정리해보자. 2. input과 output을 같이 하자. 책만 읽고 문제를 안풀면 무슨 소용일까? 공부를 했으면 서비스 코드에 적용시켜보자. 3. 자기객관화를 하자. 스터디, 동아리, 해커톤 들어가는것도 좋은 방법! 프론트엔드 개발자의 본질은 개발자다. javascript,..
[원글] 1. Node의 핵심 개념 | 기원's Study(ing) 1. Node의 핵심 개념 노드는 브라우저가 아닌 다른 환경에서 Javascript를 사용할 수 있게 해주는 런타임이다. 크롬의 V8엔진에 libuv(비동기 I/O 라이브러리)를 추가해 만들어졌다. Node의 특징은 다음과 giwonn.github.io 1. Node의 핵심 개념 노드는 브라우저가 아닌 다른 환경에서 Javascript를 사용할 수 있게 해주는 런타임이다. 크롬의 V8엔진에 libuv(비동기 I/O 라이브러리)를 추가해 만들어졌다. Node의 특징은 다음과 같다. 싱글 스레드이며 이벤트 루프 기반 논 블로킹(Non-blocking) 방식으로 동작 Javascript를 사용함 V8 엔진이란 V8 엔진은 크롬에서 자바스크립트..
일단 감상평을 말하자면 지금까지 본 마블 영화중에 최고였습니다. 개인적으로는 엔드게임보다 재밌게 관람했습니다. 저는 2019년에 파프롬 홈의 쿠키영상을 보고 이번 작품을 정말 기다렸는데요. 기대감 100% 채우고 갔는데... 기대 이상이었습니다. 와 진짜 마블이 각 잡고 만들면 이렇게도 할 수 있구나 라는걸 느꼈어요. 정확히는 감독이 정말… 스파이더맨을 너무 잘 알고있다고 생각이 들었어요. 영화 시작부터 끝날 때까지 버릴 것이 하나도 없습니다. 영화 상영시간이 148분=2시간28분 이었는데 진짜 지루하다고 생각한 적이 없었습니다. 잠깐 본 것 같은데 영화가 끝나있었습니다. 톰홀랜드의 스파이더맨 1 2와는 그냥 아예 다른 영화라고 봐도 될 정도입니다! 예고편을 보신 분들은 아시겠지만 스파이더맨의 이전 시리..
이 글은 Flutter를 기준으로 작성되었습니다. 2022-03-23 기준으로 플러터 공식 문서에 맞춰 글을 리뉴얼하였습니다. 1. Mapping new ns to old ns 2. This app is using a deprecated version of the Android embedding. 이렇게 생긴 두가지 warning을 본 사람들이 많을 것이다. 위에 접어놓은 글은 gradle 버전을 올림으로써 일시적으로 warning을 막아주지만 근본적인 해결책이 되지는 못한다. 그래서 flutter 공식문서를 참고하여 글을 리뉴얼한다. 문서를 살펴보니 가장 좋은 방법은 deprecated된 라이브러리들을 걷어내면 된다. 지금부터 살펴보자. 1. android/app/src/main/java/패키지명/Ma..
깃허브 블로그의 글을 옮겨왔으며, 티스토리가 아닌 블로그에서 보시면 가독성이 더 좋습니다. 행렬 테두리 회전하기 | 기원's Study(ing) 행렬 테두리 회전하기 문제 문제를 풀다가 이 글을 찾아오신 분들이 대다수라 생각되어 접어놓았습니다. 문제를 보실 분들은 클릭해주세요! 문제 설명 rows x columns 크기인 행렬이 있습니다. 행렬 giwonn.github.io 문제 문제를 풀다가 이 글을 찾아오신 분들이 대다수라 생각되어 접어놓았습니다. 더보기 문제 설명 rows x columns 크기인 행렬이 있습니다. 행렬에는 1부터 rows x columns까지의 숫자가 한 줄씩 순서대로 적혀있습니다. 이 행렬에서 직사각형 모양의 범위를 여러 번 선택해, 테두리 부분에 있는 숫자들을 시계방향으로 회전..
