D.JOUNG

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

componentDidUpdate와 componentWillUnmount는 클래스 컴포넌트에서 사용하는 생명주기 관리 메소드, useEffect는 함수 컴포넌트에서 사용하는 생명주기 관리 Effect hook이다. 공식 문서를 조금이라도 깔짝여본 적이 있다면 useEffect를 componentDidUpdate와 componentWillUnmount의 역할로 이해해도 괜찮다고 적시한 내용을 기억할지도 모른다. 하지만 위 두 함수와 useEffect가 완벽하게 동일한 역할을 한다면 모순되는 부분이 보이기 시작했다. 아무래도 자세한 이해가 부족한 것 같아 미뤄뒀던 공식 문서의 다음 장을 읽기 시작했다. 클래스 컴포넌트의 두 함수와 useEffect의 차이를 명확하게 이해하기 위해서는 먼저 두 컴포넌트의 생명..

최근 리액트 강의를 수강하며 지뢰찾기 구현을 스스로 해보았다. 지뢰찾기 게임은 사용자가 빈 칸을 클릭했을 경우 그 주변 빈칸들과 숫자칸을 전부 오픈해야한다.  숫자칸이나 지뢰 칸을 클릭했을 경우는 클릭한 칸에 대한 이벤트만 처리해주면 되지만, 빈 칸을 클릭한 경우는 주변 칸 까지 모두 검사해야 하므로 조금 더 까다로운 알고리즘을 고민해봐야 했다. 결과적으로는 반복문과 재귀함수 두 가지 방법으로 빈칸 열기를 구현할 수 있게 되어 코드를 정리해두려고 한다. 사실 두 알고리즘 다 핵심 원리는 같다. 공백 칸을 클릭했을 경우, 해당 칸 근처의 여덟 칸을 검사하여 숫자 칸일 경우는 해당 칸만 오픈하고, 공백 칸일 경우는 해당 칸을 중심으로 같은 작업을 반복한다.  1. 반복문과 배열을 사용해 탐색하기 (bfs)l..

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

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