건브로의 소소한 개발

1. npx create-react-app my-app 원래 node가 깔려있다면, terminal에 입력하면 제대로 동작 해야한다. 근데, 가끔 아래와 같은 오류가 뜰 때가 있다. 이렇게 떴을 때 나는 npm uninstall -g create-react-app과 yarn global remove create-react-app을 사용해서 해결 하려고 했다. 근데... 해결이 안됐다. 아마 이 글을 보고 있는 분들은 저 2개의 명령을 쳤을 것 같다. 2. 해결방법 분명, 저 위의 2개의 명령은 전역으로 저장되어 있는 패키지를 없애려고 사용했다. 아무리 없애도 캐시가 남아 있는 경우가 있다. 캐시를 지우는 명령어를 사용한다면 해결 가능하다. npx clear-npx-cache 끝!

React에서는 자바스크립트로 상태 관리도 하고, js에서 html로 렌더링도 해줍니다. react에서는 jsx 방식으로 js에서 html로 바꾸는 방식을 지원한다면, styled-components 패키지를 다운로드하여 js에서 css로 바꿀 수 있습니다. 1. styled-components 패키지 다운 받기 # yarn이 있을 경우 yarn add styled-components # npm으로 다운 할 경우 npm i styled-components 2. styled-components 쓰는 방식 이 패키지는 scss 방식을 지원합니다. //App.js import React from 'react'; import styled, {keyframes} from 'styled-components'; co..

오늘은 Redux에 대해서 정리를 해보려고 합니다. 저는 Redux는 React를 배우고 나서 계속 듣긴 했지만, 제대로 공부를 한 적이 없었습니다. 왜냐하면, React를 깊게 공부한 게 아니어서 '클래스형이나 함수형 컴포넌트의 state 관리 기능으로만 페이지를 만들자!'라는 마인드였습니다. 하지만, 지금은 공모전에 나가야 할 상황도 있고, 실생활에서 쓰려면 위에서 아래로 떨어지는 React state 관리 방법을 벗어나야 할 필요를 느꼈습니다. 그럼 Redux는 뭘까요? 그리고 여기서는 주로 React와 연관 지어서 설명합니다😊 0. 사전 준비 react에서 사용하기 때문에 'yarn add redux' or 'npm i redux', 'yarn add react-redux' or 'npm i re..

SPA가 무엇일까요? Single Page Application을 뜻합니다! React는 SPA로 만들 수 있게 해 준답니다. 이렇게만 이야기한다면 잘 안 와 닿을 수도 있어요. 저희가 자주 사용하는 a태그는 링크 이동시에 사용되잖아요? 링크를 이동하는 데에 있어서 a태그는 치명적인 단점이 있어요. 바로.. 페이지 다시 불러온다는 것이지요. 이렇게 되면 메뉴의 버튼을 누를 때마다 새로 페이지를 불러내면서 사용자들이 불편을 겪을 수가 있어요. 화면의 끊김을 없애 주기 위해서 vue.js, react.js 등등 프레임워크를 사용합니다. react.js에서 사용하는 라우터 패키지가 있어요. 'react-router-dom'입니다! 'npm install react-router-dom'를 이용해서 다운 받읍시다..

안녕하세요. 건브로입니다. 오늘은 크리스마스입니다.🎄 1년 전만 해도 사람들은 커플들, 친구들, 가족들 이렇게 밖에서 좋은 시간들 보냈었죠. 현재 다시 크리스마스가 왔는데, 다들 안에서 보내야 한다는 게 아쉬워요...😥 화이트 크리스마스였으면, 안에서 보내기 더 좋았을텐데 눈이 안 왔네요.❄ 그래도 아쉬운 대로 저는 오늘은 그냥 친구들과 'League of legend'하면서 온라인에서 친구들과 보낼 겁니다! 다들 즐거운 실내 크리스마스 보내세요~ 1. 컴포넌트의 생명주기 컴포넌트에는 생명주기가 있어요. 웹을 더 효과적으로 사용하려면 생명주기는 필수라고 생각해요. 예를 들어서 제가 해당 웹페이지에 새로 만들었을 때, 어떤 창이 뜨게 하려면 컴포넌트의 생명 주기의 마운트가 필요합니다. 그리고 제가 페이스북..

안녕하세요. 건브로입니다! 오늘은 많이 공부 못한 것 같아서 아쉽지만 내일은 온라인 강의 2개 듣고, 지금까지 배운 것들 정리를 하려고 합니다! 이번 크리스마스이브는 집콕이겠네요...😥 제가 이번년도에 군대 전역했는데, 20살부터 크리스마스를 제대로 못 보냈어요. 정말 안타까워요... 언제 크리스마스를 제대로 보낼 수 있을까요? 이번년도에 크리스마스를 집에서 보내야 해서 아쉬운 사람들은 저를 보면서 위로가 됐으면 좋겠어요. 다들 집콕합시다!!! 1. state란 무엇일까? state란 보통 동적인 데이터를 다룰 때 사용해요. 뭐 변하는 데이터, 존재하지 않는 데이터를 동적인 데이터라고 보시면 되겠습니다. gun-bro.tistory.com/5 props와 map 그리고 propTypes 안녕하세요! 건브..

안녕하세요! 건브로입니다. 요즘 코로나가 전염성이 엄청나서 그런지 내일부터 5인 이상 금지라고 하네요. 힘들겠지만, 다들 화이팅하시고 이럴 때 일수록 자기 자신의 능력치를 올리면서 나중에 뽐내봅시다! 1. props란 무엇일까요? props를 react.js를 처음 공부하는 사람들은 처음 들어볼 거예요. (물론 vue.js를 공부했던 사람을 알 것입니다!) props는 컴포넌트끼리 값을 이동시키기 위해서 사용해요. 축구로 예를 들어봅시다. 이 밑에 있는 코드들과 연관되어 있는 index.js, index.html은 이 글과 이어집니다! gun-bro.tistory.com/4 React의 구조와 JSX 안녕하세요! 건브로입니다! 종강해서 그런지 오늘도 글도 올리고 공부했어요. 아직까지는 많이 어려운 건 없..

안녕하세요! 건브로입니다! 종강해서 그런지 오늘도 글도 올리고 공부했어요. 아직까지는 많이 어려운 건 없으나 나중에는 많은 어려움이 있겠죠? (Vue를 공부를 한 적이 있어서 그런 것 같아요😁) 확실히 코딩은 한 번 배워두면 비슷한 언어나 프레임 워크를 공부할 때 편한 것 같아요! 여러분들도 파이팅하시고, 공부했던 것은 배신 안 합니다! 그리고 코로나 조심하시고, 제 글을 봐주셔서 감사합니다!! 1. React의 폴더 구조 react는 npx create-react-app을 하고 나면 node_modules와 public, src폴더가 새로 생겨요. 그리고 폴더에 안 들어가 있는 파일로 README.md와 package.json, package-lock.json, .gitignore, .eslintcac..

안녕하세요!다음 블로그에서 티스토리로 넘어오고 처음 글 쓰네요!그리고 한 동안 시험이 있어서 글을 못 올리고, 코딩도 못했네요... 이제 종강도 했으니 동기들과 공모전 준비하면서 React.js 공부하려고 합니다!다들 코로나 조심하시고 파이팅~!1. node.js 설치하기react.js를 사용하려면, 일단 node.js를 설치해야 합니다!LTS버전으로 다운 받으세용그리고 다운 받으시면 cmd로 node -v와 npm -v으로 버전을 검사해봐요.node.js를 다운 받으면 npm도 같이 다운이 된다는 거 알아두세요. 2. cmd로 React 패키지 다운 받기cmd으로 react를 다운 받아야합니다.그전에 일단 폴더를 생성하고, cdn에서 폴더 경로를 그 폴더 위치로 바꿔주세요.그렇게 했으면 'npx cre..