이벤트 핸들링 리액트에서 이벤트 핸들링은 React 컴포넌트에서 UI 요소에서 발생하는 이벤트(예: 클릭, 마우스 오버, 키 입력 등)를 처리하는 것을 의미한다. 이벤트에 함수를 바인딩한다는 것은 UI 요소에 onEvent 속성으로 함수(이벤트 핸들러)를 전달하는 것을 말한다. const a = () => { console.log("a 함수가 호출됨"); }; const App = () => { return ( 1번 2번 a()}>3번 ); }; 각각의 버튼은 어떻게 작동할까? 비슷해보이지만 다른 결과를 가져올 수 있는데 그 차이점을 알아보자. 이벤트에 함수 바인딩하기 1. 1번 이 경우 함수의 호출 결과가 적용이 되고 버튼을 클릭할 때가 아닌, 컴포넌트가 렌더링 될 때에 console.log가 실행이 ..

Styled components 컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리 특징 Automatic critical CSS style component는 화면에 컴포넌트가 렌더링 되었는지 추적해 컴포넌트에 대한 스타일을 자동 삽입한다. 코드를 적절히 분배해 놓으면 최소한의 코드만으로 화면이 띄워질 수 있다. No class name bugs styled-component는 스스로 className을 생성하기 때문에 className의 중복이나 오타로 인한 버그를 줄여준다. Easier deletion of CSS Styled Component는 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제..

개요 i18n i18next i18next is an internationalization-framework written in and for JavaScript. (https://www.i18next.com/) i18n은 국제화를 통틀어 칭하는 표현이고, i18next는 우리가 사용할 국제화 프레임워크를 뜻한다. 이 프레임워크를 이용하여 다국어 지원이 가능한 페이지를 만들 수 있다. 설치 작업환경 React.js 18.2.0 Next.js 13.0.0 Typescript 4.8.4 명령어 npm i next-i18next 세팅 // next-i18next.config.js module.exports = { i18n: { defaultLocale: "ko", locales: ["en", "ko"], },..

Next.js를 사용하는 이유 SEO(Search Engine Optimization)와 SSR이 가장 크다. 리액트 단독 사용의 경우 화면이 나중에 구성되기 때문에, 최초의 페이지는 빈 화면이기 때문. (CSR) 참조 : CSR과 SSR https://aboveimagine.tistory.com/114 비전공자 관점에서 보는 MPA, SPA, CSR, SSR MPA & SPA : 웹 어플리케이션을 구성하는 형태 MPA(Multiple Page Application) - 전통적인 방식, 다수의 페이지로 구성되어 요청마다 정해진 페이지를 반환 SPA(Single Page Application) - 단일 페이지, 해당 페이지 aboveimagine.tistory.com 설치 npx create-next-ap..

Next.js가 13으로 업그레이드 되면서 몇가지 변화가 생겼다 update release 에서도 확인이 가능한데, 내가 이번 프로젝트 작업을 하면서 변한 부분을 확인하자면, 참고로 현재 리액트, TS, Next, 테일윈드 를 사용 중. 1. Link import Link from 'next/link' // Next.js 12: `` has to be nested otherwise it's excluded About import Link from 'next/link' // Next.js 13: `` always renders `` About 기존에 링크 태그 안에 a 태그가 들어가는 방식이었는데, 이제는 링크 태그 단독으로 사용! 2. Layout // components/layout.js import ..

첫 리액트 프로젝트는 로컬 스토리지를 데이터베이스를 사용하였는데, 이번 프로젝트는 노션을 데이터베이스를 사용하기 위해 API 연결을 진행했다. 기초작업 1. 노션에 데이터베이스 만들기 프로젝트에 사용될 데이터베이스 만들어야한다. 노션에서 새 페이지를 생성하여 /데이터베이스(인라인)을 작성한다. 2. Notion API 공식사이트에서 intergration 생성하기 https://www.notion.so/my-integrations Notion (노션) – 모든 팀을 위한 하나의 워크스페이스 Notion은 단순한 워드프로세서가 아닙니다. 내 스타일에 맞게 커스텀해서 사용하세요. www.notion.so 해당 사이트에서 API intergration을 만들고 프라이빗 토큰을 생성한다. 3. intergrat..