코딩일상

개요next.js 를 통해서 개인 프로젝트를 진행하던중Hydration mismatch 라는 이슈를 마주하게 되었다. 하이드레이션이란? 하이드레이션 비유를 🧊 얼음 큐브(서버의 HTML) → 💧 물(상호작용 가능한 웹페이지)서버에서 보내준 HTML은 '얼음 큐브’이다모양은 갖추어져 있지만, 딱딱하고 변화가 없다. 이 얼음 큐브가 브라우저에서 '물'이 되어야 사용자와 상호작용할 수 있다.이렇게 얼음을 물로 만드는 과정이 바로 '하이드레이션'왜  하이드레이션이 필요??1. 빠른 초기 로딩 - 서버가 미리 HTML을 만들어서 보내줌 - 사용자가 빨리 콘텐츠를 볼 수 있음2. 검색 엔진 최적화(SEO) - 검색 엔진이 콘텐츠를 잘 읽을 수 있음 - 더 나은 검색 결과 노출3. 사용자 경험 - 초기 화면이 ..

리액트를 공부하는이유 내가 백엔드 포지션을 선택하면서 java와 node를 고민중에 node를 선택한 이유중 하나가 프론트를 좀더 쉽게 접근을 할 수있었기 때문이다. 이제 항해라는 프로그램도 끝난만큼 그 이유를 실천해보고자 리액트를 개인적으로 공부를 진행하고있다. 처음에는 역시 이것들이 뭐지 html과 css도 오랜만에 다시 보니 어색한 친구같았지만 그래도 한번 봤던 친구들이라고 그렇게 까지 어색하지는 않았다. 얼마 안 한 공부지만 느낀 점 프론트와 협업을 하면서 항상 useState, useEffect등의 용어를 많이들었는데, 이제서야 아 이런 말들이구나 이해를 하며 적용을 하고있다. 근데 아직까진 역시 어쩔수 없듯이 머리속으로 이해하는듯 했으나 실제로 써먹으려고하니 머리가 잘굴러가지 않았다. (아직 ..

오늘 내가 백엔드로써 node.js를 선택한 이유중 하나가 프론트또한 해보고 싶었기 때문이다. 프론트에서 React는 현업 대부분에서 사용하는 만큼 React가 뭐가 좋길래 다들 사용하나 싶어서 한번 공부를 해보았다. 다수가 사용하는데는 그만한 이유들이 있다고 생각하기 때문이다. 일단 가장 특이했던점은 내가아는 html과 js의 관계는 html의 요소와 내용을 우선 만들어 뼈대를 잡아 두고 그 뼈대를 유동적으로 움직일수있게 만들어주는게 JS의 역할로써 배웠는데 React는 이를 반대로 해주게 만들어주는 엔진인것이다. 즉 JS만으로 HTML을 다루겠다는것이다. 과연이게 얼마나 도움이 될지 모르겠지만 일단 조금은 흥미롭다. 여튼 조금씩조금씩 React도 하면서 나만의 전체 웹서비스를 만들어 내가 생각하는 문..