건브로의 소소한 개발

안녕하세요! 😊 이번 주에도 4개의 강의 들었습니다. 오늘 섹션 1이 드디어 끝나고, 섹션 2로 넘어왔네요. 강의를 매 번 듣고 이해만 하지 말고, 내 것으로 만드는 게 정말 힘듭니다. 여러분들은 어떻게 자기 것으로 만드는지 궁금하네요! 이러한 궁금증은 뒤로하고, 이번주에는 데이터베이스(mongoDB)에 상품을 저장하는지, 그리고 상품을 어떻게 꺼내서 메인 페이지에 상품을 보여줄지가 핵심이었습니다. 이 핵심에 대해서 공부한 걸 정리해볼게요😁 1. 업로드 페이지에서 데이터베이스로 데이터 보내기 이 페이지(UploadProductPage.js)에서 확인을 누르게 되면 데이터베이스로 데이터가 저장이 되어야 한다. 여기서 어떤 데이터가 가는 게 나을까? 사진, 이름, 설명, 가격, 나라 데이터가 서버로 가야 한..

안녕하세요 건브로입니다! 이번 주에도 4개의 강의를 들었네요. 이번에 중점적으로 봐야 할 것은 사진 보내기였습니다. client에서는 FormData를 잘 써야 하며, node server는 root에 있는 폴더인 upload폴더에 multer 패키지를 사용하여 올려야 합니다. 1. express의 router 사용하기 express는 서버를 만들 때 사용하는 프레임워크이다. Express 사이트에서는 'Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크'라고 한다. https://expressjs.com/ko/ Express - Node.js 웹 애플리케이션 프레임워크 Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크 $ npm install express --save expressjs..

안녕하세요 건브로입니다. 오랜만에 블로그 글 쓰네요.😁 이번에 학교에서 스터디 목적으로 '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기'를 인프런을 통해서 들었습니다. 사실 이 강의를 골랐을 때 그렇게 어려운지도 몰랐네요. 근데 지금보니까 boiler-plate를 토대로 바로 만들더군요. boiler-plate는 로그인과 회원가입 기능이 내장되어 프로젝트로 보면 됩니다. 강의가 총 45개인데, 일주일에 4개씩 시험기간을 제외하고 꾸준히 보려고합니다. 긴 시간동안 짧게 보면서 투자하는 건데 저에게 도움이 됐으면 좋겠어요. 오늘 만들어낸 결과물을 먼저 보여줄게요.(홈, 로그인, 회원가입은 제외) 1. 이번에 무엇을 배웠는가? 1) mongoDB에서 제공해주는 데이터베이스 무료로 사용하는 방법..

안녕하세요! 건브로입니다. 요즘 시험보고, 학교 전공 중에 캡스톤 디자인 과목 때문에 블로그 활동을 잘 못했네요! 이제 방학이니까 자주 활동할게요! 제가 이번에 한이음(공모전)을 통해서 스파르타코딩클럽에 대해서 알게 되었어요. 지금까지 저는 독학으로 html, css, javascript, node.js ,react.js를 공부했었습니다. 하지만 node.js, react.js는 안 사용한지 오래되서 까먹기도 하고, 기초를 탄탄하게 하기위해서 스파르타코딩클럽 왕초보반으로 시작해서 나중엔 node.js, react.js 이렇게 들으려고해요! 1. 배우는 내용 HTML: 구성요소 CSS: 블록 정렬, 배경관련 꾸미기, 블록 크기 조절, 블록 여백 조절 등 Javascript: 배열, 객체, 배열관련 함수(s..

안녕하세요 건브로입니다. 이번에는 로그인 유무에 따른 네비게이션의 변화를 줘봤어요! 그리고 최종적으로 빌드까지 했습니다.😊 빌드를 한 이유는 아무래도 프론트 엔드는 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..

안녕하세요 건브로입니다. 오늘은 로그인 기능과 로그아웃 기능이 다 만들어지고, 그에 따른 화면들이 바뀌는 것 까지 만들어졌어요! 방학 끝나기 전까지는 여기서 배운 내용들을 머리에 넣고 싶네요. 파이팅! 1. Log In 전에 올린 개발 일기 게시물은 계정 생성만 되고, 화면이 따로 안 나왔었다. 하지만 이 코드들을 사용하고 나서부터는 화면이 따로 나온다. 그리고 로그인과 계정 생성이 토글 버튼 기능이 있어서 계정이 있으면 로그인이 가능하며, 없으면 계정 생성도 가능해졌다. 그리고 로그인하면 화면도 따로 표시가 된다. 1) App.js 첫 번째 코드 블록에는 init, setInit이 새로 생겼다. init은 firebase가 초기화되어있는지 알려주는 boolean값이다. 그래서 처음에는 초기화가 안되어 ..

안녕하세요! 건브로입니다! 현재 트위터 클론 코딩에서 인증 관련 주제로 코딩하고 있어요. 지금은 강의를 보면서 배우고 있는데, 강의가 없었다면 저는 어떻게 이렇게 배울 수 있을지 생각했어요. 순수 구글링 해서 찾기도에도 정말 오랜 시간이 걸릴 텐데 니꼬쌤 존경합니다!😊 1. Login Form part One //Auth.js import React, { useState } from "react"; const Auth = () => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const onChange = (event) => { const {target:{ name, value }}=event..

안녕하세요 건브로입니다. 원래 동영상 강의는 나중에 보고 제가 페이지를 만들어보려고 했어요. 근데, 아이디, 비밀번호 인증에 미숙하기도 하고, 아직까지는 라우팅과 화면 렌더링 밖에 할 줄 몰라서 니꼬쌤의 강의를 찾아봤습니다. 보니까 트위터 클론 코딩에서 기본적으로 CRUD도 포함되어있고, 아이디 비밀번호 인증에 관한 것도 있네요! 심지어 포트폴리오 만들 때 백엔드가 필요한데 그걸 대신해주는 파이어베이스까지! 이 강의를 보면서 부족한 부분을 계속 채워나가고 저만의 방식들을 찾아봐야겠어요. 현재 #0 INTRODUCTION, #1 SETUP 이렇게까지 들었다. 1. #0 INTRODUCTION 주로 파이어베이스를 왜 쓰는지 나온다. 니꼬쌤은 웹앱을 상용화하기 전에 미리 한 번 빠르게 써보고 사용자 측면에서 ..

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