.log('FE')

2018년을 마무리하며..... 최근 여러 커뮤니티에서 개발자분들의 회고록이 올라와서 올해부터는 트랜드를 따라 작성해 보려고 한다. 그렇다면 회고록은 왜 쓰는것일까? 아마 한해를 되돌아보며 무엇을했고 무엇이 부족했고 하는 부분들에 대한 자아성찰 같은 종류가 아닐까 생각해본다. 그리고 다가오는 새해의 다짐과 새로운 목표, 마음가짐을 새롭게 하기 위함이 아닐까 한다. 2018년 무슨일이 있었나.. 진로에 대해서도 또 앞으로의 미래에 대해서도 윤곽이 잡히고 확신이 생기고 또 변화가 있었던 한해였던것같다. 2년정도 웹 에이전시에서 유지보수와 운영업무를 진행하다가 퇴사를 하였는데 퇴사의 이유는 이러하다. 2년동안 다니던 회사의 퇴사 - 단순반복업무 유지보수/운영이 총 4명인데 1인당 맡은 홈페이지수가 60개정도가..

2018/12/31 - [JavaScript] - [saimpleExample] JS Tab Menu 이전의 탭메뉴는 정상적으로 동작은 하는데 추가적으로 다른 탭메뉴를 만들려고하면 중복되는 코드가 발생하고 코드라인도 길어지게된다. 기존의 탭메뉴를 그대로 복사해 내부의 class 명을 모두 변경해줘야하기때문에 유지보수도 어렵고 가독성도 떨어지는 스크립트가 되어버린다. 그래서 기존의 탭메뉴를 활용하여 재활용성이 높은 클래스형태로 만들려고한다, 그중에서도 메서드를 공유하게되는 Prototype 방식을 활용한다. JavaScript 에서는 별도의 클래스 타입이 없기때문에(아직은..) 함수형태로 클래스를 만든다. 이때 함수명은 첫글자부터 대문자를 사용하여 클래스로 사용되는 함수임을 명시해준다. 클래스로지정한 함수..

1. JS 만을 활용한 TAB 메뉴 구성 2. 탭 메뉴 클릭시 컨텐츠 내용 변경 3. 탭 메뉴 클릭시 메뉴의 디자인 변경 HTML Home Resume Self introduvtion Portfolio Connect 안녕하세요 CodeReading 소개에 오신것을 환영합니다. 이력서 자기소개 포트폴리오 연락처 CSS * { margin:0; padding:0; } .tab { width:100%; height:40px; background: #eeeeee; display: flex; justify-content: center; align-items:center; list-style:none; } .tab li { margin:0 1rem; cursor:pointer; padding:1rem 2rem; }..

1. 전화번호중 마지막 4자리는 숨김처리 2. 11자리 넘어가면 더이상 입력 안되도록 3. 출력도 입력된 전화번호만 나오도록 * 실제로 써먹을 용도가 아닙니다 순수하게 연습용입니다. * 실제 처리할때는 정규표현식을 사용합니다. * 숫자는 input 속성의 maxlength 가 안먹힙니다. html css html, body { background: #333333; height:100%; } .wrap { display:flex; justify-content:center; height:100%; align-items:center; flex-direction: column; } .wrap form .number { border:1px solid #cccccc; border-radius:5px; font-si..

오늘한 일 * 2018/12/29 - [NodeJS] - heroku + mLab 프로젝트 업로드 2018/12/28 - [NodeJS] - Node.js + Express + MongoDB CRUD 만들기 2018/12/28 - [NodeJS] - nodeJS + Express + mongoose REST API 제작 heroku 의 무료 서비스만 사용했을경우 생길 이슈 https://wayhome25.github.io/etc/2017/03/30/heroku-why-slow/ 직면했던 문제와 비슷한 케이스들 https://github.com/mrvautin/adminMongo/issues/147 https://stackoverflow.com/questions/38874760/why-my-heroku-n..

2018/12/28 - [NodeJS] - Node.js + Express + MongoDB CRUD 만들기 이전에 만들었던 프로젝트를 헤로쿠클라우드 서비스에 업로드하는 방법입니다. 한 두시간 세시간을 끙끙 싸맨것같은데 어찌어찌 업로드에 성공하였습니다. 헤로쿠 클라우드에 업로드해서 mLab 에서 제공하는 mongoDB 서비스까지 연결해서 CRUD 가 정상적으로 작동하고 있습니다. 1. 헤로쿠 사이트 회원가입 하고 앱 만들기 2. 헤로쿠 앱 생성하기 3. 헤로쿠 CLI 설치하기 4. # npm install -g heroku 5. # heroku login 6. # heroku create 7. # heroku apps:rename 변경할이름 --app 기본생성이름 8. 확장자없는 /Procfile 생성 ..

1단계 Create Project 2단계 Create Mongoose Schema Model 3단계 Create CRUD Contoller 4단계 Create router 5단계 Create View 1단계 프로젝트 생성 Install Node.js Install MongoDB # npm install express-generator -g // express 설치 # express -h // 명령의 옵션 확인 # express crud-example --view=ejs // crud-example폴더 생성 ejs템플릿 사용 # cd crud-example && npm install // 폴더이동 node 모듈 설치 # npm install mongoose --save // 해당 프로젝트에 의존하는 mon..

기본 준비 사항 Install Node.js Install MongoDB # npm install express-generator -g // express 설치 # express -h // 명령의 옵션 확인 # express rest-api -e // rest-api 폴더 생성 ejs템플릿 사용 # cd rest-api && npm install // 폴더이동 node 모듈 설치 # npm install mongoose --save // 해당 프로젝트에 의존하는 mongoose 모듈 설치 # mongo // MongoDB 서버 실행 # npm start localhost:3000 접속 폴더구조 bin : 익스프레스 설정파일인 app.js 파일을 가져와 http 객체와 연결하는 작업을 진행 실제 서버를 구..

/user01.js // export 객체 속성으로 함수 추가 exports.getUser = function() { return {id: 'module01', name: 'codereading'}; } exports.group = {id: 'group01', name: 'Family'}; exports.sum = function (a, b) { return a + b; } 위의 파일은 모듈이 될 파일이고 3종류의 다른 함수와 객체값을 갖습니다. /module01.js // 모듈화한 파일을 불러와서 const 에 저장 const user01 = require('./user01'); // 모듈화한 파일에서의 정보 가져오기 const userName = user01.getUser().name; const u..

- Github 바로가기 Mometum DEMO HTML + CSS + VanilaJS 로만 구현 Open Weaher API 사용 기간 : 약 1일 참조 video : 초보자를위한 Vanila JavaScript 참조 Model : Chrome웹스토어 확장프로그램 Momentum Chrome Browser 에서만 정상 작동 구현목록 Clock User Name Input ToDo Input Weather CurrentLocation CRUD Create (Create User Name, To Do) Read Update Delete (Create User Name, To Do) 기능 시계 User Name 등록 User Name 삭제 리로드시 배경 이미지 랜덤 변경 할일 목록 등록 완료체크시 완료 목록..