[TIL/React] 2024/07/01

reference: https://www.youtube.com/watch?v=u4VylkVzB8k&list=PLmsBpw69UXdYtB2aAwpMvblRoQDegGZ05&index=1

next => update, delete 듣고 코드 분석하기

✅ 또두리스트

새로운 기술을 습득하려 할 때, 크게 두 가지 방법이 있다.

1. 공신력 있는 두꺼운 기술 서적 또는 공식 문서를 톺아본다. 2. 간단한 프로그램을 만들어보며 기술을 적용한다.

흔히 두 번째 방법이 더 효율적이라는 의견이 많은데, 본인은 천성이 게을러서 1번 작업은 엄두도 못 낸다.

여하튼, MERN stack을 찍먹하기 위해 새롭게 배워야 하는 기술들이 몇 가지 있는데, Javascript 계의 로제타 스톤으로 불리는 Todolist를 한 번 더 꺼내기로 결심했다.

기본적으로 어떻게 돌아가는지 전체적인 flow를 확인한 뒤, 살(=추가적인 기능들)을 붙여나갈 계획이다.

오늘의 강의 자료 역시 인도형님이다.

✅ 기본 UI 구성

넘어가겠다.

✅ 어떻게 DB 이름이 몽고디비 ㅋㅋ

구글로 간편하게 signUp 했다. 우리 업계에서는 이것을 OAuth라 부른다.

이런 폼을 마주하게 된다. 적당히 대답해주면...

장난하나, 무조건 프리다 프리. 이어서 create deployment를 클릭하면 엄청난 검열의 시간이 찾아온다.

프로젝트로 이동해서 backend directory를 생성하고 yarn init을 한다. npm 유저라면 npm init을 하면 되겠다. backend directory에 package.json이 생성된다.

security 탭의 quickstart로 이동해서 필요한 내용을 작성한다. 본인은 이전 화면에서 이미 해당 작업을 했기에 IP Adress와 Description이 있는 상태였다.

그렇게 되면, database access와 network access에 뭔가가 나오는데, 이건 중요한거 같아서 일단 비밀이다.

이후에 network access tab으로 이동한 뒤, 초록 버튼 클릭 후 allow access 버튼을 클릭한다. 마지막으로 confirm을 한다. 일단 인도형님이 시키니까 한다.

그리고 database 탭에서 connect를 클릭한다.

이런 모달이 나오는데, 해당 내용을 서버 파일에 copy한 뒤에 password 부분에 password를 대입해준다.

✅ backend server 설정

몽고랑 express를 휘뚜루마뚜루 하겠다는 뜻. 별도의 port로 서버를 설정함!

✅ 주의

서버를 다시 껐다가 켜보자! 꼭!

코드 엄청 많은데 정리할 엄두가 안 남. "나중에" 선언.

그리고 별도의 프로젝트 깔짝

✅ 회고

'타인'은 '내가 아직 경험해 보지 못한 나'일 수 있다. 그래서 소설을 읽는다. 인생에서 자신할 수 있는 부분은 생각보다 많지 않아서, 무너지지 않으려면 다양한 마음을 알고 있어야 한다. 알면 버틸 수 있다.

코드를 읽는 것도 마찬가지다. "정말 생각이 다양하구나"라는 느낌을 자주 받는다. 그래서 아집을 내려놓으려 노력한다. 유효한 코드라는 것은 바리에이션이 정말 넓어서, 함부로 깝죽거리면 순식간에 무너질 수 있겠다는 생각이 든다. 역시 새로운 스택은 새로운 생각을 만든다.

급성 감기 이슈 후 무수면 20시간 코딩 및 정처기 종료