Life is connecting the dots .

처음 프론트엔드 공부를 시작한 지 약 7개월 차에 접어들고 있다. 처음에 비해 많이 성장했다고 느꼈지만 최근 들어서는 그 폭이 더뎌진 것 같은 생각이 들었다. 9월에 접어들면서 최근 2주 동안 여러 일정들이 있었고 일정을 소화해 내면서 경험한 부분이 나에게는 또 하나의 터닝포인트가 되었다. 블로그 포스팅 스터디 8월부터 지금까지 1달 남짓 매주 블로그 포스팅 스터디를 하고 있다. 1주일에 한 번씩 블로그 쓰는 것이 어렵게만 느껴졌는데 지금은 많이 익숙해진 듯하다. 매주 각자가 다른 주제로 글을 쓰다 보니 이번주는 각자 무엇을 주제로 글을 썼을까 하는 호기심으로 스터디가 기다려지는 재미도 있다. 아마 스터디를 모집하신 팀장님을 비롯하여 스터디원 모두가 열정적이고 그 안에서 배울 점도 많기 때문인 것 같다...

이번주는 기존에 완성한 개인 프로젝트를 다시 점검하는 시간을 가졌다.👩‍🔧 기능 동작에 이상이 없는지 재점검하고 리팩토링한 코드를 다시 리팩토링도 해보았다. 이 중 사용자가 게시물을 등록하기 위해 작성하는 양식 중 이미지 업로드 기능을 확인했을 때, 기능은 잘 동작하지만 사용성을 조금 더 개선하고자 계획하였다. 현재 이미지 업로드 기능 동작 문제 상황 ❏ 업로드를 클릭한 공간에 이미지가 업로드된다. ❏ 이미지 수정은 가능하지만 삭제가 안된다. ❏ 이미지 업로드 완료까지 다소 시간이 걸린다. challenge ❏ 어떤 업로드 버튼을 클릭하던 왼쪽부터 순서대로 사진 업로드 하기 ❏ 업로드한 이미지 삭제 구현하기 (+. 삭제해도 이미지는 좌측정렬을 유지) ❏ 이미지 업로드 중인 동안 대체 UI 보여주기 이미지..

이번주에 HTML, CSS, JS를 사용해서 슬라이더를 만들었는데, 슬라이더를 좌우로 움직이면 범위에 따라서 가격이 변경되는 기능이고, 범위에 따른 슬라이더 바의 색상을 채우기 위해 CSS의 linear-gradient() 속성을 처음 사용해 보게 되었다. linear-gradient를 사용하면 두 가지 이상의 색상을 사용해서 점진적으로 전환하여 그라데이션 이미지를 만들 수 있게 해 준다. 색상이 시작되는 방향, 색상이 차지하는 비율, 색상이 나아가는 방향(각도)을 정할 수 있고 어떻게 정하냐에 따라 멋진 그라데이션 효과를 줄 수 있다. 내가 만든 슬라이더는 두 가지 색상의 구분만 필요하여 각 색상을 퍼센트로 구분해 주었다. 그럴 때는 다음과 같이 비율을 절반씩만 채워서 초기 상태로 만들고, 슬라이더를 ..

Next.js는 최적화(Optimizations)를 위해 기본적으로 제공되는 기능들이 있다. 공식문서를 참고하여 간략하게 소개하자면 먼저, 빌트인 컴포넌트를 사용하여 UI를 최적화하기 위해 복잡하게 구성해야 하는 요소들을 쉽게 만들어 줄 수 있다. Images, Link, Scripts와 같은 컴포넌트들이 이러한 역할을 한다. 다음으로 Metadata를 활용하여 웹사이트의 콘텐츠를 검색엔진에 더 잘 노출되도록 하고, 어떻게 보일 지를 커스텀하여 다양한 플랫폼에서 일관적인 사용자 경험을 줄 수 있는 방법이 있다. Next.js의 Meatadata API는 HTML의 요소를 수정할 수 있게 해 줌으로써 웹사이트 SEO를 향상시키기 위한 방법을 제공한다. 드림코딩 강의를 통해 Next.js(v13)과 Reac..

리액트 쿼리는 웹 어플리케이션에서 데이터 패칭, 캐싱뿐만 아니라 서버 상태의 데이터 동기화 및 업데이트를 손쉽게 해주는 상태 관리 라이브러리이다. 리액트 쿼리 라이브러리 버전4에서는 TanStack Query로 이름이 변경되어 기존 리액트에서만 사용 가능했던 부분을 Solid, Vue, Svelte와 같은 다른 프레임워크에서도 사용이 가능하도록 업데이트되었다. 리액트 쿼리를 사용하면 다음과 같은 장점이 있는데, 무엇보다 손쉽게 사용할 수 있고 내장되어 있는 매소드를 통해 캐시와의 상호작용을 효율적으로 할 수 있는 점 때문에 많이 사용하는 라이브러리가 되었다. ✔️ 데이터 패칭, 자동 업데이트, 캐싱, 오류처리 등 최적으로 서버 상태 관리해 줌으로써 효율적으로 데이터를 다룰 수 있도록 해준다. ✔️ 별도 ..

이 글을 쓰는 이유는 그동안 React를 당연하게 공부하고 당연하게 사용해 왔기 때문이다. 그러다 보니 React를 왜 배웠는지 왜 프로젝트에 사용하게 되었는지에 대한 질문을 받으면 어떤 이유를 설명해야 할지, 무슨 이유가 특별히 더 중요한지에 대해 고민이 앞서 스스로 명쾌한 대답을 하지 못하는 것 같다는 생각이 들었다. 그래서 오늘은 스스로에게 질문한 내용을 글로 남기려고 한다. React 란 리액트는 사용자 인터페이스(UI)를 담당하는 자바스크립트 기반 라이브러리로, 주로 싱글 페이지 애플리케이션(SPA)을 만들 때 사용한다. SPA 하나의 페이지로 만들어진 웹 애플리케이션을 의미한다. 페이지 이동 시 추가적인 서버의 접속 없이 필요한 데이터만 자바스크립트 안에서 동적으로 로드하여 화면을 변경한다. ..

리액트에서는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 Props를 사용하여 전달한다. 또한 한 컴포넌트 안에서는 변경 가능한 데이터를 다루기 위해 State를 사용한다. 이렇게 props와 state를 사용하게 되면 부모 컴포넌트에서 자식 컴포넌트로 즉, 한쪽 방향으로만 데이터가 이동하게 된다. 그렇다면 다음과 같이 서로 다른 데이터의 흐름에 있는 컴포넌트에서 서로 같은 데이터를 공유하고 싶은 경우에는 어떻게 하면 될까? 그럴 때는 공통 부모 컴포넌트에 state를 만들고 데이터를 props를 통해 사용하고자 하는 컴포넌트에 전달해야 한다. 하지만 이와 같은 props drilling은 컴포넌트가 여러 계층을 가지고 있는 복잡한 구조에서는 비효율적이고, 추적하기가 쉽지 않다. Context ..

최근에 만든 프로젝트도 그렇고 처음 시작을 Next.js프레임워크를 사용해서 개발을 해오다 보니 리액트 자체만을 사용해 무언가 개발해 본 적은 없었다. 그래서 리액트만을 사용해서 그동안 공부해 왔던 개념들을 빠르게 적용해 보는 중이다. 그중에서 리액트에서 라우팅을 공부한 뒤에 간단하게 실습을 해보았다. Next.js에서 페이지 이동과 관련된 기능을 적용하고 싶을 때는 useRouter 훅을 사용하면 되는데, router안에 포함된 메서드를 사용할 수 있다. 메서드와 관련된 상세 내용은 공식문서를 대신 첨부한다. 공식문서 리액트는 URL을 판단하여 특정 페이지를 보여주는 기능을 제공하지 않는다. 그러므로 관련 작업을 하기 위해서 react-router라는 라이브러리를 설치해서 사용해야 한다. 이 라이브러리..