Toyproject 쇼핑몰 프로젝트(Router) 따라서, 리액트가 알아서 라우팅을 잘해준다.반면 BrowserRouter는 라우팅을 리액트가 아니라 서버에게 요청할 수도 있어서 위험함으로 잘못하면 있지도 않은 페이지를 서버에 요청을 해서 404 Page Not Found 이런 에러도 뜰 수 있다. 앞서 react-router-dom을 import 해올때 {} 안에 태그들을 사용할 수 있었고, 여기서는 예를 들어 코드 실행 중간에 페이지를 ... Toyprojectreact.jsToyproject 쇼핑몰 프로젝트(SASS) SASS npm install node-sass 또는 yarn add node-sass 그리고 이러한 CSS를 프로그래밍언어스럽게 하는 대체 문법이 존재하는데 이 것이 SASS라는 pre-processor이다. 이 것을 이용하면 변수, 반복문, 함수 같은 문법으로 CSS을 작성할 수 있다. 그리고 SASS 문법으로 스타일 한뒤 다시 CSS로 컴파일을 해야 한다. 이때 node-sass라는 라... SassToyprojectreact.jsSass 쇼핑몰 프로젝트(redux/reducer) 끝없는 props지옥을 만들거나, ContextAPI를 통해 원하는 데이터를 가진 컴포넌트를 createContext()로 감싸서, 값을 사용하였다. 따라서, redux는 모든 컴포넌트파일들이 같은 값을 공유할 수 있는 저장공간을 생성하는 것이 가능하게 하고 state 데이터를 관리기능한다. 이제 store에 저장된 데이터들을 받아와 쓰면 된다. state: state는 전체 state에 대... Toyprojectreact.jsToyproject 쇼핑몰 프로젝트(styled-components) 코딩애플 님의 강의를 바탕으로한 글입니다:) styled-components 컴포넌트가 많을 경우 스타일링을 하는데 불편함이 생긴다. class를 중복해서 만들거나 CSS 파일이 길어서 수정이 어려운 경우가 많을 것이다. (개공감) 따라서 컴포넌트를 제작할떄 스타일을 바로 입힐 수 있다. 즉, 컴포넌트 안에 CSS를 장착하는 것으로 CSS in JS 라고도 한다. 설치 yarn add sty... CSSreact.jsToyprojectCSS 쇼핑몰 프로젝트(Context API) 코딩애플 님의 강의를 바탕으로한 글입니다:) 앞서 학습한 중첩 컴포넌트의 경우 props로 많은 컴포넌트들의 상위 컴포넌트의 기능을 가져다 쓸 수 있다. 하지만, 컴포넌트가 무수히 많아지다보면 props지옥을 맛볼 것이고, 이 것을 해결해 줄 수 있는 API가 ContextAPI다. Context API 우선 다음과 같이 변수를 선언한다. 재고context 변수는 이제 범위를 가지는 특별한 ... Toyprojectreact.jsToyproject 쇼핑몰 프로젝트(lazy loading / React devtools) 코딩애플 님의 강의를 바탕으로한 글입니다:) 일반적으로 다른 파일의 컴포넌트를 가져다 쓸 때 다음과 코드의 형식으로 import해왔다. 하지만, 다음과 같은 방식은 App.js라는 메인페이지에 방문 시 Detail,Cart등을 모두 import 해온다. 만약 수많은 컴포넌트들이 import 해오면 사이트 초기 접속속도가 느려질 수 있다. 따라서 사용하는 것이 lazy 와 suspense 이다... Toyprojectreact.jsToyproject 쇼핑몰 프로젝트(memo,PWA,LocalStorage) 만약 다음과 같이 상위컴포넌트에서 데이터를 받아서 쓰고 있는 하위컴포넌트가 있다. 주의) 하지만, props가 매우 방대하고 클 경우 손해일 수 있다. HTML, CSS, JS 를 이용해 만든 웹앱을 모던한 웹 브라우저 APIs 와 결합해서 크로스 플랫폼에서 동작하는 어플리케이션을 손쉽게 만들 수 있다. 즉, 이미 만든 웹사이트 또는 웹어플리케이션이 있다면 손쉽게 몇가지만 추가하면 데스크탑과... Toyprojectreact.jsToyproject Day 6 Animation-Background와 메인화면 bg_gradient_list.xml bg_gradient_list는 gradient 4개로 구성했습니다. bg_gradient2와 bg_gradient4는 같은 색상입니다. 파도가 들어왔다가 나가는 느낌으로 2번과 같은 4번을 준비했습니다. 순서로 보면 1 → 2 → 3 → 4(2) → 1 → 2 → 3 → 4(2) → 1 → ... 1 → 2 → 3 → 4(2) → 1이 반복되는 것입니다... ToyprojectToyproject React-Native nwitter [ #1 ] 처음에는 react-native로 firebase 연동 예제를 해보려고 했는데, firebase를 하나 더 만드는게 귀찮아서 노마드 코더에서 진행하고 있던 Nwitter 강의에서 만들어둔 firebase를 사용하려고 시작했다.. 사실 똑같이 쓸 수 있는지 모르겠지만 한 번 진행해보겠다 ! 1. react-native project 생성하기 만약 처음 시작하시는 분들이라면, 을 참고해주세요! ... Toyprojectreact nativereact-native-NwitterToyproject
쇼핑몰 프로젝트(Router) 따라서, 리액트가 알아서 라우팅을 잘해준다.반면 BrowserRouter는 라우팅을 리액트가 아니라 서버에게 요청할 수도 있어서 위험함으로 잘못하면 있지도 않은 페이지를 서버에 요청을 해서 404 Page Not Found 이런 에러도 뜰 수 있다. 앞서 react-router-dom을 import 해올때 {} 안에 태그들을 사용할 수 있었고, 여기서는 예를 들어 코드 실행 중간에 페이지를 ... Toyprojectreact.jsToyproject 쇼핑몰 프로젝트(SASS) SASS npm install node-sass 또는 yarn add node-sass 그리고 이러한 CSS를 프로그래밍언어스럽게 하는 대체 문법이 존재하는데 이 것이 SASS라는 pre-processor이다. 이 것을 이용하면 변수, 반복문, 함수 같은 문법으로 CSS을 작성할 수 있다. 그리고 SASS 문법으로 스타일 한뒤 다시 CSS로 컴파일을 해야 한다. 이때 node-sass라는 라... SassToyprojectreact.jsSass 쇼핑몰 프로젝트(redux/reducer) 끝없는 props지옥을 만들거나, ContextAPI를 통해 원하는 데이터를 가진 컴포넌트를 createContext()로 감싸서, 값을 사용하였다. 따라서, redux는 모든 컴포넌트파일들이 같은 값을 공유할 수 있는 저장공간을 생성하는 것이 가능하게 하고 state 데이터를 관리기능한다. 이제 store에 저장된 데이터들을 받아와 쓰면 된다. state: state는 전체 state에 대... Toyprojectreact.jsToyproject 쇼핑몰 프로젝트(styled-components) 코딩애플 님의 강의를 바탕으로한 글입니다:) styled-components 컴포넌트가 많을 경우 스타일링을 하는데 불편함이 생긴다. class를 중복해서 만들거나 CSS 파일이 길어서 수정이 어려운 경우가 많을 것이다. (개공감) 따라서 컴포넌트를 제작할떄 스타일을 바로 입힐 수 있다. 즉, 컴포넌트 안에 CSS를 장착하는 것으로 CSS in JS 라고도 한다. 설치 yarn add sty... CSSreact.jsToyprojectCSS 쇼핑몰 프로젝트(Context API) 코딩애플 님의 강의를 바탕으로한 글입니다:) 앞서 학습한 중첩 컴포넌트의 경우 props로 많은 컴포넌트들의 상위 컴포넌트의 기능을 가져다 쓸 수 있다. 하지만, 컴포넌트가 무수히 많아지다보면 props지옥을 맛볼 것이고, 이 것을 해결해 줄 수 있는 API가 ContextAPI다. Context API 우선 다음과 같이 변수를 선언한다. 재고context 변수는 이제 범위를 가지는 특별한 ... Toyprojectreact.jsToyproject 쇼핑몰 프로젝트(lazy loading / React devtools) 코딩애플 님의 강의를 바탕으로한 글입니다:) 일반적으로 다른 파일의 컴포넌트를 가져다 쓸 때 다음과 코드의 형식으로 import해왔다. 하지만, 다음과 같은 방식은 App.js라는 메인페이지에 방문 시 Detail,Cart등을 모두 import 해온다. 만약 수많은 컴포넌트들이 import 해오면 사이트 초기 접속속도가 느려질 수 있다. 따라서 사용하는 것이 lazy 와 suspense 이다... Toyprojectreact.jsToyproject 쇼핑몰 프로젝트(memo,PWA,LocalStorage) 만약 다음과 같이 상위컴포넌트에서 데이터를 받아서 쓰고 있는 하위컴포넌트가 있다. 주의) 하지만, props가 매우 방대하고 클 경우 손해일 수 있다. HTML, CSS, JS 를 이용해 만든 웹앱을 모던한 웹 브라우저 APIs 와 결합해서 크로스 플랫폼에서 동작하는 어플리케이션을 손쉽게 만들 수 있다. 즉, 이미 만든 웹사이트 또는 웹어플리케이션이 있다면 손쉽게 몇가지만 추가하면 데스크탑과... Toyprojectreact.jsToyproject Day 6 Animation-Background와 메인화면 bg_gradient_list.xml bg_gradient_list는 gradient 4개로 구성했습니다. bg_gradient2와 bg_gradient4는 같은 색상입니다. 파도가 들어왔다가 나가는 느낌으로 2번과 같은 4번을 준비했습니다. 순서로 보면 1 → 2 → 3 → 4(2) → 1 → 2 → 3 → 4(2) → 1 → ... 1 → 2 → 3 → 4(2) → 1이 반복되는 것입니다... ToyprojectToyproject React-Native nwitter [ #1 ] 처음에는 react-native로 firebase 연동 예제를 해보려고 했는데, firebase를 하나 더 만드는게 귀찮아서 노마드 코더에서 진행하고 있던 Nwitter 강의에서 만들어둔 firebase를 사용하려고 시작했다.. 사실 똑같이 쓸 수 있는지 모르겠지만 한 번 진행해보겠다 ! 1. react-native project 생성하기 만약 처음 시작하시는 분들이라면, 을 참고해주세요! ... Toyprojectreact nativereact-native-NwitterToyproject