그냥 블로그

Next.js를 사용하다보니 Hydrate 용어를 많이 접하게 되었고, Next.js의 주요 동작 과정 중 하나라는 말에 한 번 정리해보기로 했습니다. ++ React와 비교도 한 번 찾아보고, 추가로 찾아볼 내용도 찾아보기. HydrationServer Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS 코드를 서로 매칭 시키는 과정   React (CSR) 리액트는 CSR 방식을 사용하고 있기 때문에, 처음 브라우저가 빈 HTML 파일을 받아 화면에는 아무것도 나타나지 않다가, 사용자 기기에서 렌더링이 완료되면 한 번에 화면을 보여준다.  CSR  * React index.html 파일을 보면, html에 아무것도 ..

1. 하위 branch 생성develop/feature 생성 시git branch [생성할 branch] [상위 branch]-> 이게 좀 헷갈렸던게, devlop 에서 feature를 만들면, develop/feature 이런식으로 이름이 지어지는 줄 알았는데 그게 아니었다..나도 이런식으로 되는 줄 알았는데 이건 걍 이름만 fature/하위 이름으로 한 거였음. + feature 브랜치를 생성하면, feature/하위 이런식의 브랜치는 만들 수 없다.  2. 생성한 branch 원격 저장소로 올리기git push origin [생성한 branch 이름] 아래 명령어를 통해 확인 가능 git branch -a // 모든 branch (로컬 + 원격 저장소)git branch -r // 원격 저장소에 있..

아래 포스팅 기반으로 정리된 글입니다..! 이 글은 개인 정리이니 아래 글을 참고해주세요 프론트엔드 아키텍처: 컴포넌트를 분리하는 기준과 방법 컴포넌트를 언제 분리해야 하고 어떻게 분리해야 하는지 살펴봅니다. medium.com FrontEnd는 그저 화면싸개...? 처음엔 화면만 예쁘게 만들면 되지 않을까? 하고 생각했었는데 오히려 프론트 엔드는 공부할 수록 어려워지는 것 같다. 물론 백도 그렇겠지..? 일단 새로운 라이브러리가 너무 많이 나오고 생각보다 회의로 정해야하는 것이 너무 많다는 것... 또, 재사용성 유지 보수성 확장성.... 이런걸 고려하라고 하는데 정확한 기준은 없고 이렇게하면 좋더라~ 저렇게하면 좋더라~ 근데 아닐 수도 있으니 잘 사용해야한다~ 하는 이야기들이 넘 많음. 그동안 이런 ..

프로젝트를 할 당시 한 팀원이 Vite란 build 도구를 가져왔다. 이게 뭔지 몰라서, 왜 쓰는 거냐고 물어봤었는데 배포할 때 빨라진다고 들었었다. 그땐 개발이 너무 힘들어서 그렇구나 하고 넘어갔는데, 내 프로젝트에 활용되었으니 어떤건지 정확히 알아봐야 할 거 같아서 정리를 해보고자 한다. 그리고 최근, 프론트 엔드 프레임워크에서 자주 언급되는 것 같은데 어떤건지 더 궁금해지기도 했음!! 빠르고 간결한 모던 웹 프레젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구 Vite의 컨셉 개발 시 Native ES Module을 넘어 더욱 다양한 기능을 제공한다. ex) Hot Module Replacement (HRM) 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 제공한다. 높은 수준으로 최적화된 정적..

---껍데기---- 참고 자료 정리 용으로 잠깐. 리액트TDD - Jest와 테스팅 라이브러리 인프런 강의 따라하며 배우는 리액트 테스트를 보며 요약 및 실습한 내용.리액트 컴포넌트를 테스트하는 가장 기본적인 방법은 react-dom/test-utils의 유틸함수들을 사용하는 것이다. 그리고 보다 velog.io 실전에서 TDD하기 | 카카오페이 기술 블로그 TDD가 무엇인지 모르는 사람은 없습니다. 그런데 왜 하는 사람은 얼마 없을까요? tech.kakaopay.com Test-Driven Development Tutorial – How to Test Your JavaScript and ReactJS Applications Understanding test-driven development is an ..

이론은 알겠는데 어떻게 쓰는지도 알아보겟습니다. Jest 참고로 직접 실행은 해보지 못하고 정보 전달만 하는 겁니다..! 직접 사용은 기회가 된다면 다음 글에서..!! Front End의 TDD - React.js테스트 실행 도구 없이도 TDD를 진행할 수야 있지만... Test-Driven Development Tutorial – How to Test Your JavaScript and ReactJS ApplicationsUnderstanding test-driven development is an essential part of being a prolific software developer. Testing provides a solid platform for building reliable prog..