react6

• 

  [React &Node.js] 간단한 쇼핑몰사이트 구현해보기 (4) 지난번과 다른점은 board.jsx를 추가했고, boardform.jsx로 이어지게 했다. board의 역할은 게시판 및 쇼핑몰 리뷰?느낌으로 만들 예정이다. 서버와 연동하여 데이터베이스에서 (내가 입력한 게시판 제목)title, (내가 입력한 게시판 내용)content를 관리하도록 했다. 생각보다 react와 node를 통해서 게시판을 만드는 자료가 많아서 구글링좀 하면서 만들어 보았다. 나는 우선 헤더에 게시판을 추가했고, 게시판을 누를경우 react-router-dom의 Link기능을 통해서 게시판 localhost:3000/board로 넘어가도록 했다. 바로 boardform.jsx로 넘어가보면, import { CKEditor } from '@ckeditor/ckeditor5-react'; im.. BE/Node_shopping 2022. 9. 5.

• 

  [React&node.js] 간단한 쇼핑몰사이트 구현 해보기 (1) 우선 1차 목표는 프론트엔드만 사용해서 react로 간단한 쇼핑몰을 구현해보기로 했다. react-router-dom을 이용해서 백엔드 없이 url 이동을 가능하게 할 것이고, 어느정도 틀이 잡히고나면 나머지 로그인, 회원가입 데이터베이스 관리는 Node.js 로 해볼 예정?이다 우선 컴포넌트 구성은 이렇게 되어있으며, App.jsx에서 실행하고 home.jsx product.jsx basket.jsx가 각각 pages라는 이름으로 만들어 주었고, 말그대로 home.jsx는 메인 페이지이기때문에 Main.jsx에서 구현하였고, product.jsx는 이제 각각의 상품을 클릭하였을때 id를 링크로 넘어가게 해서(react-router-dom사용) detail.jsx에다가 구현, 마지막으로 basket.js.. BE/Node_shopping 2022. 8. 28.

• 

  [React] 함수형 컴포넌트 개념 정리(CRUD) 최근 백엔드 연동과정에서 강의를 듣다보면 예전 강의들은 클래스형 컴포넌트를 통해서 개발했던 것들이 많은데, 나는 함수형 컴포넌트를 이용해서 하는것을 배워서 직접 바꿔보았지만 헷갈리는 부분들이 많아서 function component React 개념을 한번더 정리&복습하기 위해서 백엔드없이, 따로 js파일을 만들지 않고 App.js에다가 하드코딩을 해보았다. Component App.js function App() { return ( WEB html css html Welcome Hello,WEB ) } export default App; 컴포넌트 생성 ------> function Header(props){ return WEB } function Nav(props){ return ( html css h.. FE/React 2022. 8. 22.

• 

  [React] Coin tracker (coin paprika API) https://api.coinpaprika.com/ Coinpaprika api.coinpaprika.com 사이트에서 가상화폐인 코인의 정보를 가져올수있는 API가 있다. 이것을 react에서 실시간 시세를 출력해보는것을 만들어 볼 것 이다. 우선 이번에도 cra를 이용해서 기본 환경을 설정했다. useEffect를 사용해서 데이터를 딱한번만 불러오게 해주었다. (괄호안에 []에 어떠한 인덱스도 넣어주지않으면딱 한번만 불러올수있음. 브라우저 콘솔창을 봐보니깐 이쁘게 잘가져와졌다. 기본 Json형식은 어떻게 되어있나 링크를 들어갔지만 나는 줄바꿈이나 그런것없이 다 붙어있어서 뭐가 뭔지 알아보기가 힘들었다. 그래서 찾아보니 이쁘게 변경해주는 사이트가 있다고 해서 변경해보았다. 이렇게 나온다. 즉 .name.. FE/React 2022. 7. 26.

• 

  [React] css에서 알아두면 좋은점, useEffect 1. react에서 App.js나 index.js에다가 무작정 css를 Import해도 되긴하지만, 이러면 전역으로 쓰이는데다가 다른 자바스크립트에서도 쓸라고하면 또 import를 해야한다. 즉, cra(create-react-app)의 장점인 분할과 정복에 효율성이 떨어진다고 할 수 있다. 그래서 쓰는것이 className을 이용한 css인데, Button의 style을 지정하는 css를 다음과 같이 만들어 준다고 하자. Button.module.css .btn { color:white; background-color: tomato; } 그후에 Button의 컴포넌트를 만드는 자바스크립트인 Button.js에다가 아래와 같은 코드를 넣어보자 Button.js import PropTypes from "p.. FE/React 2022. 7. 24.

• [React] Prop/memo/propstype 이번에는 Prop에 대해서 공부했다. 1. Props란 컴포넌트에 전달되는 단일 객체이다 React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는데 이 객체를 “props”라고 한다. Props 자체를 수정해서는 안 된다 여러 컴포넌트를 모아 하나의 컴포넌트를 만들 수 있고, 한 컴포넌트 안에 여러 엘리먼트가 선언되어 있으면 재사용 가능한 단위로 추출하여 유지보수가 쉽도록 하는게 중요하다 const hello = (props) => { return hello, {props.name} } ReactDOM.render( , document.getElementById('root') ); 와 같은 형식으로 유지된다. 2. React.memo(.. FE/React 2022. 7. 24.