본문 바로가기

내마음대로만들어보자/React 프로젝트 만들기 이해20

[React] 자바스크립트 - 기본(변수,상수,자료형) 1. 변수와 상수 * 변수 생성의 3단계 : 선언 → 초기화 → 할당 - 선언 : 실행 컨텍스트에 변수 객체를 등록 - 초기화 : 변수 객체에 등록된 변수를 위해 메모리에 공간을 확보 - 할당 : 초기화된 변수에 실제 값을 할당 예르들어, var a = 2; var : 선언 a = 2 : 할당 * 종류 1) var - 가급적 사용하지 않는게 좋다. - 블록스코프가 아닌 함수 수준 스코프를 가진다. (스코프란 이변수를 어디까지 사용할수 있는지 , 범위라고 보면된다.) - 선언과 초기화를 한번에 한다. - 재선언이 가능하다. - 선언하기 전에도 사용할 수 있다. // var는 이런 식의 사용도 가능합니다. // var name은 선언! name = "perl"은 할당! function cat(){ name .. 2021. 11. 16.
[React] 로그인 할때 쿠키 저장하기 shared/Cookie.js 로그인 페이지에서 ID/PW를 입력하면 user_id , user_pwd를 쿠키로 저장을 하자. 1. 자바스크립트 문법 * 자바스크립트에서 날짜를 담당하는 객체 사용법 * 키값을 기준으로 나누는방법(파싱) 2. 코드작성 및 설명 - 필요한 함수를 빈내용으로 모두 작성하고 시작하자. (저장된 쿠키값을 가져오기, 쿠키에 저장하기, 쿠키 지우기) const getCookie = (name) => { } // getCookie는 name으로 value를 가져온다. const setCookie = (name, value, exp = 5) => { } // setCookie는 저장을 해야하므로, 이름,값,만료일을 받아와야한다. (exp = 5 라고 지칭하면 exp를 받아오지않아도 se.. 2021. 11. 8.
[React] 로그인,회원가입 페이지 만들기 * 기본 뼈대코드 import React from "react"; import styled from "styled-components"; const Login = (props) => { return ( ) } Login.defaultProps = { } export default Login; * 리액트에서 함수형 컴포넌트 사용을 권고하고 있다. 1. 기획서 내 필요한 내용들을 먼저 파악해보자. return ( 제목 아이디 패스워드 버튼 ); 2. 페이지에서 확인할 수 있도록 App.js 에 라우트 경로 잡아주자. import Login from "../pages/Login"; ... 3. 로그인 페이지에 필요한 최소단위 컴포넌트(elements) 만들어보자. - input.js (아이디/패스워드 입력박스.. 2021. 11. 2.
[React] 최소단위 컴포넌트 만들기 - Text * 기본뼈대코드 import React from "react"; import styled from "styled-components"; const Text = (props) => { return ( ) } Text.defaultProps = { } export default Text; 1. 기본 스타일 잡기 Text.defaultProps = { children: null, bold: false, color: "#222831", size: "14px", margin: false, }; * Text의 경우 children 속성을 이용해서 자식 계체를 가져오는게 자연스러워 보인다! 2. 설정한 기본 스타일 props로 받아오기 const { bold, color, size, children, margin }.. 2021. 10. 31.