minTech

오늘은 스토리북에 대해 공부해보려한다. 스토리북에 대한 강의를 몇 개 듣고, 이번 프로젝트에서 한 번 사용해보았다. 하지만 스토리북을 왜 사용하는지, 구체적으로 어떤 식으로 사용하는 것이 효율적인지 등 간단한 강의만 듣기에는 모르는 것이 많았다.모르는 상태로 바로 진행했더니 어떤 식으로 작성해야하는 것인지도 잘 몰라서 애를 많이 먹었다.그래서 한 번 관련 공식문서를 훑어보았다.     🤷🏽  스토리북의 사용법에 대해 간단하게 정리해보자공식문서에 따르면 스토리북은 UI 구성 요소와 페이지를 격리하여 빌드하기 위해 만들어졌다.따라서 전체 앱을 렌더링할 필요 없이 하나의 컴포넌트의 상태와, 다양한 엣지 케이스들을 눈으로 확인하면서 개발하고, 다른 사람에게 공유도 가능하다.  스토리북의 몇 가지 개념에 대해..

자기 소개 웹페이지 중에서 프로필 페이지 구현을 모두 마치고 프로젝트 페이지를 구현 중에 있다. 프로젝트 페이지의 경우 한 프로젝트 당 들어가는 이미지가 여러장 되기 때문에 프로젝트 페이지 하나에 프로젝트 하나의 이미지들만 import 해도 기본 6장은 되었다. 이를 하나하나 import 하려니 soso 귀찮,,, 어떻게 하면 하나의 파일에 있는 이미지를 모두 가져올 수 있을까? 바로 구글링을 해보았다! 그 결과, 내가 인터넷 검색을 통해 찾아보았던 방법은 두✌️개이다. 1. 이미지를 import 하는 js 파일을 따로 생성 후에 거기서 컴포넌트처럼 import 해온다. import project1_1 from "../assets/images/project1_results/project1_1.png"; ..

자기소개 웹 사이트를 구현할 때는 너무 과한 애니메이션을 넣는 것은 안 좋다고 들었기에 최대한 애니메이션을 생각하지 않고, 단순한 웹 구현을 하였다. 하지만 내가 구현한 웹사이트의 홈 화면은 나의 소개 멘트와 카메라 밖에 없었기 때문에 아무리 카메라의 크기가 크더라도, 무언가 비어보였다. 그래서 도입하려고 한 효과는 바로 타이핑 효과이다! 💡타이핑 효과는 아래와 GIF처럼 키보드를 통해 실시간으로 타이핑하는 듯한 효과를 주는 것이다. 다른 사람들이 만든 웹사이트를 구경해보면서 많이 보았던 효과이다. 너무 정적인 것 같은 나의 자기 소개 웹페이지의 Home 페이지에 타이핑 효과르 넣어줌으로써 생동감 있고, 동적이게 보일 것 같아 채택하였다. 👏 타이핑 효과를 적용해보자! 1. 직접 구현하기 직접 구현하는 ..

부트캠프에서 첫 번째 프로젝트가 끝났다. 👏👏👏 끝난 후, 이제 곧 타입 스크립트를 들어갈 예정인데, '타입스크립트를 배우다보면 React를 까먹지 않을까?' 생각이 들었다. 그래서 나는 개인프로젝트를 시작해보기로 목표를 잡았다. 왜냐하면! 현재까지 쌓아온 React 관련 지식을 더욱 견고하게 유지하기 위해 다양한 강의 수강과 팀 프로젝트 경험을 통해 나만의 실력을 객관적으로 평가하고, 개선할 기회를 만들어내기 위해 🕵️ 주제 개인 프로젝트를 하기로 마음을 먹었지만, 당장에 어떤 주제로 프로젝트를 시작해야할지 막막했다. 어렵지 않은 가벼운 주제에 대해서 하고 싶었다. 한참 고민하면서 나는 내 팀프로젝트에 대해서 노션에 정리를 하고 있었는데, 그 때 문득 든 생각이 나에 대해 소개하는 페이지를 만들어보면 ..