결제하기기능도 본인인증과 비슷한 플로우다.결제버튼클릭으로 결제창열기 -> 결제하고 완료되면, 결과값과함께 return url로 이동 -> return url에서 부모창으로 결과값전달 -> 부모창에서 로직처리우선 Head에 script를 붙여준다. 결제를 완료하려면 다음

카카오 디벨로퍼스에서 애플리케이션을 추가하고,로컬주소와 배포주소 도메인을 넣는다. head안에 스크립트로 카카오sdk를 추가해준다.이제 JavaScript 키를 이용해서 initialize를 해주어야한다.클라이언트단의 상위컴포넌트에 다음과같이 입력해준다 (레이아웃등)그

✅ 전체 흐름 요약 프론트에서 버튼 클릭 → 백엔드로 요청 (encdata, integrityvalue 받기) 프론트가 받은 값으로 생성 후 submit → NICE 인증창 열림 사용자가 인증을 마치면 → NICE가 우리 백엔드에 결과를 POST로 전송 백엔드가

안녕하세요 프론트엔드 개발자 김소현입니다 :)스위프(SWYP) 8기에 참여하여 서비스를 출시하고, 오늘은 그 6주간의 회고를 진행해보려고 합니다!기간 : 2025.01~2025.03 인원 : PM 1명, Design 1명, Front 2명, Backend 2명주제 :

Suspense 적용 위치가 잘못되었을 가능성 Suspense가 useSearchParams를 사용하는 페이지에서만 감싸져 있다면, 다른 페이지나 컴포넌트에서 useSearchParams를 사용할 때 제대로 처리되지 않아 오류가 발생할 수 있다. 예를 들어, useSe

  : ' ' 공백(스페이스 한 칸)을 의미 < : 부등호() & : & " : 쌍따옴표(“) # : sharp(#) ' : 따옴표(‘) ( : 왼쪽 괄호 ( ) : 오른쪽 괄호 )

프론트에서 드래그 라이브러리로 아마 대부분 react-beautiful-dnd를 사용하고 있었을것이다.나또한그랬다.그런데 어느순간부터 Unable to find draggable with id: x 의 문구가 뜨기 시작했다. 검색해보니 dnd 라이브러리에서 자주 일어나

이때까지 react 프로젝트를 간단하게 설치하기위해 CRA를 사용해왔었다.그런데 최근 사용하려고보니 testing-library/react와 react 19버전이 불일치하는것 외에도 reportvitals.ts인식이 안되는 등 많은 오류가 있었다.고치면 되긴했으나 근본

안녕하세요 프론트엔드 개발자 김소현입니다 :)스위프(SWYP) 7기에 참여하여 서비스를 출시하고, 오늘은 그 6주간의 회고를 진행해보려고 합니다!저또한 처음 신청하기전에 구글에서 후기를 엄청 찾아봤기때문에, 다음 기수분들이 후기를 찾아본다고 생각하고 어떻게 진행되는지

웹으로 테스트 계속 앱으로 테스트를 하니 바로바로 변경되는걸 보기 힘들어졌다. 개발은 컴퓨터로하는데 보는건 앱으로 봐야하니,, 그래서 웹으로 보는방법을 알아보았다. npm start 를 입력해 앱이 켜져있는 상태에서, w 를 터미널에 입력해보면 다음과같이 뜬다. 그

다음 명령어를 터미널에 입력하여 Expo App 개발에 필요한 패키지를 설치한다.npm i -g expo-cli이후 설치가 잘되었는지 확인하자.이후 expo에 로그인을 해준다.계정이 없는 경우 Expo Web Site에서 가입하거나, expo register 해주면 된

외주만 돌리는 프리랜서로 산지 어언 1년,, 이제는 다시 취업이 하고싶어졌습니다.항상 실무위주로 돌려서 몰랐었는데 개발자들은 보통 깃허브 주소를 포트폴리오로 내니까 한번 둘러보게되었는데 다른분들 깃헙을 보니 본업말고도 사이드플젝이 넘넘 많은것임...저는 왜 본업만 했는

왜 디자인 시스템이 필요할까? 디자이너가 바뀌거나 하면서 디자인 파편화가 일어나므로 이를 방지하기위함이다. (각기다른 디자인과 색상등) 1.타겟설정 회사, 사용자, 만드는사람(개발자,디자이너) 2.타겟이 겪는 문제발굴 3.액션 아이템 설정 4.각 타겟에 맞는 목표설

빠져드는 기획의 필수요소 1. 어려운 이야기는 개념정리부터 하고 시작 비개발자가 보아도 이해가 쉬운것 2. 우리가 마주한 문제를 이미지와 그림으로 표시하자. 이미지와 그림은 누구나 만들기 쉽고 이해하기 쉬운 수준으로 제작하자.  3. 문제점 인지 후 해결방안으로

바퀴를 재발명 하지말자. 이미 선배들이 오랜시간 노력해서 만든 성과들이있다면 거인의 어깨에 올라타 적절히 사용하는것이 좋다. 오픈소스 깃허브 오픈api 디자인으로치면 중요한 BI 로고 정도만 직접디자인하고, 아이콘 등 중요하지않은건 이미 만들어진것을 가져다쓰자. 개

Next14버전으로 위치 기반 서비스를 개발하고있는도중 네이버크레딧이 나온다해서 네이버지도를 사용하기로 했습니다.크레딧이 안나와도 대표계정 1개는 무료니 걱정하지마세요! ( 저도 일단 개인계정으로 개발중 )나중에 까먹을까봐 적어놓는 일기라고 생각하면되고 저처럼 완전 네

✍ 프로젝트 소개 >기간 : 2024.09~2024.10 인원 : PM 1명, Design 1명, Front 2명, Backend 1명 주제 : 친구들과 함께하는 1일1다짐 두더지(Do Does Did) 프론트 스택 : react, typescript, tanstac

프론트엔드 아키텍처 중 하나.FSD는 앱을 기능단위로 분할하고, 각 기능을 독립적으로 개발,테스트,유지보수 할 수 있도록 하는것이 목표이다. 기능중심설계 : 기능단위로 구성계층화 : 코드를 여러계층으로 구분하여관리 (통일성) 단방향의존성 : 상위계층은 하위계층에만 의존

storybook이란? storybook은 'UI'를 테스트하는 도구로, '동작'을 테스트하는 jest cypress와는 다르다. 쉽게말하면 api명세서처럼 ui를 명세화 하여 디자이너와 다른 프론트엔드 개발자와의 협업을 원활하게 도와준다. 아래 그림을 보며 설명을

버셀은 무료버전은 개인 연습용 프로젝트만 지원하기때문에, organization 레포지토리는 무료버전으로 배포할 수 없다.그런데 사이드프로젝트같은것을 하다보면 organization으로 팀을 결속하여 다같이 소스를 공유하기때문에 연습용인데도 불구하고 무료버전을 사용하지