항해를 시작하고 벌써 일주일이 지났다. 첫 과제는 팀별로 웹페이지를 하나씩 만드는 '웹 미니 프로젝트'였다. 주제를 선정하기에 앞서 사전 프로젝트 때 주제를 정하는 게 쉬운 일이 아니라는 것을 알게 돼서 시작 전날 미리 조금 생각해보았다. 선배 기수분 들의 작품을 구경하다 뮤지컬 관련된 작품을 보았는데, 그 계기로 주제를 정할 수 있었다.
내가 낸 아이디어로 프로젝트를 진행하기로 했다! 조금 더 아이디어를 찾아보지 못한 게 아쉽긴 했지만, 좋아하는 주제라 열심히 작업할 수 있었다 :) 내가 맡은 페이지는 메인에 보이는 페이지였다. 사전 프로젝트 때 로그인 페이지를 작업해봐서 이번에는 다른 페이지를 제작해보았다.
각 페이지에 들어간 기능에 대해 말하자면,
1. 회원가입 페이지
- 닉네임, 아이디(이메일), 비밀번호 DB 저장 (비밀번호는 hash함수를 이용해 암호화)
- 닉네임, 아이디(이메일), 비밀번호 규칙에 맞지 않을 경우 경고 (정규식 이용)
- 닉네임, 아이디(이메일) 각각 중복확인 (DB에 저장된 data와 비교)
- 각 요소들이 공란일 때 회원가입 버튼 클릭 시 경고
- 회원가입 버튼 클릭 시 로그인 페이지로 이동
2. 로그인 페이지
- JWT 인증방식으로 user에게 token 발급
- user DB에 저장된 것과 일치하지 않으면 로그인 실패
- 각 요소들이 공란일 때 로그인 버튼 클릭 시 경고 alert
- 로그인 버튼 클릭 시 메인 페이지로 이동
3. 메인 페이지
- 크롤링 (뮤지컬에 대한 정보 보여주기 - 포스터, 제목)
- 더보기 버튼
- 검색 기능 구현 (메인 페이지에 검색한 키워드를 포함한 뮤지컬들만 보여주기 - $regex 사용)
- 로그아웃 기능
- 각 뮤지컬들을 클릭했을 때 해당 뮤지컬의 상세페이지로 이동
4. 상세 페이지
- 크롤링 (뮤지컬에 대한 정보 보여주기 - 포스터, 제목, 공연장, 공연기간)
- 댓글 달기
- 댓글 보여주기
- 댓글 삭제 기능 (자신의 댓글만 삭제 가능)
- 로그아웃 기능
이런 기능들을 넣어 만들었다.
😊😊😊
항해 6기 B반 6조 - 웹 미니 프로젝트 (뮤덕인생)
[공부한 내용]
인증방식
우선 인증방식이 필요한 이유는 HTTP의 비연결성 및 무상태성의 특성 때문이다. 서버는 클라이언트를 식별할 수 없다. 또, 로그인을 하더라도 그다음 요청에서는 해당 클라이언트를 기억할 수 없어 다시 로그인을 해야 하는 상황이 발생한다.
이때 필요한 기능이 인증방식이다. 서버가 클라이언트를 기억할 수 있도록 도와주는 기능!!
인증방식에는 대표적으로 Session 방식과 JWT 방식이 있다.
Session 방식 (Session & Cookie)
클라이언트가 로그인을 하면 서버는 클라이언트를 식별할 고유한 Session Id를 만들고 Session DB에 저장한다. 그리고 Session Id 값을 담은 Cookie를 줌으로써 클라이언트를 기억하는 방법이다. 앞서 말한 것처럼 쿠키에 클라이언트의 정보가 담겨있기 때문에 브라우저는 해당 사이트에 대한 모든 요청에 Session Id를 쿠키에 담아 전송하게 되고, 서버는 클라이언트가 보낸 Session Id와 DB에 저장된 Session Id를 비교해 인증을 수행한다.
Session 방식의 장단점
장점 👍
- 상대적으로 안전하다. 서버 측에서 관리하기 때문에 클라이언트 변조에 영향을 받거나 데이터의 손상 우려가 없다.
단점 👎
- Session 저장소가 필수적으로 존재하기 때문에 이를 사용하기 위한 비용이 발생한다.
- 사용자가 많아질수록 메모리를 많이 차지하게 되는 한계가 있다.
- 요청을 진행할 때마다 Session DB에 Session Id를 조회하는 작업이 필수적이다.
JWT 인증방식
JWT 인증방식이란 쉽게 말하면 인증에 필요한 정보들을 Token에 담아 암호화해서 사용하는 방법이다. JWT는 각각의 구성요소가 점( . )으로 구분되어 있으며 Header, Payload, signature으로 구성되어 있다.
Header 에는 token의 타입이나 서명 생성에 사용된 algorithm의 종류에 대한 값이 저장되어 있다.
Payload 에는 토큰에 담을 사용자에 대한 정보를 key-value 형태로 저장한다.
Signature에는 your-256-bit-secret과 같이 개인이 가진 키가 포함되어있다. 토큰의 위변조 여부를 확인하는 데 사용된다.
JWT 방식의 장단점
장점 👍
- Header와 Payload를 가지고 signature를 생성하므로 데이터 위변조를 막을 수 있다.
- 인증 정보에 대한 별도의 저장소가 필요하지 않다.
- 확장성이 우수하다.
- 모바일 애플리케이션 환경에서도 잘 동작한다.
단점 👎
- 토큰의 길이가 길어서 인증 요청이 많아질수록 네트워크 부하가 심해진다.
- 토큰을 탈취당하면 대처하기 어렵다.
- 서버 쪽에서 사용자를 관리하지 않기 때문에 특정 사용자의 접속을 강제로 만료하기 어렵다.
참고자료
API
API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다.
한 프로그램에서 다른 프로그램으로 데이터, 즉 정보들을 주고받기 위한 방법으로 이해하면 된다. 우리가 만들어 본 페이지에서 사용자가 뮤지컬 정보를 보기 위해 클릭하면, 서버에서는 그 뮤지컬에 대한 정보를 가져오는 데 그 방법이 API에 해당된다고 생각하면 된다.
API의 방식 (Method)
정보에 대한 가공방법에는 CRUD의 네 가지 Method방식이 있다.
- Create(생성) - Post
- Read(읽기) - Get
- Update(수정) - Put | Patch
- Delete(삭제) - Delete
참고자료 + 추가로 보면 좋을 자료
+ 댓글 수정 기능을 만들어보고 싶었는데 Patch를 사용해서 만들어보면 될 것 같다. (Put 은 data가 덮어씌워지는 것이고, Patch는 지정한 값만 수정 가능하기 때문)
1주 차 회고
사전에 진행해 본 토이 프로젝트를 바탕으로 웹 미니 프로젝트를 진행할 수 있어서 확실히 마음가짐이 달랐다. 팀원들과 내가 배웠던 내용을 공유하면서 프로젝트를 만들어 나가서 쉽진 않았지만 굉장히 재밌었고 많은 것을 배운 경험이었다. 그리고 내가 아직 공부해야 할 내용이 많다는 것도 다시 한번 깨달았다. ㅎ,, 협업의 기본인 Git을 아직 잘 다룰 줄 몰라 Soucetree에서 main pull과 main commit만으로 작업을 공유했다. 그래도 확실히 부딪히니까 금방 배우는 것 같긴 하다.
그리고 스스로 이렇게까지 몰입할 수 있다는 것에 놀라움을 느꼈다. 이제 배우는 단계라 의욕이 넘치는 것은 사실이지만 배우고자 하는 의지 또한 강하다는 것을 느꼈다. 주에 100시간,, 솔직히 엄청 힘들 것 같다는 생각이 들었는데, 1주 차라 그런지 생각보다 시간이 금방 지나갔고 또 몇 시간을 공부하는지 눈으로 볼 수 있으니 좋은 자극이 되어서 할 수 있었다.
일요일인 오늘은 지난 한 주를 회고하며 공부한 내용을 요약하는 날이다. 알고리즘 문제를 처음 접해봤는데 생각보다 굉장히 어려웠고 또 재밌는 문제도 있었다. 대개 반복문과 조건문을 많이 다루는 문제들이었는데, 머릿속으로 생각해서 풀기보다 공책에 직접 손으로 써가면서 코드를 어떻게 짜야할지 차근차근 생각해보니 순서가 정리가 되면서 좀 더 수월했고, 다른 분들의 코드를 이해하기에도 좋았다. 라이브러리를 사용하는 방법을 아직 모르고 기초 강의만 들은 상태라 조금 막막한 점도 없지 않아 있지만 훨씬 훨씬 더 열심히 공부하면 나도 짧은 코드를 짤 수 있지 않을까 생각이 든다!
우선 Intellij 환경에서 작업을 진행하는 게 목표인데, JDK, SDK 부터 환경변수 설정까지 모두 완료했는데도 gradle 파일이 생성되지 않는다. 구글링을 정말 많이 해보았는데 내가 어떤 파일을 만들어서 작업을 해야 하는지 조차 개념이 잘 잡혀있지 않아서 더 해결방법이 떠오르지 않는 것 같다.
JetBrains의 라이선스가 만료된 것도 아니었고, cmd를 통해 자바의 설치도 모두 확인했는데 정말 프로젝트 환경 세팅이 쉽지 않다는 것을 또 한 번 깨닫는다...
알고리즘 문제를 풀면서 어려운 부분은 문제가 이해되지 않을 때도 있지만 보통 문법을 시작하는 과정에서 일어난다. 지금까지 풀었던 문제들을 틀린 원인을 보면 int 나 String의 개념이 부족해 변수 선언을 잘못한다던지, 문자열이나 숫자열을 array로 나타내는 String [ ]이나 Int [ ]의 개념이 숙달되지 못한 경우가 많았다. 조건문이나 반복문은 python과 크게 다르지 않아서 금방 배울 수 있었는데 오히려 그런 기본적인 것들이 문제가 되어 강의를 찾아 듣고 해결할 수 있었다.
아직 숙달되지 않은 부분 - Scanner와 BufferReader, BufferWriter 등의 class 개념들, array 안의 값을 문자열로 나타내는 법, 문자열을 숫자열로 바꾸는 거 (이건 지난 문제별 블로그에 문법을 보면 될 것 같다), 반복문 중첩, 조건문 중첩 등 방대한 지식을 한 번에 머리에 담으려고 하니 힘들다.
항해는 장기전으로 봐야 하니 체력을 정말 정말 잘 챙겨야 한다. 내일부터는 하루에 30분 씩이라도 산책하고 운동하는 시간을 가져서 몸도 잘 챙길 수 있도록 해야겠다!!! 처음이라 많은 게 어려웠을 텐데 즐겁게 하는 내 모습을 보니 기특하고 멋있다는 생각이 든다 :) 지치지 말고 한 번 꾸준하게 도전해보자 화이팅 🤗
'스파르타코딩클럽 > 항해99' 카테고리의 다른 글
| 항해99 6기 DAY 9 TIL _ 22.03.15 (0) | 2022.03.16 |
|---|---|
| 항해99 6기 DAY 8 TIL _ 22.03.14 (0) | 2022.03.15 |
| 항해99 6기 DAY 6 TIL _ 22.03.12 (0) | 2022.03.13 |
| 📅 항해99 B반 10조의 일일 알고리즘 스터디 사이클 📅 (0) | 2022.03.11 |
| 항해99 6기 DAY 4 TIL _ 22.03.10 (0) | 2022.03.11 |
