개발 공부 시리즈24 [인프런 강의] 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-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] Typescript todoList 만들기 (6) - webpack 적용해보기 [RTK] Typescript todoList 만들기 (6) - webpack 적용해보기 webpack? 웹팩은 여러 가지 자원(.html ,.css,.js )의 파일을 단 하나의. js 파일로 모듈 번들링 시켜주는 도구이다. 내가 적용한 TodoApp에 webpack을 적용시켜보겠다. 아래는 웹팩 공식 문서 사이트 링크이다. https://webpack.js.org/ webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any reso.. 2022. 11. 2. 01:32 [RTK] Typescript todoList 만들기 (5) - eslint, prettier 적용해보기- 2 이전 포스팅에 이어서 적용을 해보겠다. 다음과 같은 eslint 실행 명령어로 실행을 해보면 npm eslint . 다음과 같이 굉장히 많은 에러 사항들이 뜨게 된다. 이를 하나하나 제거해가며 진행해 보자. ESLint에서 설정된 규칙들은 굉장히 엄격한 것들도 있어서. .eslintrc 파일의 "rule" 부분에 예외들을 추가해나가면서 작성해야 한다. .eslintrc { "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint"], "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "airbnb-typescript", "airbnb" ], "pars.. 2022. 11. 1. 12:03 이전 1 2 3 4 다음 728x90
