고래씌

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 ..

1. 게시판 상세페이지 조회 ▶ App.js - state로 저장시키기 let [상세보기, 상세보기변경] = useState(null); // 각 게시글 정보 담아줄 예정 - state의 변경에 따른 레이아웃 지정 => 게시글 목록 중 하나를 클릭했을 때, 레이아웃 == 2 가 되면 상세페이지가 보이도록 아래와 같이 설정 { 레이아웃 == 0 ? : 레이아웃 == 1 ? : 레이아웃 == 2 ? : null } /* eslint-disable */ //콘솔창에 불필요한 에러를 지우는 코드 import './App.css'; import {useState} from 'react'; import 초기게시글 from './data'; //default옵션으로 export한 경우 변수명을 다르게 가져올 수 있음..

1. UI 상태 관리하기 ▶ ui상태 관리하는 법 1) 전환할 컴포넌트 준비하기(BoardInsert, BoardList) 2) 레이아웃상태를 state로 저장시키기 3) state 변경함수를 버튼 등의 요소에 부여 4) state 변경에 따른 레이아웃 지정 ▶ App.js 1) BoardInsert, BoardList 준비 2) 레이아웃상태를 state로 저장시키기 let [레이아웃, 레이아웃변경] = useState(0); 3) state 변경함수를 버튼 등의 요소에 부여 게시판 등록 4) state 변경에 따른 레이아웃 지정 { 레이아웃 == 0 ? : 레이아웃 == 1 ? : null } => 게시판을 클릭하면 레이아웃이 0이면 게시글 목록을 보여주고 등록을 클릭하면 레이아웃 1이면 게시글 등록을..