본문 바로가기

분류 전체보기89

코멘토 직무부트캠프 후기 : 프론트엔드 실무자와 개발하기 코멘토라는 사이트에서 실제 현직자를 멘토님으로 하여서 과제를 해결하고 피드백을 받을 수 있는 직무부트캠프를 진행해 보았습니다. 원래 5주차 프로그램 과정인데 과제가 4개밖에 없고, 비교적 난이도는 어렵지 않아서 저는 2일 만에 끝내버렸네요... 그런데 멘토님 피드백을 실제로 받아보니까 급하게 해서 그런가 틀린 부분이 많았습니다. 아래 내용은 실제 멘토님께서 저한테 주신 피드백 입니다. 경로 실수부터 해버렸네요 ㅋㅋㅋㅋ..... -------------------------------------------------------------------------------------------- 3번째 리뷰 진행해볼께요! 1️⃣ 상품이 로딩되지 않는 이슈 상품이 안보이는 이슈는, 이전 리뷰에서 말씀드린대로 실.. 2023. 3. 13.
4. 회원가입 페이지 (Client -> 프론트엔드) RegisterPage 폴더 안에 RegisterPage.js를 생성 후 만들었습니다. import React from 'react'; import {Formik} from 'formik'; import * as Yup from 'yup'; import {Form, Input, Button} from 'antd'; function RegisterPage(){ return( Sign up Submit ) } export default RegisterPage; Formik : React Native에서 컴포넌트들을 빌드하기 위한 React 구성 요소 및 Hook들의 작은 그룹 Yup: 스키마의 유효성 검증 라이브러리 Antd: 디자인 라이브러리 (여기에서는 Form, Input, Button 을 사용함) 2023. 2. 22.
3. Index.js (프론트엔드 시작지점) import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); React-Dom : React의 순수 자바스크립트와 다른 문법으로 짜여진 코드를 Babel 를 통하여 변환한 후, HTML 문서와 연결하는 역할을 수행 렌더링 const root = ReactDOM.createRoot(document.getElementById('root')); div id = 'root' 인 index.html에 렌더링할 부분을 생성 r.. 2023. 2. 22.
2. App.js 설정 -> React-router-dom App.js가 가장 먼저 실행 될때, App.js를 다른 js파일들을 연결시키는 Router 개념으로 사용한다. npm install react-router-dom react-router-dom : 브라우저에서 사용되는 리엑트 라우터 BrowserRouter - history API를 사용해 URL과 UI를 동기화하는 라우터입니다. Route - 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링한다. Link - 'a'태그와 비슷합니다. to속성에 설정된 링크로 이동합니다. 기록이 history스택에 저장됩니다. Switch - 자식 컴포넌트 Route또는 Redirect중 매치되는 첫 번째 요소를 렌더링합니다. Switch를 사용하면 BrowserRouter만 사.. 2023. 2. 22.
728x90