반응형 과거253 리액트 타입스크립트 다국어 설정 i18next https://react.i18next.com/getting-started Getting started | react-i18next documentationThe module is optimized to load by webpack, rollup, ... The correct entry points are already configured in the package.json. There should be no extra setup needed to get the best build option.react.i18next.com 1. 리액트 프로젝트 폴더 내에서 npm install i18next react-i18next 2. src 안에 locales 폴더를 만들고 그 아래 각각 en, ko 폴더를 만든다.. 2024. 6. 25. spring boot soap wsdl 서비스 만들기 목표1. SPRING-WS 기반 WSDL 파일을 제공해서 SOAP 통신을 하고자 한다.2. 서버(WAS) 구성을 해보고 이후, war로 묶어서 톰캣에 올려 놓는다.3. 이후 클라이언트를 만들어서 통신을 해본다. Apache Axis, Apache CXF 등의 프레임워크들도 존재하며 Spring ws보다 더 간단할 수도 있다. 구현spring-ws로 서버가 되어 서비스를 만들려면 xsd 파일을 만들어서 자바 파일로 변환하는 과정을 거쳐야 한다.cxf나 axis 프레임워크의 경우 자바객체에 어노테이션만 붙여주고 몇가지 설정만 한다면, 손쉽게 wsdl를 만들어준다. 1. Rest-api가 나오기 전 xml 기반의 SOAP Simple Object Access ProtocolOAP는 HTTP, HTTPS, SM.. 2024. 6. 9. React Context 사용해보기 컴포넌트의 구조가 깊게 얽혀 있다면... props 유지보수가 어렵게 된다.이때, Context를 사용한다.회사에서 여러 프로젝트에 쓰인 리액트 소스를 보니 userSession을 Context 반복작업을 해놓은 것을 봤다. 예제이므로 간단하게 콤포넌트 구조를 보자면, 아래와 같다.App => Page => Header, Content, Footer 예제는 3단 구조이나 실무에서는 이렇게 간단한 시스템은 거의 없다. 1. 우선 Context를 js 파일하나 만들어 선언한다.import { createContext } from 'react';export const UserContext = createContext(null); 2. App.js 에서 작성한 UserContext를 불러온다.유저정보를 db에서.. 2024. 6. 1. 리액트 훅 , 생명주기 import { useState } from "react";function App() { const [count, setCount] = useState(0); return ( setCount(count+1)}>증가 {count} setCount(count-1)}>감소 );}export default App; 간단한 프로그램이다.증가를 누르면 가운데 숫자가 1씩 증가하고, 감소를 누르면 1씩 감소한다. 2019년 2월 이전에는 Hook이 없었다.Class 방식에서는 생명주기가 따로 있었고 클래스형에서는 setState 방식으로 사용했다. 클래스방식 함수에 대응되는 use... 함수들이 존재하므로 염두해두고 공부하고자 기록해논다. 2024. 5. 25. 간단한 GitHub 조회 프로그램 예제 요즘 리액트에 관심이 많이 생겨서 틈틈히 공부하는 중입니다.토요일 아침 간단한 GitHub api 를 이용한 조회 프로그램을 만들어 봄. 소스import React, { useState } from "react";function App() { const [keyword, setKeyword] = useState(''); const [data, setData] = useState([]); const fetchData=()=>{ fetch('https://api.github.com/search/repositories?q=${keyword}') .then(response => response.json()) .then(data => setData(data.items)) .catch(e.. 2024. 5. 25. 페이지 라우팅 라우팅이란? 라우팅은 경로를 의미하는 Route와 진행을 뜻하는 ing가 합쳐진 단어다. "경로를 진행하는 과정"이라고 이해하면 되겠다. IT 개발자들은 프로젝트를 참여해 진행하다 보면 네트워크 라우팅이라는 말을 자주 듣게 된다. 사실 라우팅은 반드시 IT네트워크 만을 의미하지는 않으며, 상당히 포괄적인 개념이다. 개념 라우팅은 일상생활에서 쉽게 접할 수 있다. 미국에 살고 있는 친구에게 스마트폰 메세지를 를 보낸다고 하면 내 폰에서 친구 폰으로 디렉트로 정보가 전달되는 것이 아니라 중간중간 설치된 "라우터"라는 장비를 거치게 된다. 라우터를 거치는 이유는 데이터를 한 번에 전송하기에는 물리적 거리가 멀다. 쉽게 직행 노선이 존재한다면 좋겠지만 직행을 이용하는 횟수가 적다면 굳이 직행 노선을 만들 이유가.. 2024. 3. 30. 이전 1 2 3 4 5 ··· 43 다음 반응형
