IT/React30 [리액트] 원티드 프리온보딩 챌린지 갖고 있던 나쁜 코드 습관을 고치고 더욱 강해지고자 🏋️♀️ 원티드 프리온보딩 챌린지에 참가하게 되었다.참고로 프리온보딩 프론트엔드 코스와는 다른 코스이다. 더욱 자세한 정보를 원하신다면... 원티드에서 확인!사전과제로 Todo App을 제작하고, 이를 개선하는 것이 챌린지 첫 과제이다. (+ 타입스크립트도 적용해야 한다.)그리고, 첫 수업에서 배운 내용을 근거로 Todo App의 개선사항을 만들고, 개선 이유 등을 기록해야한다.나는 개선해야 할 사항이 아주 뚜렷한 편이었다.지금 확실히 눈에 띄는 게 두 가지 있는데, 계속 앱을 고치다가 다른 개선사항이 생기면 추가해야겠다 ㅎㅎ-개선 사항1. Todo를 삭제하거나 수정할 때, confirm 창이 존재하지 않음강사님이 예시로 엇! 저희 집 고양이가 모르.. 2022. 8. 11. [리액트] material-ui 템플릿으로 관리자 페이지 제작 - Material UI란? 리액트에서 바로 사용할 수 있는 기능과 디자인을 컴포넌트로 제공해주는 UI 프레임워크이다. 가이드라인을 따라 사용할 수도 있고, 사용자가 커스터마이징도 가능하다. - 깃허브 GitHub - mui/material-ui: MUI Core (formerly Material-UI) is the React UI library you always wanted. Follow your own design syst MUI Core (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design. - GitHub - mui/mate.. 2022. 6. 24. [리액트/윈도우] 원격으로 nodejs 설치 - 간단한 상황 설명.. ssh로 학교 서버(윈도우)에 있는 리액트를 실행하려 했다. 하지만 sudo 명령어도 안되고, choco도 안되길래 scoop으로 nodejs와 yarn을 설치하였다! - Powershell 관리자 모드 실행 Start-Process -FilePath "powershell" -Verb RunAs - (Scoop 설치를 위한) 보안 정책 설정 ‼️주의 사항: PowerShell execution policy is required to be one of: Unrestricted, RemoteSigned or ByPass Scoop를 설치하려면 PowerShell이 Unrestricted/RemoteSigned/ByPass 상태여야 한다. PowerShell에 적용된 보안정책 알아보는.. 2022. 5. 7. [리액트] VSCode 익스텐션 추천 - 모듈 크기 알아보기(Import Cost) 자동완성 익스텐션 글에 이어 또 다른 유용한 익스텐션을 들고 왔습니다! 리액트 VSCode 자동완성 익스텐션 추천 (Auto Import, Code snippets 등) 리액트를 공부하며 필요한 익스텐션을 정리해보았다. - Auto Import - ES6, TS, JSX, TSX Auto Import - ES6, TS, JSX, TSX - Visual Studio Marketplace Extension for Visual Studio Code - Automatically finds.. breathtaking-life.tistory.com - Import Cost import 하려는 모듈의 크기를 알아볼 수 있는 익스텐션이다. - 사용법 사용법은 아주 간단하다. 익스텐션 설치 후 다시 코드 파일로 돌아가 .. 2022. 3. 20. [리액트] 프론트 로그인 구현- JWT 이용 일반적으로 로그인에서 사용하는 토큰은 단순한 문자열이다. 따라서 발급된 토큰에 대해 만료를 시킬 수단이 없고, 관리할 수 있는 방법이 없다는 단점이 있다. 이를 보완하기 위해 JWT(Javascript Web Token)을 사용한다!! 참고) 여기서 클라이언트단은 리액트, 서버는 장고를 이용하였다. - 로그인 절차 (JWT) 이용 JWT 절차를 간단하게 설명하자면, - JWT에는 accessToken과 refreshToken이 존재하며, 유저 인증에 사용된다. 실질적인 인증 정보는 accessToken에 있지만, 일정 시간이 지나면 만료하는 구조를 갖는다. - refreshToken, accessToken을 클라이언트에 저장해둔다. 이때, refreshToken을 이용하면 로그인은 지속적으로 유지할 수 .. 2022. 3. 4. [리액트] axios 반환 값이 undefined일 때 해결법 장고 rest framework와 리액트를 이용하여 로그인 기능을 구현 중이다. 클라이언트에서 axios로 email과 password를 api 주소로 post하면 서버에서 회원 정보가 유효한지 아닌지 확인한다. services/AuthService.js에 로그인 로직을 생성하고, pages/Login.jsx에서 로그인 폼 제출 시 AuthService에 로직이 실행된다. - 문제점 (틀린 코드) [Login.jsx 실행 화면] [pages/Login.jsx] 이메일 형식이 맞다면(else문), requestLogin을 실행하고 반환값을 출력한다. [services/AuthService.js] email과 password가 post에 성공하였다면, 사용자 정보를 출력하고 리턴한다. [출력 결과] 하지만.. 2022. 2. 4. 이전 1 2 3 4 5 다음
