리액트

React는 라이브러리이다. 정답은 바로 리액트 공식 사이트에 있다. 리액트는 web과 native UI를 위한 라이브러리이다. 여기서 native UI란 운영체제에서 제공하는 기본 컨트롤 및 구성 요소의 사용을 강조하는 디자인 스타일이다. 쉽게 예시로 말하자면 삼성 갤럭시와 아이폰의 운영체제가 다르니 그에 맞게 개발한 UI라는 얘기다. 프레임워크와 라이브러리 프레임워크(Framework) "소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합." 프레임워크는 원래 뼈대나 기반구조를 뜻하는 단어로, 어플리케이션 개발 시 필수적인 코드, 알고리즘, 데이터베이스 연동과 같은 기능들을 위해 어느 정도 뼈대를 제공해주는 것이 프레임워크이다. 앱/서버 등의 구동, 메모리 관리, 이벤트..

우선 폰트는 무료 폰트 사이트인 눈누에서 찾아서 다운로드 받았다 눈누 상업용 무료한글폰트 사이트 noonnu.cc 폰트를 다운받으러 가면 여러 확장자로 폰트를 제공하는 것을 볼 수 있다. 각 확장자의 의미는 다음과 같다. ttf(true type font): 2차원 베지어 방식으로 일반적인 문서 작업에 사용. otf(open type font): 3차원 베지어 방식으로 주로 그래픽 작업과 고해상도 출력에 사용 woff(web open font format): 웹에서 사용하는 포맷 로딩 속도는 woff2 > woff > ttf cdn을 사용하는 것보다 직접 다운해서 넣는 것이 안정적이고 빠르므로 그냥 다운 받았다. 내가 다운 받은 폰트는 ttf 파일과 otf 파일 2가지가 있어서 ttf로 받았다. 이제 다..

CRA의 대체로 나온 Vite를 사용해볼 것이다. Vite는 CRA보다 속도가 빠르고 메모리를 적게 잡아먹는다는 장점이 있다고 한다. 프로젝트 만들기 npm create vite@latest 위 명령어를 입력하면 프로젝트를 만들 수 있는데 설정해주어야 할 것이 몇 개 있다. Project name - 따로 설정해주지 않으면 vite-project로 생성된다. Select a framework - 방향키를 이용하여 아래의 목록 중에 원하는 프레임워크를 선택하면 된다. Select a variant - 자바스크립트/타입스크립트 중에 선택할 수 있고 SWC를 사용할건지 선택할 수 있다. SWC에 대한 설명은 여기로 리액트 프로젝트 실행 vite-project 폴더로 이동해서 필요한 패키지를 설치하고 실행시켜보..

로그인 후 유저 데이터는 잘 받아오고 배열도 잘 있는데 이 오류가 떠서 의아했다. 찾아보니 리액트에서 화면이 처음 렌더링될 때 발생하는 오류인 것 같다. 다시 화면을 새로고침하면 화면이 정상적으로 나온다. 이 오류가 발생하는 이유는 리액트는 렌더링이 화면에 커밋된 후에야 모든 효과를 실행하기 때문이라고 한다. 즉, map을 실행할 배열이 아직 undefined 상태이기 때문에 이런 일이 발생하는 것이다. 이 오류를 해결하려면 3가지 방법을 이용하여 해결할 수 있다. map이 실행되는 배열을 빈 배열로 초기화시켜준다. 삼항 연산자 또는 && 연산자를 이용하여 객체의 속성값이 없거나 undefined라면 map 함수가 실행이 되지 않게 한다. optional chaining 연산자(.?)를 이용하여 객체의 ..