.log('FE')

웹개발중에 프론트엔드 개발자가 되기위해 독학을 진행하다보면 어느순간 탁 막힐때가 있습니다. 이제 뭘 해야하지? 뭔가 하긴 해야겠는지 뭘 해야할지 막막할때가있습니다. 클론코딩 강의도봤고 따라도 해봤고 이론공부도했는데 근데 실제 코드작성과 이론이 매칭도 잘 안되고 잘하고있는건가싶고 막연합니다. 그렇다고 누가 기획이나 디자인을 던져주고 한번 해봐라 하는것도 아니라서 막막하기도하고 추진력도 떨어질때가 있습니다. 그래서 한번쯤은 구현해보면 좋을것을에 대한 내용을 정리하려고 합니다. 그리고 그 구현에 대한 상세 요구사항에 대한 내용도 같이 정리해보려고 합니다. TODO List 워낙 유명한 프로젝트죠 하지만 만약 강의나 블로그를 보고 따라만 했던 구현이라면 지금부턴 달라야합니다. 어떤 튜토리얼도 따라하는것이 아니라..

자바스크립트 기본개념 시리즈의 시작으로 호이 스팅에 대해서 다뤄보려고 합니다. 이 글을 이해하려면 변수, 스코프, 함수에 대해 최소한의 이해와 기본 지식이 바탕이 되어야 합니다. 호이스팅이란? MDN 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 일단 호이스팅이란 사전적 의미는 끌어올리기, 끌어올림 또는 게양 이라는 용어로 해석될 수 있습니다. 자바스크립트에서의 호이스팅역시 선언된 변수나 함수가 끌어올려진다 라는 의미를 갖고있습니다. 예전엔 저도 그냥 끌어올려진다 그래서 변수나 함수는 어디서 선언하더라도 가장 먼저 실행된다 라고만 생각하고 있었습니다. 그러나 호이스팅은 제대로 파고들면 알아야할 연관 개념들이 있고 꽤 디테일한 로직을 갖고있습니다. 우선 변수의 관점에서..

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 객체와 연결하는 작업을 진행 실제 서버를 구..