본문 바로가기

전체 글99

[Next.js] CORS 오류 해결방법, Next proxy 설정 Next를 사용하여 외부 Open API를 연동하려 하였더니 CORS 오류가 났다. CRA 환경에선 package.json 에서 proxy 설정만 하면 해결되었던 문제였는데 Next 환경에서는 어떻게 해결해야하는 지 몰랐다. 그래서 찾아보고 오류를 해결해 본 방법들을 기록해보려 한다. 오류 내용 Access to XMLHttpRequest at [OPEN API URL] from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 2022.10.08 - [개발/네트워크] - [NetWork] CORS(Cr.. 2022. 11. 30. 17:30
[Jenkins] GitLab webhook 등록 시, Hook executed successfully but returned HTTP 403 Error 및 webhook 등록 방법 Hook executed successfully but returned HTTP 403 Error 오류 오류 상황 GitLab과 Jenkins 연동 시 다음 이미지와 같이 Hook executed successfully but returned HTTP 403 Error 가 발생하였다. Git push 이후 Jenkins를 자동으로 빌드시켜주는 webhook 등록을 하려 하였는데, 이를 등록하고, 테스트를 해보는데 아래와 같은 오류가 지속적으로 발생되었다. 맨 처음 Webhooks를 등록할때 url에 어떤 값을 넣어야 하고 Secret token은 Jenkins에서 어디에서 생성해서 입력해야 하는지 를 알지 못하였다. 위의 오류는 내가 Jenkins에 URL을 제대로 등록해주지 않아 발생한 오류였다. Je.. 2022. 11. 23. 16:09
Jenkins와 CI/CD 최근 서비스를 빌드하는 데 대해서 많은 고민을 한 것 같다. 처음으로 빌드 자동화 도구인 Jenkins를 알아보며, 회사 프로젝트 내에서 기존 빌드 구축 방법과 달리 도입해보려는 시도도 하려 한다. 그래서 나도 개인적으로 스터디가 필요하여 이론 -> 실습 순으로 정리해보려 한다. 우선 Jenkins 공식 홈페이지에 대한 내용을 정리해보려 한다. Jenkins는 아래의 홈페이지로 접속할 수 있다. https://www.jenkins.io/ Jenkins We are excited to announce the 2022 Jenkins Governance Board elections! The nomination and voter registration period is now open. Nominations c.. 2022. 11. 23. 01:57
Next + RTK + Typescript 개발 환경 설정하기 Next + RTK + Typescript 개발 환경 설정 Next.js 와 RTK를 연동하여 사이드 프로젝트를 하려 하는데 레퍼런스들이 좀 각자 개별로 달라서 내가 따로 정리해보려고 포스팅을 적는다. Next.js , Redux Next.js는 서버에서 서버사이드 렌더링을 하기 위한 라이브러리이기 때문에 서버에서 돌아가지만, Redux는 클라이언트(브라우저) 전역 상태 라이브러리기 때문에 브라우저 상에서 동작하게 된다. 원래 리액트 앱에서 리덕스를 사용하게 되면 단 하나의 리덕스 스토어만 존재하게 되지만, Next를 사용하게 되면 리덕스 스토어가 여러개가 생기는 문제가 생긴다. 그래서 Next와 redux를 같이 사용하려면 next-redux-wrapper 라이브러리를 사용해야한다. https://gi.. 2022. 11. 18. 01:45
GraphQL이 무엇일까? 최근 GraphQL이라는 키워드를 많이 보게 되었다. 그리고 문득 궁금증이 생겼다. 과연 GraphQL이 무엇일까? [GraphQL 공식 홈페이지] https://graphql-kr.github.io/ GraphQL: API를 위한 쿼리 언어 GraphQL은 API에 있는 데이터에 대한 완벽하고 이해하기 쉬운 설명을 제공하고 클라이언트에게 필요한 것을 정확하게 요청할 수 있는 기능을 제공하며 시간이 지남에 따라 API를 쉽게 진화시키고 graphql-kr.github.io GraphQL? GraphQL(Graph Query Language)의 약자이다. GraphQL이란 페이스북에서 개발한 쿼리 언어이다. Server API를 구성할 때 사용된다. 우리는 보통 REST API를 많이 사용하는 것처럼 Gr.. 2022. 11. 11. 15:42
안드로이드 스튜디오 다운로드 및 환경 설정 React-Native로 개발할 때 두 가지 방법이 있다. 1. 실행 시 vsCode를 이용해 QR 코드를 찍고, 자신의 모바일에 EXPO 앱을 다운로드하여 실행하는 방법. 2. Android Studio를 이용해 개발하는 방법 이번 포스팅은 안드로이드 스튜디오를 이용해서 React-Native를 세팅하는 방법을 포스팅 할 것이다. https://developer.android.com/studio Download Android Studio & App Tools - Android Developers Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Dow.. 2022. 11. 8. 16:30
[RTK] RTK-Query 공식문서보며 직접 사용해보기 RTK-Query 공식문서 보며 직접 사용해보기 RTK 공식문서에 있는 Query 예제를 따라 해 보면서 실습하겠다. 나는 빠른 진행을위해 타입 스크립트 rtk 템플릿을 다운로드하였다. // Redux + TypeScript template // 가운데 rtk-ts는 자신이 생성할 프로젝트 명이다. npx create-react-app rtk-ts --template redux-typescript 1. createApi 작성 /src 폴더 하위에 service 폴더를 만들고 pokemon.ts 파일을 생성한다. 생성 후 아래와 같이 작성한다. /src/service/pokemon.ts //pokemon.ts import { createApi , fetchBaseQuery } from '@reduxjs/t.. 2022. 11. 7. 18:05
[인프런 강의] zerocho Slack 클론 코딩 (10) - axios로 요청보내기 CORS, proxy zerocho Slack 클론 코딩 (10) - axios로 요청 보내기 CORS, proxy 저번 포스팅에서는 커스텀 훅을 만들어 보았고, 이번 포스팅에서는 axois 요청 및 CORS, proxy에 대해 공부한다. 현재는 리덕스를 사용하지 않기때문에 비동기 요청 로직을 굳이 컴포넌트 밖으로 빼낼 필요가 없다. 회원가입 페이지라면 회원의 정보를 넘기는 비동기 요청을 그냥 회원가입 컴포넌트 내에 작성하는 것이 더 깔끔할 수 있다. 1. axios 설치하기 및 설정 npm i axios axios를 현재 작업중인 프론트 코드에 설치해 준다. alecture/signUp/index.tsx 에 axios 를 import 시켜준다. //axios 추가 import axios from 'axios'; 프론트엔드 .. 2022. 11. 6. 16:52
[RTK] RTK-Query? RTK Query? RTK Query는 데이터를 fetching, caching을 할 수 있는 툴이다. 웹에서 데이터를 가져오는 것을 간단하게 만들어 데이터 패치(가져오기)와 캐싱 로직을 작성할 필요가 없어지게 한다. RTK-Query는 Redux-Toolkit 패키지에 포함되어있는 선택적인 추가 기능이다. 웹 애플리케이션은 일반적으로 서버에서 데이터를 가져오게되고, 데이터 업데이트 및 클라이언트의 캐시 된 데이터를 서버 데이터와 동기화된 상태로 유지해야 한다. RTK-Query는 Apollo Client, React Query, Urql 및 SWR과 같이 데이터 가져오기를 위한 선구적인 솔루션 제공 및 API 디자인에 고유한 접근 방식을 추가한다. RTK Query 특징 - 데이터 패칭(가져오기) 및 .. 2022. 11. 5. 17:37
728x90

티스토리툴바