미국산 귤

7주차 멋사 과제로 기획디자인 파트에서 넘겨준 피그마 디자인을 리액트로 넘겨받아 간단한 기능을 구현해야 한다.  그간 세션에서 두 세 번 연습해봐서 생각보다 화면 구현은 간단하게 할 수 있었다.   1. 먼저 피그마 프로젝트에 접속하여 우측 상단 토글을 눌러 Dev Mode 상태로 만든다.(사진처럼 UI가 초록색으로 변해야 함) Dev Mode 상태에서 요소를 선택하면 이렇게 우측에 CSS 코드와 사용된 파일들이 보인다.   2. VS code로 넘어와 리액트 프로젝트를 생성하고, public 폴더에 images 폴더를 생성한다. 여기다가 피그마 디자인에서 사용된 이미지 파일을 넣을 것이다. src가 아니라 public에 만드는 이유는, public에 넣어두면 굳이 이미지를 import 해오지 않아도 바..

*리액트(React)란?: 페이스북에서 개발한 자바스크립트 라이브러리UI 구축 용도로, 특히 싱글 페이지 애플리케이션과 모바일 애플리케이션 개발에 많이 사용된다.복잡한 UI를 보다 쉽게 만들 수 있고, 관리가 용이하기 때문에 널리 사용 중이다.        리액트를 본격적으로 공부하기 전, 학습량이 생각보다 방대함을 알아야 한다.그치만 지레 겁먹을 필요는 없다. 기존과 다른 방식의 라이브러리이기 때문에 새로운 개념이 많을 뿐이다.그러니 기초부터 차근차근 꼼꼼히 공부하면 좋을 것 같다!(또, 모든 프로그래밍이 그렇듯 리액트도 계속해서 버전 업데이트가 이루어지니 꾸준히 공부해야 한다.)       먼저 리액트가 여타 라이브러리와 구별되는 큰 특징이 있는데바로 state(컴포넌트의 상태)라는 개념이 존재한다...