프로젝트25 웹 개발 - 프로젝트 2 - 10. 회원가입 이제 서비스에서 회원가입하는 부분을 만들 것입니다. 이때 평문으로 받으면 큰일이 날 수 있기 때문에 암호화를 할 것입니다.controller컨트롤러에서는 아이디와 패스워드를 입력받습니다. 그리고 컨트롤러에서는 getName을 이용해서 해당 유저가 있는지 확인합니다. 만약 유저가 있으면 무시하고 없으면 service에서 계정 등록을 합니다. 그리고 service에서는 userRegisterRequest에서 값을 가져와서 입력을 합니다. 이때, 비밀번호를 그해로 저장하면 DB가 탕취되었을 때 큰일이 날 수 있으니 암호화를 해서 저장합니다.암호화util 패키지를 만들고 여기에 유용한 기능들을 넣습니다. 비밀번호를 해시를 해서 저장을 합니다. 그리고 유저자 로그인을 할 때 입력한 패스워드를 동일한 해시를 적용해.. 2024. 10. 13. 웹 개발 - 프로젝트 2 - 9. 로그인 폼 지금까지는 로그인을 버튼 누르면 자동으로 되게 했습니다. 이제 입력 폼을 만들어서 진행하도록 하겠습니다. 우선 입력받는 변수를 만듭니다. 입력 창을 만듭니다. bootstrap에 좋은 예시(https://react-bootstrap.netlify.app/docs/forms/overview)가 있으니 이것을 참고하기로 합니다. Rowjustify-content-md-center: 행 내의 항목들을 가운데로 정렬해줍니다.md는 미디엄(Medium) 사이즈 이상의 화면에서 적용된다는 의미입니다. 그보다 작은 화면에서는 이 클래스가 적용되지 않습니다.Colmd={6}: 미디엄 사이즈 이상의 화면에서 이 열이 12칸 중 6칸을 차지하도록 설정합니다.onSubmit : 로그인 버튼을 눌렀을 때 실행되는 함수입니다... 2024. 10. 5. 웹 개발 - 프로젝트 2 - 8. work 보여주기 이제 스트릭을 보여줄 것입니다.work 목록 가져오기work의 목록을 가져올 것입니다. work는 api/user/work를 get으로 호출해서 가져올 수 있습니다. useEffect를 사용해서 화면에 보여지는 순간 한번 실행되도록 해 주었습니다.이제 화면으로 돌아가 봅시다. destroy is not a function이라고 나오면서 저를 괴롭힙니다. 이것은 useEffect에서 async를 사용하면 생기는 일입니다.이것을 호출하기 위해서는 다음과 같이 바꿔줘야 합니다. getWork라는 async 함수를 선언하고 그 함수를 호출하는 식으로 바꿔줄 수 있습니다. 그러면 이제 work를 성공적으로 부르는 것을 알 수 있습니다. work 목록 보여주기useState를 이용해서 받은 정보를 저장해 줍니다. .. 2024. 10. 4. 웹 개발 - 프로젝트 2 - 7. streak 연장 streak연장 기능을 만들어 봅시다.streak db먼저 스트릭 정보를 담는 db를 만들어 봅시다.유저 정보가 담겨있는 user db,할 일이 담겨있는 work db,각 일을 했는지 안했는지 체크하는 streak db를 만듭니다. 각 유저는 여러개의 할 일이 있을 수 있습니다.그리고 각 일들은 여러 달동안 진행할 수 있습니다. 여기서 아주 중요한 것이 있습니다.db에 있는 int 형은 2^31 - 1입니다. 그리고 한 달은 최대 31일로 이루어져 있죠.즉, 특정 달에 대해 이 일을 했는지 안했는지 체크하려면 int 1개면 충분하다는 것입니다.2^{i-1}에 해당하는 비트가 1이면 i번째 날에 일을 했다는 뜻입니다. 예를 들어 2^0에 해당하는 비트가 1이면 첫번째 날에 일을 했습니다.그럼 다음 구조로 .. 2024. 9. 29. 알고리즘 - 프로젝트 1 - 레이튼 교수와 이상한 마을 135 유튜브를 보다가 오랜만에 레이튼 교수 시리즈를 다시 접하게 되었습니다. 모바일 버전이 있다는 걸 알게 되어 설치하고 플레이해봤는데, 마지막 문제가 정말 인상 깊었어요. 블럭을 움직여 빨간 사각형을 밖으로 빼내는 문제였습니다. 이건 누가 봐도 코딩으로 해결을 하라는 거죠. 바로 visual studio를 켜줍니다.알고리즘각 판의 상태를 정점으로, 한 상태에서 다른 상태로 이동할 수 있을 때 간선으로 연결을 해 주면 그래프가 만들어 집니다. 그럼 다익스트라나 BFS를 통해서 이 문제를 해결할 수 있습니다.정점빈 칸도 블럭이라 생각을 하고 각 블럭의 좌측 상단에 번호를 매깁니다. 빈칸은 0, 초록색은 1, 파란색은 2, 보라색은 3, 빨간색은 4로 번호를 매겨줍니다. 왼쪽 위부터 오른쪽으로 쭉 가면서 숫자를 .. 2024. 9. 21. 웹 개발 - 프로젝트 2 - 6. streak lover 로그인 유저가 여러 명 있다고 가정하고 로그인 기능을 개발할 것입니다.우선 데이터베이스와 백엔드를 연결해 주고 유저 정보를 담는 간단한 db를 만들었습니다. 로그인은 쿠키, 세션, 토큰 등 다양하게 있지만 저는 세션 인증을 이용해 로그인을 구현할 것입니다. 보통 다음 과정으로 이루어집니다.유저가 로그인을 합니다.서버에서 세션 ID를 발급합니다.클라이언트에서는 해당 정보를 쿠키에 저장합니다.다음에 요청할 때 쿠키에 저장된 정보를 같이 보냅니다. 이를 통해 이미 로그인한 유저임을 알 수 있습니다.백엔드부터 한번 진행해 보겠습니다.백엔드우선 아이디, 패스워드를 가져오면 해당 정보를 찾는 것까지 진행했습니다. 그럼 쿠키에 저장하는 것이 남았네요. 요청할 때 HttpSession을 가져오도록 합니다. 그리고 유저 정보가.. 2024. 9. 14. 이전 1 2 3 4 5 다음
