본문 바로가기

전체 글

 (85)
2024.2.16 기록 ( vite, 자바스크립트의 배열과 객체) Vite 새로운 프로젝트를 시작하기 전, 이번에는 CRA가 아닌 Vite를 이용해보기로 하였다. 바이트가 아닌 빗에 가까운 발음으로 읽는다. CRA와 다른 몇가지 차이점이 있는데, 우선 명령어에 차이가 있다. CRA는 create-react-app 을 입력하여 프로젝트를 생성했지만, vite는 create vite@latest 를 입력한다 이후, 프로젝트 명을 입력하라는 메시지가 출력된다. 프로젝트명을 입력하면 어떤 환경에서 개발을 할 지 물어보게 된다 이후 CRA의 초기 세팅이 끝난것과 거의 비슷하게 된다. 다만 차이점이 있다면 npm install를 추가적으로 진행해줘야 한다는 점이 있다. 하지만 그조차도 빠르고 심지어 개발 서버를 시작하는 부분조차 빠르다. (명령어는 npm run dev를 그대로 ..
2024.2.15 기록 (프로젝트 마무리 회고) 명절을 낀 기간동안 뉴스피드 프로젝트가 마무리 되었다. 이번 프로젝트에서 제일 큰 문제였던 건 파이어베이스였다. 기본적으로 데이터가 도착하는 시간보다 랜더링이 빨랐기 때문에 비동기 통신을 진행해야했고, 그 과정에서 useEffect를 이용해서 데이터를 받아오는 기능이 존재했고, 그 내부에서 데이터를 받아오는 과정이 겹쳐서 짧게는 1초 길게는 5초까지 딜레이가 걸렸다. useEffect(() => { const checkAuthState = async () => { const user = auth.currentUser setIsLoggedIn(!!user); if (user) { const userRef = doc(db, 'users', user.uid); const userSnap = await getD..
2024. 2.14 기록 (styled-components) 리액트를 사용하면서 나중에는 잘 쓸 일이 없겠지만, 현재 프로젝트 중, 이 라이브러리 고유의 기능들이 있어서 이번 프로젝트에서 유용하게 사용하였다. 사용한 기능은 다음과 같다. 1. prop으로 변수를 전달해줄 수 있다. color: ${(props) => (props.primary ? "white" : "black")}; background-color: ${(props) => (props.primary ? "blue" : "white")}; 자바스크립트를 통해서 default 값을 지정해줄 수도 있다. 2. 특정한 이벤트 (isActive) 등의 boolean 값을 통해 다른 값을 부여해줄 수 있었다. filteredFanLetter(member)} > 자녀 요소를 호출하는 방법은 css와 같은 방식을..
2024.2.13 기록 (프로젝트는 밤을 샌다.) 제법 오랜만에 밤을 새며 작업을 진행하는 것 같다. firebase를 이용해 이것저것 다루기 위해 나름 공부를 많이 했는데도 생각하지 못한 부분에서 오류가 발생하고, 수정 부분이 생긴다. 파이어베이스의 데이터 전송속도는 느린 편이다. 랜더링이 되는 시간보다 늦은 개념이 아닌 조금 더 느리다. 그렇기 때문에 조건부 랜더링을 많이 걸어주게 되는데, 이번에는 useEffect 훅을 많이 사용했다. 그런데, useEffect 훅을 사용하며, getDoc, updateDoc 과 같은 작업을 실행하면 소요되는 시간이 더욱 길어지고, 페이지를 랜더링 후 약 3~4초 뒤에 파일들을 불러오게 된다. 방법은 크게 두 가지가 있었다. 첫 번째는 useEffect 내부에서 해당하는 작업들을 하지 않고 최대한 가볍에 할 것, ..
2024.2.8 기록 요즘은 시간이 걸리더라도 직접 코드를 작성하고 있다. 요 며칠, 제로베이스에서 코드를 짜는 것에 망설이거나 초기세팅을 작성하는 데 제법 많은 시간이 걸린다는 걸 느꼈다. 항상 준비된 상태에서 코드를 작성하는 것에 익숙해져있는 나에겐 어찌보면 당연한 결과다. 단순한 배열 메서드를 이용하는 방식부터, 상태를 수정하고 리렌더링을 불러오는 과정까지 생각하는 그대로 코드로 뽑아내는 것들이 필요하다. 마치 글을 쓰는 것처럼 언어를 사용할 줄 알더라도 글을 읽지 못하는 문맹과는 다른 느낌인 것과 같이, 잃어버린 가장 중요한 부분을 마주하게 되어 기분이 나쁘지 않다. 뉴스피드 프로젝트를 시작했다. 밀리의 서재를 모티브로 잡고, 인터파크 API를 받아오는 방향으로 개발을 진행하게 되었다. 이번에는 PM의 역할을 맡았고,..
2024.2.7 기록 (함수형 업데이트의 사용) 함수형 업데이트를 사용하는 이유 중 하나는, 상태값을 변화시키는 도중에 발생 할 수 있는 비동기로 업데이트 되는 부분에 의한 문제 발생을 방지하기 위함이다. 예시로 많이들 볼 수 있는 예제이다 const [count, setCount] = useState(''); return( ... onChange= {() =>{ setState(count + 1) setState(count + 1) setState(count + 1) }} ) 이런 방식으로 작동 됐을 때 업데이트는 마지막 setState만을 적용한다. 리액트는 배치(batch) 업데이트를 사용하기 때문이다. 그렇기 때문에 우리는 함수형 업데이트를 도입했고 다음과 같은 형태를 자주 마주하게 된다. const [count , setCount] =useS..
2024.2.6 기록 (부실 공사는 철근이 없어) 오늘은 노베이스로 코드를 짜보는 시간을 가졌다. 자바스크립트를 다루는 부분에서부터 문제가 생겼는데, 사실 어느정도는 짐작을 하고 있던 부분이었다. 매번 시간에 쫓기듯 코드를 작성하다보니 처음부터 다시 작성한다. 라는 개념을 잊은지 제법 오래되었다. 그리고 그 부분은 어느샌가 처음부터 무얼 해야하는 지, 어떤 방식으로 구상을 해야하는 지로 직결되었다. 필요한 부분은 알고 있지만 당장 그 필요한 부분을 직접 만들지 못하니 본전말도가 된 셈이다. react를 처음 배우면서 가장 우려했던 부분이 이런 부분이었다. 단순히 기워맞춰나가며 완성하는 것이 아닌 모래성을 쌓는 방법부터 다시 다뤄야한다. 한창 떠들썩했던 부실공사 이야기가 떠올랐다. 그렇게 여기 저기서 빼먹고 남은 건 그럴듯한 외견뿐이고 유지보수조차 할 수..
2024.2.5 기록 (전역상태관리) 프로젝트를 준비하는 과정에 대하여, 이번 프로젝트에서 redux를 사용하며 많은 과정을 경험할 수 있었는데, 데이터를 어디서 넘겨주어야 하는 지의 기준과, 컴포넌트를 나누는 기준 등 여러가지 부분을 기존의 방식에서 변경하게 되었다. 기존의 컴포넌트를 나누는 방식은 기능적으로 나누었다고 생각을 했지만 삭제, 생성, 수정과 같은 기능으로 나누었던 방식이었고 이번에 배우게 된 방식은 기능을 기준으로 나누게 된 방식이다. 무언가를 작성하는 폼(Form)이 존재한다면, 그 부분을 범용적으로 사용하고, 기능을 추가로 작성하는 방향으로 제작하게 된다. 또한 필요한 Context와 로컬상태 관리를 필요한 만큼 나눠서 하게 되고 이 상태가 여러군데에서 사용중이라면 redux를 통해 전역관리를 할 수 있는 것이다. 이번 ..

티스토리툴바