[WEB]15 Node.js -Nodemon Node를 이용하여 개발하는 중에 저희는 코드를 수정하게 됩니다. 결과를 확인하기 위해서 Node를 종료시키고 다시 실행함으로써 수정된 코드가 반영된 결과를 확인할 수 있습니다. 하지만 개발을 하는 단계에선, 코드의 수정이 정말 빈번히 일어납니다. 이 때마다 Node를 종료시키고 다시 실행하는 반복적 행위가 발생합니다. 이를 간편하게 해결해주는 패키지가 존재합니다. "nodemon" nodemon이라는 패키지 입니다. nodemon은 개발 중인 해당 프로젝트의 파일들을 지속적으로 지켜보다가 변화를 감지하면 Node앱을 종료시키고 다시 시작해줍니다. 사용법은 간단합니다. 먼저 nodemon 패키지를 설치합니다. npm i -g nodemon 해당 패키지를 자주 사용하실 것 같으시다면 글로벌로 설치해주시면 .. 2020. 4. 24. Nodejs[Express] - 비밀키 관리 Node.js를 배우며 express와 MongoDB를 사용하는 것을 익히고 있습니다. 서버를 시작하며 MongoDB에 접속하기 위해서 계정과 비밀번호를 필요로 했습니다. 하지만 이를 연결 부분 코드에 직접 입력하여 실행을 하는 경우 비밀키의 유출 문제가 발생할 수 있어, 이를 해결해야 했습니다. 비밀키 및 환경변수 같은 것들을 보호하기 위한 패키지가 있습니다. "dotenv"라는 패키지입니다. dotenv 패키지를 받고, 프로젝트 내의 디렉터리에 .env 파일을 생성합니다. 그러고 나서 .env파일에 "키=값" 형식으로 비밀키들을 입력해줍니다. MONGODB_USER=몽고디비유저이름 MONGODB_PW=몽고디비비밀번호 SECRET_KEY=비밀키 SECRET_NAME=비밀이름 위와 같이 입력 후 이를 사.. 2020. 4. 13. React - To Do Item의 hover 의사클래스와 word-break, scrollbar 오늘은 ToDoItem의 CSS를 마무리 지은 것 같습니다. 처음에는 오늘 진행할 작업들을 JavaScript를 사용해서 class를 추가하고 빼는 방법밖에 몰라 CSS 작업에서 다루지 않았습니다. 하지만 작업을 진행하며 hover라는 CSS의 의사 클래스(psuedo-class)를 알게 됐고 간단히 처리할 수 있어 어제와 같이 기분 좋게 작업을 진행했습니다. 먼저 오늘의 작업 결과 화면 입니다. 보시는 것과 같이 이제 ToDoItem들은 마우스가 해당 Component위에 있을 시에만 배경색이 흰색이 되며, 삭제와 완료 버튼이 등장하게 됩니다. 또한 오늘 작업을 하면서 발견한 부분인데, Input의 길이가 길면 저는 할당된 길이를 유지하며 문장이 아래로 나 위어 보일 줄 알았지만 그렇지 않았습니다. 그.. 2020. 3. 17. React - ToDoItem Check 기능 추가 이번 글에선 ToDoList에서 필수적인 기능인 Check기능을 추가해 보았습니다. ToDo Item 각각마다 있는 ✔을 누르면 check의 상태가 false인 경우, Text의 색은 회색이 되며 가운데 줄이 쳐지게 됩니다.또한 저장소의 내용은 false에서 true로 변경됩니다. true인경우에는 본래 아이템을 추가할 때의 상태처럼 되돌아 갑니다. 바로 기능이 적용된 모습을 보여드리겠습니다. localStorage의 상태와 같이 비교하신다면 Work1,3,4는 checked라는 키값이 true인걸 볼 수 있습니다. 그에 따라 글씨의 색은 회색, 그리고 가운데에 취소선이 추가된 것을 볼 수 있습니다. # 오늘의 작업 ToDoItem.css .checked { color: grey; text-decorat.. 2020. 3. 16. 이전 1 2 3 4 다음
