Rainyjune Blog

웹을 공부하면서 구상했던 짤방 저장소 웹페이지를 만들어보려고 한다. 구성은 다음과 같다 Back-end : Spring Boot 3.0.6 Front-end : React RDBMS : PostgreSQL File Server : 보유중인 NAS Front-end에서 사용할 Library들은 코딩애플의 React 강의와 구글링으로 검색한 여러 방법을 섞어서 사용할 예정이다. React-Router React-Bootstrap Styled components Immutable Open Color Axios Reduxjs/Toolkit

memo 자식 Component가 재렌더링하기 부담스러운 상황이 있을 수 있는데, 이 때 memo hook을 사용하면 불필요한 재렌더링을 막을 수 있다. (https://react.dev/reference/react/memo) import {memo, useState} from 'react' // 기존 component 정의 //function ChildComponent() { // return( // Content // ) //} // memo hook을 사용한 component 정의 let ChildComponent = memo(function() { return Content }) function ParentComponent() { let [count, setCount] = useState(0) r..

React로 구성된 웹페이지는 빌드시 하나의 js파일로 통합되는데, 이 때문에 첫 페이지 로딩 속도가 느려지는 문제가 있을 수 있다. 메인 페이지에서 import 되는 component중 처음 로딩 시점부터 필요하지 않은 component가 import되는 경우도 있는데, 해당 component들을 lazy import되도록 구성하면 js파일도 분할되고, 첫 페이지 로딩 시점에 import하지 않기 때문에 로딩 속도가 개선된다. 예제 // 기존 import 문장 //import ComponentName from './pages/ComponentName.js' // lazy import로 구성한 문장 // lazy, Suspense 사용을 위해 import import { lazy, Suspense } f..

Redux를 활용하여(정확히는 Redux Toolkit) 장바구니를 만드는 실습 예제 사용자 정보 state (userSlice) 공유 대상 state를 개별로 관리하기 위해 src 폴더에 하위 폴더 store 폴더를 생성하고 사용자 정보를 저장해 둘 userSlice.js를 추가한다. src/store/userSlice.js (이 예제는 코딩애플의 실습내용과 다르다. redux-toolkit의 quick-start에 서술된 방식을 사용했다) // createSlice 사용을 위한 import import { createSlice } from '@reduxjs/toolkit' // state의 최초 상태를 정의 const initialState = { name: 'UserName', age: 21 } /..

State를 공유하기 위한 외부 라이브러리. (https://ko.redux.js.org/introduction/getting-started/) 설치 Terminal에서 아래 명령어를 입력하여 react project에 redux를 설치한다. npm install @reduxjs/toolkit react-redux src 폴더에 store.js 파일 생성 (파일명은 관계없으나, 코딩애플 강의에 사용된 그대로 적음) 생성 후에는 아래와 같은 내용을 기입한다. import { configurationStore } from '@reduxjs/toolkit'; export default configureStore({ reducer: {} }) src 폴더의 index.js를 수정한다. (BrowserRouter..

부모 이상의 조상 component의 state를 사용하기 위해서는 조상으로부터 자식 component에게 계속해서 props를 전달해야하는 문제가 있음. 굉장히 번거롭기 때문에 state를 공유하는 기법을 별도로 제공함. Context API (https://react.dev/reference/react#context-hooks) react 자체적으로 제공하는 state 공유 hook. 사용법 공유하고자하는 최상위 component에서는 createContext를 호출하여 state를 context화 한다. // App.js를 예제로 함 import { createContext } from 'react'; export let TestContext = createContext(); function App..

CSS Transition (https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) CSS간 전환효과를 적용하는 기법. 특정 동작시 애니메이션 효과를 주는 등 꾸밀 수 있다. Fade In 효과 보여주기 App.css에 css를 추가한다. .fade-in-start { /* 불투명도 0 */ opacity: 0; } .fade-in-end { opacity: 1; /* opacity 효과 전환시간을 0.5초에 걸쳐 전환되도록 함 */ transition: opacity 0.5s; } HTML 요소에 fade in 효과 적용하기 let [fadeInEnd, setFadeInEnd] = useState(''); ..

AJAX(Asynchronous JavaScript and XML) 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법. (https://ko.wikipedia.org/wiki/Ajax) 특정 기술을 의미하는 것이 아니라 비동기적인 처리를 통해 페이지를 새로 불러올 필요 없이 불러온 페이지 내에서 서버와의 통신을 주고받는 기법이라고 할 수 있다. Axios 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리.(https://axios-http.com/kr/docs/intro) 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다. 즉, AJAX 기..

React의 Component는 대표적으로 Mount/Update/Unmount 라는 lifecyle을 가진다. Mount : Component가 페이지에 장착되는 시점 Update : Component가 갱신되는 시점 Unmount : Component가 제거되는 시점 Lifecycle에 code 간섭이 가능한데 DB의 Trigger처럼 Lifecycle이 도달한 시점에 특정 코드를 실행하는 것이 가능하다. Class로 구현한 Component의 경우 class DetailPage2 extends Component { componentDidMount() { // Mount시 실행되는 코드 } componentDidUpdate() { // Update시 실행되는 코드 } componentWillUnmou..

CSS에 정의하는 html style을 javascript단에서 정의할 수 있도록 도와주는 library이다. 설치 터미널에서 npm install styled-components 컴포넌트 js 파일에서 import styled from 'styled-components'; 사용법 변수에 html요소를 style과 함께 정의한다. let button = styled.button` background : ${ props => props.bg }; color : ${ props => props.bg == 'blue' ? 'white' : 'black' }; padding : 10px; `; styled.HTML태그 로 정의하고 상세 style은 백틱(`) 내부에 css처럼 정의하면 된다. 이 또한 컴포넌트이..