[TIL] 하루가 너무 짧다구요

🥽리액트 입문 주차 시험

🔍시험 문제 살펴보기

1. 레이아웃과 기능은 화면에 보이는대로
2. App.jsx와 App.css 파일만 이용하기
3. 배포하기

레이아웃는 특별할 건 없으니 넘어가고

기능은 이번 주차 개인 과제로 나왔던 것 보다 기능이 훨씬 더 적었다.

할 일 추가하기 기능만 구현해주면 된다.

 

🎞배포하기

배포는 확인할 수만 있도록 하면 어떻게 배포하던 상관없다.

항해에서는 vercel을 이용하도록 하는 것 같았는데,

나는 vercel 들어가기도 귀찮고 gh-pages가 손에 익어서

gh-pages를 이용해서 배포했다.

 

[React] gh-pages 배포하기

✨총평

다만, 배포 단계에서 어려움을 겪는 분들이 꽤 많았다.

개발을 시작한지 얼마 안됐다면 깃을 사용해서 push하는 게 어려울 수 있는데,

git사용이 어렵다면 github repo 웹페이지에 파일을 바로 업로드할 수 있다는 걸 알아두면 좋을 것 같다.

 

총평 : 이번 주차 과제만 열심히 했다면 당연히 쉽게 구현할 수 있다. 다만 배포는 조금 어려울 수 있다.

 

🏎알고리즘 문제 풀이

프로그래머스 스쿨 > 코딩 테스트 연습 > 코딩테스트 고득점 kit 탭으로 들어오면

유형별 문제들을 정리해놓은 걸 볼 수 있다.

유형별로 문제들을 풀 수 있을 정도로 실력을 키워놓으면

웬만한 코딩 테스트는 어렵지 않을 것 같다.

 

프로그래머스가 아니더라도

다른 문제 사이트를 문제 유형별로 나눠서 접근하는 방식으로 공부하는 걸 추천한다.

 

문제를 유형 별로 나눠서 풀게 되면,

나중에 어떤 알고리즘을 사용하면 될지 점점 눈에 보인다.

 

문제 유형을 정복해나가는 맛이 있다.

 

아무튼 해시 알고리즘에 남아있던 마지막 문제인 베스트 앨범 문제를 풀러 가보자

level3/베스트앨범

해시 알고리즘 문제는 자료형이 여러 개 주어지고,

적당하게 조작하거나 복수 이상의 자료형을 엮는 식으로 풀이하는 게 보통이다.

 

어려운 해시 문제는 자료형을 조작해야 하는 조건이 번거롭고 까다롭거나

자료형을 엮기 어렵게 설계를 해놓는다.

 

베스트 앨범 문제가 대표적으로 그런 문제인 것 같다.

 

해시라고 써져 있는 문제는

알고리즘을 잘 써야 된다기보다는 다른 방식으로

논리적으로 조건을 잘 해결하고 여러 자료형을 잘 연결하면 되는 것 같다.

 

const answer = [];
const genreSet = new Set(genres);
const playsGenre = {};
const genreTable = [];
const genreRank = {};
const musicCount = {};
[ ...genreSet].forEach(el => musicCount[el] = 0);

이런 식으로 변수를 6개나 선언하는 엉망진창 코드가 되어버렸다.

변수를 6개를 관리하는 건 너무 헷갈리고 이름도 죄다 비슷해서 구분도 어려웠다.

 

다른 사람의 풀이를 참고해보니

리턴된 값들을 변수에 저장해서 중간중간 처리하기보다,

메서드로 return 값을 바로바로 받아서 처리할 수 있도록 연결해서 푸는 게

차라리 덜 헷갈리는 측면에서는 더 좋을 것 같다.

 

자세한 문제 해설은 밑의 저장소를 참고하자.

 

▶문제 보러 가기

프로그래머스

 

▶문제 해설 보러 가기

GitHub - synuns/algorithm-study: 코딩 테스트 문제 풀이 및 알고리즘 공부 저장소입니다.

👩🏻‍💻매니저님 순회 문답

🖐🏻🧑🏻 : 내일부터는 어떤 걸 중점적으로 배우나요?

 

Redux를 중점적으로 배운다고 생각하시면 됩니다. 상태 관리 라이브러리의 근본 Redux를 배워보는 시간입니다. 

 

나중에는 클라이언트 쪽의 상태 관리 라이브러리도 좋지만

서버 상태관리 라이브러리인 React query도 공부해보시는 걸 추천드려요!

 

🧑🏻🖐🏻 : 이번에 vite를 공부하면서 vitest로 테스트 라이브러리를 접했는데요. 프런트엔드 테스팅이 잘 와닿지가 않았어요. 혹시 테스트 라이브러리를 직접 사용하는 레퍼런스가 없을까요?

사실 이 영상은 상태 관리에 대한 영상이지만 테스트 코드를 너무 잘 쓰셔서 레퍼런스로 추천드려요!

라이브 코딩으로 어떻게 실시간으로 사용하는지 잘 참고하실 수 있을 거예요

(대박... 정말 정확하게 찾던 거예요!🤩)

 

 

🖐🏻🧑🏻 : 타입 스크립트도 적용해보려니까 개발 속도도 안 나고 너무 어렵더라고요. 처음에는 방법이 없을까요?

 

개발할 때 먼저 타입 스크립트를 적용해놓고 개발하다가

타입 적용이 도저히 안 되겠으면 과감하게 any 넣어놓고

찾아본 뒤에 바꿔 넣어 놓는 식으로 처음에는 많이들 개발해요!

 

나중에 실력이 많이 좋아졌을 때는

타입으로 먼저 구성을 만들어 둔 다음에

개발을 하는 식으로 하시는 걸 추천드릴게요!

 

앞에 공유드렸던 영상에서도 타입 스크립트를 사용하니까 도움이 되실 거예요

 

🧑🏻🖐🏻 : 레퍼런스로 참고할 만한 괜찮은 깃허브 레포가 있을까요?

 

https://github.com/toss/slash

GitHub - toss/slash: A collection of TypeScript/JavaScript packages to build high-quality web services.

토스에서 오픈소스로 공개한 라이브러리 추천드려요.

타입 스크립트로 되어 있어서 도움도 많이 되실 것 같고

Docs도 전부 잘 정리되어 있어서 코드 살펴볼 때도 좋을 거예요

 

(그렇게 2시간을 수다 떨었다.)

 

✅오늘 한 일

✏리액트 시험

😎알고리즘 문제 풀이

🔩운동

🙇🏻‍♀️매니저님 순회

 

👻 아무 말

벌써 리액트 입문 주차가 끝이 났다.

열심히 했다는 생각에 뿌듯하기도 하고 

밀린 것들을 보면서 시간을 좀 더 잘 써야겠다는 생각이 들기도 한다

 

잠자리에서 오늘 하루 열심히 살아서 뿌듯한데,

다 처리 못하고 미룬 일 때문에 찝찝한 느낌 때문인 것 같다

 

어쩔 때는 하루가 정말 24시간이 맞는 것인가

나는 왜 더 적은 것 같지 싶은 생각도 든다.

 

와중에 잠을 너무 못 자서 피곤하기도 하다

그도 그럴게 일어나서 체크인 타이머 키고 자기 직전에 체크아웃하고자면

19시간이 넘게 찍히니 잠은 그것보다 훨씬 덜 잔다.

 

내일부터는 과제는 최대한 빨리 끝내버리고

개인적으로 커리큘럼 이상의 다른 것들을 더 공부하면서

실전 프로젝트 개발 스택도 고민해보고 기획도 미리 준비하려고 한다.

그 외의 자바스크립트 공부와 알고리즘 공부도 계속 틈틈이 해나가야겠다.

@Im_not_FRUIT

피곤해서 의식의 흐름대로 진짜 아무 말