[리액트] axios 사용 (with.Json-server)
2024. 4. 19. 12:16
몰아 넣기
Axios란? 공식문서에 따르면 axios 란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트 라고 소개하고 있다. 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지. Axios 설치 yarn add axios Json-Server Axios 를 사용하기전에 Axios 로 통신할 서버가 필요하다. 그 역활을 Json-Server로 대체 json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지이다. 우리가 json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함이다. json-server를 통해서 F..
[리액트] Styled Components - 소개, 사용
2024. 4. 17. 17:10
몰아 넣기
CSS-in-Js란? 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식 컴포넌트를 만들고 컴포넌트를 꾸미기 위해 css 파일을 만들어서 import 하고 HTML tag 마다 classname를 넣고 CSS 코드를 작성하는 것을 반복하는 것을 줄일 수 있다. styled-components styled-components는 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지 패키지란, React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티 프로그램 패키지들은 누군가에 의해 만들어진 것으로 npm에 모여있다. 사용하고자 하는 패키지를 npm install 또는 yarn add 를 통해서 설치 1. styled-components 준비 yarn..
[리액트] React Router Dom 사용법
2024. 4. 17. 16:50
몰아 넣기
react-router-dom이란? 페이지를 구현할 수 있게 해주는 패키지이다. 패키지 설치 yarn add react-router-dom 구조 및 사용법 1. src 폴더에 pages 라는 폴더를 만들고 그 안 가상의 여러 페이지 생성 2. src/shared/Router.js 생성 import React from "react"; // 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다. import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "../pages/Home"; import About from "../pages/About"; import Contact from "...
[리액트] useEffect란? 그리고 의존성배열
2024. 4. 16. 19:52
몰아 넣기
useEffect란? useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook, 즉 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect를 사용한다. 코드로 보기 렌더링될 때 useEffect 안에 있는 console.log가 실행된다. 이게 useEffect 핵심 기능 import React, { useEffect } from "react"; const App = () => { useEffect(() => { console.log("hello useEffect"); }); return Home; } export default App; useEffect와 리렌..
[CSS] 자주쓰는 CSS
2024. 4. 15. 10:47
몰아 넣기
1. 이미지 .image { background-image: url(); background-position: center; background-size: cover; } 2. 정렬 .box { height: 100vh; display: flex; justify-content: center; align-items: center; } 3. 박스 width: 100px; height: 100px; border: 1px solid red; margin: 20px auto 20px auto;
[리액트]리액트 리덕스 구조 및 사용방법
2024. 3. 11. 21:35
몰아 넣기
폴더구조 src/redux/config/configStore.js 생성 import {createStore} from "redux"; import {combineReducers} from "redux"; const rootReducer = combineReducers({ // modules }); const store = createStore(rootReducer); export default store; src/redux/modules/counter.js 생성 const initialState = { number: 0 } const counter = (state = initialState, action) => { switch(action.type) { // type에 맞는 로직 생성 default: r..
[리액트] 앱생성 및 리액트 자주쓰는 패키지 정리.ver1
2024. 3. 11. 21:22
몰아 넣기
리액트 앱 생성 yarn create react-app [폴더명] 패키지 react-router-dom yarn add react-router-dom 리덕스, 리덕스툴킷 yarn add redux react-redux @reduxjs/toolkit Axios 설치 yarn add axios
[예제] Java PDF to JPG 및 pdf
2024. 1. 15. 22:28
몰아 넣기
처음에는 Aspose 라이브러리를 했지만 워터마크가 남아서.... 다른 라이브러리를 찾아보니 apache에 pdfbox가 있었다. 문서 : https://pdfbox.apache.org/2.0/migration.html 사용법 gradle 3.0 이상 버전도 존재하지만 예제들이 2.0버전대에 더 많기 때문에 2.0 버전대를 추천한다. implementation group: 'org.apache.pdfbox', name: 'pdfbox', version: '2.0.24' 간단한 예제 File file = new File("pdf파일 위치"); PDDocument document = PDDocument.load(file); //PDF 페이지 수 int pageCount = document.getNumberO..