분류 전체보기
Python pip 명령어 사용 안될때 버전 업그레이드도 안될때
클래스 101에서 파이썬으로 자동매매봇 만들기 클래스를 수강하며, vscode에 첫 python 명령어(라이브러리 인스톨)을 입력했더니 버전이 맞지 않아 1차 에러가 발생되었다. 1. error 내용 WARNING: Failed to write executable - trying to use .deleteme logic ERROR: Could not install packages due to an EnvironmentError: [WinError 2] 지정된 파일을 찾을 수 없습니다: 'c:\\경로\\Scripts\\normal WARNING: You are using pip version 20.2.3; however, version 22.2.1 is available. You should conside..
[패스트캠퍼스 챌린지 최종 미션] 한번에끝내는React의모든것초격차패키지Online. 강의 후기
내가 패스트캠퍼스 환급챌린지를 하게 된 이유 귀차니즘과 게으름의 끝판왕이라 정말 강제성이 없으면 공부를 거의 못하는 편이라 우연찮게 보게된 광고 덕에 패스트캠퍼스 환급챌린지를 참여하게 되었다. 정말 개발이라는게 남의 코드 복사붙여넣기 하는게 아니라 이해하고 써먹고 활용할 줄 알아야 코더가 아닌 진짜 개발자라고 생각해서 끊임없이 공부해야된다고 생각은 한다. 생각은... 생각만큼 실행에 옮기기란 정말 힘들더라, 공부해야겠다 싶어서 회사 책장에 있는 리액트 책 한권, 노드 책 한권, 자리에 두고 한번도 펼쳐보지 못했다. 진짜 책을 읽으면서 따라 쳐보고 이해가 안되면 콘솔도 찍어보고 디버깅도 하고 그러면 이해가 더 잘되는거 알고 몰라서 구글에 검색해보면 나오는 내용이 모두 책 속에 있는거 다 알고 있는데 안하니..
패스트캠퍼스 챌린지 30일차 - 리액트 UI라이브러리 (Tailwind CSS)
Tailwind CSS 인라인 스타일을 사용하는 것만큼 쉽고 빠르게 스타일링 할 수 있으면서 일괄된 디자인을 가능하도록 해준다. 부트스트랩의 css 클래스 네이밍과 매우 유사하고, 클래스 네임으로 스타일링을 미리 다 구현했기 때문에 빠른 스타일링을 위해 익히고 있으면 효율은 배가 될수 있다. // 설치하기 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest PostCSS CSS 전처리기이며, CSS 작성을 더 편하게 만들어주는 javascript 도구들(Plugins)이다. javascript를 이용해서, CSS를 변경한다 // postcss.config.js module.exports = { parser: 'postcss-scss'..
패스트캠퍼스 챌린지 29일차 - 리액트 UI라이브러리 (Material UI)
Material UI 구글에서 안드로이드 스마트폰에 적용하면서 알려진 UI 라이브러리이다. 현재 Antd와 더불어 가장 많이 사용되고 있다. // 설치하기 (emotion) npm install @mui/material @emotion/react @emotion/styled // 설치하기(styled-components) npm install @mui/material @mui/styled-engine-sc styled-components Material UI에서 제공하는 아이콘을 사용하고 싶다면 npm install @mui/icons-material 를 함께 인스톨해주면 된다. Material UI는 다른 라이브러리와 다르게 css 파일을 따로 import하지 않고 emotion 또는 styled-co..
패스트캠퍼스 챌린지 28일차 - 리액트 UI라이브러리 (React BootStrap)
React BootStrap 부트스트랩은 바닐라JS에서도 흔히 사용되었던 라이브러리? 툴킷이다. 국비지원학원 팀프로젝트 때 부트스트랩을 적용할까 하는 의견이 나와 둘러보았던 경험이 있다. 그 당시엔 css를 공부할 겸 부트스트랩을 적용하지 않고 대부분의 css를 직접 코드했었다. (일부 팀원이 작성한 부분에서 부트스트랩을 사용하긴 했었다.) // 설치하기 npm install react-bootstrap bootstrap@5.1.3 // css 적용하기 import 'bootstrap/dist/css/bootstrap.min.css'; // sass로 css 설정시 import @import "~bootstrap/scss/bootstrap"; 부트스트랩도 다른 ui라이브러리와 마찬가지로 scr/index..
패스트캠퍼스 챌린지 27일차 - 리액트 UI라이브러리 (React Semantic UI)
React Semantic UI semantic web이란, 기계가 사람을 대신해서 웹페이지의 정보를 이해하고, 우리에게 필요한 정보만 보여주거나 정보를 우리가 필요로 하는 형태로 가공해주는 것을 의미한다. 리액트 시맨틱 UI는 시맨틱 웹의 의미와 유사하게 웹 접근성을 좋게 만든 UI이다. (웹 접근성을 확인하기 위해서는 스크린리더를 통해 웹페이지를 읽어보면 알 수 있다.) 처음에 Jquery 기반으로 만들어진 Semantic UI가 React용으로 제공된 라이브러리다. // 설치하기 npm install semantic-ui-react semantic-ui-css // CSS FILE IMPORT import 'semantic-ui-css/semantic.min.css' 다른 UI 라이브러리와 마찬가지..
패스트캠퍼스 챌린지 26일차 - 리액트 UI라이브러리 (Ant Design)
Ant Design (antd) 이번 강의에서 소개된 라이브러리는 중국 ant그룹에서 사용하기 위해 만든 Ant Design이다. 사실 이 라이브러리는 전에 클론코딩을 하면서 사용한 적이 있는데 거의 복붙 수준의 기본기능 구현 위주의 강의라 깊게 다뤄보지 않았는데 이번 기회에 공식문서를 자세하게 볼수 있었다. Antd는 OnsenUI와 다르게 React base의 라이브러리이다. 그래서인지 document의 예제도 리액트로 코드를 제공하고 있다. npm install antd @import '~antd/dist/antd.css'; antd에서 제공하는 디자인을 적용하기 위해서 App.css (또는 대표적으로 사용하고 있는 css 파일)에 antd.css를 import 해주어야한다. antd는 앞서 배웠던..
패스트캠퍼스 챌린지 25일차 - 리액트 UI라이브러리 (Onsen UI)
OnsenUI 하이브리드앱과 모바일에 특화된 UI 라이브러리이다. (JS, 앵귤러, 뷰, 리액트 모두 지원한다.) npm install onsenui react-onsenui --save OnsenUI도 스타일링 라이브러리처럼 install 후에 모듈을 import하여 사용하면 되지만, UI를 적용하려면 index.html에 css를 import 해주어야한다. (사용될 컴포넌트에 import, 또는 전역에서 사용한다면 App.js에 import) Onsen 뿐 아니라 UI 라이브러리는 대부분 css파일이 따로 있어서 import 해주어야된다고 한다. import { Page, Toolbar, Button } from 'react-onsenui'; // Only import the necessary com..
패스트캠퍼스 챌린지 24일차 - 리액트 스타일링하기 Sass(Scss)
Sass(Syntactically Awesome Style Sheets) #sass 설치하기 npm install sass Sass는 css의 확장을 도와주는 전처리기이다. 때문에 공식문서의 가이드를 보면 Sass를 사용 후 애플리케이션이 실행될때 css로 치환된 내용도 함께 보여준다. DRY(Don't Repeat Yourself)하지 않은 css를 sass로 작성하면 반복하여 작성해야되는 코드를 확 줄일수 있다. Sass 공식문서를 보면 SCSS도 같이 나와있고 심지어 SCSS를 default 값으로 코드를 보여준다. Sass와 SCSS는 동일한 기능을 제공하지만 SCSS에서 CSS를 사용하던 방식과 유사하게 중괄호와 세미콜론을 이용하여 보기 쉽고,Sass는 좀더 간결하게 작성되어있다. (강사님은 S..
패스트캠퍼스 챌린지 23일차 - 리액트 라이브러리 emotion
emotion emotion은 styled-components보다 조금 늦게 배포된 라이브러리다 보니 처음 구현할때 참조한 라이브러리에 styled-components도 포함되어있다. 현재 emotion과 styled-components 두 라이브러리는 거의 유사한 형태를 띄고 있다. emotion과 styled-components 비교한 글에 따르면 지원하는 기능은 거의 유사하고 git repogitory star 수는 styled-components가 더 많지만 번들 size나 속도는 emotion이 더 퍼포먼스가 좋다. npm trends로 비교해보아도 emotion이 우세한 것으로 확인된다. emotion 설치하기 npm i @emotion/styled @emotion/react 전체적인 사용 방..
패스트캠퍼스 챌린지 22일차 - 리액트 라이브러리 styled-component (2)
어제 들은 내용에 이어서 스타일드 컴포넌트의 Motivation을 예제로 다시 살펴보았다. 1. 스타일드 컴포넌트(styled-components) 설치하기 # with npm npm install --save styled-components # with yarn yarn add styled-components 2. 스타일드 컴포넌트 사용법 1) styled.{element}`` styled를 import하고 사용할 요소, 그리고 JS 리터럴 문법을 사용하여 css를 정의한다. 이렇게 정의한 element를 리액트 컴포넌트와 동일한 방식으로 사용하면 된다. 2) 기본 사용법에서 리터럴 안에 props의 값에 따라 다른 css를 적용할 수 있게 자바스크립트 문법을 사용할 수 있다. 3) Extending ..
패스트캠퍼스 챌린지 21일차 - 리액트 라이브러리 styled-component (1)
CSS in JS 리액트에서 css를 사용하면서 발견된 문제들을 해결하기 위한 개념을 말한다. (JS 안에서 CSS를 작성하는 것) 페이스북에서 일하는 프론트엔드 팀에서 만든 발표자료 를 보면 리액트를 사용하면서 발견되는 css의 문제점 - Global namespace 자바스크립트는 글로벌 변수를 지양해야하는데 css의 경우 import된 곳에서는 전부 적용되는 부분이 있어 작은 의미의 글로벌로 사용된다 - Dependencies css 간의 의존 관계를 서비스가 커질수록 관리하기가 어렵다. - Dead Code Elimination 컴포넌트나 코드의 경우 사용안할시 삭제 등으로 관리하게되는데 css는 사용하는 건지 확인하기가 어렵다 - Minification 클래스 이름을 유의미하게 최소화하는 작업을..