전체 글102 [React] React 반응형 레이아웃 사용하기 + Typescript React에서 미디어쿼리나 화면 사이즈에서 대해 바뀌는 화면을 구현하기 위해 react-responsive 라이브러리를 사용했다. https://www.npmjs.com/package/react-responsive react-responsive Media queries in react for responsive design. Latest version: 9.0.2, last published: 10 days ago. Start using react-responsive in your project by running `npm i react-responsive`. There are 1036 other projects in the npm registry using react-responsive. www.npm.. 2022. 12. 9. 16:57 [인프런 강의] zerocho Slack 클론 코딩 (11) - 로그인 페이지 만들기 [인프런 강의] zerocho Slack 클론 코딩 (11) - 로그인 페이지 만들기 이번 시간에는 로그인 페이지를 구현 하도록 한다. SPA상에서 태그를 사용하면 화면이 새로고침이 되는 문제가 발생한다. 따라서 React-router의 Link 태그를 사용하면 SPA가 유지된다. 로그인하는 컴포넌트를 다음과 같이 작성한다 /aleacture/Login/index.tsx import useInput from '@hooks/useInput'; import { Success, Form, Error, Label, Input, LinkContainer, Button, Header } from '@pages/SignUp/styles'; import fetcher from '@utils/fetcher'; impor.. 2022. 12. 9. 13:48 React-activate 사용 중 'decorators-legacy' 오류 문제 상황 개발 도중 캐시를 구현하기 위해 React-activate 라이브러리를 사용하던 도중 @withActivation 어노테이션을 추가하니 Support for the experimental syntax 'decorators-legacy' isn't currently enabled (33:1): 와 같은 에러가 발생하였다. 해결 방법 해결 한 방법은 다음과 같다. 1. package-json의 babel ["@babel/plugin-proposal-decorators", { "legacy": true }] 을 추가해준다. "babel": { "presets": [ "react-app" ], "plugins": [ "react-hot-loader/babel", ["@babel/plugin-propo.. 2022. 12. 8. 14:58 [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 이전 1 2 3 4 5 6 ··· 12 다음 728x90
