해당 부서의 상세 정보 모달 출력 상세정보 모달에서 항목 수정 후 ok 버튼 클릭 -> 업데이트 API 호출 모달은 닫히고 업데이트 후 결과에 따라 안내 메세지 출력 및 리스트 재검색 부서 정보 초기화 const stateInit = { Department: { id: null, name: null, code: null, description: null, createdAt: null, updatedAt: null } } //부서정보 초기화 actDepartmentInit(context, payload) { context.commit('setDepartment', { ...stateInit.Department }) //stateInit.Department = null } 전개연산자 actDepartment..
어제 해본 socketio로 간단한 채팅창 구현 간단히 복습했다. * port를 따로 뺀 이유 : 환경 변수 * const ~ require ~ = inport ~ from ~ I18n 다국어 처리 가능 처음 개발할 때 도입하지 않으면 나중에 절대 못바꾼다. json으로도 가능 vueproject eslint prettier, bootstrap vue, css 설정 페이지 분할 : header, Sidebar, Content 세 부분으로 * Lorem : 의미없는 문구 생성 * router/index.js 파일 설정 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueR..
업무용 자아를 분리하여 창작물(코드)에 대한 평을 스스로에게까지 끌어오지 말자. 다만 코드가 계속 만족스럽지 못한 평을 받는다면 능력을 객관적으로 평가해볼 필요가 있다. 기능부터 공부하고 스타일은 그 다음이다. 쓸데없는 코드는 빼고 최소한의 코드로 간결하게 작성하는 게 좋은 코드! 줄맞추기/들여쓰기는 디버깅을 위해 정말 중요! name/value 값으로 한글 no -> DB에 들어갈 때 코드로 들어가기 때문 코드를 계속 쳐서 손이 익숙해지게 해야함!! 속성 공부할 때 중요한 점 : 이게 필수인지 아닌지 var/const/let -> var는 쓰지말고, 일단 무조건 const, but 밑에서 값이 변경되면 let component 요소 부분부분 나누기 (매우 중요!) - header component - ..
오늘은 vue.js를 시작했다. 기억하고 싶은 내용은 *로 구분했다. vue.js 설치 vue.js의 버전은 안정화된 2.x로 했다. 3.x까지 나오긴 했는데 호환성에서 아직 부족하다. 새로 프로그램이 나온다고 무조건 좋은 게 아니고 다른 사람들이 검증한 뒤 탑승해도 늦지 않다! node랑 npm은 버전을 따로 확인하는 게 좋다. npm은 node를 설치하면 같이 설치된다. 이건 이미 예전에 깔아놨다.(nvm 이용 : 버전이 자주 업뎃되는 node.js의 버전을 변경하면서 개발 가능하기 때문) 더보기 nvm 설치부터 한다. Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically writte..
유념사항 혼자 vi 편집기 공부 Docker 공부 WSL 사용 X(의미 없음) 개발 공부 정리 시 markdown 유용(stackedit으로 html 파일로 작성 가능) 오늘은 html을 배웠다. html은 오류를 띄우지 않고 그냥 안하거나 제멋대로 작동하니 주의해야한다. 구성요소 - 태그(tag) 모든 태그는 "시작태그", "종료태그"로 구성된다.(예외:hr, br 등) - 요소(element) 실제 화면에 출력되는 텍스트 부분, 태그 사이에 있다. - 속성(attribute) 태그의 속성을 부여한다. (형태, 색 등) 여러 속성이 존재할 수 있다. 띄어쓰기로 구분한다. - 값(value) 속성에 할당되는 값을 나타낸다. 문자는 따옴표""로 감싸서 표시, 숫자는 그냥 표시한다. 숫자도 써도 되는데 차이..
오늘 배운 것 - 쿠키 더보기 const http = require('http') const server = http.createServer((req, res) => { console.log(req.url, req.headers.cookie) res.writeHead(200, { 'Set-Cookie': 'mycookie=test' }) res.end('cookie example') }) server.listen(3000) server.on('listening', () => { console.log('3000번 포트에서 쿠키 서버 실행 중') }) server.on('error', err => { console.error(err) } ) - 세션 - 패키지매니저 -npm - express, morgan,..
실습은 TIL로 기록해야겠다ㅎㅎ 어떤 식으로 써야할지 고민이 많았는데 그냥 '쓰고 싶은 대로 써야 오래 쓴다'는 진리 같은 한문장을 보고 쓰고 싶은 대로 쓰기로 했다. 오늘은 http 모듈로 서버를 만들었다. check 할 사항 - VSC에서 js코드 수정 후 꼭 ctrl+c로 껐다 켜야함 - return res.end(data) 꼭! 잊지 말아야한다. res.end 호출 앞에 return을 붙이지 않으면 함수가 종료되지 않는다. 더보기 const http = require('http') const fs = require('fs').promises const users = {} //데이터 저장용 const server = http.createServer(async (req, res) => { try { ..
본 강의에서는 Adobe XD(7일 무료 체험판)를 사용한다. 다른 UI/UX 디자인에 사용되는 Sktch, Figma 툴도 비슷비슷하여 하나의 툴 사용법만 익히면 다른 툴 사용은 그리 어렵지 않다고 한다. 그리고 개인적으로 포토샵, 일러스트레이터 등 디자인 툴을 다뤄본 경험이 있으면 더 쉽게 느껴질 것 같다.(오히려 더 직관적인 것 같기도...) Adobe XD 설치는 무척 간단하다. 우선 Adobe XD 페이지에 들어간다. https://www.adobe.com/kr/products/xd.html 메인에 있는 무료 체험판을 클릭하면 쉽게 다운 가능하다. Adobe 계정이 필요하다. 신규/기존 사용자 모두 이메일을 입력하면 된다. (신규 사용자는 이메일 입력 후 암호를 설정하게 된다.) 이메일을 입력한..
