분류 전체보기98 웹 성능 최적화 필요성 이해하기 웹 성능 최적화 경험이 있으신가요?참 답변하기 어렵게 느껴지는 것 같아요. 내가 한 게 웹 성능 최적화라고 말해도 되는 부분인가? 확신이 서지 않아 뭔가 항상 더 배워야 할 것 같은 기분이 드는 것 같습니다. 사실 제가 그런 기분입니다.그래서 웹 성능 최적화에 대해 제가 학습했던 내용들을 훗날의 저를 위해 또 이 글을 볼 누군가를 위해 다시 정리해서 남겨보려고 합니다. 우선 최적화란 무엇일까요?위키백과에서 보면 시스템을 수정해 어떤 면의 작업이 더 효과적으로, 또는 자원을 덜 사용하게 만드는 작업을 말합니다. 캐시, 메모이제이션 등을 통한 방법도 있겠고, 자원 자체를 덜 사용할 수 있는 방법이 있겠죠. 왜 최적화 작업이 왜 필요할까요?인내심의 한계의 시간은 '3초'라고 합니다. 구글 리서치 자료에 따르면.. 2024. 11. 7. React Hook Rule에 대해 이해하기 react-hooks/rules-of-hooks error를 마주해 보신 적 있으신가요? const [a, setA] = useState('a'); if (a === 'a') { const [b, setB] = useState('b'); // eslint error }위와 같이 코드를 선언하면 아래와 같은 error를 마주하게 됩니다.React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. eslint react-hooks/rules-of-hooksReact Hooks는 모든 컴포넌트 렌더링마다 정확하게 같은 순서로 호출되어야 한.. 2024. 10. 30. React에서 컴포넌트를 분리한다는 관점에 대해 다시 생각해보기 이 글의 시작은 지뢰 찾기 게임을 만들었는데, 그 코드 중 cells 데이터로 map을 돌리고, row로 다시 map을 돌려 버튼을 만드는 코드를 컴포넌트로 분리하면 성능이 향상된다는 말에 의문을 품은 게 시작이었습니다.{cells.map((row, rowIndex) => row.map((cell, colIndex) => ( )),)}컴포넌트 분리에 대한 대화를 나누면서도 확실하게 해소되지 않는 부분이 생겼기 때문입니다.컴포넌트 분리에 대해 다시금 이해하고, 저만의 원칙을 정한 뒤 작업이 필요할 것 같다는 판단이 들었습니다. React에서 컴포넌트를 분리하는 목적은 뭘까요? 왜 분리해야할까요? 잘 알고 있듯 코드의 재사용성, 가독성, 유지보수성을 높이고, UI 구조를 명확하게 하기 위함이라고.. 2024. 10. 21. 원씽, 복잡한 세상을 이기는 단순함의 힘 세상에 정답인 길은 없다지만, 길에서 벗어난 듯한 요즘의 기분에 불안함을 많이 느끼는 요즘입니다. 혼란한 이 마음에 해야할 일은 너무나 많게 느껴져 버겁고 더 벅차기만 했습니다. 그런 제가 읽었으면 좋겠다며, 이 책을 추천받아 저번 주말동안 책을 읽었습니다.일상의 TodoList를 만들어 진행하던 저에게 다시금 중요한 것을 일깨워준 책입니다.중요하지 않은 TodoList로 작은 성취를 만들어 나가는 만족감을 채울 것이 아닌 중요한 단 한가지에 힘을 쏟아야 함을 생각하게 되었습니다.현재는 단기적인 목표를 가지고 있지만 매일, 매순간 중요한 단 한가지를 고민하며 무엇이든 임해야겠다는 마음 가짐을 가지게 되었습니다.기존에 사용하던 TodoList도 One Thing 항목을 만들어 그 날 꼭 해야할 한가지를 선.. 2024. 10. 15. Session 기반 인증 vs JWT 우선 위 방식을 알아보기 전에, 인증과 인가에 대한 정의를 짚고 넘어가 봅시다. 인증과 인가인증(Authentication)은 로그인이고, 인가(=권한 부여, Authorization)는 로그인한 유저의 권한 검증(관리자 페이지 접근)입니다.즉, 인증은 자신이 누구인지 증명하는 것을 의미하고, 인가(권한 부여)는 인증된 주체에게 특정 작업을 수행할 수 있는 권한을 확인하는 것을 의미합니다.참고로 HTTP 상태코드에서 401(Unauthorized)은 인증과 관련된, 403(Forbidden)은 인가와 관련된 오류 상태 코드입니다.이제 인증과 인가를 알았으니 어떻게 구현할 수 있을까요?로그인을 분명히 했는데도 불구하고 페이지 이동에 따라 로그인이 풀려 계속 다시 로그인을 해야 한다면 사용자 입장으로서 엄청.. 2024. 10. 8. Suspense 이해하기 react 공식문서를 보고 정리한 글입니다.Suspense란?자식 요소가 로드되기 전까지 화면에 대체 UI를 보여주는 것}> children: 궁극적으로 렌더링 하려는 실제 UI (위 코드에서는 SomeComponent)fallback: 실제 UI가 로드되기 전까지 대신 렌더링 되는 대체 UIReact node 형식은 무엇이든 대체 UI로 활용가능하나, 보통 로딩 스피너나 스켈레톤처럼 간단한 placeholder를 활용한다. Suspense는 children의 렌더링이 지연되면 자동으로 fallback으로 전환하고, 데이터가 준비되면 children으로 다시 전환한다.fallback의 렌더링이 지연되면, 가장 가까운 부모 Suspense가 활성화된다.React가 특정 컴포넌트를 마운트하기 전에, 비.. 2024. 10. 8. 이전 1 2 3 4 5 ··· 17 다음
