TIL #11 - 제네릭, 리액트 빈화면 에러 해결, git PR merge Conflict, 라이브러리와 프레임워크의 차이

 

TIL #11  - 제네릭, 리액트 빈화면 에러 해결,  git PR merge Conflict, 라이브러리와 프레임워크의 차이

 

 

 

 

🧑‍💻 오늘 나는 무엇을 배웠는가?

• 타입스크립트 제네릭
• 라이브러리와 프레임워크의 차이
• 리액트 빈화면 오류 해결
• PR Merge Conflic 해결

 

 

❓제네릭이란

• 제네릭 타입은 인터페이스, 클래스, 함수, 타입 별칭 등에 사용되는 기능으로 각 타입을 미리 지정하지 않고 상황에 맞게 타입을 대응하기 위해 사용되어진다.

 

만약 이렇게 주어지는 배열의 length를 return 하는 함수가 있다고 하자. 위 처럼 선언하게 되면 number와 string으로만 이루어진 배열의 길이만 return 할 수 있고, 다른 타입으로 이루어져 있다면 조건으로 또 추가를 해야한다.

 

만약, 어떠한 값이 들어와도 그에 맞는 타입에 맞출 수 있다면 굉장히 편리할 것 같다.

 

이럴때 사용하는 것이 바로 제네릭이다.

 

보통 이렇게 T 로 표시를 한다.

 

이렇게 선언하게 되면, 타입을 미리 선언하지 않고 함수의 파라미터로 들어오는 타입에 맞게 대응을 할 수 있게 된다.

 

 

이걸 응용해서 이렇게 null 값을 체크하는 함수를 작성할 수도 있다.

 

 

 

 

❓라이브러리와 프레임워크의 차이

 

Next.js 를 공부하면서 프레임워크가 라이브러리와 어떠한 차이점이 있는지에 대해 학습했다.

 

 

라이브러리

• 사용자가 어떠한 프로그램을 가져와 사용한다.
• 사용자가 파일 이름, 구조 등을 정하고 모든 결정을 내린다.

 

ex) React.js

 

 

 

프레임워크

• 정해진 규칙에 맞게 코드를 작성해야한다.
• 파일 이름, 구조 등을 정해진 규칙에 따라야함.
• 즉, 일정한 형태와 필요한 기능들을 갖추고 있다.

 

ex) Next.js

 

 

 

라이브러리와 프레임워크의 가장 중요한 차이점은 Inversion of Control(통제의 역전)이다.

 

라이브러리는 코드의 흐름을 직접 제어를 해야하지만, 프레임워크는 정해진 틀 내에서 수동적으로 동작하게 된다.

 

 

 

 

 

🤔 이런 고민과 문제점들이 있었어요

 

 

❓1️⃣ 리액트 빈화면 오류

 

빈화면 오류

 

갑자기 어제 낮까지만 해도 잘되던 프로젝트가 안되는 것이다. 엥??

 

심지어... 아무 에러도 뜨지 않았다. 

 

보통 빌드하고 나오는 오류인거 같은데 대체 왜 이게 발생하는지 

 

내가 한 작업은 깃 branch를 팀원과 맞추는 것과 eslint를 깐 것인데... 흠 도통 감이 안왔다.

 

한가지 단서가 있다면

 

 

열리는 주소가 locahost:3000 이 아닌 뒤에 깃허브 레포지토리가 붙어서 나오는 듯한 것이다.

 

넌 대체 뭐냐...!!! 

 

대체 뭘 잘못 만진 걸까

 

 

 

❓2️⃣ git PR merge Conflict

 

테스트 파일을 삭제하고 개발한것을 PR올려 merge 하려니 충돌이 일어났다.

 

다시 pull을 하자니 뭔가 이전 파일로 돌아갈 것 같아서 걱정...

 

 

 

 

 

 

🐳 이렇게 해결할거에요

 

✔️1️⃣ 리액트 빈화면 오류

 

오늘 타입스크립트 스터디를 하고나서 팀원들에게 도움을 청해서 같이 확인해봤다.

 

내가 예측했던것처럼 다른 팀원분들도 아마 이 주소쪽 연결하는게 문제인 거 같다 하셨는데,

 

 

그러다가, package.json에 새롭게 추가 되어 있는 이 코드를 한 번 삭제해보기로 하였다.

 

어제 내가 한 번 삭제해보고 새로고침을 해도 해결되지 않았어서 과연 될까 싶었는데,

 

켜져있는 서버를 닫고 코드를 삭제하고 다시 npm start를 해보니

 

해결!!!!!

 

두둥!!!!!! 잘나온다 ㅠㅜ

 

하 진짜 어제 저녁부터 엄청 신경쓰였는데, 알고보니 저 코드를 삭제하는게 맞았고 서버를 닫았다가 열었어야 했다.

 

다행이다... 묵힌 체증이 싹 사라지는 느낌이다.

 

결론 : package.json을 확인해보자. 

 

 

 

✔️2️⃣ git PR merge Conflict

 

git pull orgin master 명령어를 쳐보았더니 로컬에 지웠던 파일이 다시 생성된 뒤에 

 

이것을 삭제할 것인지 물었다. 삭제하기로 하고

 

다시 git push -u origin 이슈브런치로 push를 하니 PR에서 Merge가 활성화되었다.

 

원하는대로 반영 끝~

 

근데 pull 할때는 엄청 신중히 하게 된다.... 혹시 모를 상황 때문에 

 

 

 

👑 오늘의 성취

 

잠시나마 곯머리를 앓게했던 빈화면 에러도 해결하여서 너무 마음이 편하다 ~

 

기존에 진행하던 스터디에서 기술면접도 다음주부터 같이 준비하기로 하였는데, 너무 마음에 든다.

 

같이 하는분들도 열심히 하려고 하니 나도 열심히 참여해야겠다.

 

 

아직 까진 branch를 분기하고 merge하는 부분이 어색한데 계속 하다보면 나름 익숙해질 것 같다.

 

얼른 많이많이 써서 익숙해져야지