![]() 
                    
                      
                      
                      React 프로젝트를 하기위해 CRA(Create-React-App)를 설치할 때 무심코 npx 같은 명령어를 사용한다. 무엇일까???node, npm, npx 셋 다 Node.js를 설치하면 함께 깔리는 도구예요.Node앞서, [EP.03]에서 V8엔진을 공부하면 알 수 있는 내용이다.https://codewizard.tistory.com/82- 자바스크립트 코드를 실행하는 엔진입니다.- 원래는 브라우저에서 실행되기 때문에, 브라우저 밖에서도 JS 코드를 실행할 수 있게 해주는 런타임 환경npm(Node Package Manager)Package Manager = 관리npm은 노드 패키지 관리자를 뜻한다.역할1. Node.js 패키지의 설치2. 버전 관리, 프로젝트의 종속성 관리3. 스크립트 실행 pa..
                     
                   
                
                  
                    ![]() 
                    
                      
                      
                      MSA, 클린코드, 디자인패턴이 전부인 것처럼 행동하지 말기 중요한 것은현재 조건 대비, 앞으로의 최선의 선택을 제시하자.(ROI 준수) 1. 건강한 코드는 어디서 나올까?코드는 결국 사람이 읽고 유지보수해야 하는 자산이다.현재 팀에게 맞는 최소한의 규칙으로 서비스를 성공시켜야 한다.리팩토링은 새로운 개발 속도를 늦추는 게 아니라, 중장기적 속도를 유지하기 위한 투자다.패턴과 원칙은 절대적 진리가 아니라 가이드라인이다.2. 독선적인 코더가 되는 순간 (팀은 하나의 서비스를 만들어요.)"나는 클린 코드를 지킨다"라는 자부심이 팀을 흔든다.주니어는 고집보다 오픈마인드가 중요하다.형이 말하던 5살에게도 배울 것이 있다.- 마인드가 유연하냐?- why를 정확하게 말하냐?- "이게 올바른 길"이라는 이유로 팀의..
                     
                   
                
                  
                    ![]() 
                    
                      
                      
                      (C, Java, Python) 언어에 익숙한 백엔드 개발자가 React Native를 2주 내로 제작하기 위해, 다른 언어 지식을 기반으로 JS언어만의 특징과 동작 방식을 집중적으로 파악하여 정리한 글. 참고 RN 생태계: https://lasbe.tistory.com/230 2025년 React Native 현황과 CLI vs Expo 비교분석📒 2025년 React Native 현황과 CLI vs Expo Go 비교분석2023.07.13 - [React-Native] - React Native 장단점과 CLI, Expo 비교와 후기이 글을 쓴 지도 어언 1년 하고도 6개월이 지났습니다. 그동안 플러터가 치고 올라오lasbe.tistory.comJS 실습환경: https://codepen.io/..
                     
                   
                
                  
                    ![]() 
                    
                      
                      
                      요즘 모든 공고에 있는 AI Agent, LLM(claude, GPT, cursor) 투성이다. 신입 개발자가 죽어가고 있는 한국 암흑기.그래서 2주 동안 나의 최대 생산성을 실험해보기로 했다. 백엔드지만, 처음 해보는 React Native와 인프라까지 처음부터 끝까지 14일 동안 AI Agent 동료와 함께 구축한다. 면접비 20,000원으로 Claude Code를 결제해서 RN 을 개발해보겠습니다.가설과 검증으로 나의 성공 or 실패를 결정한다. 🧪 가설"백엔드 개발자도 2주 안에 실사용 가능한 하이브리드(iOS / AOS) 앱을 배포할 수 있을까?"조건기간: 2025.10.01 ~ 2025.10.14 (추석 연휴)회사 계열사 IDC 엔지니어 동료까지 50~60명이 사용할 교대근무표 앱 출시기술..
                     
                   
                
                  
                    ![]() 
                    
                      
                      
                      spring-oauth2-client를 사용해서 소셜로그인하면 OAuth2에 필요한 정보를 세션에 임시저장함 -> JSESSION그런데 oauth2 인증절차 중 다른 분산 서버로 요청 가면, 세션값이 없기 때문에 무한 요청 -> 503 에러(too many redirect)따라서 oauth2 인증 저장소를 세션 -> 쿠키로 변경HttpSessionOAuth2AuthorizationRequestRepository 를 만들어서 사용.이렇게 되면 임시운용하던 Sticky Sessions 제거하고 브라우저 쿠키 이용해서 stateless 환경 구축.마이그레이션 하기 전, Sticky Sessions를 공부해보자. Sticky Sessions로드 밸런서의 설정을 통해 사용자의 요청이 처음 세션이 저장한 서버로만 ..
                     
                   
                
                  
                    ![]() 
                    
                      
                      
                      카카오테크 부트캠프를 진행하며, 보안 질문과 디벨로퍼팀 현직자님의 조언을 결합하여 1달 걸린 최종 로그인 방식을 기록합니다. 이 글은스프링 라이브러리 implementation 'org.springframework.boot:spring-boot-starter-oauth2-client' 를 이용해서 제작하였고, JWT발급방식은implementation 'io.jsonwebtoken:jjwt-api:0.12.3'implementation 'io.jsonwebtoken:jjwt-impl:0.12.3'implementation 'io.jsonwebtoken:jjwt-jackson:0.12.3'JWT 0.12.3입니다. 소셜로그인 순서도1. 클라이언트에서 spring-boot-starter-oauth2-clien..
                     
                   
                
                  
                    ![]() 
                    
                      
                      
                      백엔드 + 프론트 연결 중 CORS 에러 발생, 근데 preflight는 뭐야?  와이어샤크로 검출해보니tcp에서 syn -> (syn,ack) - > ack로 3way handshake로 잘 받고 options요청(preflight)으로 보내기 시작하는데 하던 중 갑자기 403을 내려버려서 http요청을 받지도 못하고 종료되었다.도대체 뭘까?  CORS 에러 트래킹 과정postman으로 API요청 확인 → 살아있다면 → 서버 양호개발자도구(F12) 켜서 클라(리액트)로 접근하기 → CORS 확인SOP(same-origin policy)란?출처가 다른 애플리케이션이 통신하는 데에 아무런 제약이 없다면1. 악의적인 사용자가 `CSRF`or`XSS` 등의 공격을 통해 사용자 민감한 정보를 탈취가능2. 누구나..
                     
                   
                
                  
                    ![]() 
                    
                      
                      
                      클라이언트 사이드 랜더링을 기준으로 설명합니다.카카오 공식문서: https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com에서 순서도를 참고하면 좋습니다.알면 좋은 점1. 소셜 로그인은 (백엔드 or프론트)한 부분에서 전부 맡아서 진행하는 게 안정적이다.2. 상태관리는 백엔드에서만 진행한다.명칭 얼라인1. Service Client: 프론트(리액트)2.Service Server: 백엔드(스프링)3. Kakao Auth Server: 카카오 인증 서..