time to wander

프로그래머스로 이력서를 작성하던 중 다른 개발자 분들이 따로 정적 페이지를 만들어서 이력서를 작성하신 걸 보고 나도 그렇게 만들고 싶어졌다. 여러가지 방법이 있겠지만 Github Pages를 사용해 본 적이 없기도 하고, 이력서는 은근히 갱신할 일이 많을 것 같아 편하게 재배포 할 수 있도록 Github Pages를 이용해 보기로 했다. 0. 사전 준비 node.js npm 또는 yarn (패키지 매니저) 나는 항상 패키지 매니저로 yarn만 사용하다가 이번에는 npm을 사용했다. 찾아보니 yarn으로 깃허브 페이지를 배포하는 것도 크게 달라 보이지는 않았다! 1. Repository 생성하기 레포지토리 이름은 {본인의 Github 아이디}.github.io 의 형태로 설정한다. README.md 는 옵..

내가 썼지만 무슨 말인지 잘 모르겠는 제목..! 말 그대로 특정 이미지를 클릭하면 클릭한 이미지를 바로 크게 보여주고, 위나 아래로 스크롤하면 이전 이미지와 다음 이미지를 계속해서 볼 수 있는 쪼끄맣지만 소중한 기능이다..! 구현하게된 계기 지난 주 일요일, 정말 부랴부랴 실전 프로젝트의 프로덕션 배포를 했다. 런칭이 계획보다 훨씬 늦어지는 바람에 피드백을 적게 받으면 어떡하지 라는 걱정을 했었는데, 다행히 정말 많은 분들이 새로운 시선으로 자세히 봐주신 덕분에 UX 개선에 도움이 되는 피드백을 많이 받을 수 있었다! 그 중 짤방 페이지에 대한 피드백도 있었는데, 목록에서 어떤 이미지를 보려고 클릭해서 디테일 페이지로 이동한 후 또 다른 이미지를 보려면 다시 뒤로 가기를 눌러야 하는 과정이 불편하다는 피..

styled-components 패키지의 createGlobalStyle 사용하기 React를 사용하다 보면 보통 스타일 속성을 컴포넌트 안에서 설정하기 때문에 기본적으로 세팅하는 속성들은 각 컴포넌트마다 중복으로 작성해야 하는 경우가 많다. 이럴 경우 한 컴포넌트 안에서의 코드 양이 길어지고 많아지며 전체적인 가독성이 떨어진다는 단점이 있다. 프로젝트에 공통으로 사용하는 폰트 스타일이나, box-sizing, button이나 input의 outline과 border 속성, cursor 등 기본적으로 컴포넌트마다 설정해주는 속성들은 GlobalStyle로 적용하면 컴포넌트별 중복 작성을 막아줄 수 있다. 초기 세팅 사용하고 있는 패키지 매니저에 따라 아래와 같이 styled-reset과 styled-co..

React key 🔑 React에서 key의 역할 Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도우며, 배열의 element에 고유성을 부여하기 위해 배열 내부의 eliment에 key를 지정한다. key는 문자열을 사용하는 것이 좋으며 대부분의 경우 ID를 key로 사용하지만 안정적인 ID가 없다면 최후의 수단으로 각 element의 index를 key로 사용할 수 있다. const todoItems = todos.map((todo) => {todo.text} ); 🔑 React에서 key를 사용해야 하는 이유 효율적인 DOM 트리 구조 구축 및 렌더링 성능을 위해 💡 React의 가상 DOM 트리 비교 알고리즘은 아래의 두 가지 가정을 기반으로 한다. 📌 서로 다른 타입..

React Hooks Hook 이란? 함수형 컴포넌트에서 state와 라이플사이클 메소드를 연동할 수 있게 해주는 함수이다. React v16.8 부터 도입된 새로운 기술으로, 함수형 컴포넌트에서 상태 관리를 포함한 다양한 기능을 제공하여 개발자들이 다양한 프로덕트들을 작업할 수 있도록 도와준다. Hook을 도입한 이유 Hook은 개발자들이 React로 컴포넌트를 작성하고 유지하는 동안 당면한 문제들을 해결하기 위해 도입되었다 Hook이 도입되기 전에는.. 📍 컴포넌트들 사이에서 상태 로직을 재사용하기 어려웠다. Hook을 사용하면 컴포넌트로부터 상태 로지을 추상화할 수 있고 이를 이용해서 계층의 변화 없이 독립적인 테스트와 재사용이 가능하다. 📍 복잡한 컴포넌트들을 이해하기 어려웠다. 관리하기 힘든 상..