분류 전체보기

리액트에서 전역 상태 관리가 필요한 이유는 애플리케이션의 규모가 커지고 복잡해질수록 컴포넌트간의 데이터 공유와 상태 관리를 보다 효율적으로 처리하기 위해서입니다. 우리는 다양한 이유로 전역 상태 관리의 필요성을 느끼게 됩니다. 저는 주로 컴포넌트간의 데이터 공유와 복잡성 관리를 위해 사용한다고 생각했지만 조사해보니 보다 다양한 이유로 전역 상태 관리를 하고 있는 것을 알 수 있었습니다. 1. 컴포넌트간 데이터 공유 여러 컴포넌트에서 공통적으로 사용되는 상태가 있을 수 있습니다. 예를 들면 사용자 인증 정보, 로그인 상태, 언어, 테마, 설정 등 애플리케이션의 여러 곳에서 공유해야하는 데이터가 있을 때입니다. 2. 상태의 일관성 유지 리액트는 단방향 데이터 흐름을 가지고 있으며 그 방향은 하향식으로 고정되..

마치 텍스트 에디터에서처럼 커서가 깜빡이고 글자가 타이핑하여 입력하는 것처럼 보이도록 애니메이션을 만들어 보고자 했다. 개인적인 편의를 위해서 styled-components를 이용했으나 기본적인 CSS를 이해하고 있다면 쉽게 구현할 수 있다. 커서가 깜빡이는 것은 CSS를 이용하면 간단하다. 우선 keyframes을 선언하고, 이를 blink라는 id를 가진 태그에 적용해준다. 1초에 한번씩 무한히 순환되도록 하면 된다. const blinkAnimation = keyframes` 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } `; // 투명도를 세단계로 나눠서 순환시키는 것으로 깜빡이는 듯한 애니메이션을 연출할 수 있다. const StNa..

항해99의 커리큘럼도 이제 종막을 향해 나아가고 있다. 처음 항해를 시작할 때의 나를 돌아보면 VS Code를 처음 사용하며 신기해하고 HTML 태그만을 이용해서 정적인 페이지를 만들고 자바스크립트를 통해 간단하게 움직이는 페이지를 만들고 기뻐하던 순간들이 떠오른다. 아직은 갈길이 멀게 느껴지지만 확실하게 두달 전의 나와는 다른 사람이 되었음을 느낀다. 어느정도 자신감도 생기고 시간만 충분하다면 뭐든지 할 수 있을 것 같은 기분이다. 함께 수강중인 동료들과 많은 선배들과 멘토분들이 도와주신 덕분이다. 독학했다면 겪어보지 못할 협업 과정을 통해 많은 것을 배우고 있다. 프론트 엔드 개발자라고 내 주특기인 리액트만 공부해서는 소통을 할 수 없다는 것을 깨닳는다. 최소한 API를 호출하면 어떤 일이 벌어지는지..

리액트 주특기를 학습하기 시작하고 첫 협업 프로젝트를 하게 되었다. 백엔드 팀과 프론트 엔드 팀으로 나뉘어 하나의 웹 앱을 만들어 내는 일로 기획부터 함께 진행하게 되었다. 다들 직장인이기 때문에 아주 복잡한 앱은 만들 수 없어서 간단한 앱을 구상하게되었다. 복잡한 앱을 만들어내는 것보다 납기(2주)내에 완성을 시키는 것이 중요하다고 하여 스코프는 크게 잡지 않았다. 우리가 기획한 앱은 릴레이 동화 프로젝트였다. 불특정 다수의 인원이 한줄씩 이어서 작정해서 동화를 이어나가는 기능을 구상했다. 필요한 기능은 회원가입, 로그인, 첫 동화 게시글 작성 기능, 이어쓰기 기능이 기본적으로 필요했고 이어서 서버에 저장된 데이터를 받아와서 화면에 뿌려주는 기능이 필요하다. 사이드 기능으로 글과 이어쓴 문장에 좋아요를..