본문 바로가기

React22

리액트 기초 3강 정리 라우팅이란 -SPA? Single Page Application! 말 그대로 서버에서 주는 html이 1개 뿐인 어플리케이션이에요. 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 html, css, js(=정적자원들)을 내려준다면, SPA는 딱 한번만 정적자원을 받아옵니다. SPA는 주소를 어떻게 옮길 수 있을까? html은 딱 하나를 가지고 있지만, SPA도 브라우저 주소창대로 다른 페이지를 보여줄 수 있어요. 이렇게 브라우저 주소에 따라 다른 페이지를 보여주는 걸 라우팅이라고 부릅니다. 어떻게 구현? 라우팅 라이브러리를 쓰자! 라우팅 처리하기 -react-route-dom 패키지 설치하기 yarn add react-router-dom React Router: Declarative Routing .. 2021. 4. 16.
퀴즈 화면, 정답 화면 만들기/리액트 기초 2주차 과제 시도하려했으나 fail.. 막힌 부분들: 1. App.js에서 state 받아와서 Quiz.js에서 인덱스 뜨게 하는 것 : console.log에서 확인해보면 잘 받아와는 지는데 퀴즈 화면에 왜 띄우질 못하니.. 일단 유즈스테이트가 너무 헷갈림. 또 다시 유즈스테이트 안에 초기값 넣어주는게 헷갈림. 초기값을 임의로 넣어주지 않고 state에서 받아온 애 중 첫번째를 넣어주고 싶은건데.. 해결: 인덱스는 리스트가 아니라서 쉽게 성공?했는데 리스트가 문제임. 리스트 my_list[0].question 넣어서 해결 ㅎ 2. 뜨게 하면 map 돌려서 ++해주기 인덱스는 애초에 1로 하나만 해줘서 리스트가 아님. 근데 맵을 어떻게 돌리지...?에서 막힘 map 쉬운거말고.. state에서 받아온 리스트들을 맵을.. 2021. 4. 13.
리액트 기초 2강 정리 화면을 예쁘게! - SCSS 패키지 설치 해야함 yarn add node-sass@4.14.1 open-color sass-loader classnames 화면을 예쁘게! - styled-components 패키지 설치 yarn add styled-components import React from 'react'; // 패키지에서 styled를 불러올게요! import styled from 'styled-components'; function App() { return ( {/* props로 bgColor를 줘볼까요! */} hello React! ); } // scss처럼 자기 자신을 지칭할 때 &를 쓸 수 있습니다! // props 주는 방법! 이제 알고 있죠? const MyStyled = styl.. 2021. 4. 10.
리액트 기초 1강 정리 기초체력 1 : 서버와 클라이언트, 서버리스, DOM 웹의 동작 방식: 서버와 클라이언트 웹이 어떻게 우리한테 보이게 될까? 웹은 두가지로 이루어짐. 요청과 응답! 요청은 우리가 웹사이트를 볼 수 있게 해주는 클라이언트. 클라이언트는 노트북, 핸드폰, PC가 될 수 있음. 클라이언트가 서버에게 요청을 보냄. 이 때 서버는 html, JS, CSS같은 정적 자원들 혹은 데이터라고 부르는 친구들을 전달해줌. 이걸 응답한다고 얘기함. 그럼 웹의 동작 방식은? 1. 클라이언트가 서버에게 요청을 보낸다. 2. 서버는 응답을 해준다. 서버리스: 서버가 없다는게 아니라 서버를 내가 만들 필요가 없다는 뜻! DOM: DOM은 트리구조다. 기초체력 2: ES6 - 클래스, let, const, SCope, == ===,.. 2021. 4. 9.
리액트 프로젝트 만드는 순서 + 다른 zip 파일 덮어쓰기 -리액트 프로젝트 생성 순서: 1. yarn create react-app 프젝이름 2. cd 프젝이름 해서 위치 맞춰주고 3. yarn start -다른 zip 파일 덮어 쓰기 프로젝트 새로 생성하기 zip 파일 내, src 폴더와 새로 생성한 프로젝트의 src 폴더 교체 package.json 교체 프로젝트 루트 경로에서 yarn install로 필요한 패키지 설치하기 이때 파이어베이스에서 키값 안받아오면 아무것도 안뜨니까 키값 받고 파이어베이스 api 복사하는 곳에 복붙해서 실행하면 잘 뜸! > 2021. 4. 9.
클론코딩 첫 주 - 프로그래머스 사이트 코딩테스트 연습 | 프로그래머스 (programmers.co.kr) 코딩테스트 연습 기초부터 차근차근, 직접 코드를 작성해 보세요. programmers.co.kr 이 페이지하나를 우선 하기로 했고 나는 이 부분을 하기로 했다. 금,토,일 이번주에 무조건 이걸 만들고 싶다!!! 1. 네비게이션 바 (검정색) 만들기 필요한 기능: -로고 넣기 (왼쪽 정렬) -탑 프로그래머스~ 프로그래밍 강의 가운데 정렬 -계정만들기~기업회원 (오른쪽 정렬) -커서 갖다 대면 글씨 bold -'코딩테스트 연습' 클릭하면 하얀색 바 나오기 -반응형으로 만들면 좋음 진행 과정: 검정 바는 반응형으로 만든 것 같은데 안에 로고랑 글씨 새기는게 막힘. 일단 로고는 계속 안들어가서 글씨부터 새기려는데 그 글씨도 그냥 글씨가 아니라 .. 2021. 4. 5.

티스토리툴바