react

React 프로젝트에 i18n으로 다국어 지원하기

i18n이란? 국제화(internationalization; i18n)의 줄임말이다. 언어 및 문화권 등이 다른 여러 환경에 대해 사용할 수 있도록 지원하는 것으로, 보통 텍스트 번역을 의미한다. i18n 적용하기 i18n 설치 npm install i18next i18next-browser-languagedetector react-i18next // or yarn add i18next i18next-browser-languagedetector react-i18next 언어별로 json 파일 만들기 지원할 언어별로 폴더를 만들어서 번역할 내용을 관리해준다. utils/locale/en/front.json { "gnb.home": "Home", "gnb.weather": "Weather" } utils/l..

Next.js 시작하기 - (3) Pre-rendering, Data Fetching

Series Next.js 시작하기 - (1) Project setting, Routing Next.js 시작하기 - (2) CSS-in-JS, Custom App Next.js 시작하기 - (3) Pre-rendering, Data Fetching Pre-rendering 기본적으로 next.js는 모든 페이지를 pre-render한다. 이는 각 페이지에 대해 html을 미리 만들어두는 것을 의미한다. Initial Load 과정에서는 자바스크립트 동작이 없는 html을 먼저 화면에 보여주는데, 아직 js 파일이 로드되기 전이므로 와 같은 컴포넌트는 동작하지 않는다. Initial Load에서 html을 로드한 뒤, js 파일을 서버로부터 받아 html을 연결시키는 과정이 일어나는데 이를 Hydrati..

Next.js 시작하기 - (2) CSS-in-JS, Custom App

Series Next.js 시작하기 - (1) Project setting, Routing Next.js 시작하기 - (2) CSS-in-JS, Custom App Next.js 시작하기 - (3) Pre-rendering, Data Fetching Next.js에서 css를 적용하는 법과 앱을 커스텀하는 방법에 대해 알아보자. 1. CSS-in-JS(Styled JSX) Next.js에서는 기본적으로 CSS-in-JS를 지원한다. 따로 설정을 할 필요없이 style 태그에 jsx 옵션을 주고, {``} 안에 스타일을 작성해주면 된다. 이 때 이 스타일들은 해당 컴포넌트 내부로 범위가 한정된다. 그렇기 때문에 global style을 적용하고 싶다면 ); }; export default GNB; GNB ..

Next.js 시작하기 - (1) Project setting, Routing

Series Next.js 시작하기 - (1) Project setting, Routing Next.js 시작하기 - (2) CSS-in-JS, Custom App Next.js 시작하기 - (3) Pre-rendering, Data Fetching React 공식 문서에서는 Next.js를 아래와 같이 소개하고 있다. Next.js는 인기 있는 경량의 프레임워크로 React로 만들어진 스태틱 서버 렌더링 애플리케이션입니다. 기본적으로 스타일링과 라우팅 해결책을 가지고 있으며, 사용자가 Node.js를 서버 환경으로 사용하고 있다고 생각합니다. 이게 무슨 말인지 바로 해보면서 알아보자. 1. Project setting 프로젝트를 만들 폴더에서 아래 커맨드를 입력한다. npx create-next-app..

TypeScript에서 FormData로 이미지 업로드하기

React+TypeScript로 프로젝트 개발 중 프로필 사진 변경 기능을 추가하기 위해 formData에 이미지를 추가해서 보내주려고 하는데 안되서 삽질 좀 했다. 😕 왜 안돼..? const [image, setImage] = useState(); const handleInfoSubmit = async (e: FormEvent) => { e.preventDefault(); const formData = new FormData(); formData.append('profilePicture', image); // ... } 기존에 자바스크립트에서 formData를 보낼 때는 다른 것들과 마찬가지로 append를 해서 보내면 됐었는데 ts는 그렇게 하도록 두지 않았다. :( 오류 메시지 Argument o..

서버에 요청 시 쿠키 함께 전송하기 + cors 오류 해결

Problem 1. 로그인 토큰을 쿠키에 저장하고, 서버에서는 그 토큰을 이용해 login validation을 하고 있었다. 그런데 이미 로그인을 해서 쿠키에 토큰이 있는데도 로그인 정보가 없다고 뜨는 문제가 발생했다. withCredentials 옵션 추가 axios.get(`${SERVER_URL}/${endpoint}`, { withCredentials: true, }); 표준 cors 요청은 기본적으로 쿠키를 설정하거나 보낼 수 없기 때문에 withCredentials부분을 true로 설정해 수동으로 cors 요청에 쿠키값을 넣어줘야 한다. Problem 2. 이제 쿠키는 잘 전송되는데 cors 오류가 발생했다. 서버에서 credentials 옵션 설정하기 서버에서도 withCredentials..

[React] [nodejs] req.body 데이터 undefined 오류 해결(FormData undefined)

Node.js와 React를 통해 프로젝트를 하던 중 오류가 발생했다. React와 Node.js를 활용한 고객 관리 시스템 개발 - 구름EDU 리액트와 node.js를 이용해 웹 기반의 고객 관리 시스템을 개발해봅시다. edu.goorm.io 위 링크의 강의를 듣고나서 회원가입 페이지를 구현했는데, 같은 방식으로 로그인 기능을 구현하려니 오류가 발생했다. 기존의 오류가 발생한 코드는 아래와 같다. FormData에 userid, userpw를 추가해 post해 주는 방법을 썼다. 그러나 서버 쪽에서 정보를 받을 때 req.body 데이터가 계속 undefined로 나왔다. (ㅠㅠ)( body-parser도 썼는데 오류가 발생했었다. ) login = (e) => { e.preventDefault() c..

[React] devTool의 Network창에서 'You need to enable JavaScript to run this app.' 메시지 없애기

Chrome의 개발자 도구의 Network 탭에서 Preview를 보는데 위와 같은 메시지가 나왔다. 이는 public안의 index.html의 내용 중에 이 내용이 있기 때문이다. 이를 없애주면 더이상 저 문구가 뜨지 않는다!

React의 LifeCycle

LifeCycle method는 React component의 생성부터 소멸까지 일련의 이벤트들이라고 할 수 있다. 리액트의 모든 이벤트는 lifecycle을 지난다. 1. Mounting 2. Updating 3. Unmounting 1. Mounting - 컴포넌트가 생성될 때, 다음과 같은 순서대로 호출된다. constructor() static getDerivedStateFromProps() render() componentDidMount() constructor() - React component의 constructor()는 컴포넌트가 마운트되기 전에 호출된다. 보통 개체를 this.state에 할당하여 로컬 상태를 초기화하거나, 인스턴스에 이벤트 처리기 메소드를 바인딩할 때 사용한다. 그리고 ..