Today My Routine
☀️Morning
어제 집에 늦게 도착했던 탓일까 늦잠을 자버렸다. 그래서 오늘 오전이 정말 빠르게 지나갔다.
🍱Lunch
오랜만에 점심을 밖에서 먹었다. 와...생각해보니 오늘 밥 싸왔는데 안먹었네?
위워크 주변에 있는 일식집에서 사케동 먹음!
👩🏻💻Afternoon
본격적으로 리액트 시작! 내가 전에 html, css, Javascript로 만들었던 인스타그램을 리액트로 다시 만들어야한다.
[컴포넌트 분리]
처음에 나는 컴포넌트를 다 뜯어내야 하나? 생각했는데 그게 아니라 기능별로 나눠야 하는 것이었다. 원래 있던 것을 분리하면 css가 깨진다고 해서 엄청 걱정했는데 나는 height 값 때문에 로그인 창이 위에 붙어서 나온 것, logo 태그가 login, main 페이지 모두에 똑같은 이름으로 되어 있어서 잠깐 nav 창이 쏠려 보였던 것 말고는 괜찮았다. 처음에 코드를 짤때 최대한 div로 컨테이너를 확실하게 만들면서 한 보람이 있었다.
[라우터]
라우터가 무엇인지, 라우터를 하려면 어떻게 해야하는지에 글로 읽는것 만으로는 이해가 잘 안갔다. 도대체 라우터가 무엇이며 이게 어떤 원리로 구동하는 것이고 어떻게 해야 페이지가 이동하는 것인지. 그래서 유투브 강의를 보았다.
https://youtu.be/Law7wfdg_ls
내가 구독한 개발 관련 채널 중 하나인데 재밌게 잘 가르친다.
이걸 한번 보고 글을 읽었더니 감이 왔다. 라우터 자체가 링크를 타고 건너가고 하는걸 보여주는 것이기 때문에 글만 읽는 것 보다는 클릭했을 때 상태가 어떻게 나오는지 직접 보면서 공부하는 것이 좋은 것 같다.
정말 딱 메인창으로 넘어가는 것만 한거기 때문에 다음에 더 공부해보아야겠다.
[이벤트]
이전에 공부했던 내용들을 바탕으로 state 값을 설정하고, input값을 value로 받아서 setState로 설정하는 것을 했다.그리고 이전에 자바스크립트에서 했던 식으로 몇 글자 이상이면 버튼의 색이 바뀌게 하는 것 까지는 했다. 그런데 이 방법으로 하면 안되는 것이었다.
왜냐하면 이건 정말 말그대로 value의 길이로 받아서 바꾸는 것이라 다시 숫자를 지웠을 때 원래의 색으로 돌아오게 한다든지, 글자를 쓰지 않았을 때 버튼이 클릭되지 않도록 하는 기능을 구현할 수는 없는 것이었다.
🍙Dinner
🍺위코드 동기들과 치맥파티🍗
🌓Evening
그래서 계속 시도해보다가 나의 파트너님께서 화살표으로 푸는 방법을 알려주셨다. 유레카...이건 정말 간단하지만 방법을 알지 못하면 절대 풀 수 없는 부분이랄까?
화살표 함수를 제대로 파봐야겠다. 화살표 함수가 어떻게 구성되는지는 알지만 익숙하지 않아서 이걸 어떻게 써야 할지에 대한 감이 잘 안오는 것 같다.
화살표 함수 조건식으로 버튼을 활성화, 비활성화 하는 함수를 만들었다.
🧗♂️My Feeling
리액트를 가지고 뭔가를 만드는 첫번째 날이었다.
처음에 자바스크립트로 만들었던 인스타그램도 내 마음에 들었지만 리액트로 만드는 인스타그램은 그보다 더 기능도 많고, 페이지도 유동적으로? 할 수 있을것 같아서 기대가 된다.
그 과정에서 배우게 되는 것들도 정말 많을 것 같다. 오늘만 해도 직접 코딩을 하고 검색을 하고 동기에게 설명을 들으면서 정말 많은 것들을 배웠다.
성취감 1000%👏🏻
