반응형 분류 전체보기63 prettier, eslint 적용하는 법 preference > settings > Editor: Format On Save (User, Workspace 모두) 체크하고 저장!!!!!!해야해!!!! settings.json // 아래는 내가 추가한거 "eslint.workingDirectories": [ // 보통 이렇게 디렉토리 설정을 안해서 자동고침이 안된다 { "mode": "auto" } ], "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // don't format on save "editor.formatOnSave": true, "eslint.validate": [ "javascript" ], "files.autoSave": "afterDelay" default for.. 2021. 2. 24. Nuxt.js 시작하기 React 기반의 소스코드를 Nuxt 프렘워크로 바꾸는 refactoring 작업을 시작하려한다. 그전에 Vue.js 기본적인 문법을 공부하고 왔다. - 포스팅 프로젝트 시작 프로젝트 초기화 공식문서 $ npm init nuxt-app 초기 설치 시 많은 선택사항이 있는데 그 중에 걸리는 몇가지를 적어보았다. UI framework : None Rendering mode : Single Page App 말고도 Universal (SSR / SSG) 방법이 있는데 우선 프로젝트 시작 $ npm run dev /* "scripts": { "dev": "nuxt", // 2021. 2. 21. Vue.js 시작하기 Nuxt.js 시작하려는데 React와 다르게 *.vue 파일에 HTML, CSS, JS 한꺼번에 정의하고 사소한 문법이 달라서 그 기반이 되는 Vue.js 부터 천천히 살펴보자 - 참고 문서 템플릿 구문 데이터 바인딩의 기본은 Mustache 구문 이다 : {{ JS 단일 표현식 }} 하지만 React JSX 와 달리 HTML 속성에서는 사용하지 못한다. 대신 v-bind 디렉티브를 이용하면 된다. 링크 // (x) 링크 // (o) 링크 // (o) 2.6.0+ 추가 // 혹은 겹따옴포 안에 홑따옴표로 정의 네이버 // (o) 또한 하위 컴포넌트props 전달시 falsy 한 boolean 값을 전달하면 해당 element에 포함되지 않는다. DOM selector const data = { mess.. 2021. 2. 20. gractor - 2일차 2월 19일 calm down dockerize 해보겠다고 새벽 4시 30분에 잠들었다. 혹여 늦잠 자서 출근 지각할까봐 걱정했는데 다행히도 8시 30분 즈음 여유롭게 출근했다. 하지만 목이랑 허리가 너무 뻐근하다. 무튼 다른 팀원께서 일찍이 오셔서 어제 못한 원격서버 구축 작업을 시작했다. 어제와 달리 Network configure 설정하고 잘 진행된다고 신나했는데... LAN 포트가 2번에 꽂혀있어서 package manager mirroring 작업에서 애를 먹었다. 결국 한 10시 즈음에 엔지니어님이 도와주셔서 매우 잘 끝났고 EC2 가 아니라 자체 서버를 구동하는 재미를 맛보고 있다. ㅎㅎ 그런데 오후 3시즈음 새로운 책상이 배달되어 자리를 재배치하면서 2시간 정도 쉬는 시간을 가졌고, 다 되.. 2021. 2. 19. Error: listen EADDRINUSE: address already in use :::port 1차 방법 2차 방법 $ sudo netstat -pna | grep 5000 아니 rambox 앱 port 가 docker backend랑 곂쳐서 snap configure 설정으로 바꿔보려고하는데 안되네... 결국 system monitor에서 직접 꺼버림 ㅜㅜ 2021. 2. 19. docker 설치 및 기본 문법 작업환경 세팅 로드를 줄여줄 docker 작업을 시작해보자 설치하기 환경 OS : ubuntu 20.04 Install using the repository docs.docker.com/engine/install/ubuntu/ 문서에 따르면 3가지 방법이 있다고한다. 필자는 첫번째 방법으로 최신버전(20.10.3) docker engine을 다운 받았다. 그리고 아래 방법으로 설치가 잘 되었는지 확인했다. $ sudo systemctl start docker $ sudo systemctl status docker $ docker version 명령어별로 기술하여 깔끔한 참고자료 docker 이미지 관련 명령어 이미지는 Dockerfile 을 기준으로 빌드(생성)된다. 이미지 빌드 $ docker imag.. 2021. 2. 18. gractor - 1일차 2월 18일 첫 출근 어제 저녁, 출근을 앞두고 기대 반 걱정 반으로 잠을 이루지 못했다. 서울에 위치하는 기업에 통근해야해서 결과가 나오자마자 부랴부랴 지방에서 올라왔다. 그래서 신체적으로는 피곤했음에도 잠이 오지 않았다. 바로 이틀 전, 그러니깐 월요일 기업협 프로젝트 아이디어 발표를 듣고 일해보고 싶다는 생각이 들었다. 고민하지 않고 지원서를 빠르게 준비해 제출했고 혹여 떨어질까 걱정되었지만 다행히도 함께 일해보자는 연락을 주셨다. (오늘에서야 들었지만 지원자가 2명 밖에 없었고 모두 뽑았다고 말씀해주셨다. 괜히 떨었나 싶기도 하다 ㅋㅋ) gractor는 IoT 플랫폼을 토대로 스마트팜, 스마트홈 등의 시장에서 성장하고 있는 기업이다. 스타트업에서 시작해 2021년 기준 5년째 접어들었고, 현재는 .. 2021. 2. 18. [ETON 프로젝트] 회고록 4 금요일 새벽, 그러니깐 바로 어제 코드 개발과 배포를 끝마치고 개운한 마음으로 잠이 들었다. 하고 싶었던 기획안이어서인지 밤을 새어도 재밌었고 약 2주일의 시간이 후딱 지나갔다. 그렇다 2주 프로젝트가 발표만을 앞두고있다. 우리 조는 3명으로 트렐로 칸반보드를 클론하는 프로젝트를 기획했다. 작년 선배 기수분들 중에 리트리보라는 프로젝트에서 감명을 받기도 했고, 2주 안에 해볼만한 것은 게시판 CRUD 이었지만 심심한 건 또 싫었다. 그래서 드래그 앤 드롭 기능을 갖고 있는 메모장을 기획하게 되었다. 처음 기획한 것은 Task Page 도 존재하여 완전한 트렐로 클론이었지만, 개발 중에 AWS 배포 환경 구축에 힘을 쏟다보니 그 기획은 포기하게되었다. 유종의 미를 거두고 싶었기 때문에 끝을 앞두고 기능 추.. 2021. 2. 14. [ETON 프로젝트] 회고록3 SignUp refactoring state -> sotre 사용으로 코드 단순화 진심, 읽기 쉬운 코드를 적기위해 애썼다. tag 마다 이름을 적절히 붙여주거나 state, props 적절히 분리 (각 tag 마다 고유 번호는 속성props 로 관리 즉, ids 가지고 다님) 리팩토링하면서 깨달은게, progress 에만 MouseDown, MouseMove, MouseUp 이벤트를 달아주었다. 어쩐지 하위 컴포넌트인 Task card에서 이벤트가 잘 발생안하더라... ㅂㄷㅂㄷ 무튼, Task Card 에도 달아주니깐 이제서야 제대로 event bubbling/캡처링 적용되려나 관여되고 있는 tag 들 목록(ids) 을 출력해보니 progress 움직일 때 : {board_id: 1, progress_.. 2021. 2. 9. 이전 1 2 3 4 5 6 7 다음 반응형
