frontend3

• 

  [Next/SVGR] NextJS에서 SVGR 다루기 1. SVGR이란 svgr이란 svg 이미지를 react에서 쉽게 다루기 위해서 만들어진 webpack 설정이자 babel 설정이다. SVGR을 이용하면 SVG파일을 react에서 컴포넌트화 하여서 사용할 수 있다. Svg 파일은 png,jpg, jpeg파일들과 다르게 크기와 상관없이 일정한 화질을 유지하며 무한한 확장 축소가 가능하고 색상과 테두리 선의 두께, 색상과 같은 속성들도 그 때 그 때 변경이 가능하다. 사실 svg 이미지는 xml이라는 마크업 언어로 쓰여진 language의 일종이기 때문에 완벽한 이미지라고 보는 것에는 무리가 있다. 나는 내가 프로젝트를 진행하면서 이 svg이미지를 어떻게 다루었는 지를 기록할 것이다. 우선 나는 NextJS에서 SVGR을 사용하기 위해 @svgr/webpa.. front-end/Nextjs 2022. 9. 17.

• 

  리액트 개념 1. 리액트 뼈대 처음 리액트 프로젝트를 생성하게 되면 여러가지 파일들이 생기게 되는데 나는 프로젝트를 생성하고 화면을 구성하는데 있어 필수적인 파일들만 얘기해보겠다. 처음 프로젝트를 생성하게 되면 아래 사진에 나와 있는 파일들 보다 훨씬 더 많은 파일들이 생성되는데 그것은 나중에 웹앱을 배포하거나 ServiceWorker와 같은 파일들이기 때문에 삭제하고 아래 파일들을 설명해보겠다. 우선 app.jsx파일은 c++에서 main함수와 같은 역할을 한다. 나머지는 다 페이지를 구성하는 source code일 뿐 실제로 화면에 표기되어지는 파일은 app.jsx파일이다. (처음에는 js파일로 만들어지나 여러 디자이너들과의 협업을 위해 react에서는 js코드이나 좀 더 css와 html에 가깝게 보이는 jsx.. front-end/react 2021. 6. 18.

• 

  리액트란 1. 리액트란? React는 현재 현업에서 인기 있는 웹/앱(RN)의 View를 개발할 수 있도록 하는 라이브러리이다. 보통 우리가 생각하는 어플리케이션(웹, 앱 혹은 데스크톱용 소프트웨어)을 만들기 위해서는 사용자가 조작하기 위한 UI(User-Interface), UI를 컨트롤 하기 위한 로직, 데이터를 처리하는 비즈니스 로직 등 3가지 부분으로 개발이 필요하다. ​ ​ 이 중 리액트는 사용자에게 보여지는 ui를 각각의 컴포넌트를 중심으로 구성하게 된다. 우리가 화면에서 흔히 보는 버튼 하나 배너 하나를 각각의 컴포넌트 클래스로 정의해두고 재사용이 가능하게 해 더 쉽고 간편하게 클라이언트가 보는 화면을 구성할 수 있다. ​ 2. 리액트 프로젝트를 위한 환경설정 리액트 프로젝트는 몇 가지의 환경이 갖추.. front-end/react 2021. 6. 18.