안 쓰던 블로그

https://foxtrotin.tistory.com/232 To Do List 웹 프로젝트-글자색 추가 할 일마다 글자색을 지정할 수 있는 기능을 추가하겠습니다 참고로 여기:https://velopert.com/3480 맨 마지막에 '숙제'부분을 보고 숙제 한 글입니다 1. Palette 컴포넌트 생성 2. TodoListTemplate에서 Palett.. foxtrotin.tistory.com 여기에서 이어집니다 이제 이렇게 글자에 색을 넣어봅시다 1. handleCreate에서 새 Todo를 만들 때 color값을 집어 넣도록 한다 return ( ); 저번에 App.js에서 PageTemplate의 form에다가 color를 넣어주었습니다 이 form은 TodoInput.js에 넘어갈테니까 Tod..

할 일마다 글자색을 지정할 수 있는 기능을 추가하겠습니다 참고로 여기:https://velopert.com/3480 맨 마지막에 '숙제'부분을 보고 숙제 한 글입니다 1. Palette 컴포넌트 생성 2. TodoListTemplate에서 Palette가 들어갈 자리를 만든다 scss .todo-list-template{ margin-top: 5rem; margin-left: auto; margin-right: auto; width: 500px; background: white; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); //padding-top: 2rem; } .palette-template{ display: flex; ju..

https://foxtrotin.tistory.com/226 이전 글에서 UI를 만들었는데 아직 상태 관리를 설정하지 않았기 때문에 껍데기만 있다 실제로 프로젝트를 작동시키려면 뷰에서 보여 줄 상태를 관리해야 한다 개발을 할 때 상태 관리는 주로 기능별로 상태가 필요한 컴포넌트들을 감싸는 상위 컴포넌트에서 하는 것이 편리하다 지금 프로젝트처럼 소규모라면 App에서 다 해주면 된다 예를 들어 데이터 배열의 상태를 TodoItemList 컴포넌트에서 정의, TodoInput의 상태를 그 내부에서 정의했다고 가정한다 이 경우 새 데이터를 TodoItemList에 넣으려면 로직을 어떻게 작성해야 할까? 일단 ref(다른 컴포넌트에 데이터 전달)를 최대한 사용하지 않는 방법이 좋다 ref가 들어가면 꼬이기 시작하..

npm i nativescript-dev-webpack@latest --save-dev ./node_modules/.bin/update-ns-webpack --deps --configs npm i 콘솔창에 이 세 줄 써준다 https://github.com/NativeScript/NativeScript/issues/8178

컴포넌트 계획 1. PageTemplate 이 컴포넌트는 UI의 전체적인 틀을 잡는다 흰색 배경+그림자 위에 '일정 관리'라는 타이틀 보여 주고, 타이틀 아래에는 children값으로 아래 들어갈 컴포넌트들을 넣는다 2. TodoInput 이 컴포넌트는 일정을 추가할 때 사용하는 input 컴포넌트로, 버튼을 누르는 버튼 이벤트가 들어갈 것이다 3. TodoItemList TodoItem 컴포넌트 여러 개를 렌더링 하는 역할이다 4. TodoItem 일정을 렌더링하는 컴포넌트다 클릭하면 체크되면서 전체에 줄을 긋는다 지우기 버튼을 누르면 일정을 화면에서 없앤다 1. PageTemplate 컴포넌트 생성 먼저 스타일링부터 한다 src/components/PageTemplate/PageTemplate.scs..

프로젝트 준비 프로젝트 생성 create-react-app todo-list ejcet하고 Sass 모듈 설치 yarn eject yarn add node-sass sass-loader open-color 적용 yarn add open-color 이후 src에 styles 폴더에 utils.scss 파일을 만들고 open-color 라이브러리를 불러온다 @import '~open-color/open-color'; 메인 스타일 적용 index.css제거하고 styles/main.scss를 만든다 @import 'utils'; body{ background: $oc-gray-1; margin: 0px; } index.js도 수정해 준다 App.js파일을 나중에 components폴더에서 다시 만들 건데 미리..

CSS 리액트에서 컴포넌트를 스타일링하는 가장 기본적인 방식은 css이다 create-react-app으로 프로젝트를 만들면 css방식으로 컴포넌트를 스타일링 해 준다 Sass 자주 사용하는 css 전처리기 중 하나로, 확장된 css문법을 사용하여 css코드를 더 쉽게 작성하게 해 주는 방식이다 styled-components 인기 있는 컴포넌트 스타일링 방식으로 JS 코드 내부에서 스타일을 정의한다 CSS create-react-app 프로젝트이름 다음 명령어로 프로젝트를 만들면 App.js와 App.css 파일이 있다 그냥 평범하게 css를 사용하면 된다 한 가지 유의할 점은 클래스네임을 중복되지 않게 해준다 기본 css파일에서는 중복되지 않게 app-header, app-logo 이런 식으로 접두어..