슈코딩

오늘은 이거대여. 프로젝트에서 사용한 채팅기능을 복습할겸 정리해보려고 합니다. 우선 비동기적, 실시간 채팅을 구현하기 위해서 WebSocket을 사용했고 Django에서는 Channels 라는 라이브러리를 이용하면 WebSocket을 사용할 수 있게 됩니다. 여기서 데이터를 받는 비동기와 동기에 대해서도 알아야 하기때문에 제가 참고했던 블로그를 공유하겠습니다. https://velog.io/@alicia-mkkim/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%9E%80 동기, 비동기란 동기는 순차적, 직력적으로 테스크를 수행한다.비동기는 병렬적으로 테스크를 수행한다.동기는 요청을 보낸 후 응답 (결과물)을 받아야지만 다음 동장이 이루어지는 방식을 말한다.모든 ..

✨Keep 커밋메시지 구체화- 저난 프로젝트때 ADD , FIX 두가지 위주로 컨벤션을 했었는데, 이번에는 더 구체적으로 나누어서 했던 점. 노션을 사용한 프로젝트 관리(담당 기능, API 명세서) 팀원 모두 프론트의 퀄리티를 희생하지 않고 깔끔한 UI 구현 파이썬, js 에서 사용하는 코드컨벤션 규칙을 잘 지켜 혼돈이 없었음 가장 어려운 파트를 뒤로빼서 LiveShare를 통해서 함께 작업을 해서 코드를 구현하는데에 있어서 서로 도움을 주고받으며 진행한 점 🏮Problem 채팅 기능을 구체적으로 기획하지 않아서 기능관련 코드의 정리가 어려웠음 처음부터 객체지향적 코드를 작성하지않아 코드 효율과 가독성 모두 좋지않았음. 도중에 바꿀려고 시도하였지만 구조적 한계가 있었음 CRUD 를 깊게 고민하지 않고 개..

요즘 프로젝트를 진행하면서 정말 자주 접하는 HTTP 에러 코드들이 있습니다. 매번 볼때마다 당황하지 않고 빠르게 해결하기 위해서 다시 한번 머릿속으로 복습해보려고 이 글을 써봅니다. #401 UnAuthorized 인증 문제 : Token을 잘못보낸 케이스 ( JS headers확인, Authorization: Bearer + token) 자주 발생. 주로 JS에서 api의 headers를 확인해보면 오타가 있거나 , token을 올바르지 않은 형식으로 보내고있거나, payload에서 토큰을 정상적으로 가져오고 있지 못할때 발생했었습니다. #403 Forbidden 주로 권한 문제, 현재 열려고 하는 웹페이지 또는 리소스가 액세스 할 수 없는 경우 발생을 합니다. 과거에 한번 발생을 했었는데, 검색을 ..

이번 프로젝트에서 맡은 기능중 list 페이지에서 물품들을 나열해서 보여주는 부분이 있었다. 데이터가 적을 땐 상관없지만, 데이터가 많은 상태에서는 어떻게 보여줄까를 고민하던중 단순히 커뮤니티 게시글처럼 보여준다면, 무한 스크롤이 아닌 페이지를 나눠서 1...2...3....이렇게 적용을 시켰을것이지만, 우리가 보여주는 형식은 이미지와 밑에 간단한 내용이 보이는 형태라서 무한스크롤이 더 UI에 맞고 자연스럽다고 생각했다. 또한 핸드폰에서 어플리케이션으로 확장성까지 생각 해본다면 무한스크롤이 더 이점이 있다고 생각해서 도전해봤다. 먼저 무한스크롤을 하려면 백엔드에서 데이터를 나눠서 보내줘야 할 필요가 있었다. 36개의 데이터가 있다고 생각했을 때 12개씩 나눠서 보내야 스크롤이벤트마다 호출을 통해 12개를..

이번에 매번 도전해왔지만 끝내 성공하지 못했던 소셜로그인을 드디어 처음으로 성공을 했다. 구글링을 통해서 나오는 자료들은 대부분 프론트와 백엔드가 분리되어있지 않은 상태에서의 코드들이거나 함수 베이스의 View라서 현재 진행 하는 프로젝트와는 어울리지 않는 코드들 뿐이었다. 하지만 그동안 배운지식과 나름(?) class 기반으로 작성한 코드를 발견해서 그 코드를 custom해서 프로젝트에 적용 시킬 수 있게 만들었다. 우선은 JavaScript부터 보면 function kakaoLogin() { window.Kakao.Auth.login({ scope: 'profile_nickname, account_email', success: function (authObj) { window.Kakao.API.req..

이번주 한일📃 1. 프로젝트 - 아이템 리스트 페이지, 마이페이지 UI 2. JWT 정리 3. 카카오 소셜 로그인 구현 한 주를 돌아보며🤔 이번 주는 확실히 프로젝트를 하다보니 도커강의를 들을 여유가 없었던 것 같다. 정말 열정적으로 매일 새벽까지 프로젝트구현하느라 달렸고 그탓에 주말에는 부족한 잠을 채우느라 체력회복에 전념했다. 이번주 좋았던 점은 프로젝트 진행이 생각했던것보다 빠르게 진행이 잘되고 있는 점이 좋았다. 덕분에 프로젝트 기간보다 빠르게 끝내고 면접준비나 코딩테스트 준비를 할 수 있을것 같다는 생각이 들었다. 조금 아쉬웠던 부분은 도커에 관해서 아직 강의를 다 듣지못해 너무 모르는 점과 CI CD 를 활용하는 법을 배워서 적용 시켜보고 싶은데 마음이 프로젝트에만 가있어서 다뤄보지 못한게 아..

S.A 상세 Notion😀 https://quixotic-wok-871.notion.site/12-S-A-3183ff7202e942099238af3effd956ea 머선12조 파이널 프로젝트 S.A 🍀 제목 및 주제 quixotic-wok-871.notion.site Project Github😸 https://github.com/MeoSeon12/egodaeyeo-backend GitHub - MeoSeon12/egodaeyeo-backend Contribute to MeoSeon12/egodaeyeo-backend development by creating an account on GitHub. github.com https://github.com/MeoSeon12/egodaeyeo-frontend G..

오늘은 JWT토큰을 발급해서 로그인하는 방식으로 django로 넘어오면서 처음 사용하게 되어서 강의때 배웠던 내용들을 간단하게 정리해보려고 한다. 기존에 사용했던 인증 방식 : 세션 인증 이번에 사용한 인증 방식 : 토큰 인증 #세션인증 기본적으로 브라우저에서 사용자가 인증을 수행하면 서버에서는 사용자의 정보를 저장하고, 그 응답으로 JSESSIONID 라는 키를 이용해 클라이언트(사용자) 브라우저의 쿠키에 세션의 정보를 저장하게됨. 이후 클라이언트는 브라우저 쿠키에 저장된 JSESSIONID 로 저장된 세션 정보를 이용해 인가(Authorization)된 정보에 접근 할 수 있게 된다. #토큰인증 토큰인증 방식은 사용자가 인증을 수행하면 서버에서는 토큰을 생성한 뒤에 저장하지 않고 토큰값을 사용자의 브..

이번주 한일📃 1. 유화제작 프로젝트 마무리 및 제출 2. 파이널 프로젝트 발제 및 기획회의 3. 도커 강의 한 주를 돌아보며🤔 이번주초에는 유화제작 프로젝트를 마무리 하느라 정말 정신없이 새벽늦게까지 작업을 진행했었다. 사진을 업로드 하는 부분에서 이미지가 업로드되었을때 파일의 형태가 달라서 생기는 에러가 있었는데, 이를 알맞은 형태로 이미지 파일을 백엔드로 보내줬어야 했다. 이 부분을 기존에 드래그 & 드롭 식으로 하니까 url이 넘어가는 것을 깨닫고 시간은 없고, 방법은 못찾아서 결국에 input창의 type을 file로 지정해서 업로드 하는 방식으로 수정을 해서 빠르게 완성을 시켜야만 했다. 그래도 결과적으로 잘 업로드가 되고 이미지 업로드시 painting테이블에도 새로 저장이 되면서 동시에 a..

✨Keep 객체 지향 코딩 커밋 메시지를 팀에서 정한 규칙에 맞게 작성 시간이 짧았던거에 비해, 많은 페이지를 기획했었는데 모두 구현을 한 점 노션을 사용한 프로젝트 관리(담당 기능, API 명세서) JS / Python 코드 컨벤션 지키기 Netlify 활용한 프론트엔드 배포 팀원간 활발한 의사소통 프로젝트 마무리단계에서 Print문, 미사용 import, console 점검 후 제거 프론트 백 나누고 프론트도 페이지 별로 디렉토리를 만들어서 관리한 점 🏮Problem 목업과 와이어프레임 계획이 부실해서 프론트엔드 작성시 시간이 더 많이 소요되고 수정이 잦았음 이미지 변환후 업로드시, 드래그앤 드롭방식 실패(serializer 인풋의 형식 차이)하고 input type=file로 파일을 저장하는 방식으..