개발 연습 블로그

✔️ [FE] 소셜로그인 에러 리다이렉트 URL 오류 카카오톡 외부 API를 사용하는 과정에서 리다이렉트 경로 설정에 오류가 있었다. 프론트엔드 쪽 경로와 백엔드 쪽의 경로에 에러가 있었는데 이것을 빠르게 캐치하지 못했다. 해결 카카오 디벨로퍼의 공식 문서를 참고하여 올바른 리다이렉트 주소와 REST API KEY를 공유받아 해결할 수 있었음 권한 설정의 딜레마 나비스의 계정은 이메일만 가능하도록 설정하였는데, 소셜 로그인으로 가입하면 권한 동의에서 계정명(이메일)을 제공하는 항목이 필수가 아니라 선택이었다. 이로 인해 가입자가 이메일 제공에 동의하지 않고 가입하면, 계정명은 없는데 소셜 로그인이 가능한 기묘한 상황이 발생하였다. 1차 해결 기술 멘토링에서 이 문제에 대해 상담한 뒤, 이메일 제공을 받지..

또 2주가 흘렀다. 기록을 남길 틈도 없이 진짜 장난아니게 바쁜 나날이었다. 4시에 자서 9시에 일어나는 것이 사치로 느껴질만큼 긴 시간이었는데, 중간발표하고 1주일 밖에 안 된 것 같았는데 2주나 지났다. 그동안에도 참 많은 일이 있었다.(그만큼 성장도) 당장 한 부분만 써보자면 메인, 그룹, 그룹 게시글 페이지(게시글, 과제, 설문, 투표), 어드민&프로필 페이지 제작 메인 페이지 그룹 개설 및 가입 모달 로직 구현 어드민&프로필 페이지 CRUD 그룹 게시글 페이지 과제, 투표, 설문 CURD, 그룹 게시글 페이지 댓글 기초 로직 구현 카카오톡 소셜 로그인 구현 출시 후 버그 관리와 유저 피드백 관리 이정도인데, 사용하고 있는 API의 갯수는 45개이고 그중 32개 가량을 내가 사용하고 있었다.(그에..

와우....마지막으로 일지 쓴 지 2주 되었나? 아니 3주인가? 시간 참 느리게 간다는 생각이 든다. 많은 일들이 있었다. 우선 프로젝트는 시작부터 위태로웠다. 이건 썼던 것 같으니 넘어가고...프론트 2명, 백 3명으로 구성된 팀이 맡을만한 작업량이 아닌 것 같아보였지만 어떻게든 작업이 이뤄졌다. 메인 페이지 그룹 페이지 그룹 개설 모달 그룹 게시글 페이지 작성 페이지 어드민 페이지 프로필 페이지 로그인 구현 그룹 개설 기능 그룹 참가 기능 그룹 페이지 CRUD 그룹 게시글 CRUD 큰 틀은 이정도인데, 세세한 것으로 넘어가면 각 페이지 마다 코드가 8백 줄 씩은 되었을 것이다. 같이 하던 팀원은 마크다운, 채팅 구현같은 굵직한 것들을 할 동안 나는 위에 있던 페이지들의 CRUD를 담당했다. 처음엔 C..

03 - 13 카카오톡 로그인 구현 준비 믿음직한 백엔드 친구(부팀장)하고의 연계작업이었다. 카카오톡 소셜 로그인을 구현하는 것이었는데, 이것에 대한 접근을 잘못해서 시간을 아주 많이 썼다. 우리의 회원가입 로직은 이메일을 ID로 사용하는 것이었기에, 카카오톡 소셜 로그인을 할 것이면 카카오 계정이메일을 필수로 받아와야한다고 판단했었다. 이것이 힘든 일이라는 것을 알게 된 것은 그날 오후였다. 카카오톡 소셜 로그인을 하면 권한 요청을 하는데, 닉네임까지는 필수 지정이 가능하지만 이메일은 선택 사항인 것이다. 가장 중요한 것을 선택사항으로 넣으면 예외처리가 수도없이 많아지기에 우리는 어떻게든 이메일을 받아오는 방법을 찾아야했다. 일단 찾아본 것은 카카오 소셜 로그인 기능을 위해 우리 앱을 상업용으로 등록하..

점점 일지 쓰는 것이 어려워지고 있다. 항해 관련 블로그 쓴 글들을 보면 왜 후반부에 기록이 빈약했었는지 이제 알 것도 같다. 이런 식으로 알고 싶지는 않았는데.... 03-07 이전 미니프로젝트 때 같은 팀원이 시도하다 실패한 것 - 한 페이지에 복수의 react-query를 능동적으로 get해오는 문제를 직접 겪었다. 불만은 없었다. 오히려 내가 원하는 부분이었다. 마켓컬리에서 카테고리 버튼을 누를 때 마다 파라미터를 달리해서 엑시오스 GET을 해오는 것을 보고 이걸 못하면 안되겠다 싶은 느낌이 강하게 들었기 때문이었다. 처음 백 친구들이 제시하고 나도 그럴거라 생각했던 방식 - 처음에 전부 GET으로 받아오고 필터링 하는 방식을 포기했기에 이전 미니프로젝트 때의 팀원이 시도한 방식을 참고해 보았다...

미니프로젝트를 하면서 정말 많은 시간을 쓰느라 일지를 거의 쓰지 못했다.... TIL을 쓰는 것이 중요하다는 것은 알지만, 이거 쓸 시간에 코드 한 줄이라도 더 봐야겠다는 압박감에 그렇게 할 수 밖에 없었다. 그래도 기억이 좀 남아있으니 날짜별로 한 번 써보겠다. 02 - 27 로그인, 회원가입 페이지는 진즉에 끝났고, 나는 상세페이지 작업에 들어갔다. 작성페이지 작업을 최 후순위로 미뤘는데, 그이유는 상세페이지에서 수정 기능을 구현하면 그 기능과 CSS를 작성 페이지에 꽂으면 된다는 입장이었다. 결과적으로 이 판단이 옳았지만 작성 페이지의 부재로 오는 POST 기능 테스트에서 백 친구들이 수작업을 하는 불편함을 겪었다. 02 - 28 상세 페이지 댓글 출력 기능 구현, 팀원이 깃허브 커밋과 푸쉬를 꺼리..

회고하기 심화 과제 상당히 죽쒔다. 핵심 기능을 미처 갱신하지 못했다. 괜히 숙련 주차 때 과제를 리팩토링한다고 하다가 시간을 날린 것이 너무 컸다. 또한 CSS 공포증으로 집중력이 크게 흐트러진것도 한 몫했다. 이를 극복하지 못하면 실전에서 진짜 아무것도 못할 것이다. 그것만은 안돼! 미니 프로젝트 생각보다 할만했다. 어떻게 해야할지 모르는 백 친구들과의 API 연결도 예상 외로 간편했고, 우리의 멋진 백 친구들이 서버 배포를 시작한 당일날 해준 덕에 로컬 데이터에서 돌려보지 않고 바로바로 연결하면서 피드백을 주고 받을 수 있었다. 그런데 흠.......CORS 필터 설정이 백 친구들이 잡기 힘든 모양인 것 같다. 페이지 하나하나 새로 만들 때 마다, 새 API를 뚫을 때 마다 같은 문제에 봉착한다. ..

특이사항 : 팀플레이 어제부터 오늘, 2일간 팀 작업을 시작했다. 꽤나 많은 일들이 있었고, 여기에 어떻게든 적어보겠는데 만약 다 못적겠으면 내일 일지에 마저 쓸 것이다. 24일 오전 팀 빌딩, 자기소개, 피그마 및 노션 작성 특이사항 딱히 없다. 그냥 이것저것 짜면서 꽤나 바쁘게 보냈다. 피그마의 활용법을 다들 익히면서 진행하다 보니 뭔가 조금 조잡하게 진행되었다. 특히 그룹화, 다들 그룹화를 안해!!!!! 나는 어도비 다루면서 그룹화의 중요성을 배웠기에 망정이지, 나까지 안했으면 수 백개의 네모조각에 둘러쌓여 고통받을 것이다. 으으..... 오후 병원에 가느라 빠졌다. 콩팥 상태가 썩 좋지 못하다. 진짜 좋지 못하다.....투석 얘기까지 나왔는데 결과는 언제나오는 거람... 저녁 로그인 페이지 기능 ..

특이사항 : 과제로 고생함 세상에 완전 끔찍한 경험이었다. 저번 주차에 했던 과제를 리팩토링하는 방식으로 과제를 접근했다가 완전히 꼬여버린 뒤로 처음부터 다시 만들어야 했다. 안그래도 없는 시간을 2일이나 허비했다! 아이고.....스트레스로 심장이 아파온다. 그래도 일단 보고는 해야겠지 기능 URL Method request response 고민 데이터 갯수 조회 /Main GET - { "gomin": [ { "title": "제목", "contents": "내용", "username": "사용자명", "id": id } ] } 고민 데이터 작성 /Write POST { id: number, title: string,(option) body: string,(option) date: string, }; ..

특이사항 Thunk 구조 일반적인 dispatch를 쓰는데, 여기서 경로를 createAsyncThunk한 액션 객체로 넘긴다. 그러면 dispatch - 함수 실행 - 함수 내에서 dispatch 실행이 된다. 연습해 본 바로는 1 2 3 4 5 6 7 8 9 10 11 12 13 export const __addNumber = createAsyncThunk( // 첫번째 인자 : action value "addNumber", // 두번째 인자 : 콜백함수 (payload, thunkAPI) => { if(payload { thunkAPI.dispatch(addNumber(payload)); }, 3000); } } ); Colored by Color Scripter cs 의 구조도 가능하다. 좀더 간..