건브로의 소소한 개발

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 끝!

안녕하세요! 😊 이번 주에도 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에서 제공해주는 데이터베이스 무료로 사용하는 방법..

안녕하세요 건브로입니다!! 조금 오랜만에 글을 쓰네요..! 요즘... 한이음 프로젝트 준비하느라 블로그 글을 못썼네요. 뭔가 새로 배우면 바로바로 블로그 글 정리하면 정말 좋을 텐데, 그게 쉽지 않네요. 새로 배우면 그걸 적용하기에 바쁘고, 정리하는 건 우선순위에서 밀려나가요. 이러면 안 되는데, 노력을 좀 더 해봐야겠네요. 일괄 처리하려고 하는 저의 안일함 반성하겠습니다... 이번 4주 차 리액트 강의에서는 리액트에서 소소하게 css 사용하는 법과 firebase 사용 방법을 배웠습니다! 1. 4주 차에서 배운 react css, js 잡기술 keyframes, window.scrollTo(), styled-components 패키지를 적용한 태그에 props로 데이터 넘겨주기 등등 이러한 기술들을 배..

오늘은 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..

안녕하세요! 건브로입니다. 1주차 때는 화면에 Hello World 나오게 해보자! 그런 느낌이었는데, 와우 이번주는 그냥 자기가 표현하고 싶은 것들을 코딩할 수 있는 느낌이었어요. 그래서 이번주 개발 일기는 제가 표현한 걸 그대로 써서 배웠던 부분을 한 번더 느껴보겠습니다. 1. 코드 import React from "react"; // import './App.css'; import Starter from "./Starter"; import Score from "./Score"; import heize from "./images.jpg"; import styled from "styled-components"; import Quiz from "./Quiz"; import SwipeItem from "...

안녕하세요 건브로입니다! 이번에 스파르타 코딩 클럽에서 새로운 강의를 듣게 되었어요! 바로바로 리액트 강의입니다! 리액트 강의는 다른 강의에 비해 많이 들어본 적이 없어서 이번에 다시 기초를 탄탄하게 잡는다고 생각하고 끈기 있게 공부하려고 합니다! 파이팅! 이번 강의에서는 필수적으로 다운로드 해야 하는 프로그램이 있다. 바로, Github Desktop, Visual Studio Code, Git Bash, NVM이다. 1주 차에서는 Github Desktop을 사용하지 않았다. 0. Github Desktop, Visual Studio Code, NVM 설치 아래의 링크는 visual studio 설치 링크이다. https://code.visualstudio.com/download Download Vi..

안녕하세요 건브로입니다. 오늘은 로그인 기능과 로그아웃 기능이 다 만들어지고, 그에 따른 화면들이 바뀌는 것 까지 만들어졌어요! 방학 끝나기 전까지는 여기서 배운 내용들을 머리에 넣고 싶네요. 파이팅! 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..