🤍회원가입 만들기 회원가입에는 전에 만들어둔 register.js를 활용할 것이다. 이 화면을 회원가입으로 바꿔보도록 한다. 로그인 화면과 거의 유사하다. onChange 이벤트도 로그인과 거의 유사한데, 한 가지 추가된 것은 비밀번호 확인 이벤트이다. 비밀번호와 비밀번호 확인에 입력한 내용이 같아야 하기 때문이다. const onSubmitHandler = (event) => { event.preventDefault(); if (Password !== ConfirmPassword) { return alert('비밀번호와 비밀번호 확인은 같아야 합니다.') } types.js 에 REGISTER_USER 타입을 추가해 주고 export const REGISTER_USER = "register_user";..
현재 Boiler Plate는 로그인과 회원가입 부분을 Formik과 Yupdlfk이라는 라이브러리를 사용하여 좀더 복잡하게 만들었으나 기본강의이기 때문에 기본 기능만 가진 로그인 페이지를 만들어 보도록 한다. 로그인 이메일 비밀번호 확인 1. 로그인 화면 생성 앞서 언급했던 props, state 중에서 로그인 화면 안에서 데이터 변경 시에는 state에 변화를 주어서 data의 변화를 줄 수 있음. 2. React Hook에서 state 만들 때에는 useState를 사용한다. const [Email, setEmail] = useState("") const [Password, setPassword] = useState("") initialState는 처음 값이 어떻게 되는지 설정하는 것이라 "" 빈칸..
🔍리덕스(Redux)란? state 상태 관리 library 리덕스는 자바스크립트 app을 위한 예측 가능한 (predictable) state container 이다. 리액트뿐만 아니라 Angular, jQuery, vanila JavaScript 등 다양한 framework와 작동되게 설계되었다. 즉, 리액트만을 위한 Library는 아니다. 🔍리액트에 리덕스가 필요한 이유? 리액트로 프로젝트 진행 시 Component 는 local state를 가지게 되고, 어플리케이션은 global state를 가지게 된다. ✅local state : 각각의 Component가 가지는 state. ✅global state : 어플리케이션 전체에서 global state는 유지, 즉 local state는 glob..
✅교차 출처 리소스 공유(CORS) 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에서 알려주는 체제 웹 애플리케이션은 리소스가 자신의 출처와 다를 때 교차 출처 HTTP 요청을 실행한다. 하지만 보안상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다. 이렇게 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다. server: 3000번, client: 3000번 / 같은 port끼리 request를 보내는 것은 문제가 없지만 server: 5000번, client: 3000번 / 이렇게 서로 다른 port끼리 정보 교환이 있을 때 내가 알지 못하는 port에서 일방적으로..
대략적인 구조 설명 🤍Boiler - Plate에 맞게 구조를 변경해 보도록 한다. 1. src 아래에 _action / _reducers / components / hoc / utils 폴더 생성 _action / _reducers : Redux를 위한 폴더들 components/views : Page를 넣을 폴더 2. components/views 폴더에 각각의 폴더, 파일 생성 파일 안에는 rfce 단축키로 간단한 함수를 추가해 주었다. import React from 'react' function Footer() { return ( Footer ) } export default Footer 🤍React Router Dom React에서는 페이지 이동 시 React Router Dom 이라는 것을 ..
🔍React란? 리액트(React)는 웹 프레임워크로 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. facebook에서 제공해주는 프론트앤드 라이브러리라고 볼 수 있다. 싱글 페이지 애플리케이션, 모바일 애플리케이션 개발 시 토대로 사용될 수 있다. 결론: 현재 많이 활용되고 있는 웹&앱의 View를 개발하는 데에 도움을 주는 인기있는 라이브러리! 🔍React 특징 1. Data Flow : 데이터가 단방향 흐름을 가짐. 2. Component 기반 구조 : 독립적인 단위의 소프트웨어 모듈. React는 하나의 UI를 여러 컴포넌트를 쪼개어 만듦. 3. Virtual Dom 4. Props and State 5. JSX 🔍Real Dom vs Virtual Dom Real ..
🤍Mongoose에서 Schema, Model이란? 오라클, mysql과 달리 MongoDB에는 테이블이 없다고 한다. Schema는 이로 인한 헷갈림을 방지하기 위해 도입되었다. 사용자가 작성한 Schema를 기준으로 데이터를 DB에 넣기 전에 먼저 검사하고 어긋나는 데이터가 있으면 에러를 발생시킨다. 스키마를 설정할 때 인덱스도 걸어둘 수 있고 기본값도 설정할 수 있다. 즉, 스키마=테이블과 어느 정도 비슷한 역할을 한다. Model은 Schema를 감싸주는 역할을 한다. MongoDB는 고정적인 스키마를 갖고 있지 않지만, 이번 3강에서는 데이터베이스 서버가 아니라 우리의 웹서버가 데이터베이스에 들어있는 문서들을 객체화하여 사용할 수 있는 스키마를 설정해 봅니다. 🤍스키마 스키마는 해당 컬렉션의 문..
이번 2강에서는 저번에 만든 앱에 MongoDB를 연결하는 실습을 진행했습니다. 🤍MongoDB Cluster 생성 1.MongoDB 홈페이지에 접속 2. 회원가입을 해줍니다. 3. Free로 선택해 줍니다. 4. aws, 가장 가까운 도시(필리핀)으로 선택하고 create해주면 끝. 5. Connect your application 선택 6. application code를 복사해 옵니다. 🤍monoose 설치 & MongoDB 연결 npm install monoose --save 명령어를 입력해 주면 package.json dependencies에 "monoose"가 추가된다는데... 나는 아래와 같이 뜨고 ㅠㅠ추가가 되지 않는다...그래서 설치가 된 건지 안 된 건지 모르겠다... 2시간 째 삽질 ..