건브로의 소소한 개발

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..

안녕하세요 건브로입니다. 이번에는 로그인 유무에 따른 네비게이션의 변화를 줘봤어요! 그리고 최종적으로 빌드까지 했습니다.😊 빌드를 한 이유는 아무래도 프론트 엔드는 UI/UX가 중요하니까 빌드를 해놓고, 동기들에게 확인받으면서 하려고 해 봤어요. 1. 네비게이션의 Link 기능을 어떻게 넣어야 할 것인가? 원래는 아래의 코드처럼 하려고 했다. 하지만 이렇게 하면 Navigation Ui가 예쁘지 않아서 Material Ui에서 Bottom Navigation을 참고했다. https://material-ui.com/ Material-UI: A popular React UI framework React components for faster and easier web development. Build you..

안녕하세요. 이번 프로젝트에서 프론트 엔드 담당 건브로입니다. 이번에 동기들과 프로젝트를 하게 되었어요. Feeding Plants란 말 그대로 식물 키우기 웹이에요. 1. react router 세팅 오늘 라우터 세팅까지 해서 끝냈다. 나중에 라우터를 더 세팅해야 할 것 같지만, 일단 여기까지 했다. 폴더 형식들은 현재 아래 사진과 같이 구성되어 있다. 소스 코드는 아래의 링크를 참고하면 된다.. github.com/0-ho98/feeding-plants 0-ho98/feeding-plants 화분을 키워봅시다. Contribute to 0-ho98/feeding-plants development by creating an account on GitHub. github.com 폴더의 구성은 니꼬쌤 강의..

안녕하세요. 건브로입니다.😊 여러분은 일기를 어떤 형식으로 쓰나요? 주로 오늘 하루를 돌아보면서 쓰지 않으신가요? 아닌 사람도 있겠지만, 오늘 하루를 돌아보면서 써야 의미가 있는 것 같습니다. 제가 개발일기를 총 3번을 써봤는데, 일기보다는 개발에 편향되어있다는 생각이 들었어요. 그래서 좀 더 생각을 하면서 써야겠네여... 아침에 일어났을 때 밖은 하얗고, 방안은 어둡지만은 않았다. 그리고 조금씩 들려오는 티비 소리가 나를 깨운 것 같다. 지금의 평온함이 오래가기를 원해서 몇 분 동안은 이불속으로 들어가 있었다. 그때가 몇 시였더라 12시였던 것 같다. 내 인생에서 제일 늦게 일어난 날 같았다. 나는 밥을 먹고 평소와 같이 소화를 시킨 뒤에 내 방에 들어가서 '나동빈'님의 강의를 들었다. 확실히... 강..

안녕하세요! 건브로입니다. 방학한 지 벌써 1달이 다돼가네요... 정말 시간이 빠르죠? 그래서 그런지 좀 급해집니다! 뭔가 이번 방학 때는 많은 걸 안 상태로 3학년이 되고 싶네요. 그래서 프런트엔드뿐만 아니라 백엔드도 같이 배우는 강의를 유튜브에서 찾다가 풀 스택 개발자이신 '나동빈'님의 강의를 보게 되었습니다. 아직 초반 부분이지만, 확실히 유용한 부분을 알려주시는 것 같아요. 😊 www.youtube.com/watch?v=_yEH9mczm3g&list=PLRx0vPvlEmdD1pSqKZiTihy5rplxecNpz 리액트와 Nod.js로 고객 관리 시스템 개발하기 저는 이 강의를 보고 정리하는 것이 아닌 느낀 부분과 경험하는 부분을 초점 두겠습니다! 1. node.js, VScode 설치와 CRA 시..

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

오늘은 2020년 12월 26일 토요일🎶 어제는 class component만 썼다. gun-bro.tistory.com/8 React class component와 function component 공부 일기 #1 안녕하세요!! 😊 오늘 처음으로 개발 일기 써보네요ㅋㅋㅋㅋㅋ 원래 이 카테고리를 만들 때 개발 일기가 아닌 그냥 일기 카테고리를 만들려고 했어요. 근데 그냥 일기면 제가 이 블로그를 만든 gun-bro.tistory.com class component만 쓰다보니 function component를 까먹었나 싶었지만, 생각 의외로 잘 했다. 근데, map()함수를 제대로 못써서 오류가 좀 많았다. map()함수를 써서 배열에 분배하는 방식으로 쓰고 싶었다. 처음에 코드를 작성할 때 class ..

안녕하세요!! 😊 오늘 처음으로 개발 일기 써보네요ㅋㅋㅋㅋㅋ 원래 이 카테고리를 만들 때 개발 일기가 아닌 그냥 일기 카테고리를 만들려고 했어요. 근데 그냥 일기면 제가 이 블로그를 만든 이유가 없어질 수 있다고 생각했어요. 그래서 내가 배운 걸 가지고 만들어보면서 힘들었던 고충들을 쓰려고 해요. 오늘은 2020년 12월 25일 크리스마스🎄 낮에 엄마와 함께 장보고 난 후 오목을 뒀다. 난 항상 내 방에서 컴퓨터를 하거나 휴대폰만 봐 왔는데, 오늘은 좀 더 평화로웠어. 왜일까? 나도 모른다. 단지, 부모님과 함께 오늘 하루를 보내고, 평소와 같이 내 방에서 컴퓨터를 하고, 휴대폰은 자주 안 봤다. 부모님과 같이 있으면 평화로운 것 같아. 다들 그렇지 않나? 오늘의 나의 할 일은 이렇게 부모님과 보내고, ..

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

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