profile
boma91@gmail.com

[shop-project] dispatch에 데이터 실어보내기

🌈 reducer 리액트(react) 상태(State) 생성자(Producer) = re ducer 액션(Action)이 전달되면, 리듀서(Reducer)가 스토어(Store)의 상태(State)를 변경한다. 즉, state변경함수와 같은 의미의 역할을 한다. red

2021년 5월 2일
·
5개의 댓글

[shop-project] reducer / dispatch

🌈 reducer 리액트(react) 상태(State) 생성자(Producer) = re ducer 액션(Action)이 전달되면, 리듀서(Reducer)가 스토어(Store)의 상태(State)를 변경한다. 즉, state변경함수와 같은 의미의 역할을 한다. red

2021년 4월 30일
·
0개의 댓글

[shop-project] Redux

🌈 Redux 가장 사용률이 높은 상태관리 라이브러리이다. Context API와 동일하게 state값을 공유하는 작업을 할 수 있다. 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있고, 컴포넌트끼리 상태를 공유하게 될 때 여

2021년 4월 30일
·
0개의 댓글

[shop-project] 상세페이지 만들때 Tip

리액트 훅(hook)의 일종이다. (= Router 라이브러리)useParams() 라는 함수는 현재 URL에 적힌 모든 파라미터를 {파라미터1,파라미터2} 이런 식으로 저장해주는 함수useParams() 함수를 destructuring 문법을 이용해서 따로따로 변수로

2021년 4월 29일
·
0개의 댓글

[shop-project] React 애니메이션

🌈 react-transition-group 리액트 애니메이션 라이브러리의 일종이다. 컴포넌트 등장/업데이트 시 transition을 쉽게 줄 수 있는 라이브러리 이다. > 🍎 animation 라이브러리 설치 방법 > 1) 라이브러리 설치 npm instal

2021년 4월 29일
·
0개의 댓글

[shop-project] Context API

🌈 Context API 란? 리액트 문법 중 하나이다. 하위 컴포넌트가 여러번 중첩될 경우, state ➡ props ➡ props ➡ props 이런식으로 props가 계속해서 중첩되어야 할 것이다. 따라서 Context API를 사용하면 props 전송 없이도

2021년 4월 28일
·
0개의 댓글

[shop-project] Ajax & axios라이브러리

🌈 Ajax 란? Asynchronous JavaScript And XML의 약자로, 말 그대로 JavaScript와 XML을 이용한, 클라이언트와 서버간에 XML 데이터를 주고받는 기술. (= 서버에 새로고침 없이 요청을 할 수 있게 도와주는 기술) Javascri

2021년 4월 27일
·
0개의 댓글

[shop-project] useEffect()

🌈 useEffect() 컴포넌트의 Lifecycle을 관리하는 기능을 한다. React Lifecycle hook의 일종 > 🍎 컴포넌트의 Lifecycle 이란? > 컴포넌트는 등장(생성), 업데이트(재렌더링), 퇴장(삭제) 되는 인생이 있다. 이 과정에서 h

2021년 4월 27일
·
0개의 댓글

[shop-project] Router

🌈 Router Routing = 페이지 나누기 SPA로 구성된 web-app을 만들 때 필수적인 라이브러리. >SPA(Single Page Application) > 싱글 페이지 어플리케이션이다. 말 그대로 페이지가 1개인 어플리케이션이라는 뜻. > 여러 화면으로

2021년 4월 27일
·
0개의 댓글

[shop-project] import / export

🌈 import / export 파일을 쪼갤 때 활용하는 import / export 문법 component를 파일로 쪼개서 서로 연결할 때, 하위 컴포넌트에 export 해주고 상위 컴포넌트에 붙여넣을 때는 import 해준다. data자료가 너무 길 때, 다른 파

2021년 4월 27일
·
0개의 댓글

[shop-project] Bootstrap 설치 및 활용

🌈 Bootstrap HTML, CSS, JavaScript 라이브러리 > 🍎 React Bootstrap 설치 방법 > googling ➡ React Bootstrap 사이트 접속 후 installation 매뉴얼대로 설치 > 1-1. npm install

2021년 4월 27일
·
0개의 댓글

[Blog-project] input데이터

🚀 input : 사용자가 입력한 글을 변수에 저장하는 법 실제 사이트엔 `, ` 을 빈번히 사용한다. 여기에 입력된 값을 저장하거나 어디로 보내거나 그래야할 경우가 많은데, react에서 input 데이터는 자바스크립트와 똑같이 처리한다. > 🍎 input으로

2021년 4월 26일
·
0개의 댓글

[Blog-project] 반복문

🚀 React에서 반복문 사용하기 return문 내에서는 for문을 쓸 수 없다 ➡ map을 사용하여 반복문 기능 구현 가능 return문 밖에서 for문을 활용한 함수 사용 후, 해당 함수를 return문 내에 가져올 수 있다. > 🍎 props 사용방법 1)

2021년 4월 26일
·
0개의 댓글

[Blog-project] props

🚀 'props' 란? 부모 컴포넌트의 state를 자식 컴포넌트에 전달할 때, 부모에게 받아온 데이터. Data Flow는 단방향 형식으로 부모에서부터 자식으로 이동하기 때문에 거꾸로 올라갈 수 없다. 따라서 props에 있는 데이터들은 수정이 불가능하며 오직 안에

2021년 4월 26일
·
0개의 댓글

[Blog-project] Component

🚀 'Component' 란? 프로그래밍의 한 부분을 의미하며 재사용이 가능한 최소 단위를 말한다. 리액트는 Component를 통해 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다. 즉, UI의 구성을 각 Component로 쪼갠 뒤, 보여

2021년 4월 24일
·
0개의 댓글

[Blog-project] state변경하기

🚀 'state' 와 'state변경함수' 란? state는 변동이 많을 데이터의 기본값을 지정하는 것(useState()활용) state변경함수는 기본데이터를 변경할때 쓰는 함수 >let [state이름, state변경함수] = useState(기본값) 따라서

2021년 4월 24일
·
0개의 댓글

[Blog-project] 데이터바인딩

🚀 React를 사용하는 이유? Web app을 만들기 위하여 사용한다. 다른 페이지로 넘어가거나 포스팅을 발행하는 등의 액션을 실행할 때 새로고침이 되지 않고 스무스하게 동작한다. UX가 뛰어나서 좋은 사용자경험을 제공하며, HTML관리가 편해진다. 리액트 문법으

2021년 4월 24일
·
0개의 댓글

canvas

🚗 canvas Canvas API는 JavaScript와 HTML `` 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공한다. 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용된다. Canvas API는 주로 2D 그래픽에 중

2021년 4월 24일
·
0개의 댓글

🎨 new-year-countdown

🪐 logic html에 (js로 만든)text가 들어올 태그를 생성해준다 js에서 보여주고 싶은 text를 변수에 만든다 기본 index를 설정(값: 1)한 뒤, 함수를 통해 해당 text를 slice로 slice(0, index)해준다 ➡ 0부터 index까지 s

2021년 4월 23일
·
0개의 댓글

Sass 사용법

🐶 Sass css를 만들어주는 언어로, Javascript처럼 특정 속성(ex. color, margin, width … )의 값(ex. #000, 3px, 420px … )을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한번의 선

2021년 4월 23일
·
0개의 댓글