본문 바로가기

전체 글14

React+Webpack Boilerplate에서 SVG를 사용하기 React Boilerplate를 제작하고, svg를 사용하는 과정에서 1. 모듈을 찾을 수 없습니다. - Cannot find module 2. SVG Component의 width,height을 css로 설정해 주었더니 컴포넌트가 화면상에 보이지 않습니다. 와 같은 에러를 발견했을 때 문제를 해결하는 경험에 대해서 이야기한다. 사실 Create React App 을 사용했을 때 이런 문제를 겪어본 적은 없다. CRA에서는 import {ReactComponent as Icon} from "../icons"와 같은 형태로 svg를 컴포넌트 형태로 사용할 수 있다. 하지만, Webpack 설정을 통해 SVG를 사용할 수 있도록 설정하게 되면 webpack config file을 설정해야만 하고, 이 과정.. 2020. 6. 29.
2020 KWEB 준회원 과제 3회차 - Javascript Feedback var 대신 let과 const를! 기본적으로 const를! 값을 변경할 수 있는 var는 예기하지 않은 문제를 일으킬 수 있습니다. 기본적으로 항상 const를 사용하고, 만약 차후에 재할당을 한다면 let, 변수를 선언하고 초기화하세요. 생각보다 let을 사용할 일이 거의 없을 겁니다. // content를 초기화 후에 수정하는 코드 var newComment = document.getElementById("new-comment").value; newComment = newComment.trim(); ​ // 제안하는 코드 1 const newCommentEl = document.getElementById("new-comment"); const newCommentValue = newCommentEl... 2020. 6. 25.
RxJS를 배워 보았다. 용어 정리 RxJS는 Reactive Programming에 기반하여 만들어진, 비동기 어플리케이션의 작성에 있어서의 솔루션이다. Functional 프로그래밍과 Flow기반의 Reactive 프로그래밍을 기반으로 하여 러닝 커브가 다소 높다고 할 수 있다. 아래는 비동기 어플리케이션의 작성에 사용하는 솔루션들이 있다. Callback Promise Generator async/await RxJS *여기서 Reactive Programming이란, 비동기적 데이터 흐름을 다루는 프로그래밍이다. Functional Programming을 이용하여 여러 데이터 흐름을 합치고, 생성하고, 걸러낸다. 상태를 저장하지 않고 순수 함수를 사용해 로직을 구성한다. 즉, 상태를 변경하여 결과가 달라지는 Side-Effect를 최.. 2020. 6. 23.
KWEB 스터디 과제 피드백 - CSS styling 팁들 ! 팁0번 - 시트 작성 순서 * css property들을 작성할 때는, * display, overflow, float, position, z-index등을 작성 후, * 박스 모델을 작성하고,(width, height, padding, margin, border 순) * 그 뒤에 폰트나 색깔 등 그 외 속성들을 작성해주면 * 일관성 있고 알아보기 쉽게 코드를 짤 수 있겠습니다.(정해진건아님) ! 팁1번 - img 중앙정렬 * div 안에 있는 img를 중앙정렬하는 방법은 크게 두가지가 있습니다. * 첫째, div 태그에 text-align:center;을 적용합니다. * 둘째, img태그의 display:block;을 설정하고 margin: 0 auto;를 줍니다. * 헤더에서는 KWEB REGIS.. 2020. 6. 8.

티스토리툴바