D.JOUNG

Next(React)에서는 HTML img 태그 대신 Image라는 자체 태그를 따로 제공하고 있다. Image 태그는 서버에서 이미지를 미리 받아와 화면에 더 빠르고 최적화된 방식으로 이미지를 표시할 수 있게 해준다.  보통 컨테이너(div) 크기에 맞게 반응형으로 이미지를 조절하고 싶을 때는 이미지를 div 백그라운드 속성으로 지정하거나 div 태그를 중복해서 작성한 다음 안쪽 div에 absolute 속성을 먹여 적용한다.  하지만 Image 태그를 사용하면 위와 같은 복잡한 방식 필요 없이 간단하게 부모 크기에 이미지를 맞출 수 있다. 일반적으로 구글링을 검색했을 때 나오는 방법은 다음과 같다.  layout 속성에 fill 값을 주어 이미지를 컨테이너에 꽉 채우고, objectFit 속성에 co..

제로초님의 React 무료 강의를 계속 시청하며 기초를 다져가는 중이다. 1부 수업인 로또 숫자 당첨기까지 수강했고, 중간 점검 겸 React의 Hooks들을 정리하고 넘어가려고 한다. React는 두 가지 형식으로 컴포넌트 제작 방식을 제공하고 있다. 클래스 컴포넌트와 함수 컴포넌트인데, 원래는 클래스 컴포넌트를 주로 사용하다가 최근 현업에서는 거의 함수 컴포넌트만 사용하고 있다고 한다. React 공식 문서에도 'Class 컴포넌트를 삭제할 예정은 없다'라는 문구가 굳이 실려있는 것을 보면, 개발자들이 Class 컴포넌트의 삭제를 고려할 만큼 함수 컴포넌트가 대세이긴 한 것 같다. 함수 컴포넌트를 사용하면 클래스 컴포넌트보다 라인 수를 줄일 수 있고, this 예약어나 class 형식을 신경쓰지 않는..

웹 제작 프레임워크를 고민하다가 가장 많이 사용한다는 프레임워크 중 React 프레임워크를 선택해 공부해보기로 했다. 많이 알려져있는대로 React는 페이스북에서 만든 프레임워크이며, 페이스북에 사용된 React 컴포넌트는 무려 5만개를 넘어간다고 한다. 아직 공부하는 중이지만 React의 장점은 state라는 변수 하나로 html 요소를 편하게 변경하고, 컴포넌트 별로 개발 및 관리가 용이하다는 점에 있는 것 같다. state 변수를 변경하는 것 만으로 React는 전체 페이지 재접속 없이 해당 컴포넌트 영역만 자동으로 리렌더링 해준다. (렌더링이란 페이지를 다시 로드하는 동작을 뜻한다.) 독학을 하려는 중이고, 아직 유료 강의까지 결제할 마음은 없어서 웹 상에서 괜찮은 무료 강의를 찾아봤다. 그 중 ..