분류 전체보기 (377) 썸네일형 리스트형 [삽질기록] iOS Safari에서 토스페이먼츠 카드 등록창 닫으면 앱이 종료되는 현상 🚨 문제 상황토스페이먼츠 빌링(정기결제) 연동 작업 중이었다. 사용자가 구독을 시작하려면 먼저 카드를 등록해야 하는데, 이때 토스페이먼츠의 빌링 카드 등록창을 모달 형태로 띄우는 흐름이었다. iOS Safari에서 카드 등록 버튼을 누르면 토스 결제창이 정상적으로 떴다. 그런데 결제창을 닫는 순간(뒤로가기나 닫기 버튼), 원래 화면으로 돌아오는 게 아니라 Safari 앱이 통째로 종료되는 현상이 발생했다. 다른 브라우저에서는 모두 정상적으로 원래 화면으로 복귀했고, 이 증상은 iOS Safari에서만 재현됐다. 흐름은 이렇다.구독 관리 페이지 → 카드 등록 클릭 → 토스 결제창 진입 (cross-origin) → 결제창 닫기 → (다른 브라우저) 원래 화면 복귀 ✅ .. [DND] DND 14기 프로젝트 회고 DND 동아리 활동이 끝나고 꽤 시간이 지났다. 끝난 직후에 취업을 하게 되면서 정신없이 지내다 보니 이제야 회고를 쓰게 되었다.. 이 프로젝트는 나한테 기술적으로 정말 많이 성장한 프로젝트라서 기록으로 남겨두고 싶었다. 프로젝트 소개찍어줄게는 혼자 여행 가거나 혼자 나들이 갔을 때 사진 찍어줄 사람이 없는 사람들을 위한 실시간 매칭 플랫폼이다. 사진을 찍어주고 싶은 사람과 찍어달라는 사람을 연결해주고, 실시간 매칭과 동행 예약 두 가지 방식 모두 제공한다. https://github.com/dnd-side-project/dnd-14th-3-frontend GitHub - dnd-side-project/dnd-14th-3-frontend: 📸 사진 촬영 매칭 플랫폼, 찍어줄게📸 사진 촬영 매칭 플랫.. [프론트엔드 기술면접] (3) Javascript (비동기, 이벤트 루프, Promise, Closure 등) ★ 개수는 실제 면접에서 질문을 받았던 횟수입니다. 비동기비동기가 무엇인가요? ★동기 방식은 작업이 순차적으로 진행되는 방식이고, 하나의 작업이 완료될 때까지 프로그램이 멈춰서 결과를 기다립니다. 비동기 방식은 시간이 걸리는 작업을 요청한 후 그 결과를 기다리지 않고 다음 작업을 계속 수행하는 방식입니다. 비동기 처리를 왜 하는지 예를 들어서 설명해주세요웹사이트에서는 사용자와 상호작용하는 동안 API 호출이나 이미지 로드 같이 긴 작업을 처리해야 할 때가 많습니다. 비동기를 사용하면 이러한 작업이 진행되는 동안 로딩 스피너를 보여주거나, 다른 ui를 조작하는 것이 가능해져서 사용자 경험이 개선되고, 효율적으로 작업을 처리할 수 있습니다.이벤트 루프이벤트 루프에 대해 설명해주세요. ★★이벤트 루프는 자바스.. [FastAPI] SQLAlchemy와 Alembic으로 데이터베이스 관리하기 SQLAlchemy ORM 라이브러리 사용하기ORM(object relational mapping)을 이용하면 쿼리를 직접 작성하지 않아도 파이썬 문법만으로 데이터베이스를 다룰 수 있다. 파이썬 ORM 라이브러리 중 가장 많이 사용하는 SQLAlchemy를 사용해 보자. SQLAlchemy 설치poetry를 사용중인 경우 다음 명령어로 설치한다.poetry add sqlalchemy 데이터베이스 설정파일 추가database.py에 설정파일을 추가한다.from sqlalchemy import create_enginefrom sqlalchemy.ext.declarative import declarative_basefrom sqlalchemy.orm import sessionmakerSQLALCHEMY_DAT.. [FastAPI] CORS 에러 해결하기 CORS 설정을 해주지 않으면 이러한 에러가 뜬다. CORS 정책에 의해 요청이 거부되었다는 말이다. 즉, 프론트엔드에서 FastAPI 백엔드 서버로 호출이 불가능한 상황이다. 이 오류는 FastAPI에 CORS 예외 URL을 등록하여 해결할 수 있다. main.py에 다음 코드를 추가해주면 된다.from starlette.middleware.cors import CORSMiddlewareorigins = [ "프론트 주소",]app.add_middleware( CORSMiddleware, allow_origins=origins, allow_credentials=True, allow_methods=["*"], allow_headers=["*"],) [FastAPI] Poetry로 FastAPI 개발 환경 구축하기 Python 설치Python이 설치되어있지 않다면 다음 사이트에서 다운로드 받기!https://www.python.org/downloads/ Poetry 설치Poetry는 Python 프로젝트의 의존성 관리와 가상환경 설정을 간편하게 해주는 도구이다. 다음 명령어를 통해 Poetry를 설치한다.curl -sSL https://install.python-poetry.org | python3 - * Mac인 경우 brew가 설치되어있을 때 brew를 통해 간편하게 설치하는 것이 가능하다.brew install poetry Poetry 설정프로젝트를 시작하고자 하는 경로에서 다음 명령어를 실행한다.poetry init 의존성 관리 파일인 pyproject.toml을 생성하기 위한 정보를 입력하고, pyproj.. [프론트엔드 기술면접] (2) React (Virtual DOM, 생명주기, 성능 최적화 등) ★ 개수는 실제 면접에서 질문을 받았던 횟수입니다. Virtual DomVirtual DOM의 개념에 대해 설명하세요. ★★Virtual DOM은 웹 어플리케이션의 상태가 변경되면, 객체 형태의 가상 DOM을 통해 변경된 부분만 찾아내서 이를 실제 DOM에 적용하는 기능을 합니다. Virtual DOM의 동작 순서는 크게 Diffing과 Reconiliation으로 구분할 수 있는데, Diffing은 Virtual DOM에서 변경점을 찾아내는 과정이고, Reconciliation은 찾아낸 변경점을 실제 DOM에 적용하는 과정입니다. Virtual DOM이 동작하는 예시를 간략히 설명해주세요.처음 렌더링 될 때, 어플리케이션의 초기 상태를 담은 Virtual DOM을 메모리 상에 하나 생성하고 state.. [프론트엔드 기술면접] (1) 브라우저 렌더링 ★ 개수는 실제 면접에서 질문을 받았던 횟수입니다. 브라우저 렌더링 원리에 대해 설명해주세요. ★★★먼저 서버로부터 HTML 문서를 전달받으면, 브라우저 엔진은 위에서 아래로 순차적으로 파싱하며 태그와 속성을 발견합니다. 이 태그와 속성들은 트리 형태로 변환되어 메모리에 저장되는데, 이걸 DOM 트리라고 합니다. HTML 파싱 중 CSS 링크나 스타일 태그를 만나면 이를 파싱하여 CSSOM 트리로 변환합니다. 문서의 파싱이 완료되면, DOM과 CSSOM 트리를 결합해서 렌더 트리를 생성합니다. 렌더 트리는 브라우저 상에서 요소의 위치와 크기를 결정하는 리플로우 과정을 거치고, 그 다음에 요소의 색상이나 경계선과 같은 시각적 요소를 그리는 페인팅 과정이 진행됩니다. HTML 파싱 중간에 script 태그.. 이전 1 2 3 4 ··· 48 다음
