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

목차 저번 포스트에서 정의만 해놓고 만드는 방법은 안해놨구만... 사전설치 프로그램 Installation - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.io Expo를 설치하는덴 문제없느데 실행하기위해서는 다음과 같은 프로그램이 필요하다 Node.js Git Watchman 다행히 블로그에 다 써놨다..ㅎ Nodejs로 서버만들기 목차 결국... 결국 백앤드까지 손을 대 버렸다... 프런트 앤드만 해도 할게 많은데!!! 풀 스택은 취업하고 할 생각이었는데!!! 그래도... 프런트..

목차 쿠키 쓰는 법에 대해 적으려 했다가 개념을 먼저 적었다 후후... 설명하는 방식으로 블로그를 쓰니 이렇게 개념을 짚고 넘어가게 된다. 쿠키와 세션 목차 쿠키 사용법을 포스팅하려는데 쿠키와 세션의 차이점에 대해 명시를 하고 적는 게 좋다고 생각되었다. 쿠키와 세션 HTTP 목차 CORS와 Representational를 알아가면서 계속 나왔던 것은 HTTP 였다. sirong.tistory.com React cookie 쿠키에 대해 알아보았으니, 쿠키를 쓰는 법에 대해 알아보자! npm install react-cookie 일단 패키지를 다운받자 import React from 'react'; import ReactDOM from 'react-dom'; import { CookiesProvider }..

목차 당신에게 Redux는 필요 없을지도 모릅니다. 이 글은 Dan Abramov의 You Might Not Need Redux를 번역한 글입니다. medium.com Redux 공식 홈페이지에 올라와 있는 글 중 하나이다. 구글링을 하면서 리덕스에 관한 로드맵을 봐서 어렵게 생각하고 있었는데, 그냥 공식 홈페이지 글과 같이 가볍게 접근하는 게 좋을 것 같다. Redux by react 오늘은 react로 redux를 사용해보자, redux toolkit를 쓰면 간편한 코드로 사용할 수 있지만, 구성 이해를 위해서 toolkit을 안 쓴 쌩코드로 redux를 공부 한 다음 toolkit을 포스팅할 거다. 설치 npm install --save react-redux 터미널에 해당 명령어를 입력하여 reac..

여러 가지 버튼을 만들고 각각의 버튼에 따라 다른 효과를 내기 위해, 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 다운로드를 했을 때 이 문장이 중요하다. 다운..

목차 시작하기 전 이전에 아이콘을 쓰는 법을 포스팅 한 적 있는데 무료 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이란 가상의 객체를 랜더링 하고 변경될 때마다 이와 비교하여 달라진 곳만 랜더링 한다. 즉, 웹의 변화를 빠르게 구현할 수 있다. 내 웹이 다른 웹보다 빠르다니!! ..