본문 바로가기

분류 전체보기45

[RN] - 기본 컴포넌트 구조 알아보기 앱 개발은 처음인지라, A to Z부터 공부가 필요했다.그 중에서도 가장 생소했던 부분을 고르라면 웹과는 다른 리액트 네이티브 전용의 앱 컴포넌트가 그랬다.웹과 같은 경우에는 사실 기능 자체로는 div로만 구성해도 구현할 수 있지만, RN 앱에서는 태그 내에서가 아니라면 글이 작성되지 않았다. 또한 웹 표준화처럼 웹 페이지 구조를 명확하게 구분하는 것 같았다. 1. 기본적인 리액트 네이티브 구조와 태그 html에서 가장 기본적으로 많이 쓰이는 태그라고 한다면, 개인적으로는 div일 것 같다. 물론 리액트 네이티브에서도 div같은 개념이 존재한다. 바로 태그인데, 다만 차이점이라면 div와는 달리 없이 글씨가 써지지 않는다. 더하여 스크롤도 되지 않는다.스크롤 기능을 구현 하고 싶다면 태그를 사용하면.. 2025. 7. 3.
[RN] - Expo로 개발 설정하기 이번에 진행하고 있는 프로젝트는 반응형 웹이 아닌 대신에 앱을 따로 만들어서 진행하려고 처음부터 기획했다. 때문에 처음이지만 앱 개발에 도전 해보려고 한다.사실 리액트 네이티브를 쓰기에 앞서 Flutter가 더 각광 받고 있는 것을 알았지만, 리액트를 쓸 줄 알기 때문에 불필요한 러닝 커브를 줄일 수 있을 것 같아 리액트 네이티브로 개발을 결정했다. 역시 처음 공부 할 땐 공식문서를 확인 하는 것이 좋은 것 같다. 리액트 네이티브는 Expo라는 프레임워크를 같이 사용하는 것을 추천하고 있었다. 현재 내 개발 상황을 설명하자면 Mac OS에 IPhone을 사용 할 예정이다.0. Expo란?Expo 공식문서에 들어가보니 스스로를 이렇게 설명하고 있었다.파일 기반 라우팅, 네이티브 모듈의 표준 라이브러리 등.. 2025. 6. 5.
[BueaFit] - Auth 인증 관리 3 저번 포스팅에서는 쿠키 보안 정책 때문에 쿠키를 사용 할 수 없어서 세션 스토리지를 사용했었다.하지만 이번에 SSL(HTTPS)이 추가 되면서 요청과 도메인이 같은 url이 아니어도 쿠키를 전달 할 수 있게 되어 다시 쿠키로 인증 관리를 하는 방법으로 전환했다. const login = async () => { try{ const response = await fetch(`${process.env.NEXT_PUBLIC_BUEAFIT_API}/auth/login`, { method: "POST", credentials: "include", headers: { "Content-Type": "applicatio.. 2025. 6. 1.
[BueaFit] - next 로그인 인증 관리하기2 - api multiple request 2025.05.02 - [Develope/PROJECTS] - [BueaFit] - next에서 로그인 인증 관리하기 [BueaFit] - next에서 로그인 인증 관리하기로그인이 성공하면 미들웨어에서 refresh token을 쿠키에 저장하여 aceess token이 없거나 만료 되었을 때 refresh token으로 재인증하는 방식을 구현 중, 쿠키에 refresh token이 있어도 api서버에 전달되지 않deer-develope-diary.tistory.com 저번에 쿠키 보안 정책에 의해 api와 배포 된 url이 서로 일치하지 않으면 저장되지 않고 새로고침하면 사라지는 것을 확인했다.그래서 api를 route 시키고 토큰 갱신하는 페이지를 따로 만들어서 완료했었다.근데 여기서 문제가 또 발생했.. 2025. 5. 23.
[BueaFit] - next에서 로그인 인증 관리하기 로그인이 성공하면 미들웨어에서 refresh token을 쿠키에 저장하여 aceess token이 없거나 만료 되었을 때 refresh token으로 재인증하는 방식을 구현 중, 쿠키에 refresh token이 있어도 api서버에 전달되지 않는 에러가 발생했다. 0. 문제 상황리프레시 토큰이 있고, 액세스 토큰이 없으면 로그인 화면으로 redirect 되어 refresh token이 갱신되지 않고 있었다. 1. 문제 확인리프레시 요청: Response { [Symbol(state)]: { aborted: false, rangeRequested: false, timingAllowPassed: false, requestIncludesCredentials: false, type: 'default'.. 2025. 5. 2.
[Next.js] - 쿠키에 있는 refresh token이 사라질 때 이번에 마주한 에러는 진짜 재밌는? 상황의 연속이었다.일단 과정은 이렇다. (앞은 쫌 주저리라 제가 해결한 방법이 궁금하시면 결론만 보세요. 근데 허무하실수도...) 당초 내가 구현하려 했던 기능은 로그인 후 미들웨어를 통해 로그인 체크 후, 로그인이 되어 있지 않으면 login 페이지로 redirect 시키고, 로그인이 확인되면 유저에게 저장된 정보를 보여주기를 원했다. 그래서 아래 처럼 개발 과정을 상상했다.1. 로그인 기능 구현일단 이번 프로젝트 로그인은 JWT를 이용한 로그인 방법으로, 로그인이 성공하면 쿠키에 refresh token이 저장된다.2. 미들웨어 설정저번에도 JWT 프로젝트를 통해 로그인 기능을 구현 했었지만, 그때는 api 통신을 바로 해서 user 정보를 가져와 해당 유저 정보가.. 2025. 4. 22.