공부하는 비오

React 에서 css를 어떻게 주는 것이 좋을까를 고민하다가 방법론과 도구들의 차이를 찾아봤다. BEM 방법론 : 블록, 요소, 변경자 켄변션을 사용함으로써 클래스명의 유일함을 보장하여, 스타일이 겹치는 위험성 줄여준다. 컴포넌트를 유일하고 재사용 가능하게 만들어 준다. 하지만 클래스명 선택자가 길어지고, 재사용하려고 할때마다 모든 UI 컴포넌트를 명시적으로 확장해야 한다. CSS모듈 : 로컬단위로 정의된 모든 스타일에 동적으로 클래스명을 만들어내어 추가된 CSS 속성들에 의해 스타일이 겹치지 않도록해주며, 모든 스타일들을 캡슐화한다. (스타일 정의를 로컬화했다.) BEM을 자동화 함으로 클래스명을 결정하기위한 고민을 덜어준다. 심지어 같은 이름을 사용했더라도 서로 겹치지 않게 보장해준다. Styled..

HTML & CSS 2020. 12. 20. 22:42

익스프레스를 설치한다. 익스프레스는 http를 내장하고있는 express를 불러온다. http 메서드(클라이언트가 수행하고자 하는 동작을 정의한 동사나 명사. get, post, put delete 등)를 좀더 직관적으로 사용할 수 있다. 터미널에서 현재 파일을 실행하자. 그러면 브라우저에 hello express 가 나온다. 브라우저에서 /api로 라우팅 된 것을 확인할 수 있다. res.send(string) res.json(json형식의 파일). 보통 서버에서 받아오는 data는 json 형태의 파일이다. 하지만 get 이외의 다른 메서드는 브라우저에서 표시해주지 않는다. Postman이라는 툴을 사용해서 POST랑 DELETE를 해보자. www.postman.com/downloads/ 포스트맨을 ..

Node/Express 2020. 12. 19. 21:41

Node.js란? Node는 javascript runtime환경이다. 주로 서버사이드 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. 자바스크립트 런타임이란 브라우저 외부 환경에서 자바스크립트 코드를 사용할수 있게 만들어주며, 이에 필요한 모듈, 파일 시스템, HTTP 등 bulit-in API를 제공한다. ** 모듈? 애플리케이션을 구성하는 개별적인 요소. 일반적으로 파일 단위로 분리되어 있으며, 필요에 따라 명시적으로 모듈을 로드할 수 있다. 기능별로 분리되어 작성되므로 개발효율성과 유지보수성을 향상할 수 있다. 모듈은 독립적인 파일 스코프를 갖는다. 노드에서 많이 사용하는 NPM도 모듈과 관련있다. NPM(Node Package Mansger)은 자바스크립트 패키지 매니저이다. Node.js에..

Node 2020. 12. 19. 21:19

제로초 노드버드 강의 정리 노트 처음부터 수백, 수천개의 데이터를 불러와서 화면에 표시하려고 하면 시간이 너무 오래걸리고 메모리도 잡아먹고, 사실 처음부터 그렇게 표시 할 필요가 없다. 스크롤 내릴때마다 10개씩 게시물이 나오도록 만들어보자. 일단 스크롤 위치를 구해야 한다. scrollY : 얼마나 내렸는지(스크롤의 위치) clientHeight: 화면 보이는 길이 scrollHeight: 총 길이 (컨텐츠의 높이) JavaScript 스크롤 관련 : biio-studying.tistory.com/75?category=903435 다음과 같이 콘솔창에 찍어서 확인 할 수 있다. scrollY가 0일 때, 611까지 화면이 보이므로, 제일 아래까지 내린 값은 scrollHeight - clientHeig..

Redux 2020. 12. 18. 10:29

데이터를 불러오는 액션을 하나 추가했는데 오류가 났다. 🙄🙄 뭐가문제일가 했는데 오류를 쭉 내려보니 Home 컴포넌트에서 오류가 발견되었다고 한다. 오류의 정체 ^^;;; loadPosts라는 액션 함수를 호출하는 건데 그냥 썼다. 해결방법 함수호출로 바꿔주면 끝.

Error 2020. 12. 17. 15:37

더미데이터가 필요할 때, 하나하나 데이터를 만들어내기가 사실 쉬운일은 아니다. 그럴 때 유용한 라이브러리! 자세한 사용법은 이 웹페이지에서 확인할 수 있다. faker Generate massive amounts of fake contextual data www.npmjs.com faker 설치하기 faker를 불러온다. 영어로된 더미데이터를 생성할 수 있다! faker. 부분이 faker를 사용하여 만든 데이터. 폼은 기본 post state의 모양과 똑같이 만들었다. id는 shorid라이브러리를 사용해 랜덤으로 만들어 주었다. 사실 한국어로도 더미데이터를 만들 수 있는데 한국어로 만들면 글이 엉망진창이다. 한국어 페이커를 쓴 페이지. 성능안좋은 번역기로 돌린 모양새다. 게다가 이름은 성만 한국어할거..

React/React 관련 라이브러리 2020. 12. 17. 14:00

react, redux 에서 사용할 수 있는 라이브러리다. 제목 그대로 immer를 사용하면 알아서 불변성이 유지되도록 코드를 바꿔준다. immer설치 immer를 produce로 import. reducer에서 return produce(state, (draft) => { switch문... }); 을 해주면 된다. 화살표함수이기 때문에 {return .... } 은 생략해도된다. 그리고 state대신 draft 사용. 불변성을 유지하지 않으므로, state를 직접 바꿔준다. immer를 사용한 이유 10줄이 넘는 코드가 5줄로 줄어들었다.^^;; state를 draft로 바꿔줬으므로, 마지막 디폴트값은 그냥 break; break;를 사용하지않으면 뒤쪽 코드가 모두 호출되는 무시무시한 경험을 할 수 ..

React/React 관련 라이브러리 2020. 12. 17. 13:32

프론트 작업할 때, 더미데이터 만들기 요긴한 라이브러리가 있다. 바로 shortid! 겹칠일이 거의 없는 id를 생성해준다. 먼저 설치부터. import해주고, 사용은 shortId.generate() 로 하면 된다. 😀😀

React/React 관련 라이브러리 2020. 12. 16. 23:44