아싸지만 1일1글 하고싶어

여러 가지 버튼을 만들고 각각의 버튼에 따라 다른 효과를 내기 위해, switch가 필요하게 되었다. 그런데 뭔가 switch보다 더 이쁘게 쓰고 싶어 찾아보다가 enum을 알게 되어 포스팅하게 되었다. Switch 일단 enum과 비교할 겸 switch를 한번 짚고 넘어가자! switch는 지정 변숫값에 따라 여러 결과를 나타낼 수 있는 분기문(상황에 따라 달라지는 문장)이다. 일단 html은 기본값으로 넣고 Js 불러오기 외에는 기본값이다. let choice = 1; switch(choice){ case 0 : document.body.style.background = 'tomato'; break; case 1 : document.body.style.background = 'skyblue'; bre..

목차 Carousel이란 사전적 의미로는 회전목마로써 웹에서 이런 콘텐츠를 뜻한다. 회전하면서 콘텐츠를 보여주는 모습이 회전목마를 닮아 Carousel이라 부른다. React-Slick 라이브러리는 여러가지 있겠지만 이게 제일 깔끔하고 대중적인 것 같아 이걸 선택했다. Neostack The last react carousel you will ever need react-slick.neostack.com 대략 이런느낌인데, setting과 css 수정으로 자유도가 높다는 게 마음에 들었다. (setting에서 화면에 나열되는 콘텐츠 개수도 정할 수 있다) 설치방법 npm npm install react-slick yarn yarn add react-slick 다운로드를 했을 때 이 문장이 중요하다. 다운..

목차 서론 React가 프로젝트를 계속 최신버전으로 만들라고 한다. 4.0.1부터 계속 이러는거보니 version 4에서 획기적인 기능을 추가해서 좀 불안정해서 그런가 싶기도 하다. 그래서 새로 업그레이드 하는 김에 react 설치 , 프로젝트 만드는 방법도 포스팅 할려 한다. 기존의 방법으로 React 프로젝트가 생성되지 않을때 이 문단은 생성방법은 알고있는데, 에러때문에 생성안되는 사람들을 위한 구간이다. 새로 배우는사람들은 조금만 더 밑으로 내리자. 이렇게 뜰때 일단은 글에 적힌것과 같이 기존의 create-react-app을 제거해주자. npm uninstall -g create-react-app yarn global remove create-react-app 그러고 난 다음 밑에서 기술하는바와 ..

목차 시작하기 전 이전에 아이콘을 쓰는 법을 포스팅 한 적 있는데 무료 icon 쓰기 / fontAwesome 이 포스팅의 목적은 fontAwesome이 설정에 따라 출력이 안 되는 걸 발견해서이지만, 나는 언제나 포스팅을 이 정보를 처음 접하는 사람이 본다 생각하고 쓰니 fontAwesome을 설명하고 나서 쓰겠다. 서 sirong.tistory.com React에서 그대로 쓰면 style 제한이 좀 있다. 그래서 React용 icon 쓰는 법을 새로 찾아 포스팅해본다. 설치방법 react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons..

React의 장점!! 새로운 언어를 쓸 때에는 그 언어의 장점을 인지하며 내가 이렇게 근사한 언어를 구사한다~라는 느낌으로 프로젝트를 하면 뭔가 기분이 좋다. 그래서 적어보는 리엑트의 장점!! 효율적 렌더링 html과 css의 데이터를 종합하여 출력하는 것을 렌더링이라 한다. 하지만 우리는 그림을 보려고 하는 게 아니라 우리에게 맞춰 변화하는 화면을 볼려하기에 랜더링은 수시로 일어나게 된다. 이때 React의 대표적인 장점이 부각되는데, 기존의 렌더링이 변경해야 하는 부분이 있다면 새로 랜더링을 하는데 비해, React는 Virtual Dom이란 가상의 객체를 랜더링 하고 변경될 때마다 이와 비교하여 달라진 곳만 랜더링 한다. 즉, 웹의 변화를 빠르게 구현할 수 있다. 내 웹이 다른 웹보다 빠르다니!! ..