만났던 문제해당 프로젝트에서 겪었던 가장 크리티컬 했던 이슈는 강의를 다 들었는지에 대한 기준을 어떻게 잡을 것인가에 대한 것이었습니다초기에 클라이언트 측에서 제시한 요구사항은 플레이어바가 마지막에 도달하는 트리거(onPlayerEnd)를 기반으로 완료 처리를 하자는 의견이 나왔지만, 이는 강의를 실제로 다 듣지 않고 플레이어바를 끝으로 넘기는 인원이 있을 수 있기 때문에 다른 방식을 고안해야 했습니다. 첫 번째로 떠올린 방법은 setInterval() 을 통해 1초마다 상태를 업데이트하다가 영상의 길이와 똑같아 졌을 때 완료 처리를 하는 API를 보내는 방식으로 진행을 하기로 했습니다.실제로 이 방식으로 몇 주간 사용을 했었는데 사용자들의 불만이 몇 가지가 존재하였습니다.“강의를 끝까지 들었는데 체크가..

1. 들어가며[프로젝트] - [kakao tech bootcamp] 카카오 테크 부트캠프 챗봇 프로젝트(피카부) - 1 [kakao tech bootcamp] 카카오 테크 부트캠프 챗봇 프로젝트(피카부) - 1카카오테크 부트캠프(카테부) 챗봇, "피카부"는 카카오테크 부트캠프에서 진행한 팀 미션으로부터 시작된 프로젝트입니다. 카카오테크 부트캠프에서는 각 과정별로(풀스택, 인공지능, 클라우cdragon.tistory.com지난 포스팅에서 카테부 챗봇인 "피카부(Pikaboo)" 프로젝트에 대한 내용을 정리하였습니다. 이번 포스팅에서는 개발을 진행하면서 발생했던 트러블 슈팅과 개인적으로 최적화를 진행했던 내용에 대해서 정리해보려 합니다. 2. 내용메시지를 스트림으로 받아올 때 문제사이드바 데이터 공백 문제채..

카카오테크 부트캠프(카테부) 챗봇, "피카부"는 카카오테크 부트캠프에서 진행한 팀 미션으로부터 시작된 프로젝트입니다. 카카오테크 부트캠프에서는 각 과정별로(풀스택, 인공지능, 클라우드) 2명씩 모여 총 6명 인원의 팀을 구성하여 6개월간 3개의 팀 미션과 각종 현업 프로젝트를 진행하는데, 이 글은 그 중 가장 첫 번째로 진행했던 팀미션의 내용을 정리한 글이 되겠습니다.  제가 이번 프로젝트에서 주로 맡은 부분은 프론트엔드와 약간의 백엔드였으므로 프론트엔드 개발에 대한 내용을 주로 작성 하였습니다. 1. 왜 '카테부' 챗봇인가?첫 번째로 진행한 팀미션의 주제는 '카카오테크 부트캠프 정보를 제공하는 챗봇'입니다. 팀 미션 주제를 선정하는 방식은 게이미피케이션 기반 미션 관리 페이지인 구름 exp에 리스트업 ..

예전에 node.js express로 백엔드 개발을 진행한 적이 있었는데 그 당시 개발 중 발생했던 문제 상황에 대해서 기록을 남겨보려고 한다. 문제 개요 API 요청을 react native 앱에서 호출하여 사용하던 중이었는데 잘 동작하다가 어느 순간 버튼을 누르면 API 요청이 먹통이 되고 앱 자체가 무한 로딩에 걸린 것처럼 아무 기능이 되지 않는 문제가 발생했다. 이 문제는 뒤로 미루기엔 일단 아무 기능이 동작하지 않는 것이기 때문에 사용자 경험에 큰 영향을 미칠 뿐 아니라 서버에 심각한 오류를 가져올 수도 있었기에 다른 기능 개발보다도 우선적으로 해결할 필요가 있었다. 서버 로그를 확인해 보니 'GET / --ms--' 로그만 계속해서 찍히고 있었으며 다른 API는 요청과 응답에 대한 로그가 나오..

1. 개요먼저 문제를 살펴보겠습니다.  위 영상을 보면 알 수 있듯이 한 요소를 클릭하면 다이얼로그(Alert Dialog)가 열리는 기능이었는데, 이 기능이 프론트엔드 단에서 구현되는 방식은 "해당 요소의 userId 값을 다이얼로그 컴포넌트로 넘겨 해당 userId로 다시 해당 유저에 대한 상세 정보를 얻기 위한 별도의 API 호출이 진행"되는 방식입니다. 개발을 할 때는 영상을 보는 것처럼 그렇게 느리다라는 생각을 하지 못했는데, 다만 원래는 로딩 컴포넌트가 뜨지 않을 정도로 빠르게 데이터가 나왔었는데 어느 순간 로딩 컴포넌트가 눈에 보이는 수준이 되었고 조금 찝찝하긴 했어도 그냥 넘어가게 되었습니다. 그러나 문제는 프로덕션 서버에서 발생했는데요. 개발 단계에서는 위 이미지처럼 1~2초 남짓? 걸리..

1. 내 첫 코딩코딩에 '코'자도 모르던 내가 처음 코딩을 접하게 된 것은 대학교 입학 전 교육에서였다. 수시로 합격을 하고 나서 입학 전까지 할 것도 딱히 없던 시기였기에 학교 공지에 올라온 '입학전교육'을 보고 '이거나 해 봐야겠다.'라는 생각으로 신청하여 이른바 계절학기를 입학전에 수강하게 된 것이다.  그 전까지만 해도 사실 코딩이라는 것을 아예 들어본 적도 없었고 그 때까지만 해도 되고 싶은 진로랄게 딱히 없던 시기였었다. 그래서 내 전공(전자통신)도 사실 친구따라 결정을 한 것이었다.  그렇게 해서 듣게 된 수업은 'C프로그래밍'이었는데 선택지가 있지는 않았고, 내 전공에서 수강할 수 있는 과목이 'C프로그래밍' 뿐이었기 때문에 듣게 되었다.  첫 수업을 딱 듣고 나서 든 생각은 우선 프로그래..

1. 구 NextAuth.js, 현 Auth.jsAuth.js는 모든 JavaScript 런타임이 구성하는 모든 플랫폼에서 모던 애플리케이션의 "인증(authentication)" 부분을 위해 표준 웹 API를 기반으로 구축된 오픈 소스 패키지 모음이다. 기존에 명칭은 next-auth로 많이 알려졌으나 next-auth@5.0.0-beta 이후 버전부터 @auth/*  네임 스페이스가 생겼고 Auth.js로 명칭이 바뀌었다. (이전 버전은 계속해서 next-auth로 패키지 이름이 구성된다.)  Auth.js | Getting StartedAuthentication for the Webauthjs.dev 2. 무슨 기능이 있나?2-1. 유연하고 사용하기 쉬움모든 OAuth 서비스와 함께 동작될 수 있도..

Overview 지금까지 꽤 많은 프로젝트를 진행해봤지만 로그인 관련 부분은 항상 걸림돌이 되는 부분 중 하나였다. ‘세션’이니 ‘jwt’니 하는 수많은 용어들을 제대로 익히지도 못한 채 로그인을 구현하려 했었고 항상 벽에 막혀 제대로 구현하지 못한 경험을 했었다. 그리하여 이번 프로젝트에서는 제대로 된 로그인 기능을 구현해보려 여러 삽질들을 해보았고 어떤 과정들을 거쳐 최종적으로 어떻게 구현할 수 있었는지와 관련된 기록들을 이 포스팅에 남기려 한다. "There is no silver bullet" 시작에 앞서 가장 중요한 점을 말하자면 소프트웨어 공학에는 모든 곳에 적용 가능한 솔루션은 없다는 의미로 "silver bullet은 없다"라는 말이 존재하는데, 로그인 즉 인증 방식에도 이 말이 적용되는 ..