프로그래밍 삽질 중

* 러닝리액트 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..

* 인프런 '파이널 코딩 테스트 : 프론트엔드' 공부 후 만들어 보는 자료 * 100% 똑같지 않음(저작권이 걸리기 때문) * 네이버 영화 화면(2022.06.05 기준) * 메인화면(검은색 바탕) + footer 화면(회색 바탕) 만들어 볼 것 * html,css가 주 목적 [index.html] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80..

* 인프런 '파이널 코딩 테스트 : 프론트엔드' 공부 후 만들어 보는 자료 * 100% 똑같지 않음(저작권이 걸리기 때문) * 네이버 영화 화면(2022.06.05 기준) * 메인화면(검은색 바탕) + footer 화면(회색 바탕) 만들어 볼 것 * html,css가 주 목적 [index.html] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80..

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고 * 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"; ..

* 상황 import React, { useEffect, useState } from "react"; import { Descriptions } from "antd"; function DataInfo(props) { const [Data, setData] = useState({}); useEffect(() => { setData(props.detailData); console.log(props.detailData); }, []); return ( //변경 시 오류 {Data.price} {props.datailData.seasons} {props.datailData.description} ); } export default DataInfo; -> useEffect를 통해 Data값 전달 시 ' React..

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고 * 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..

* 문제 상황 : 상세페이지 작성 시 params로 값을 가져오려다가 실패 * 해결 : React 버전이 업데이트 되서 생기는 오류 * 해결에 참고한 글 : https://velog.io/@kcdoggo/Cannot-read-property-params-of-undefined-%EC%97%90%EB%9F%AC