프로그래밍 삽질 중

출처: https://www.inflearn.com/course/web-game-react/dashboard [무료] 웹 게임을 만들며 배우는 React - 인프런 | 강의 웹게임을 통해 리액트를 배워봅니다. Class, Hooks를 모두 익히며, Context API와 React Router, 웹팩, 바벨까지 추가로 배웁니다., - 강의 소개 | 인프런... www.inflearn.com 출처 : https://github.com/ZeroCho/react-webgame/tree/master/2.%EB%81%9D%EB%A7%90%EC%9E%87%EA%B8%B0 GitHub - ZeroCho/react-webgame Contribute to ZeroCho/react-webgame development by..

출처: https://www.inflearn.com/course/web-game-react/dashboard [무료] 웹 게임을 만들며 배우는 React - 인프런 | 강의 웹게임을 통해 리액트를 배워봅니다. Class, Hooks를 모두 익히며, Context API와 React Router, 웹팩, 바벨까지 추가로 배웁니다., - 강의 소개 | 인프런... www.inflearn.com * Hooks란? ▶ 기존 컴포넌트에서는 state, Ret 사용할 수 없었음 ▶ 함수 컴포넌트 안에서도 state, Ret, useEffet 사용할 수 있게 함 ▶ state를 하나씩 분리함(함수 컴포넌트 안에 있어야함) - class, for의 경우 각각 className, htmlFor을 사용 * webpack ..

참고 : https://velog.io/@forestin_s2/%EC%9B%B9-%EA%B2%8C%EC%9E%84%EC%9D%84-%EB%A7%8C%EB%93%A4%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-React-2.-%EA%B5%AC%EA%B5%AC%EB%8B%A8-%EB%A7%8C%EB%93%A4%EA%B8%B0 [웹 게임을 만들며 배우는 React] 2. 구구단 만들기 리액트의 기능을 최대로 끌어올릴 수 있는 클래스형 컴포넌트로 구현했습니다. state를 사용하기 위함입니다.위 코드가 클래스형 컴포넌트의 구성입니다.LikeButton이라는 클래스가 state와 render 함 velog.io 1. 클래스형 컴포넌트 : state 사용 위함 class GuGudan ext..

* 상황 : 카카오로 로그인 하는 과정에서 오류가 생김 * 오류 원문 kakao notnull violation: user.email cannot be null, notnull violation: user.password cannot be null kakao login notnull violation: user.email cannot be null parent: Error: Field 'email' doesn't have a default value * 문제 해결에 도움을 준 글 https://www.inflearn.com/questions/5623 카카로 로그인 버튼을 누르면 notNull Violation: user.email cannot be null 라는 에러 메시지를 받습니다. - 이메일을 nu..

* 러닝리액트 2판 내용 중 노트에 정리한 부분을 다시 옮기는 글 * 모든 내용을 담고 있지 않음 * 책 자체가 예시도 있으나(색 바꾸기, 체크박스 등) 주로 이론 중심 ㅇ 문서 객체 모델(DOM) : 명령적 접근(Imperative) 코드가 많아지거나 새로운 기능 추가나 규모의 확장이 어려움 -> 선언적 접근(Declative) 중심(리액트)으로 이루어지는 편, 리액트의 경우 render 함수를 통해 컴포넌트에 있는 지시에 따라 DOM을 생성함 1 2 3 4 5 const rateColor = (color, rating) => ({ //color는 변형 불가능한 객체 ...color, rating }) //중괄호({})는 바로 객체를 반환하지 못함, 괄호가 필요함 cs 1 2 3 4 5 const ad..

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고 * react -> node.js로 이미지 및 정보 저장하기 * mongoDB에 저장하는 것까지 확인 * 강의에서는 Cart(결제) 내용이지만, 복습 차원으로 진행하는 글이기에 [좋아요] 버튼을 누르는 것으로 변경 * 상황 * 좋아요(♥)를 누를 경우 mongoDB users에 정보가 담김 * 이미 좋아요 버튼을 누른 경우 -> 1에서 고정 [Client] DataInfo.js import React, { useState, useEffect } from "react"; import { Descriptions, Button } from "antd"; import { useDispatch } from "react-redux"; ..

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고 * react -> node.js로 이미지 및 정보 저장하기 * mongoDB에 저장하는 것까지 확인 [1. 상세정보를 담을 페이지 작성(DataInfo.js)] [Client] ShowDetailData.js import React, { useEffect, useState } from "react"; import axios from "axios"; import { useParams } from "react-router-dom"; import { Row, Col } from "antd"; import DataImages from "./Sections/DataImages"; import DataInfo from "./Secti..

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고 * react -> node.js로 이미지 및 정보 저장하기 * mongoDB에 저장하는 것까지 확인 [1. 상세정보를 담을 페이지 작성(ShowDetailData.js)] [Client] ShowDetailData.js import React, { useEffect } from "react"; import axios from "axios"; import { useParams } from "react-router-dom"; function ShowDetailData() { const { dataId } = useParams(); useEffect(() => { axios.get(`/api/data/data_id?id=${da..