🌱1 Day, 1 Commit Wonseok's Record

1. 회원가입 회원가입을 구현하기 위해 가장 먼저 user의 id, password, email 등 정보를 담을 데이터베이스를 구축해야 한다. 간단하게 mysql server를 사용하여 데이터베이스를 사용하였다. 어드민 권한으로 데이터베이스에 로그인하고 study_db라는 데이터베이스를 생성하였다. 사용자의 정보를 담기 위해 member 테이블을 생성하고 column은 다음과 같이 구성되어 있다. 이제 데이터베이스가 준비되었으니 회원가입을 구현해보도록 하겠다. npm install --save mysql npm install --save crypto 첫 번째로, 위 명령어를 통해 mysql 모듈과 crypto 모듈을 설치해준다. mysql은 데이터베이스를 사용하기 위함이고, crypto는 패스워드의 암호..

async와 await 비동기 구조 공공 데이터 api를 요청하고 이 데이터셋을 전역변수인 data에 넣어 ejs에 인자로 넘겨주려고 했는데 request.get의 콜백함수에서 아무리 변수값을 바꾸어봐도 console.log를 찍어보면 undefined만 출력되었다. 그래서 원인을 찾아보니 JS의 비동기 구조 때문에 이러한 현상이 일어나는 것이었다. 비동기구조란 특정 코드가 종료되지 않았어도 대기하지 않고 다음 코드를 실행하는 자바스크립트의 특성이다. 간단한 예시를 들어보자면, console.log("시작"); setTimeout(function(){ console.log("3초후 실행"); }, 3000); console.log("끝"); // 시작 // 끝 // 3초후 실행 위와 같은 코드를 실행했을..

이번 포스팅부터는 반말로 진행합니다.... 양해부탁드려요 카카오 맵 API 지도 삽입 웹 사이트의 기능 중 지도에 내 주변 동물병원과 동물약국을 찾아주는 서비스가 있기 때문에 지도를 사용할 수 밖에 없었다. 네이버 지도 API는 예전에 한 번 써보았고 Google maps API는 뭔가 우리나라 지도가 부실할 것 같아서 (실제론 어떤지 모른다.) 처음 써보기도 하고 한창 떠오르고 있다는 카카오 맵 API를 사용해보았다. 우선 카카오 맵 API를 사용하기 위해선 카카오 개발자(https://developers.kakao.com/) 에 회원가입하고 어플리케이션 등록을 해야한다. 이 부분은 사이트의 메뉴얼대로 하면 금방 할 수 있으니 넘어가겠다. 회원가입 후에 어플리케이션 등록까지 마치면 인증 키를 발급받아야..

Node.js module 사용하는 모듈은 다음과 같습니다. 이는 프로젝트를 진행하며 계속해서 추가될 예정입니다. "dependencies": "body-parser": "^1.19.1", "cors": "^2.8.5", "ejs": "^3.1.6", "express": "^4.17.2", "nodemon": "^2.0.15", "passport": "^0.5.2" Directory 디렉토리 구조는 다음과 같습니다. DOM tree는 프로젝트 완성시에 추가할 예정입니다. 설명 node_modules : module이 들어있는 폴더입니다. public : img, css, js등 assets과 메인 페이지가 들어있는 폴더입니다. router : request별 라우팅 처리를 하기 위해 구현해놓은 라우터들의..

주제 선정 웹 사이트의 이름은 PetCares입니다. 이름에서 알 수 있듯이 반려동물을 위한 웹 서비스입니다. 초기 구상한 주요 기능은 다음과 같습니다. 내 근처의 동물병원과 동물약국을 지도에서 찾아주는 서비스 반려동물 정보 공유 커뮤니티 반려동물 정보 제공 이는 추후 추가되거나 수정될 수 있습니다. 프로젝트 목표 프로젝트의 핵심 목표는 다음과 같습니다. 안정적인 로그인 세션 환경 구현 암호화를 통한 회원정보(로그인 정보)의 보안성 유지 깔끔한 UI 배치 및 구성 프로젝트를 진행하며 얻고싶은 점은 다음과 같습니다. Login, Logout에서 세션의 이해 SHA 암호화의 이해 및 사용 경험 Passport와 LocalStrategy의 이해 REST API의 이해와 응용 AJAX의 구현 및 사용의 이해 H..