고래씌

※ Route 의 역할은 특정 주소의 특정 컴포넌트를 보여주겠다! ⇒ 해당하는 페이지만 보여줌.페이지 이동을 위해서는 “Link” 를 이용한다! 태그는 사용하지 않는다. 이것을 사용하게 된다면 페이지가 새로 로딩되기 때문에 사용하지 않는다. 2. 파라미터와 쿼리※ 파라미터와 쿼리는 어떤 주소의 동적인 값을 읽어올때 사용. App.jsimport React from "react";import { Route, Routes, Link } from "react-router-dom";import Home from './Home';import About from "./About";import Profile from "./Profile";function App() { return ( ..

1. Sass(Syntactically awesome stylesheets)https://sass-lang.com/guide⇒ Sass 가이드 페이지⇒ 이것을 설치해야 프로젝트에서 sass를 사용할 수 있음※ scss를 사용할때 변수를 사용할때는 “ $ “ 를 사용함. 1-2. size props 설정CSS 클래스 이름을 동적으로 넣어주고 싶으면 이렇게 설정className={Button ${size}}- 하지만, 조건부로 CSS 클래스를 넣어주고 싶을때 이렇게 문자열을 직접 조합해주는 것 보다 classnames 라는 라이브러리를 사용하는 것이 훨씬 편하다.- classNames 를 사용하면 다음과 같이 조건부 스타일링을 할 때 함수의 인자에 문자열, 배열, 객체 등을 전달하여 손쉽게 문자열을 조합 할..

https://brasd9806.github.io/ React Appbrasd9806.github.io 해당 사이트로 접속하시면 확인가능합니다. 아직 많은 기능을 넣지는 못해서 앞으로 차차 기능도 넣고 만들어갈 예정입니다.

1. 로그아웃 ① store.js export let {프로필랜덤변경, 로그아웃} = user.actions; ② App.js import {프로필랜덤변경, 로그아웃} from './store'; => 로그아웃 클릭시 로그인 버튼만 보이도록 설정됨 2. 로그인 모달창 src 폴더아래에 components 폴더 아래 LoginModal.js 파일 생성 ▶ LoginModal.js export default function LoginModal({모달창닫기}){ return ( × 이메일: 닉네임: 로그인 ) } ▶ App.js import LoginModal from './components/LoginModal'; let [loginModal, setLoginModal] = useState(false); f..

1. Flux? MVC 패턴과 비슷한 React앱을 다루기 위한 디자인패턴으로 Meta(facebook)에 의해 개발된 패턴. Flux는 라틴어로 "흐름"이라는 뜻으로 단방향 데이터 "흐름"에 초점을 두어 쉽게 코드를 예측가능하게하여 유지보수성을 높이는데 도움을 주어 리액트개발 시 자주 사용되는 상태 관리 패턴이다. 1) store 애플리케이션의 상태(state)를 담고있는 객체. Redux에서는 store 단일한 상태객체를 만들어서 모든컴포넌트에 공유해줌. 단, 애플리케이션에 따라 여러 개의 store가 존재할수는 있음. Ex) 투두리스트 관리용 store, 그외 기타 기능 관리용 store등등 2) Action 사용자의 상호작용, 혹은 시스템으로 인해 발생하는 이벤트로 인해 발생되는 작업(action..

1. axios ▶ data.json public 폴더 아래에 data폴더 생성후, data.json 파일생성한다. => 백엔드 서버가 아직 개발이 안됐을때 활용하는 테스트 서버임 => json형태로 전달해야함! => 이코드들은 모두 json형태임 => 이 데이터 자체를 백엔드에서 전달해주는 데이터임 [ { "글번호": 1, "글제목": "초기게시글 1", "글내용": "다이어트3주차 힘드네요", "작성자": "admin", "작성일": "2023/12/27" }, { "글번호": 2, "글제목": "다이어터 식단표 공유", "글내용": "아침 : 삼각김밥, 점심 : 김밥반줄, 저녁 : 삼각김밥", "작성자": "admin", "작성일": "2023/12/27" }, { "글번호": 3, "글제목": "..

1. useEffect - useEffect : 컴포넌트가 랜더릴될 때를 감지하여 랜더링된 "이후" 실행할 코드를 기술하는 함수. - 컴포넌트에는 기본적으로 lifeCyle이라는 개념이 있는데, 컴포넌트가 처음 로딩되는 시기를 mount - state변경에 의해 컴포넌트가 재랜더링 될때는 update - 컴포넌트가 교체/소멸될때는 unmount라고 부른다. useEffect는 mount, update, unmount되는 시점에 각각 끼어들어서 내가 실행하고자 하는 코드를 추가할 수 있다. ▶ 사용방법 useEffect(function() => { 랜더링이 완료된 "후!!!!!!!!!!!!!!!!!!!!!!!!!!!!!" 실행할 코드 return 컴포넌트가 재랜더링되거나, 소멸할 때 실행할 "함수" } ,..

1. REST REST(Represntational State Transfer) : URL과 전송방법(Method)을 활용하여 작업내용을 url창에 표현하고, 필요한 상태를 전달하는 모든 행위를 의미한다. /board/detail → /board/detail/5(get) board에서 5번게시물을 조회해와라. 내가 하고자하는 것을 url에 모두 표시하는 것! - BoardDetail.js, BoardUpdate.js, BoardInsert.js, BoardList.js 모두 공통적으로 들어가있는 태그이다. 이거는 따로 컴포넌트에서 만들어서 사용해보도록 하겠다! => 저 태그를 지우고 로 묶어줘야 오류가 발생하지 않는다. ▶ components 폴더아래에 Outer.js 파일을 생성해주고 지웠던 태그들을 ..

1. 라우터 ▶ Router : url에 명시된 자원을 찾는 과정을 routing이라고 부른다. https://...../main/main.kh => 메인페이지를 찾음 https://...../project/classList.kh => 프로젝트페이지를 찾음. 즉 url자원을 해석하여 알맞은 html페이지를 찾아서 클라이언트가 요청한 페이지를 찾아서 반환해주는 소프트웨어를 Router라고 부름. ▶ React Router : react에서 사용자가 요청한 url을 기반으로 알맞은 컴포넌트를 찾아서 화면을 랜더링해주는 외부 라이브러리로, react에서 가장 많이 사용된다. 2. 라우터 설치 ▶ 새터미널 창을 열고, Router 설치 npm install --save react-router-dom ▶ inde..

1. 게시글 수정 ▶ App.js - 페이지 수정하는 페이지 창으로 넘어가기 위해서 레이아웃 == 3 생성 { 레이아웃 == 0? : 레이아웃 == 1 ? : 레이아웃 == 2 ? : 레이아웃 == 3 ? : null } /* eslint-disable */ //콘솔창에 불필요한 에러를 지우는 코드 import './App.css'; import {useState} from 'react'; import 초기게시글 from './data'; //default옵션으로 export한 경우 변수명을 다르게 가져올 수 있음 import {a,b,c} from './data'; //a,b,c의 값을 가지고 옴 import BoardInsert from './components/BoardInsert'; import ..