개발 공부 시리즈/Slack클론코딩11 [인프런 강의] 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 [인프런 강의] 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 [인프런 강의] zerocho Slack 클론 코딩 (9) - 커스텀 훅 만들기 이전 포스팅은 회원가입 페이지 만들기에 대해 포스팅하였다. 2022.10.24 - [개발 공부 시리즈/Slack클론코딩] - [인프런 강의] zerocho Slack 클론 코딩 (8) - 회원가입 페이지 만들기 이번 포스팅에서는 커스텀 훅을 만들어보겠다. ※ 이 포스팅은 zerocho님의 slack 클론 코딩 강좌를 따라 하면서 정리해놓은 포스팅입니다. 1. 중복 코드 제거하기 alecture/pages/SignUp/index.tsx const SignUp = () => { const [email, setEmail] = useState(''); const [nickname, setNickName] = useState(''); const [password, setPassword] = useState('').. 2022. 10. 26. 13:33 [인프런 강의] zerocho Slack 클론 코딩 (8) - 회원가입 페이지 만들기 이번 포스팅은 회원가입 페이지 만들기에 대해 포스팅하겠다. ※ 이 포스팅은 zerocho님의 slack 클론 코딩 강좌를 따라 하면서 정리해놓은 포스팅입니다. 1. 프로젝트 시작하기 - selact/back 폴더로 이동해 "npm run dev" 명령어로 백엔드 서버를 실행시켜 준상태에서 시작한다. 터미널을 새로 열고. leacture 폴더로 이동하여 frontend 코드도 실행한다. 이 강의는 HTML과 CSS의 설명은 중점으로 다루지 않는다. 2. index.html 링크 추가 슬랙 홈페이지에서 index.html 안에 있는 Link들을 가져와 추가한다. aleacture/index.html 이 태그들이 동작을 할 수도 있고 동작하지 않을 수도 있다. 동작하지 않는다면 슬랙 홈페이지에서 개발자 도구를.. 2022. 10. 24. 15:28 [인프런 강의] zerocho Slack 클론 코딩 (7) - 코드 스플리팅과 이모션 [인프런 강의] zerocho Slack 클론 코딩 (7) - 코드 스플리팅과 이모션 이번 포스팅은 코드 스플리팅과 이모션에 대해 포스팅하겠다. 기존 코드에서 한가지를 더 설정해야 하는데, SPA에서 하나의 자바스크립트 파일로 내보내게되면 그 모든 자바스크립트 파일을 첫 페이지에 한 번에 로딩하기 때문에 사용자 경험(UX)이 좋지 않다. 이럴 떄 코드 스플리팅을 통해 보이는 페이지는 먼저 불러오게 되고, 보이지 않는 컴포넌트들은 불러오지 않도록 설정할 수 있다. 코드 스플리팅 설정하기 1. 코드 스플리팅을 위한 패키지들을 설치한다. Loadable Component 를 설치해준다. npm install @loadable/component npm install --save-dev @types/loadabl.. 2022. 10. 20. 13:19 [인프런 강의] zerocho Slack 클론 코딩 (6) - 폴더 구조와 리액트 라우터 zerocho Slack 클론 코딩 (6) - 폴더 구조와 리액트 라우터 1. 폴더 구조 확인 및 설정확인 개발환경 세팅은 끝났고 이제 리액트 폴더 구조와 리액트 라우터를 배우도록 한다. 폴더구조는 자유이고 사람마다 다르지만, 강의에서는 다음과 같이 나눈다. //pages- 페이지의 진입점 //component - 리액트 작은 컴포넌트들 //layouts - 각 페이지들 간의 공통 레이아웃 현재 강의에서는 다음과 같은 폴더 구조로 이루어져있다. 이러한 폴더 구조는 webpack.config.ts 파일에서 다음과같이 설정할 수 있다. //webpack.config.ts const config: Configuration = { name: 'sleact', mode: isDevelopment ? 'develo.. 2022. 10. 19. 13:28 이전 1 2 다음 728x90
