리액트 네이티브란 리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크이다. 안드로이드, iOS, 웹, UWP용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어 리액트를 사용할 수 있게 한다. https://ko.wikipedia.org/wiki/%EB%A6%AC%EC%95%A1%ED%8A%B8_%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C 리액트를 사용하면서 장점 중 하나가 리액트 네이티브를 통해 쉽게 모바일 앱을 만들 수 있다는 것. 줄여서 RN 이라고 많이 쓰는데, RN을 사용하는 앱들이 생각보다 꽤나 다양해서 놀랐다. 페이스북, 인스타그램, 디스코드, 스카이프, 팀즈 등 익숙한 앱들이 있었는데, 전..

이벤트 핸들링 리액트에서 이벤트 핸들링은 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는 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제..

작업하다가 중간에 파일명 첫글자를 대문자로 바꿨는데, 깃으로 커밋하는 과정에서 대소문자 구분이 안 된다는 사실을 발견했다. 회사에서 작업하다가 집에서 내려받았더니 대소문자 변경 전 내역이 받아져서 당황했던... 한번 작업이니까 그냥 파일명을 일일히 변경해서 사용했는데, vercel 로 배포하려고 하니 다시 문제가 발생. 검색해보니 config 설정을 변경하면 간단하게 해결되는 부분이었다. git config core.ignorecase false 명령어 입력 후 다시 커밋 해보니, 이전의 footer.tsx 파일과 Footer.tsx 파일 두개가 같이 있는 것을 볼 수 있다. 이러면 build 시 문제가 생기므로 아래의 명령어를 이용하여 캐시를 삭제해준다. git rm -r --cached . * 마지막..

개요 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"], },..

/* 홀수 */ li:nth-child(odd) { ... } /* 짝수 */ li:nth-child(even) { ... } /* 3의 배수 */ li:nth-child(3n){ ... } /* 8번째 이후부터 모두 */ li:nth-child(n+8) { ... } /* 1번째부터 5번째 까지 */ li:nth-child(-n+5) { ... } /* 10번째부터 15번째 까지 */ li:nth-child(n+10):nth-child(-n+15) { ... } 기본적인 부분은 알고 있었으나 마지막 두개는 신박했다. 역시 css를 잘 알 수록, 작업이 쉬워진다. 추가적으로 무조건 알아둬야할 css 선택자. https://code.tutsplus.com/tutorials/the-30-css-selecto..