oyatplum

지난 두 과제의 리팩토링에서는 렌더링 최적화와 에러 해결에 집중했다면 이번 과제 리팩토링에서는 디자인에 신경을 써봤다. 지금까지는 styled-components 라이브러리를 사용했다. 아무래도 컴포넌트 기반으로 스타일링을 적용할 수 있다 보니 편리하기도 했고 익숙해서 항상 하던 방식대로 사용했었는데 뭔가.. styled-components도 내가 사용하는 방식보다 더 효율적으로 작성할 수 있는 방법이 있을 것 같았다. 아무리 컴포넌트 기준으로 스타일링을 작성하고 global.css를 사용하더라도 중복되는 스타일링을 계속 사용하는게 비효율적이라고 느꼈다. 그래서 알게 된 것이 바로 디자인 시스템 !!! 디자인 시스템이란 간단하게 서비스를 만드는 데 사용하는 공통된 컬러, 폰트... 등등 여러 컴포넌트(디..

드디어 메신저 리팩토링.. 메신저 과제할 때 타입스크립트를 처음 써 봤는데 아주아주아주 힘들었던 기억이 있다.. 우선 불필요한 리렌더링 문제부터 해결해봤다. 1. 렌더링 에러 해결 랜더링이 어떻게 되고 있는지 확인하려고 개발자 모드 켜자마자 뜬 에러.. 넌 뭐냐 대체... ChattingRoomPage 컴포넌트에서 setState 할 때 오류가 나는 것 같다. const [selected, setSelected] = useRecoilState(selectedUser); setSelected(0); 여기! recoil로 토글 시키는 유저를 저장했었는데 대화방에서 유저를 토글시킨 다음 채팅 목록에서 다른 대화방으로 옮기면 recoil이 업데이트되지 않아서 엉켜버렸다. 아마 그래서 저렇게 setSelected..

세오스 과제로 했던 개인 프로젝트 리팩토링을 해봤다. 우선 가장 처음에 했던 투두 과제! 결과는 왼 > 오 처럼 한 눈에 봐도 디자인에서 가장 큰 변화가 생겼다. 이전의 나.. 정말 디자인이라곤 1도 몰랐구나.. 사실 오른쪽 결과도 투두메이트를 거의 모방했다ㅎ.. 투두메이트처럼 투두리스트를 모음집으로 만들고 더 구체적으로 만들어 볼까도 생각했지만 우선 처음부터 그렇게 시작하면.. 어마무시한 스트레스를 받을 것 같았기에.. 할 수 있는 만큼부터 시작했다. 확실히 이 전의 과제에서 작성했던 코드는 굉장히 더럽고.. 효율이라고는 하나도 없었다. 그저 기능을 구현하기 급했다. 뭐 어쩔 수 없긴 했지. 지금도 엄청난 변화를 줄 순 없었지만 우선 리팩토링을 할 때 컴포넌트 분리와 렌더링 위주를 생각하며 조금씩 바꿔..

5,6주차 미션: Next-Netflix 새오스 5,6주차를 마무리하며..... 처음으로 next.js를 써봤다.. 음 그냥 그럭 저럭 쓸만 했다 next 12와 달리 13에서는 변경된 사항들이 꽤 있어서 오류 해결하느라 애 좀 먹었다. 음.. 그래도 layout 기능이나.. page 넘어가는 기능들이 처음이라 어색해도 되게 유용하다고 생각해서 생각보다 그렇게 큰 스트레스를 받은 것 같진 않다^^...!! npm만 쓰다가 yarn berry 시도해봤는데 배포 이슈로 다시 npm으로 돌아왔다는 아쉬운 점 빼고 많이 배울 수 있었던 과제였음ㅎ 새롭게 알게 된 부분 & 어려웠던 부분 사실 새롭게 알게 된 부분이라고 한다면 코드의 거의 모든 부분....이라 중요도가 높다고 생각하는 것만 적어보자면 1. Data..

3,4주차 미션: React-Messenger 세오스 3,4주차를 마무리하며.. 처음으로 타입스크립트를 사용해봤다..그냥 죽음 뿐이었다 하하;;ㅠㅠㅠ 3주차는 일주일만에 처음 써 보는 타입스크립트로 메신저 방을 구현해보려니까 정말 대환장파티 ㅠㅠ 필수 요건도 제대로 모두 구현하지 못 할 수준이었다.4주차는 휴학생인 나에게 한 달의 시간이 주어졌고... 그래서 타입스크립트를 조금 더 공부한 뒤에 나름 만족할 수 있는 결과를 만들어낼 수 있었다!!! 사실 그럼에도 불구하고 아직 부족한 점이 많지만... 할 수 있다는 자신감이 생겼던.. 과제였다. 새롭게 알게 된 부분 & 어려웠던 부분 1. Layout const Layout = () => { return ( ); }; const App = () => { r..

2주차 미션: React-Todo 세오스 2주차를 마무리하며... 리액트로 구현하면 쉽지 않을까 생각했던 난 바봉 멍충이,,, 내 기억력은 휘발성이 미쳤다 요상하고 잡다한 건 잘 기억하면서 왜 공부는 기억을 못 하지ㅋㅋ 켘ㅋ 이번 과제하면서 아쉬운 점이 많았다.. 뭔가 렌더링 최적화도 멋있게 딱!!딱!! 하고 싶었고 useEffect도 쉬리릭 쓰면서 휘황찬란하게 코딩해서 멋찌게 제출하는 나를 상상했지만 따흑..... 다음 주는 타입스크립트 쓰는 것 같던데 난 망해따 헤헤 얼른 공부나 하고 있어야지 에휴우웅.... 새롭게 알게 된 부분 & 어려웠던 부분 1. rendering 두 번씩... https://velog.io/@aurpo1/React-console-2%EB%B2%88%EC%94%A9-%EC%B0..

1주차 미션: Vanilla-Todo 세오스 1주차를 마무리하며... 자바스크립트만 이용해 todo를 만들어 본 적이 있어서 그리 어렵지 않을 것이라 생각했지만... 엄청난 실수였다^.^ 요즘 한창 리액트 공부하다가 "자바스크립트만 써!!!" 라고 하니까 도무지 엄두가 안 나서 계속 멍..만 때리고 있었당... 바보가타.... 새롭게 알게 된 부분 & 어려웠던 부분 우선 forEach()와 filter()함수를 굉장히 유용하게 잘 썼던 기억이 있다.. 예전(?)에는 사실 이런 함수들이 크게 와닿지 않았고 이런 함수들의 기능이 필요할 때 어떡하지?!?!?!!?!;;;;;; 만 머리에 박혔는데 이젠 아~~ forEach 써야겠네~ 아~~~~filter쓰면 되겠네~~~ 라고 생각할 수 있게 됐다.... ㅋㅋ...