CSS
-
[2019.07.18] Styled-components 사용법(매우쉬움)개발 블로깅/기타 개념 2019. 7. 19. 00:23
엄청나게 간편해진 CSS 적용법! (이젠 내 인생에 확장자 .css파일을 건들 일은 없을 것 같다..ㅎ 아마도..) $npm i -S styled-components 그리고 직접 Component를 만들되, 거기에 style을 입힌다. import styled from 'styled-components'; const TempSpace = styled.div` background-color: white; margin: 0 0 10px 0; ` 스타일 작업을 위 코드와 같이 입힌 컴포넌트를 생성하여 사용하면 된다 # style에 props 넘기는법 (이부분이 매우 중요!) 해당 컴포넌트에 props를 내려서 style를 변경시킬 수 있다. 예를들어, TempSpace라는 컴포넌트에 check라는 props값..
-
[2019.07.14] 오늘의 TIL - webpack.config.js의 build 설정 시 주의사항개발 블로깅/오늘의 TIL 2019. 7. 15. 00:18
현재 진행 중인 프로젝트에 TypeScript React Redux를 신나게 쓰고는 있고.., 컴포넌트 라이브러리를 어떤 것을 쓸까 고민을 많이 해보았다. 4주 프로젝트 때 사용했던 ant Design이 정말 괜찮긴 했었다. 설명과 예시코드가 사용하기 쉽게 잘 되어있고, 무엇보다 디자인이 엄청 깔끔하고 사용성에 대해 직관적이다. 그래도 한번 써 본 라이브러리여서, 이번에는 다른 것을 써 볼까 고민을 많이 했었다. Material-UI, BootStrap, React Tool Box 등.. 리액트 관련 CSS 라이브러리가 엄청 많아 전부 사용해 보고 싶다.. 그러나 이번 프로젝트의 기술 핵심은 TypeScript + React + Redux! 괜히 다른 것에 시간 투자하지 않고 해당 스택에 집중하기로 했다..
-
[2019.03.01] Twittler 과제 하루만에 완료!!핵인싸 개발자의 길/코드스테이츠 Pre Course 2019. 3. 2. 00:20
이번 과제는 직접 하나의 웹 페이지를 개발해 보는 과제였다.그 전까지는 자바스크립트만 다루더니, twittler과제 전까지, HTML과 CSS, 이벤트 핸들러와 id, class 등 심지어 Jquery 내용까지 나오더니, 갑작스레 웹 페이지를 제작하는 과제가...ㅎㅎㅎ;# 맨 처음 시작 부분처음 git clone하면 해당 화면이 이렇게 나온다. git 디렉토리에 몇가지 파일이 같이 들어있는데, 그것들을 이용하여 해당 웹 페이지에 정해진, 기능들이 작동하도록 구현하는 것이다. 추가적으로 페이지를 좀 꾸며도 되는 것 같다. # twittler 완성본 예시아무 기능도 없고, 아무것도 꾸며져 있지 않은 화면에서, 마지막에는 저렇게 버튼과 리스트, 입력박스를 배치하고 각 요소들이 정해진 기능들을 정상적으로 수행할..