{10월 둘째주 회고} 리액트 스터디 3개 | 아카이브 필요성 | table 태그 궁금쓰

이번주는 리액트 스터디 두개를 시작했다.

하나는 코딩애플의 리액트 강의를 듣는 스터디, 다른 하나는 개발공부 스터디 

 

그리고 단발성으로 진행되는 우리 회사 프론트 입사과제 스터디 하나가 더 추가되어서, 당분간은 리액트 관련 스터디만 3개를 하게 되었다.

 

📝 순서

1. 코딩애플 리액트 스터디
2. 리액트 공식문서(개발공부) 스터디
3. 프론트 입사과제 스터디
4. 아카이브의 필요성
5. table 태그 궁금쓰

 

1. 코딩애플 리액트 스터디

- 진도상황: 1강 ~ 11강

- 강의링크: https://codingapple.com/course/react-basic/

- 스터디일시:  화/목, 오후 8시부터 10시

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌

 

새로 오신 프론트엔드 개발자 분이랑 코딩애플 리액트 강의를 함께 듣는 스터디를 시작했다. 강의 하나가 끝날때 마다 과제가 있는 형태라, 회의실 티비로 강의를 같이 듣고, 각자 과제를 하고 해결방식을 공유하고, 모르는 것도 같이 찾아보는 방식으로 진행하고 있다.

 

처음 누군가와 같이 개발공부 스터디를 해보는 데 아주아주 만족스럽다. 한가지 과제에 대해서 같이 풀어보고 공유할 스터디 메이트가 있으니, 다각도로 생각해보게 되는 점도 좋다. 그리고 집중도 잘되서 2시간동안 쉬는시간 없이 정말 콤팩트하게 공부를 한다.

 

강의 자체는 정말 리액트를 1도 모르는 사람들을 위한 입문 강의다. 나는 프로젝트를 하면서 리액트를 익혔기 때문에, 그동안 업무를 하면서 기초공부가 필요함을 많이 느껴왔다. 그래서 이 강의의 난이도가 마음에 들었다.

 

2. 리액트 공식문서(개발공부) 스터디

- 진도상황: 리액트 소개 페이지, tutorial "자습서를 시작하기 전에" ~ "개요"

- 문서링크: https://ko.reactjs.org/

- 스터디일시: 수/목, 오전 8시부터 10시

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

우리 회사 iOS 개발자분이랑 하는 개발공부 스터디도 시작했다. 그분은 swift를 공부하시고, 나는 리액트 공식문서를 읽는다. 이번 1회차는 국문으로 쭉쭉 읽어나가는 방식으로 하고, 다음에는 국문으로 모르는 개념까지 파고드는, 그 다음에는 영문으로 읽어보는 방식을 생각하고 있다.

 

리액트 공홈을 쭉 훑어보는 것부터 시작했는데, 흥미로운 것들을 발견하기도 했다. (리액트 디스코드, 리액트/javascript 팟캐스트 등) 팟캐스트는 출퇴근길에 들으면 좋을 것 같았다.

 

지금까지는 리액트 소개 페이지와 tutorial의 초반부를 읽었는데, 리액트의 정의, 컴포넌트의 개념 등 기본적인 개념을 차곡차곡 밟아나가는 느낌이다. 코딩애플 리액트 강의를 듣는 것과 함께 리액트 기초를 쌓는 이 느낌이 그 동안 기초의 부족함을 느꼈던 것을 충족시켜줘서 너무 좋다.

 

3. 프론트 입사과제 스터디

- 스터디일시: 수요일, 오후 5시반

 

이 스터디는 우리 회사 안드로이드 개발자분이 개인적인 흥미로 리액트 공부를 시작하시면서 제안해주셨다. 프론트 입사과제를 각자 만들어보고 서로의 결과물을 공유하고 토론하는 스터디다. 일단은 단발성이지만 논의가 길어지면 몇 주 더 하기로 했다.

 

이 과제를 위해서 오랜만에 새 프로젝트를 만들어보았다. 이 과정에서 react-router-dom v6를 처음 사용해보았다. 회사에 오면서는 프로젝트를 처음부터 만들일이 없으니, 리액트 공부 뿐만 아니라 새로운 프로젝트를 만들어본다는 측면에서도 의미가 있는 스터디다.

 

4. 아카이브의 필요성

이번주 스터디를 해보니, 미래의 나를 위해 아카이브하는 포스팅을 만들고 싶은 것들이 생겼다.

 

하나는 자주 사용하지 않아 잘 까먹지만 유용한 지식

• CSS 편

• git 편

 

다른 하나는 스터디 요약판

• 리액트 공식문서

• 코딩애플 리액트 강의

 

요로케 블로그에 포스팅 해두면 여기저기 흩어져있지 않고 잘 아카이빙 할 수 있을 것 같다.

 

5. table 태그 궁금쓰

예전에 언뜻 "table 태그는 잘 쓰지 않는다."라는 이야기를 들은 적이 있다. 그런데 프론트 동료분께서 table을 만드신다기에 위 이야기가 맞는지 구글링을 해보았다.

• https://wisdmlabs.com/blog/responsive-tables-using-css-div-tag/
• https://github.com/TanStack/table/issues/3685
• https://stackoverflow.com/questions/3053205/how-create-table-only-using-div-tag-and-css
• https://www.geeksforgeeks.org/how-create-table-without-using-table-tag/
• https://www.daleseo.com/react-table/

 

험...🥲

결론은 아직도 모호한 상태여서, 앞으로 더 알아보아야 하는 과제로 리스트업 해두었다.

 

이번주는 리액트로 꽉찬 일주일이었다.

같이 하는 동료가 있으니 역시 좋다.

아카이브도 잘해보자!