[데브코스] WEEK4🚀

프로그래머스 데브코스 프론트엔드 16일차

productId is undefined... 😥

i 하나 때문에 5시간 고생했다는 story...

4주차의 시작은 3주차의 맥락과 이어진다. 오늘은 바닐라JS로 SPA를 구현하는 방법에 대해 공부했다. 간단한 상황을 (예를 들면 todolist, 제품 주문 api 이용) 이용해서 hashbang과 history api를 사용해보고 이를 통해 spa의 작동 방식을 공부해보았당 😃 마지막 강의를 듣는 도중, productId is undefined 오류가 발생 했고, 누가봐도 오타가 문제라 여태 그래왔듯이 강사님 코드와 하나하나 비교해보았다. 하지만 오늘따라 틀린건 하나없고... 혹시나 지난 강의에서부터 틀린게 발생했나하는 깨름직한 상상까지 들었다ㅜㅜㅜㅜ 중간 중간 리프레쉬하며 다시금 보았지만 절대 오타가 보이지않아서, 구글링을 시도했고 지금 나의 this.state가 undefined여서 생긴 문제라는 것을 알아챘다. 하지만 this.state는 null로 지정해놓은 상태. 그 후 시도한 방법은 console.log 디버깅 이었다. 하나하나 this.state을 찍어본 결과, 생성자 함수에서 제대로 initialState를 전달하지 않는다는걸 확인했다. 그리고 나서 찬찬히 그 부분을 확인해보니... initialState가 initalState로 입력되어있었다는 걸 발견... 😂💦💦 이를 해결하기 위해 무려 5시간을 썼는데... 눈물이 앞을 가린다... 그래도 해결해서 다행이다...
오늘의 고생으로 얻은 점은, 물론 내 오타고 내가 코드를 잘못 타이핑했을 수도 있지만 무조건 코드만 베껴오기 는 지양해야겠다는 점이다. 베이스는 강사님의 코드지만, 오류에 하나하나 맞서는 연습이 필요할 것 같다. (오늘 아마 강의 n번 시청만 빼도 5시간은 안걸렸을것..!) 구글링+디버깅 적극사용하기 역시 구글링 쵝오! 쵝오! 쵝오! 이런 스크립트 언어에서 디버깅은 경험이 많지 않다보니 vscode 디버깅도 최근에 시작한 편이다. 하지만, 의심적은 부분이 있다면 차근차근 콘솔에 찍는것이 국룰이라는것을 이번에 다시금 깨달았다... 과제를 해야하는데ㅜㅜ 힘을 너무 많이 써서 내일 해야겠다..! 🙏

TIL

웹은 서버와 클라이언트가 서로 요청과 응답을 하며 통신한다. 웹이 어떻게 동작하는지 알아야 코드를 이해하고 짜는데 좋다.

일반적인 정적인 웹페이지

html 형식의 파일이 여러개 존재하고 이 파일들이 <a> 태그를 이용해 연결된다. 루트를 나타내는 / 의 주소는 해당되는 페이지가 없다면 index.html를 띄우도록 되어있다. 모든 게시글, 세부사항에 대한 html 파일로 응답하기 때문에 SPA라고 할 수 없다.

웹 애플리케이션

php, java, node.js를 통해 동적으로 html를 생성해서 제공하는 방식이다. 렌더링시점이 뒤죽박죽되는 문제가 있고 서버렌러딩 시점에서 구현했던 것을 클라이언트에서 동적으로 렌더링 해야한다면 중복해서 구현이 필요하다. (처음엔 서버가 만들어준걸 결국 클라이언트측에서 동적으로 바꿔야한다. 일을 두번함..) 대안으로 템플릿의 사용이 나왔지만, 결국 근본적으로 유저 인터렉션은 클라이언트단에서 해야한다.

SPA (Single Page Application)

서버는 api만 처리하고 아예 모든 렌더링을 클라이언트가 구현한다. 서버는 클라이언트에 요청에 따른 data만 json와 같은 형식으로 보내준다. data가 보내지면 클라이언트에서 렌더링을 한다.

hashbang

SPA를 만들기 위해 # 를 url 맨 뒤에 붙여 처리하는 방식을 의미한다. (앵커...!)
같은 페이지 내의 요소를 가리킬 때 많이 사용된다. 요즘엔 많이 사용하지 않는다.

history api

브라우저에서 페이지를 로딩하면, 세션 히스토리를 갖게 된다. 세션 히스토리는 페이지를 이동할때마다 쌓이고 이를 통해 뒤로가기 시 이전 페이지로 가거나 다시 앞으로 가는 등의 이동이 가능해진다.

• pushState - 쌓기
• replaceState - 쌓지 않고 현재 url를 대체
• popState - go, back 일 때 이벤트를 감지
• go
• back

프로그래머스 데브코스 프론트엔드 17일차

TodoApp 정복! 💥

어제 5시간의 대장정 오타 고치기에 이어 오늘도 실습 강의가 이어졌다. 그렇게 생고생하고 나면 넘넘 공부하기 싫어지는데 프론트엔드에 대한 배움 열정이 뿜뿜하는 지금이기에 다시 힘낼 수 있었다. 오늘은 To do App을 user 별로 따로 로딩하는 것을 배웠다. 강사님이 준비해주신 서버에서 user와 todo에 대한 crud를 하면서 기존에 조금 이해가 부족했던 state를 따로 관리하는것, 독립적인 컴포넌트를 짜는 방법에 대해 한층? 이해가 깊어진 기분! 😸 물론, 아직도 강의 따라하고 이해하는 건 오래 걸리지만 꾸준~히 하면된다! 아직 데브코스는 시작한지 1개월 밖에 안됬다 🥰😘
강의를 들으면서 가장 좋은 점은, 어떻게 코드를 짜고 어떤 부분을 고려해야 좋은 프론트엔드 개발자가 될 수 있는지, 역량 강화를 어떻게 할 수 있는지에 대해 아낌없이 알려주신다는 점이다. 거기서 키워드를 뽑고 코드를 더 유저 인터렉션과 사용감을 개선 시킬 수 있게 공부해봐야겠다. 알던 것보다 프론트엔드는 디-테일이 살아있는 멋진 분야다 ⚡

프로그래머스 데브코스 프론트엔드 18일차

잊지말자 마-애-테 ⭐

오늘은 꽤나 복잡시런 날. 노션 클로닝 프로젝트 + 과제 + 스터디발표 + 자동완성편집기만들기 가 모두 todolist에 있는 날! 우선, 스터디를 하고 - 과제 - 편집기 - 노션! 이렇게 처리를 할 예정인데 순서를 정하고 스케쥴을 관리하는것을 보니 마치 songsong job scheduler 같네요!!! 이걸 다 하고 html, css 보충, 알고리즘까지 하려면 오늘부터 잠자기는 글렀당 💦
스터디를 하다가 새롭게 알게된 주제 획득! 바로 콜스택 - 콜백함수 - 이벤트루프 관련된 주제의 발표를 듣던 중 마이크로 태스크큐, 애니메이션 프레임, 테스크 큐의 실행 순서에 관한 내용에 대해 새롭게 알게 되었다. 그리고 늘 가지고 있었던 의문 중 하나가 setTimeout({}, 0); 이라면 얘는 언제 실행되? 진짜 시간을 지키는것이 맞나? 였는데 그것 또한 말끔히 해결 🌈 점점 내 자바스크립트에게 살이 붙는 기분이다!

프로그래머스 데브코스 프론트엔드 19일차

자동완성 편집기! 🧚‍♀️

수요일부터 노션 클론 프로젝트가 시작되었다! 물론 바로바로 클론 플젝하고 ~ 과제도 하고 ~ 하면 좋지만 나에겐 아직 들어야할 강의가 남아있기에 다 이해하고 학습한 뒤에 프로젝트 설계를 시작할 예정이다. 오늘은 자동 완성 편집기 실습 강의를 완강하는 날이다. 오타로 인해 쵸콤은 의욕이 떨어졌지만, 평소에 vscode나 velog에서 어떻게 내가 쓰는 내용을 임시저장하고, 불러오는지에 대해 궁금했기 때문에 이에 대한 로직을 살짝이나마 알게 되어서 신기했다! 프론트엔드는 사용자가 중심이기 때문에 데이터베이스나 백엔드와의 통신을 소홀하게 생각했던 나를 반성하게 되었다. 결국 사용자의 데이터, 사용자의 요청을 백엔드에게 전달해야하는 임무는 프론트엔드에 있기 때문에 시간이 된다면 이와 관련된 공부를 더 해보고 싶다. 많은 걸 알게 되고 발전하는 기분은 늘 쵝오🖤

프로그래머스 데브코스 프론트엔드 20일차

오늘 기분 마치 하이 🥇

가장 좋아하는 요일은 금요일~~ 이유는 내일 주말이라는 설레임과 금요일 밤은 공부하는거 아니야~! 라고 정해놓은 10년 동안의 규칙으로 ㅋㅋㅋㅋ 합법적인 노는날이기 때문이다! 그리고 그리고 오늘은 바로 프로그래머스 브랜드키트 가 오는 날 + 정보처리기사 합격증 받는 날 + 금손 프롱이의 이름표 제작 까지 ! 기분이 안좋을 수가 없는 날 💗 과제도 완성 했고, 개발자는 취미도 개발이라는 말을 실현해볼 수 있는 기회가 생겼다. 새로운 도전 목표가 생겼고 너...무 바쁘지만! 열심히 해보고 싶다. 오늘도 수고했어 😋

프로그래머스 브랜드 키트

머쓱아 고마워 💪 앞으로 더 열심히 코딩할게 ~~~ 💪💪💪 너무 신나서 가족들에게 자랑했지만 비개발자는 이 갬성을 모르시다는거지... 그렇지... 코딩하는 사람은 무조건 필요한 선물 + 실용성 터져버리는 선물로 브랜트 키트는 그득그득 채워져있었다!
티셔츠 + 우산 + 마우스패드 + 웹캠커버 + 먼지닦이 + 뱃지 + 스티커 뭐 하나 버릴게 없당 🌻🌻 이미 마우스 패드와 스티커는 ㅋㅋㅋㅋㅋ착장 완료 했다~!

이름표

진짜... 프롱이 그대... 색감 덕후... 이런 분이야 말로 진성 FE 개발자 아닐까요...? 너무 센스가 넘치잖아ㅏㅏ... UI를 200% 고려하고 만족감까지 이끌어낸 이 이름표는 너무너무 감쟈합니당 🙏 요즘엔 같이 공부할 수 있는 사람들이 있다는 것에 대해 감사한 일이라고 생각하고 있다. 혼자해도 개발은 할 수 있지만, 같이 하면 같은 고충을 겪는 사람들이라 그런지, 든든하다! 더 도움이 되고 싶고 같이 으쌰으쌰 하는게 코시국엔 더욱이 소중한 것 같다.