잿꽃's posting Garden

REACT styled-component에 prop전달이 안 되는 문제 Received `false` for a non-boolean attribute '변수' 2일 동안 안되어서 머리를 감싸 쥐었는데 해결해보니 멍청한 나를 탓해야지 뭐..... 이걸 해결하면서 다른 여러가지 방법이 있다는 것을 알게 되었다. 해결방법 1. 내가 만든 속성이 기본 속성과 중복하는지 확인. 중복하면 속성 이름 바꿔야 함. emotion/props.js at main · emotion-js/emotion (github.com) GitHub - emotion-js/emotion: 👩‍🎤 CSS-in-JS library designed for high performance style composition 👩‍🎤 CSS-in-JS..

REACT에서 Todolist를 만들어봤습니다. 2022.04.28 - [WEB] - REACT Todolist 만들기 - 1 REACT Todolist 만들기 - 1 REACT에서 Todolist를 만들어봤습니다. 1. UI틀 만들기 2. styled-components로 꾸미고 간단한 속성 부여하기 3장. 멋진 투두리스트 만들기 · GitBook (vlpt.us) 3장. 멋진 투두리스트 만들기 · GitBook 3장. 멋.. flowerofashes.tistory.com 3. 기능 구현하기 마침 강의 평가가 있어서 강의에서 배운 내용을 토대로 기능을 구현해 보았습니다. 1. app.js와 TodoListTotal.js의 할 일을 수정하기 기존에 TodoListTotal.js에 직접 입력했던 내용을 상..

REACT에서 Todolist를 만들어봤습니다. 강의에서 배운 내용을 복습하면서 새롭게 만들어 보는 todolist 1. UI틀 만들기 2. styled-components로 꾸미고 간단한 속성 부여하기 3장. 멋진 투두리스트 만들기 · GitBook (vlpt.us) 3장. 멋진 투두리스트 만들기 · GitBook 3장. 멋진 투두리스트 만들기 이번 장에서는 리액트를 사용하여 멋진 투두리스트 (미리보기) 를 만들어보겠습니다. 이번 투두 리스트 앱을 만드는 과정에서, 우리가 지금까지 배운 다양한 개념 react.vlpt.us 디자인은 동일하며 참고하여 만들었습니다(직접 만드느라 코드가 완전히 같지는 않음 주의) 기능 구현은 useReducer를 배우지 않아 사이트를 참고하여 기능을 익히면서 만들어볼지 강..

REACT styled-components의 'ThemeProvider'를 이용한 darkmode만들어 보겠습니다. [기초단계] 1. styled-components를 이용할 것이므로 설치한다. 터미널에서 yarn을 이용해 설치한다. yarn add styled-components 2. scr폴더 내에 Components파일 1개와 css 객체를 담당할 일반 js파일을 만든다. 3. Components파일 내에 rsc + tab, enter를 하여 함수형 컴포넌트를 만는다. 4. app.js에 만든 Components를 연결한다. import React from 'react'; import Darkmode from './Darkmode'; const App = () => { return ( ); }; e..

REACT useContext를 이용하여 props을 전역 변수로 만들어서 darkmode를 만들어보자 [기초단계] 1. styled-components를 이용할 것이므로 설치한다. 터미널에서 yarn을 이용하여 설치한다. yarn add styled-components 2. src폴더 내에 Components 폴더를 만들어서 세가지 js를 만든다. 3. 각각의 Components파일 내에 rsc + tab, enter를 누르면 함수형 컴포넌트가 만들어진다. 4. app.js에 세가지 Components를 연결한다. 5. 터미널에서 'yarn start'해서 확인 [실행단계] 1. 각각의 컴포넌트에 내용작성하고 styled-components로 꾸며준다. 시멘틱태그 사용할 경우 : const 변수이름 =..

REACT HOOK의 용도를 정리했습니다. 아직 현장에서 일을 안해보니 정확한 용도를 알기가 어려워서 간단하게 각각의 HOOK들이 무슨 역할을 하는지 정리해보도록 하였다. (역할이 뭔지도 제대로 파악도 못했는데 하루에 hook을 1~2개씩 익히려니 자꾸 까먹는다...) useState() [설명] 데이터 값이 자주 변경되는 곳에 상태 관리를 할 수 있도록 한다. 컴포넌트에서 관리하는 상태값이 적거나 단순한 숫자나 문자열의 경우 사용하는 것이 좋음 값이 바뀔 때마다 렌더링을 한다. [기초문법] const [초기변수, 초기변수를 변화시킬 함수] = useState(초기값); 초기변수 = 초기값 useEffect() [설명] (조건에 해당하는 부분이)렌더링 될 때마다 특정 작업을 실행시킨다. [기초문법] us..

REACT 'ToDoList'를 만들기 위한 기초 연습 기존의 리스트가 주어지고 input상자에 내용을 입력해서 추가를 누르면 해당 내용이 리스트에 추가되는 작업을 연습해 보려고 한다. 연습을 하기 전에 어떤 순서도를 가지고 해야 할까? 1. 기존의 데이터가 주어지고 나타내 진다. 2. input상자에 입력한 값을 인지한다. 3. 버튼을 누르면 이벤트를 통해 인지한 값을 기존 데이터에 추가한다. 4. 추가된 데이터를 나타낸다. 1번의 기존 데이터가 추가에 따라 내용이 계속 수정될 예정이므로 useState를 써야 할 것이다. 기존의 데이터를 보기 위해서 map함수를 이용하여 태그 안으로 return할 것이다. 2번에서는 입력된 값을 인지해야 하므로 onChange이벤트가 필요하다. 3번에서는 버튼을 누르..

REACT Component 정리 [기본셋팅] src내에 문서 또는 파일을 만든다. 파일 이름은 대문자로 하고 파일 내에서 rsc를 작성하고 tab을 누르면 함수형 컴포넌트를 만들수 있다. app.js에서 위의 파일을 import하고 return안 프레그먼트에 해당 컴포넌트를 작성한다. app.js //////////////////app.js/////////////////////// import React, { Component } from 'react'; //새로 만든 컴포넌트를 import import ComponentsTest1 from './ComponentsTest1'; const app = () => { return ( //작성하고 내부에 만든 컴포넌트 작성 ); } export default..