YONG.ZIP

카카오 소셜로그인을 성공했을 때, 다음과 같은 처리를 했었다. 신규 사용자 -> 회원가입 처리기존 사용자 -> 로그인 성공 KOE320이라는 오류에 대해 동일한 인가 코드를 두 번 이상 사용하거나, 이미 만료된 인가 코드를 사용한 경우, 혹은 인가 코드를 찾을 수 없는 경우가 원인 이라는 블로그를 매우 많이 봤지만 이 내용만으로는 해결할 수 없었다.  프론트엔드 코드, 백엔드 코드 둘 다 콘솔 로그를 찍어봤지만 두 번 요청을 보내는 경우는 없었고,머리 싸매고 있다가 시간을 너무 오래 잡아먹는 것 같아서 Kakao Developers Dev Talk에 글을 남겼다. 아침에 남겼는데 당일날 30분 안쪽으로 엄청 빠른 답변을 주셨음!!! 리다이렉트 URI에 전달한 인가코드에 하이픈이 있으면, 제거하고 액세스 ..

[알쓸개잡 = 알아두면 쓸데있는 개발자 잡학사전] 요즘은 GPT나 Claude 등, 개발을 보조해주는 도구가 많은 한 편, 아날로그는 아니지만 생성형 AI 덕에 요즘은 잘 사용하지 않는다는 구글링 팁을 공유하려고 합니다. 사실 구글링을 잘 하면 AI를 사용하는 것보다 금방 문제 해결법을 만날 수도 있답니다. (물론 구체적인 프롬프트를 잘 작성해주면 생성형 AI를 활용해 더 빠른 개발을 진행할 수 있습니다!) 1. 정확한 검색어 찾는 법 [""]"" 큰 따옴표로 특정 단어나 문장을 감싸주면 검색 결과에 무조건 감싼 단어/문장을 포함한 결과만 나옵니다! 에러 났을 때 그대로 복붙할 때 큰 따옴표로 감싸주면 더 정확한 결과를 얻을 수 있답니다. 사실 대부분의 언어에서 발생하는 에러 로그들은 생김새가 다 비슷하..

문제 상황최근 스프링부트 유지보수를 부탁받아 진행하고 있는 프로젝트에서 특이한 이슈를 만났습니다. 개발 서버에서는 로그인이 잘 되는데, 운영 서버에서는 간헐적으로 로그인이 안 되는 문제였는데요. 더 특이한 점은 iOS에서는 잘 되는데 Android에서만 문제가 발생한다는 점이었습니다. 앱 개발자 분이 보내주신 오류 메시지{ "status": "FETCH_ERROR", "error": "TypeError: Network request failed" }  처음에는 당연히 클라이언트 쪽 문제일 거라고 생각했습니다. 하지만 앱 개발자분이 "개발 서버와 운영 서버는 엔드포인트만 다르고 호출 방식은 동일하다"고 하심 .. ㅎㅎ🔍 원인 분석백엔드 코드를 살펴보니 커스텀 에러 코드를 사용하고 있기 때문에MsAP1xx..

# V8 가비지 컬렉션힙은 메모리 할당이 필요한 곳이고, 이는 여러 generational regions로 나눠지는데이 region들은 단순히 generations이라고 불리우고, 이 객체들은 라이프 사이클 동안 같은 세대(generation)를 공유한다. 여기에는 young generation과 old generation이 있는데, young generation의 young objects는 또 다시 nursery(유아)와 intermediate(중간) 세대로 나뉘게 된다. 이 객체들이 가비지 컬렉션에서 살아남게 되면, older generation에 합류하게 된다.  # Node.js 메모리 소비 영역1. Code2. Call Stack (숫자, 문자열, boolean과 같은 primitive valu..

타입스크립트로 작성된 (로깅이 절반인) 게시물 작성 코드!// 게시물 작성 static createPost = [ (req: Request, res: Response, next: NextFunction) => { console.log("Request received, multer about to process the file."); console.log("Request headers:", req.headers); // 전체 헤더 로깅 console.log("Request body size:", req.headers['content-length']); // 요청 바디 크기 확인 next(); }, ..

기존에 알고있던 개념이 너무 무지성으로 외웠던게 아닌가 싶어서 자바스크립트 쌩기초부터 시작하고 있는데 reduce 함수 사용법을 제대로 몰랐던 것 같아서 블로그에 정리하려고 한다. 예제 1 위 사진을 보면 numbers 라는 변수에 array를 하나 넣었다. reduce를 실행할 때는 두 개의 파라미터((p, n) => p + n), 0)을 넣었다. 즉, 콜백함수는 첫 번째 파라미터, 초기값은 두 번째 파라미터다. 실행순서를 정리해보면 (1) 초기값인 0이 p에 입력된다. (2) numbers array의 첫 번째 값인 2가 n에 입력된다. (3) p + n | 즉, 0(초기값) + 2(첫번째 값)의 결과값인 2가 반환된다. (4) (3)에서 반환한 값(2)이 p에 입력된다. (5) array의 두 번째..

Redux-Persist는 상태를 유지하고 저장하는데 사용하는 라이브러리다. 새로고침하면 기존의 store가 사라지는 문제가 발생하기 때문에 Redux-Persist 라이브러리를 사용해 Redux 상태를 로컬 스토리지에 저장하고 새로고침이나 페이지가 리로드 할 때도 상태를 보존할 수 있다.(저장) 먼저 터미널에 명령어를 입력해 설치해준다. npm i redux-persist https://www.npmjs.com/package/redux-persist redux-persist persist and rehydrate redux stores. Latest version: 6.0.0, last published: 4 years ago. Start using redux-persist in your project..

2022년에 디자인 했던 RE:PLAY! 앱 디자인이지만 리액트를 이용해 반응형으로 만들어보고 싶다는 생각이 들었다. 자세한 디자인 링크 프로젝트는 React + Typescript + Vite를 사용한다. 이 프로젝트로 Vite를 처음 사용해보기 때문에 사람들이 말하는 Vite의 장점(서버 실행 속도 등) 을 느껴보고 싶다! 이번 프로젝트에서는 위의 내용을 더욱 공부해보고 싶었기 때문에 Vite + React + Typescript 를 사용하게 되었다. typescript 사용 빠른 개발 환경 구축 Vite와 관련된 주의사항, 빌드 방법 등(Vite app의 보일러플레이트 구조) 물론 프론트 개발 시에는 vite가 속도도 빠르고 좋지만, 따로 리액트나 뷰를 사용하지 않고 npm처럼 JS 라이브러리 형..

- AI Assistant는 인공지능 스피커에 사용되는 기술. 인공지능 스피커의 작동 원리? 1. 먼저, 사람이 정해진 인사말(예: 시리야~)을 말한다. 음성을 인식할 때, 배경과 말하는 사람의 목소리를 분리하는 작업이 필요함. 그리고 사람의 목소리를 글자로 바꾸는 STT(Speech To Text) 기술을 활용한다. 즉, 소리에서 글자를 추출하는 것. 2. 이후, 자연어 처리(NLP)를 거친다. 주어, 서술어, 목적어 등으로 문장을 분리하고 쪼갠다. 그 후 스피커에게 말을 건 사람의 의도가 무엇인지 '의도 분석'을 한다. 사실 '의도 분석'이 인공지능 스피커의 핵심 기술이라고 할 수 있다. 2-1) '의도 분석'을 핵심 기술이라고 할 수 있는 그 이유는? - 사람에게는 상식, 배경지식 등이 있지만 인공..

의외로(?) 고생했던 경험인 리액트 네이티브에서 react-native-naver-map 라이브러리로 페이지에 네이버지도를 넣는 방법입니다! 동작하는 모습! 깃허브 문서를 보면서 차근차근 따라하니까 되더라는 ... react-native-naver-map 에 들어가면 진행 과정이 있지만 조금 더 자세하게 적어보자면! (1) 먼저 작성할 프로젝트에 라이브러리를 설치한다. npm install react-native-nmap --save; (2) ios로 디렉토리 변경 후 pod install을 해줍니다. $ cd ios/ && pod install +) 이 부분은 리액트 네이티브 0.60 이상이신 분들은 건너뛰시면 됩니다, 0.59 이하부터 이 과정을 해주셔야 합니다! $ react-native link ..