웹개발 플러스 1주차 나홀로일기장 만들기

웹 개발 종합반을 거쳐 이제는 조금 더 업그레이드 버전!!!!

개발의 개 자도 모르지만 어렵지만 즐거움을 느끼면서 배우는것같아 뿌듯하다! 

웹개발 플러스 1주차의 메인 프로젝트 나홀로일기장 만들기!

 

우선, 1주차를 공부한 결과물,

 

사진을 선택하고 제목,내용을 입력하고 저장을 하면 서버를 통해 DB에 저장을 하고

DB에 저장된 정보들을 리스트로 보여주는 일기장 형태!!! 

 

웹개발플러스 첫 프로젝트 작품(나홀로 일기장)

 

 

우선은, 스파르타코딩클럽이 좋았던 이유는 내가 회사를 다니면서 

서비스가 전반적으로 어떻게 돌아가는지 상세히 알수없는 상태에서 일을 하다보면은 타 부서와 업무 협업을 하는경우

굉장히 어려움이 있었다ㅠㅠㅠㅠ

 

이렇게 작은 프로젝트를 만들어보면서 전반적으로 어떤흐름으로 서비스가 이루어지는 

배울 수 있는계기가되어 앞으로 내가 개발공부를 하는데 있어 정말 큰 도움이 된것같다!!

 

※ 용어정리

API	서버가 요청을 받기위해 뚫어놓은 창구!! 요청에는 POST(주로 데이터를 수정할때), GET(주로 데이터를 가져올떄) 요청 등등
HTML,CSS,JS	HTML : 뼈대, CSS : 꾸미기, JavaScript : 움직이게하는것
Jquery	Javascript의 라이브러리(임포트해줘야 사용이 가능)  ex) $('#ID명').val()  - input박스의 갚을 가져올 수 있다.
Ajax	서버 통신을 위해 사용하는 요청 방식
Flask	서버를 만드는 프레임워크  (누군가 만들어놓은 틀안에서 코딩하는)

※ 나홀로일기장 프로젝트 진행과정

1. 나홀로일기장 생김새 만들기(부트스트랩 참고)
2. 나홀로일기장 연결하기(포스팅,리스트 API)
3. 나홀로일기장 API 만들기
4. 나홀로일기장 만들기 준비(서버쪽 받기 코드, 클라이언트 보내는 코드 등)
5. 나홀로일기장 서버 만들기
6. AWS-EC2 세팅하기(AWS서버사기,접속포트 추가, 파일질라 세팅, initial_ec2로 한번에 세팅, 몽고DB설치 및 세팅 등)
7. AWS 배포하기(flask실행)
8. 포트포워딩 (포트번호 없애기)
9. nohup 설정하기
10. 도메인 구입(가비아)
11. og태그 설정(카카오톡 보낼경우 미리보고  추가)

첫번째,

나홀로일기장 형태를 만드는건, 독학으로 HTML+CSS를 공부하고 부트스트랩을 통해서 어렵지 않게 만든 것 같다

 

부트스트랩 컴포넌트 : https://getbootstrap.com/docs/4.0/components/alerts/

Alerts

* 부트스트랩을 사용하기위해서는 시작 템플릿을 참고해야한다.(특정 스크립트,링크 등을 임포트해줘야한다.)

 

 

두번쨰,

 

나홀로일기장에서 만들어야하는 기능들을 생각하고 그것들을 연결 시키는 작업부터 조금은 헷갈렸던것같다ㅠㅠ

하지만 동영상 강의시간이 짧고 반복학습을 할 수 있는 구조로 되어 있어 좋았던것같다.(역시 반복학습만이 살길....)

 

※ 주의할점은, 

   파이참에서 필요한 패키지를 설치를 해야한다. (requests, bs4, flask, pymongo)

   (설치경로 mac: pycharm → preferences → Python Interpreter → + 버튼)

 

- 만들어야 할 기능 

* 포스팅 API

→ (1) 클라이언트에서 줄 데이터: 제목, 코멘트

→ (2) 서버에서 할 일: 제목, 코멘트를 DB에 저장

→ (3) 서버에서 줄 것: 잘 저장됐다는 메시지

 

* 리스팅 API

→ (1) 클라이언트에서 줄 데이터: 없음

→ (2) 서버에서 할 일: 제목, 코멘트를 DB에서 모두 추출

→ (3) 서버에서 줄 것: 제목, 코멘트 꾸러미(리스트 형태)

 

!!!참고내용 

리마인드 - API는 은행 창구와 같은 것!

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼,

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.

• GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
• POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정

Flask 서버, POST 요청 Ajax코드 , API코드 등등등 

그전까지는 웹사이트의 형태만을 만들어보는 수준이였다면 이제는 서버를 통해 정보들을 DB에 저장도하고 얼럿도 띄우고

저장된 DB정보 들을 추출해서 특정 형태에 맞춰 보여주는 기능들을 만들었지만 아직 100% 이해한건 아니지만 

그래도 따라해보면서 이런거구나 이해하면서 마지막 까지 만들어볼 수 있어서 좋았다

 

 

기본적인 시작코드는 제공을 해주지만, 그 이후 나홀로일기장에서 만들어진 기능들은 

반복학습을 통해 공부해보고 익숙해져야 할 것 같다( 아래 강의자료 참고!!) 

 

 

온라인 강의에 관심이 있으신분들은 아래 링크로 수강하는경우 할인 가능합니다! 

https://spartacodingclub.kr/?f_name=%EA%B0%95%ED%99%8D%EC%88%9C&f_uid=6044be3eea76fe086b066ce7