개발자 강화 (128) 썸네일형 리스트형 [개발][BFF 도전기] 부동산 공공데이터 API 뜯어보고 BFF API 설계하기 (개발자 강화/프론트엔드) 2025. 2. 20. 02:18 참 많은 일이 있었어요 부동산 공공데이터 API를 단독/다가구만 가져와보려고 했는데단독/다가구 형태의 주택은 전체 건물의 주인이 1명인 경우를 지칭한다고 하더라구요(진짜 API 까면서 부동산 공부 강제로 하게됨 완전 럭키비키잖아) 그래서 제가 구해야 하는 집은 이런 형태보다 뭔가 오피스텔에 가깝지 않나...API 추가할까...하다가 API 여러 개를 다 가져와서 데이터 처리하는 게 BFF API 연습 취지에 더 맞을 것 같아서그냥 해보기로 했습니다 오피스텔, 단독/다가구, 연립다세대, 아파트이렇게 4가지를 불러올게요 공공데이터 부동산 전월세 실거래가 API 1. 국토교통부_단독/다가구 전월세 실거래가 자료 https://www.data.go.kr/data/15126472/openapi.do2. 국토교통부.. [공부] 자바스크립트 함수의 this 바인딩 (개발자 강화/프론트엔드) 2025. 2. 20. 00:59 자바스크립트 함수의 this 바인딩참고한 글 (this 바인딩에 대해 잘 정리되어 있는 글)알쏭달쏭 자바스크립트 this 바인딩 https://seungtaek-overflow.tistory.com/21this 바인딩 이해하기 https://velog.io/@defaultkyle/js-this-1자바스크립트의 this 바인딩 이해하기 https://f-lab.kr/insight/understanding-javascript-this-binding-202405250. this 바인딩 직접 실험해보기ㄴ 폴더 ㄴ script.js ㄴ index.html이렇게 파일 만들고 아래 코드 붙여넣기 1. script.jsclass Car { run() { console.log(this); setTim.. [개발][BFF 도전기] Docker 이미지 빌드 - ECR로 push - EC2 pull해서 실행 (개발자 강화/프론트엔드) 2025. 2. 18. 18:23 Docker - ECR - EC2 실행 명령어 정리* 괄호 안에 내용은 본인 것으로 바꿔여 함0. ECR 리포지토리 만들기AWS ECR(Elastic Container Registry) 이동 > 리포지토리 생성프라이빗 or 퍼블릭으로 만들 수 있음 ECR은 AWS에서 지원하는 서비스 중 하나인데, docker image를 저장할 때 쓸 수 있음EC2 instance(서버)는 ECR에 올라온 이미지를 pull 해서 container를 실행하기만 하면 됨이렇게 하면 EC2 서버 안에는 full code가 아닌 docker image만 있기 때문에 더 가벼움git code를 전부 pull해서 직접 실행하는 방식보다 훨씬 가벼움 여기 뜨는 URI를 잘 복사해두자. 이후에 계속 필요함 1. 로컬에서 현재 코드.. [개발][BFF 도전기] Fastify 서버 - 폴더 구조화 (개발자 강화/프론트엔드) 2025. 2. 18. 18:23 server.ts 파일에 모든 코드가 들어있다면 어떨까요?그럼 아무도 저랑 협업을 안해줄 것 같네요..ㅠㅠ구조화를 나름대로 해봅시다... 원래 NestJS를 써왔는데, 그건 구조가 이미 정해져 있어서 그 구조를 따라가야 했었어요(자유도가 떨어지는 것처럼 보일 수도 있는데, Spring과 구조가 비슷하고 오히려 편한 부분도 있음) 근데 Fastify는 구조가 굉장히 자유로워서 제가 설정을 해야 하더라구요그래서 약간 태초마을에 혼자 던져진 초보자...가 해나가는 느낌으로 봐주세요... (이게 정답이라는 게 아님) Next.js 프로젝트 구조└─app ├─bff │ ├─config │ ├─routes │ ├─schemas │ ├─services │ └─types .. [개발][BFF 도전기] Next.js 구축, Fastify에 Swagger 안 붙는 문제 해결하기 (개발자 강화/프론트엔드) 2025. 2. 16. 13:42 이론으로만 공부했던 BFF를 실제로 해보자왜냐면 인생은 실전이니까이론만 공부해서 되는 건 읎어. BFF란? 이 블로그의 다른 글: BFF API란? https://developer-dreamer.tistory.com/163 [공부] BFF API란?BFF APIBFF: Backend-For-Frontend프론트엔드의 요구에 최적화된 백엔드의 레이어 멀티플랫폼을 지원하는 서비스에서 한 백엔드를 사용한다면, 한 백엔드가 여러 프론트엔드의 API 호출을 대응함백엔드developer-dreamer.tistory.com한줄요약: 백엔드 서버에서 온 날것의 API를 받아서, 프론트엔드가 먹기 좋게 잘 가공해서 보내주는 미들웨어 API 내가 구현하면서 느낀건 프론트엔드용으로 작은 서버를 만들어서, 백엔드 API를 한.. 🌟[매일메일] 이벤트 전파(Event Propagation)란? (FE.250106) (개발자 강화/프론트엔드) 2025. 2. 14. 17:42 연휴엔 역시 카공이지~ ☕ 이것도 진짜 FE 근본 질문인 것 같음(25.01.26. 최초 작성 - 2025.02.14. 추가)이벤트 전파DOM 구조에서 이벤트가 발생했을 때, 어떻게 상위 요소와 하위 요소 간에 전달되는지 정의하는 매커니즘웹 페이지에서 요소 간의 상호작용을 제어하는 데 중요한 역할을 하며, 복잡한 사용자 상호작용 효율적으로 관리. 캡처링 단계 - 타겟 단계 - 버블링 단계로 구성됨. event.eventPhase를 사용하면, 현재 이벤트 흐름 단계(캡처링:1, 타깃: 2, 버블링:3)를 파악할 수 있음 기본적으로 브라우저는 이벤트 전파를 버블링 단계에서 처리하도록 설계되어 있음 [1단계] 캡처링(Capturing) 단계이벤트가 DOM 트리 최상위 요소(document)에서 시작해서, 이.. [개발, 매일메일] @tanstack/react-query v4/v5 차이...(suspense, error-boundary 처리) (개발자 강화/프론트엔드) 2025. 2. 14. 17:13 제가 직접 겪고 몸소 겪은 후 나중에 같은 실수 안반복하려고 정리합니다... React로 개발하다보면 react-query를 써야하는 경우가 있다 Q. @tanstack/react-query 왜 쓰나요?안좋은 답변: 친구들이 쓰길래요 (x) 한줄요약비동기 데이터(fetching, caching, 갱신 등)을 효율적으로 관리하고, 이로 인한 복잡도를 줄이기 위함 같은 데이터를 여러 곳에서 사용하는데 매번 api를 요청한다면... 필요없는 네트워크 트래픽이 늘어남react query는 query key로 캐시된 값을 불러와서 사용하는 등의 작업이 가능함 캐싱이 편해서 GOAT임예전에 연구실에서 개발할 때 몇 백개의 문제 데이터를 미리 가져와서 클라이언트가 들고 있어야 하는...뭐 그런 개발 시나리오가 있었는.. [매일메일] 민감한 데이터는 어디에 저장해야 할까? (FE.250211) (개발자 강화/프론트엔드) 2025. 2. 11. 15:51 localStroagesessionStorage데이터 지속성영구적 저장브라우저 닫거나, 장치 재부팅해도 유지현재 브라우저 세션 동안만 유지브라우저 탭 닫으면 데이터 삭제범위동일한 도메인 내의 모든 탭에서 데이터 공유동일한 도메인 내에서 탭 간 데이터 공유 안함예시테마 설정(다크모드)장바구니 데이터로그인 후 인증 데이터 일시 저장특정 탭에서만 사용할 데이터 관리목적장기 데이터 저장탭 단위 데이터 관리일시적 데이터 저장보안영구적으로 저장되므로 민감한 데이터 저장 주의세션 종료 시 데이터가 자동으로 삭제 되지만보안적으로 완전히 데이터를 방어할 수는 없음 Cookie데이터 지속성만료 시간 설정 가능범위동일한 도메인 내 모든 탭에서 공유예시세션 유지(로그인 상태)추적 정보 저장(광고 추적, 사용자 방문 기록)이 .. [공부] BFF API란? (개발자 강화/프론트엔드) 2025. 2. 10. 14:46 BFF APIBFF: Backend-For-Frontend프론트엔드의 요구에 최적화된 백엔드의 레이어 멀티플랫폼을 지원하는 서비스에서 한 백엔드를 사용한다면, 한 백엔드가 여러 프론트엔드의 API 호출을 대응함백엔드 api는 여러 플랫폼의 요구사항을 모두 충족시키기 위해 모든 데이터를 반환하도록 구현하게 됨각 플랫폼의 프론트엔드는 요청한 것 외에 다른 데이터까지 함께 받게 되는 셈이라 데이터 처리 로직이 복잡해짐 MSA(MicroService Architecture) - 하나의 어플리케이션을 독립적인 여러 개의 마이크로 서비스로 구성여러 마이크로 서비스를 호출해서 데이터를 조합해야 하는 경우 클라이언트가 이를 직접 수행하면 api 호출 횟수 증가함BFF를 사용하면 여러 마이크로서비스에서 필요한 데이터를 .. [매일메일] 스케일 아웃 & 스케일 업 (BE.250210) (개발자 강화/백엔드) 2025. 2. 10. 14:17 기존 서버가 한계에 도달하는 경우 사용할 수 있는 방법 스케일 업기존 서버를 더욱 높은 사양으로 업그레이드하는 것수직 스케일링(vertical scaling)이라고도 함예: AWS에서 EC2 t2.micro에서 t2.small로 업그레이드 간단하게 서버의 성능을 향상할 수 있음(단순히 더 높은 사양의 서버로 갈아타는 것)그러나, 서버를 무한정 업그레이드하는 것만으로는 한계가 있음서버 한 대에 부하가 몰려서 문제 대응이 어려움장애에 대한 자동 복구(failover)나 다중화 (re-dundancy) 방안을 제시하지 않음 향후 사용량을 미리 추정하여 미리 고사양 서버를 확보하는 경우에실제 필요한 서버보다 과한 사양으로 확보하면 비용적 손실이 존재할 수 있음 스케일 아웃비슷한 사양의 장비를 추가해 수평으로 확.. 이전 1 2 3 4 ··· 13 다음 목록 더보기
