🌳Frontend/etc

📄 참고자료 Toss 환경 고민없이 개발하기 📌 SSR Server Side Rendering 은 렌더링 일부를 서버에게 위임하는 방식 서버에서 HTML 을 생성하고 브라우저에게 보여준다 렌더링과정에 서버가 개입되면서 생소한 에러들을 경험할 수 있다. 그 중 하나를 소개해볼까 한다. 🤬 Server Error XXX is not defined. function App() { // 쿼리 파라미터로 전달받은 유저의 이름을 얻어온다. const name = new URL(location.href).searchParams.get(name); // 유저의 이름을 화면에 출력한다. return {name} } 쿼리파라미터로 전달받은 유저의 이름을 화면에 출력하는 코드이다. 코드를 살펴보면 문제없이 동작할 것 같지만..

📄 참고자료 Effective Component 지속 가능한 성장과 컴포넌트 🎇 변화 우리는 제품을 개발하면서 수많은 변경을 마주한다. 사용자는 우리가 만든 제품을 어려움 없이 잘 사용해야 한다. 디자인, API, 제품의 방향 언제든 바뀔 수 있다. 좋은 제품을 만들기 위해서는 변화는 필수다. 우리가 만드는 제품은 변화를 겪으면서 올바른 방향으로 성장한다. 우리는 따지고보면, 제품을 성장시키고 있는 것이다. 제품의 변화란, 놓치고 있었던 고객의 니즈를 발견하는 것과 같다. 무엇이 변경될지 알았으면 정말 좋았을 것이다. 변경은 예측하지 못한다. 우리는 예측하려 하지 말고, 대응하자. 변경에 유연한 컴포넌트 만들기 우리는 컴포넌트를 잘 만들어서 변경에 유연하게 대응할 수 있도록 해야 한다. 변경에 유연한 컴..

📄 참고자료 토스 실무에서 바로 쓰는 Frontend Clean Code https://www.youtube.com/watch?v=edWbHp_k_9Y 💬 들어가기전 주저리 기술블로그와 여러 기술 아티클을 탐방할 때, 클린코드(clean code) 란 용어를 자주 본다. 👈 요런, 클린코드 서적을 추천하는 게시글이나 주변 개발자도 봤었다. 그래서 "클린코드" 가 무엇이냐~ 라고 물어본다면, 중복되는 코드 줄이는 방법 가독성이 쉬운 코드를 작성하는 방법 유지보수가 쉬운 코드를 작성하는 방법 이라 할 수 있다. 중복,가독성,유지보수.. 멋진 용어다. 이건 클린코드에 대해 검색하면 나오는 정말 군더더기 없는 설명이다. 사실, 개인적으로, 내가 느끼는 클린코드에 대한 정의는, 개발자의 원활한 소통과 업무를 위한..

https://www.youtube.com/watch?v=G1IWq2blu8c 프런트엔드 성능 최적화 최적화는 크게 로딩최적화와 렌더링최적화 로 나눌 수 있다. 브라우저 기준 로딩 최적화 processing: 웹 페이지 파일을 파싱하는 과정 document.readystatechange , document.DOMContentLoaded 이벤트 발생 dom 트리를 만들고 화면에 그리기 전에 JS를 주입함 load: css, 이미지, 동영상 등 필요한 리소스를 다운받는다. windlow.load 이벤트 발생. 브라우저기준에서 최적화라하면, 두 이벤트를 시점을 앞당기고 빨리 하는 것에 목표가 있다. 브라우저 동작원리 1. HTML 2.HTML 파싱해서 DOM Tree 3. CSSOM Tree 4. Render..