TIL, 06.24-25
리액트 다루는 기술
공부
스타일링에 대해 배워봤다. 나는 기본적인 CSS만 배워서 다른 스타일링에 이번에 처음 배워 보았다
먼저 sass는 css 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해 준다. 코드의 재활용성을 높여 줄 뿐만 아니라 코드의 가독성을 높여서 유지보수를 쉽게 해준다 기존 CSS작성하는 방식과 비교해서 문법이 크게 다르지 않아서 CSS를 해본 사람은 쉽게 접근할 수 있다. 그리고 변수나 믹스인은 다른 파일로 따로 분리하여 필요한 곳에 쉽게 불러와서 사용할 수 있다
또한 최고 장점은 node_modules에 필요한 라이브러리를 불러와 쉽게 사용할 수 있다. 몇개의 예제를 따라 사용해 보니 나와 잘 맞았다(CSS를 해봤던 나에게는 좀 더 익숙한 느낌이었다)
두 번째로 스타일 컴포넌트가 있다. 스타일 컴포넌트는 JS파일 안에 스타일을 선언하는 방식이다
JS파일 하나에 스타일까지 작성할 수 있기 때문에 스타일 파일을 따로 만들지 않아도 된다는 이점이 있다
가장 큰 장점은 props 값으로 전달해주는 값을 쉽게 스타일에 적용할 수 있다는 점이다
조건부 스타일링을 간단하게 props로 처리할 수 있다. 몇 개의 예제를 따라 사용해 보니 scss와는 다르게 좀 더 나에게는 어렵게 다가왔다. 아예 태그로써 만들어서 처리해 주는 게 나에게는 익숙하게 보이지 않았기 때문이다. 하지만 후에 리액트 스터디를 할 때 스타일 컴포넌트에 진가를 알게 되었다
오류
sass-loader 설정 커스터마이징에서 책을 따라 prependData를 넣어 utils.scss를 자동으로 불러오려고 했는데 오류가 생겼다. 찾아보니 리액트가 업데이트가 진행되면서 최신 버전은 이름이 바뀌어서 생긴 문제였다 additionData로 넣어주었더니 잘 해결되었다
scss 라이브러리를 불러와서 사용하려고 했는데 Module build failed (from./node_modules/sass-loader/dist/cjs.js):... 오류가 떴다. 책을 그대로 따라서 했기 때문에 오류가 난 이유가 이해가 안 됐다. 그래서 처음에는 버전이 안 맞아서 그런 줄 알고 node-sass의 버전을 낮춰서 다시 다운로드하였는데도 오류가 계속되었다
구글링 해보니 sass를 다운로드하면 된다 해서 yarn add sass를 해서 다운로드하으니 신통방통하게 오류가 해결되었다. 알고 보니 모듈을 못 찾거나 있는 데 사용을 못한 것이 아니라 진짜 없어서 문제가 발생한 거였다(어째서 책을 따라갔는데...)
TodoList
이제까지 리액트 공부한 것을 기반으로 TodoList를 만들어보았다
예제가 책에 있어서 책에 있는 것을 기반으로 하되 내가 추가적으로 기능이나 내용을 추가하기로 하였다
책에서는 간단하게 할 일을 적고 체크 삭제하는 기능이 이었지만 나는 제목과 내용을 각각 분리하여 입력하게 하고 추가 삭제 체크뿐 아니라 체크일 경우 완료 쪽에 넣어주고 진행 중이면 진행중 쪽에 넣어주었다
그리고 완료가 됐을 경우에 버튼 스타일을 변경하여 서로 다른 버튼으로 보이게 했다
다 만든 후에 매니저님에 도움을 받아 나름대로 코드리뷰를 해보았다
지금 상태관리까지는 배우지 못해 props로 넘기고 있는데 한 번만 쓰는 간단한 로직은 굳이 props로 넘길 필요가 없이 현재 로직에서 하는 것이 좋다. 로직마저 나누고 넘기는 것은 과하다
그리고 내가 짠 코드는 입력값을 다 넘기게 되어있는데 그러지 말고 밸리데이션 즉 유효성 검사를 해서 그냥 넘기거나 공백을 넘기거나 할 때 제어를 해주어야 한다. 그리고 UI 문제로 입력값이 많아져서 박스가 길어지면 UI가 이쁘게 보이지 않으니 해결을 해주는 것이 좋다 요즘 쓰는 것 중에 하나는 박스는 고정되어 있고 박스보다 큰 입력값이 오면...으로 처리해 상세페이지에서 전체 내용을 보여주는 방법이 있다. 코드리뷰하고 난 후 부족한 부분을 다시 채워 마무리하였다
족쇄모임
팀원들의 일정과 뒤에 새롭게 시작한 리액트 스터디 발화로 인해 가볍게 발표했다
은버지스터디
이번에 리액트 공부를 하면서 리액트를 공부하는 다른 사람들과 같이 스터디를 하게 되었다
스터디 방식은 한 주제를 가지고 각각 구현을 하고 서로 코드리뷰를 하는 식으로 진행하는 것이었다
이번 주제는 페이지네이션이었는데 이제 막 TodoList를 만든 나에게 페이지를 만들어 페이지네이션 기능을 완성하는 것이 너무 아찔했다 하지만 스터디원의 일원으로서 나를 갈아 넣어도 무조건 만든다는 마인드로 임해보았다
처음부터 미끄덩했다 yarn create react-app으로 리액트를 만드는 것만 알고 있었는데 vite로 react를 만들어야 한다는 것이었다. 다행히도 은석님께서 차근차근 하나하나 알려주시면서 진행해 주셔서 정말 감사하게도 vite로 react를 생성할 수 있었다. 하지만 그 후에도 많은 에러의 행진이 날 기다렸다 vite를 처음 써보는 나는 모든 게 너무 새로웠기 때문에 차근차근 진도를 나갈 수밖에 없었다. 다행히 잘 완료를 하고 코드를 짤 때 두 번째 문제가 생겼다 바로 api를 받아오기 위해 비동기 사용하기였다. 전에 공부를 한 적이 있지만 이론만 알고 있고 내 힘으로 스스로 코드를 짜서 기능을 사용하는 것은 처음이었어서 열심히 구글링도 하고 책도 찾아보며 코드를 완성하였다 처음에는 값도 이상하게 받아오고 오류도 나고 값도 못 받아오고의 반복이었어서 정말 눈물이 날뻔했지만 내가 이겼다 후후후후 하지만 그것이 끝이 아니었다 바로 마지막 내비게이션 기능을 구현하는 것이 남아있었다. 어떻게 하는 것이 좋을까 고민하다 내가 할 수 있는 선에서 최선을 다하자고 생각하여 나름대로 로직을 생각해 useState와 삼항 연산자를 사용해 만약 페이지 하나당 6개를 보여준다면 전체에서 6개를 잘라서 보여주는 방식으로 구현하였다. 그리고 이번에 스타일 컴포넌트를 이용해 스타일링하였는데 처음 써보아서 어색했지만 다행히 잘 사용해 완성하였다. 이번에 나에게 스타일 컴포넌트의 인상이 매우 좋아졌는데 페이지네이션을 구현할 때 현재 있는 페이지 버튼과 아닌 버튼에 차등 css과 필요했는데 props로 넘겨 아주 쉽게 css를 변경할 수 있었다. 이 순간 와 이래서 이렇게 인기가 많구나 이것이 컴포넌트 진가이구나 생각했다
다행히 완성은 했지만 코드리뷰를 해보며 다른 사람을 코드를 보니 정말 부족한 것이 많다고 생각이 들었다
결과물의 완성도도 낮고 최적화도 낮고 폴더구조도 안 이쁘고 내가 생각하기에도 내가 만든 것이 부족함 투성이었다
하지만 반대로 말한다면 이것을 다 고치면 나의 코드도 이뻐지고 완성도 높고 빨라질 수 있다고 생각하였다
아직은 부족하지만 열심히 공부해서 더 좋은 코드를 만들어야겠다
CS스터디
나는 이번에 브라우저 저장소에 대해 발표했다. 저번에 토이 프로젝트에서 로컬 스토리지를 사용했던 적이 있어 공부하기에도 발표하기에도 좀 더 수월했던 거 같다.
다른 사람의 발표를 들은 후 대칭키와 비대칭키의 장점과 단점 그리고 HTTP의 장점과 단점에 대해 알게 되었다
특히 재밌던 부분은 CA에서 서버인증서를 확인받아 임시 대칭키를 생성하는 방식이었다
이번 스터디에서는 보안에 대해 많은 것을 알게 되었는데 이렇게 데이터를 저장하고 서로 통신하는 것만으로도 많은 보안이 필요하다는 것을 알게 되었다
후기
CS스터디에서 발표를 다 완료한 후에 한분이 티스토리에서 주소 옆 자물쇠를 보면 인증서 뷰어를 확인할 수 있다는 것을 알려주셨다. 방금 공부한 내용을 바로 실제로 확인하니 뭔가 너무 흥미진진했다
은버지 리액트 스터디 이번 주제 과제를 죽어도 만든다는 마인드로 새벽에 잠이 들어 버려서 TIL을 못 적어 24일이랑 25일을 같이 적는다