320x100 Projects38 메인 페이지 레이아웃 짜기 이번엔 기본적인 레이아웃을 구성한다. 먼저 어떤 식으로 구성할지 대충 그리자면 대충 이런식으로 상단 네비게이션 바에 사이드바를 부르기 위한 햄버거 버튼과 소셜 로그인 버튼들, 그리고 하단 왼쪽 부분에는 게시글을, 오른쪽 부분에는 공지와 추천글들을 보여주는 형태로 만들길 바라고 있다. 글 목록을 부트스트랩의 테이블을 사용할 것이기 때문에 부트스트랩을 인스톨해준다. app.js에 해당 경로를 설정해주어야 한다. 또한 스크린샷은 없지만 제이쿼리도 인스톨해주었다. 일단 오늘 간단하게 구성해본 레이아웃은 위 스크린샷과 같다. 사이드바에 내용은 아직 넣지 않았지만 햄버거 버튼과 사이드바 애니메이션도 추가해 주었다. 해당 애니메이션은 맛집찾아 프로젝트에서 차용하였다!!! 햄버거 버튼같은 경우 moonformeli.t.. 2021. 2. 21. 프로젝트 생성과 모듈 설치, github 레포지토리 생성 Nodejs 와 Express, 그리고 MySQL를 통해 게시판을 제작하려고 한다. 단순 CRUD뿐만아니라, 댓글, 소셜 로그인, 접속자 실시간 채팅, 추천하기 기능과 추천 많은 글 모아보기 등등 다양한 기능을 구현하고 실제로 운영하고 있는 게시판처럼 만드는 것이 최종 목표이다. IDE는 VSCode를 사용한다. 프로젝트 폴더 생성 express nodeboard -g 필수 모듈 설치 cd nodeboard && npm install 먼저 터미널에서 명령어를 통해 express generator로 프로젝트 폴더를 빠르게 생성하고, npm install 명령어로 필수적인 모듈들을 빠르게 설치한다. generator를 사용해서 처음 프로젝트를 생성하면 이런 구조를 가지고 있다. npm start 명령어를 통.. 2021. 2. 20. 구글,네이버 로그인 API 에 주소 등록, SSL인증서 등록 일단 현상태에서 구글과 네이버로 로그인하려고 하면 다음과 같은 오류가 발생한다. 이는 구글과 네이버 API에 도메인 등록을 하지 않아서 그렇다. 테스트를 위해 localhost:8080 환경에서만 돌아가게 만들어 놨으니 실제 도메인에서는 이런 오류가 발생하는 것이다. 이를 해결하기 위해 도메인을 등록하자. 먼저 구글 API 관리 페이지에 접속해서 OAuth 동의 화면의 앱 수정을 선택한다. 승인된 도메인 란에 도메인을 저장. 이때 Http는 빼야 한다. 그 뒤, API 및 서비스의 사용자 인증 정보에서 자신의 Application을 선택해준다. 승인된 리디렉션 URI에 '도메인/login/oauth2/code/google' 을 추가하면 준비는 끝난다. 이후 구글 로그인을 시도하면 성공적으로 적용되는 모습.. 2021. 2. 10. AWS EC2에 무료 도메인 등록하기 배포를 성공적으로 마쳤으나, 현재 소셜 로그인 서비스에 주소를 등록해주지 않아서 로그인이 불가능하다. 이는 EC2주소를 등록해주면 사용할 수는 있겠으나, 그러면 도메인을 등록했을때 다시 바꿔줘야 하니 먼저 무료 도메인부터 등록해야겠다. 먼저 freenom.com에 접속해서 도메인 이름을 입력한다. 무료로 사용할 수 있는 도메인은 유명하거나 예쁜건 없지만 그나마 가장 나은 tk로 선택 12개월로 선택하고 Continue. 12개월까지만 무료이고, 12개월이 되기 전에 renew 를 해주면 계속 사용 가능하다고 한다. 이메일 인증도 진행해준다. 인증을 마치고 몇가지 정보를 입력하면(다 입력하지 않아도 된다) 주문 번호를 준다. 이후 My Domains 메뉴를 통해 내 도메인 관리 페이지로 이동 잘 등록된 것.. 2021. 2. 6. 이전 1 ··· 3 4 5 6 7 8 9 10 다음
