권용휘

JavaScript로 된 레거시 프론트를 Next.js 14버전으로 개발을 완료해서 배포 후 테스트 해보는데, API 서버에서 아예 응답을 해주지 않는 상황이 생겼습니다. 그래서 확인해 본 결과, 기존 시스템과 Next.js에서 API를 호출하는 방식이 다르다는 것을 알게 되었고, 이번 경험을 바탕으로 차이점과 이유를 정리하게 되었습니다.두 가지 API 호출 패턴패턴 A — 브라우저가 API 서버를 직접 호출User → Browser로 웹(https://sample.com) 접근 ─────▶ https://backend.com (API 서버)브라우저에서 API 서버 주소(https://backend.com/...)로 직접 요청 개발자도구 Network → Request URL이 API 서버 주소(http..

웹 애플리케이션에서 특정 상황에 따라 실시간으로 데이터를 클라이언트에 전달하고 싶을 때, **웹소켓(WebSocket)**을 활용하는 방법이 있습니다. 실시간 데이터 전송을 처리할 수 있는 다양한 방법들이 있지만, 저는 양방향 통신을 가능하게 해주는 웹소켓을 사용하기로 결정했습니다.■ HTTP와 WebSocket의 차이점HTTP의 한계:HTTP는 클라이언트 → 서버 요청-응답 모델로 동작합니다. 클라이언트가 서버에 요청을 보내면 서버가 응답을 보내는 방식입니다. 이 구조는 단방향 통신이므로 서버는 클라이언트가 요청하지 않으면 데이터를 보낼 수 없습니다.즉, 서버가 클라이언트에 데이터를 푸시(push)하는 방식은 지원되지 않습니다. WebSocket: HTTP의 한계를 넘다WebSocket은 양방향 통신을..

React에서 개발을 하다 보면 네트워크 요청이나 데이터 처리 시 async와 await를 사용하게 됩니다. 하지만 막상 코드를 작성하다 보면, 왜 이러한 비동기 처리를 사용하는지, 동기와 비동기의 정확한 개념이 무엇인지 궁금해지곤 합니다. 저 역시 비슷한 의문을 품고 있었는데요, 최근 개발 중 async와 await를 사용하는 이유를 정확히 이해하지 못하고 있다는 것을 깨달았습니다. 그래서 이번 기회에 **동기(Synchronous)와 비동기(Asynchronous)**의 차이를 제대로 알아보고, 프론트엔드와 백엔드에서 각각 언제 어떻게 사용해야 하는지에 대해 정리해보려고 합니다. 특히, 프론트엔드 개발에서 비동기 처리가 거의 필수적인 이유와 백엔드에서도 동기와 비동기를 상황에 따라 어떻게 활용하는지 ..

# 이슈Universal Link를 통해 iOS에서 특정 앱으로 이동시키기 위해, 여러 방법을 시도했습니다. 특히, sample.com/bb.html 페이지에서 버튼을 눌러 같은 도메인의 /aa 경로로 이동하려 했지만, 예상대로 동작하지 않는 문제를 겪었습니다. 참고로, https://sample.com/aa 경로는 Universal Link로 설정이 완료된 상태입니다. 그러나 다양한 방법을 시도한 결과, 클라이언트 측에서의 모든 리다이렉션은 Universal Link가 정상적으로 작동하지 않았고, 서버 측 리다이렉션을 사용할 때만 Universal Link가 제대로 작동했습니다. 특히, 서버 측 리다이렉션에서도 window.open을 사용해야만 Universal Link가 트리거되었습니다. # 실패 사..

# 오류IOS에서 safari이용시 scheme으로 된 딥링크 사용시 해당 app이 있을경우에는 상관이 없으나, 해당 app이 없을 때'주소가 유효하지 않기 때문에 Safari가 해당 페이지를 열 수 없습니다'경고창이 발생-> 사용하는데 문제는 없으나 저 경고창을 보니 오류같아 보임. # 해결방안WEB 프로젝트(ex. https://sample.com)에 AASA(apple-app-site-asscocation )파일을 넣어준다.경로 '최상단/.well-known/apple-app-site-asscocation'// apple-app-site-asscocation{   "applinks": {      "apps": [],      "details": [ {         "appID": "10자리의Ap..