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 쇼핑몰 프로젝트(Ajax) Ajax는 새로고침없이 요청을 할 수 있게 도와준다. GET,POST 요청의 경우 강제로 새로고침을 하게 되어 있다. GET요청: 주소창에 URL을 작성하여 서버에 보내는 요청 (특정페이지 또는 자료를 읽고 싶을 때) ex) 네이버 들어가고 싶어서 브라우저 주소창에 naver.com 입력하는 것 POST요청: 데이터를 서버로 보내고 싶을때 서버에 보내는 요청 ex) 로그인 또는 댓글을 올릴때... Toyprojectajaxreact.jsToyproject 쇼핑몰 프로젝트(Lifecycle / useEffect) Lifecycle 컴포넌트는 생성이 될 수 있고, 삭제가 될 수 있고, 관련된 state가 변경되면 재렌더링이 일어난다. 이때 Hook으로 중간에 참견을 할 수가 있다. Lifecycle Hook useEffect() 내의 코드의 실행조건 컴포넌트가 첫 등장해서 로딩이 끝난 후에 (전문용어로 mount 끝났을 때) 컴포넌트가 재렌더링 되고난 후 때 (전문용어로 update 되고난 후에) us... Toyprojectreact.jsToyproject 쇼핑몰 프로젝트(중첩 컴포넌트) 만약 상세페이지에 재고량을 표시하는 기능을 구현하고 싶다. 이때 재고량에 대한 코드는 Info라는 컴포넌트에서 구현하고 싶어서 Detail컴포넌트와 별도의 컴포넌트를 생성한다. 이 과정은 다음과 같다. 각각 상품에 대한 재고량은 state에 저장하는 것은 이제 관습이라는 것도 알았고, 가장 상위 컴포넌트에 저장해서 받아쓰는 식으로 해야 데이터의 흐름이 꼬이지 않는 것도 관습이라는 것을 알았다... 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 [Todo-List] 4. 컴포넌트 성능 개선 (1) Todo-List 프로젝트는 소규모 프로젝트라서 추가되어 있는 데이터가 매우 적기 때문에 속도나 성능 측면에서 문제가 없을 수 있다. 👉 useState의 기본값에 함수를 넣은 이유는 useState(createBulkTodos())라고 작성하면 리렌더링될 때마다 createBulkTodos 함수가 호출되지만, useState(createBulkTodos)처럼 파라미터를 함수 형태로 넣을 경... Toyprojecttodo listPerformancePerformance 포스팅용 첨부 이미지 생성기 - 2 이번에는 이 프로젝트에서 사용중인 git 브랜치 전략과 지난번 이후에 구현한 기능들에 대해서 정리하려 합니다. 저는 git-flow 전략을 참고하여, master, develop, feature 브랜치만을 운영하기로 하였습니다. 브랜치 전략을 체험 위한 용도로 구상하였습니다. 새로운 기능 추가 github에 이슈 등록 develop 브랜치에서 feature 브랜치 생성 브랜치명 : featu... ToyprojectwebToyproject Toy Project 02 시계 만들기 1. 초단위의 실시간 시간 받아오기 setInterval 1000으로 설정하여 초단위로 데이터를 불러왔다. 2. color 버튼으로 스크린 색 바꾸기 다만 rgb <200으로는 부족한 것 같아서 범위를 조금 더 늘렸다. 3. date 버튼으로 상단에 날짜와 요일 나타내기 시간에서 0을 추가했던 것과 같은 방법으로 month에도 두자리수를 맞춰주었다. .classlist.toggle()을 사용... jsclockToyprojectToyproject
쇼핑몰 프로젝트(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 쇼핑몰 프로젝트(Ajax) Ajax는 새로고침없이 요청을 할 수 있게 도와준다. GET,POST 요청의 경우 강제로 새로고침을 하게 되어 있다. GET요청: 주소창에 URL을 작성하여 서버에 보내는 요청 (특정페이지 또는 자료를 읽고 싶을 때) ex) 네이버 들어가고 싶어서 브라우저 주소창에 naver.com 입력하는 것 POST요청: 데이터를 서버로 보내고 싶을때 서버에 보내는 요청 ex) 로그인 또는 댓글을 올릴때... Toyprojectajaxreact.jsToyproject 쇼핑몰 프로젝트(Lifecycle / useEffect) Lifecycle 컴포넌트는 생성이 될 수 있고, 삭제가 될 수 있고, 관련된 state가 변경되면 재렌더링이 일어난다. 이때 Hook으로 중간에 참견을 할 수가 있다. Lifecycle Hook useEffect() 내의 코드의 실행조건 컴포넌트가 첫 등장해서 로딩이 끝난 후에 (전문용어로 mount 끝났을 때) 컴포넌트가 재렌더링 되고난 후 때 (전문용어로 update 되고난 후에) us... Toyprojectreact.jsToyproject 쇼핑몰 프로젝트(중첩 컴포넌트) 만약 상세페이지에 재고량을 표시하는 기능을 구현하고 싶다. 이때 재고량에 대한 코드는 Info라는 컴포넌트에서 구현하고 싶어서 Detail컴포넌트와 별도의 컴포넌트를 생성한다. 이 과정은 다음과 같다. 각각 상품에 대한 재고량은 state에 저장하는 것은 이제 관습이라는 것도 알았고, 가장 상위 컴포넌트에 저장해서 받아쓰는 식으로 해야 데이터의 흐름이 꼬이지 않는 것도 관습이라는 것을 알았다... 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 [Todo-List] 4. 컴포넌트 성능 개선 (1) Todo-List 프로젝트는 소규모 프로젝트라서 추가되어 있는 데이터가 매우 적기 때문에 속도나 성능 측면에서 문제가 없을 수 있다. 👉 useState의 기본값에 함수를 넣은 이유는 useState(createBulkTodos())라고 작성하면 리렌더링될 때마다 createBulkTodos 함수가 호출되지만, useState(createBulkTodos)처럼 파라미터를 함수 형태로 넣을 경... Toyprojecttodo listPerformancePerformance 포스팅용 첨부 이미지 생성기 - 2 이번에는 이 프로젝트에서 사용중인 git 브랜치 전략과 지난번 이후에 구현한 기능들에 대해서 정리하려 합니다. 저는 git-flow 전략을 참고하여, master, develop, feature 브랜치만을 운영하기로 하였습니다. 브랜치 전략을 체험 위한 용도로 구상하였습니다. 새로운 기능 추가 github에 이슈 등록 develop 브랜치에서 feature 브랜치 생성 브랜치명 : featu... ToyprojectwebToyproject Toy Project 02 시계 만들기 1. 초단위의 실시간 시간 받아오기 setInterval 1000으로 설정하여 초단위로 데이터를 불러왔다. 2. color 버튼으로 스크린 색 바꾸기 다만 rgb <200으로는 부족한 것 같아서 범위를 조금 더 늘렸다. 3. date 버튼으로 상단에 날짜와 요일 나타내기 시간에서 0을 추가했던 것과 같은 방법으로 month에도 두자리수를 맞춰주었다. .classlist.toggle()을 사용... jsclockToyprojectToyproject