전체 글16 webpack 설정을 통한 성능 최적화 (feat. CRA와 비교) 지난번 웹사이트를 만들면서 CRA 대신 webpack을 직접 설정하여 구축하였다. 그렇게 했던 이유는 1. CRA는 다음과 같은 단점이 있다는 것을 익히 들었기 때문이다.설정이 추상화되어 있어 세밀한 조정이 어려움.실제로 사용하지 않는 설정이나 라이브러리 때문에 번들이 무거움추가적인 커스터마이징을 하려면 eject 명령어로 CRA 설정을 해제해야 하며, 이는 복잡하고 관리가 어려워질 수 있음2. webpack 직접 설정시 필요한 플로그인만 설정이 가능하여 프로젝트에 맞춘 번들 최적화가 가능하다고 해서,3. 직접 해보며 공부해보고 싶어서. 그런데 프로젝트를 거의 완성을 앞두고나니 궁금해졌다.정말로 직접 webpack 설정한 프로젝트가 CRA로 만든 프로젝트보다 번들사이즈가 작을까?그래서 확인해봤다. 1.. 2024. 9. 5. Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition. react18 프로젝트에서 navigate 기능 구현 중에 다음과 같은 에러를 마주했다.Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.'컴포넌트가 동기 입력에 응답하는 동안 suspend 되었고, 이로 인해 UI가 로딩 인디케이터로 교체되었습니다.이 문제를 해결하려면 일지 정지된 업데이트를 startTransition으로 wrapping 해야합니다. 발생 원인코드분할을 통해 초기 렌더링 지연시간을 .. 2024. 6. 25. 웹서비스 기획부터 배포까지 (2) - 기획과 와이어프레임 들어가며💭아무리 간단한 웹사이트라고 한들,타겟 사용자와 요구사항을 파악하는 것은 서비스의 방향성은 물론 이후 개발 단계까지 동일한 목표를 향해 나아갈 수 있게 해준다.1인 프로젝트를 해도 마찬가지이다. 예전에 뾰족한 목표만 가지고선 구체적인 계획없이 머리속에 그려가며 혼자 개발을 한 적이 있었는데그렇게 했더니 개발을 하면서도 계속 고민을 거듭하며 ui/ux가 바뀌고 기능이 추가되고 그랬더란다.좋게 말하면 더 좋은 프로덕트를 만들기 위해서 빠른 수정과 실행력이 있었다고 볼 수 있지만냉정하게 말하면 목적지 없는 항해를 시작하는 것과 같았다. 그때의 경험으로 프로젝트의 빠른 달성을 위해서는 초석을 잘 다지는 것이 중요하다고 느꼈고, 이번에 간단한 초기 기획과 와이어프레임으로 프로젝트 목표를 빠르게 달성하고자.. 2024. 6. 19. 웹서비스 기획부터 배포까지 (1) - SEO를 위한 메타태그 이해하기 구현중인 웹서비스는 '검색엔진 노출 -> 사용자 유입 -> 카카오톡 채팅 상담' 으로 이루어져야 하는 광고성 웹페이지다.검색엔진 최적화가 정말 중요한 웹서비스라 볼 수 있다. (안중요한 서비스가 있을까?🤔) 근데 사실 지금까지 프로젝트를 진행하면서 SEO를 진지하게 고민하면서 해본 적이 없다...!(Semantic Tag를 사용하려고 노력한 정도? 뿐이다)하여 이번 기회에 SEO에 대해 다시 한번 이해하고 설계해보고자 한다.SEO란?SEO는 ‘Search Engine Optimization’의 약자로 Search Engine, 즉 구글과 같은 검색엔진에 친화적인 사이트를 구축하여 광고가 아닌 자연 검색 결과를 통해 트래픽의 양과 질을 극대화하는 작업을 의미한다. 트래픽과 사용자 유입이 많으면 당연히 .. 2024. 6. 19. 웹서비스 기획부터 배포까지 (0). 시작에 앞서 계획과 순서 정리하기 첫 웹개발 외주를 받다(!?)지인의 부탁으로 정적 웹사이트를 4개 제작하게 되었다.1인 프로젝트는 처음이라 기대도 되고 설레기도 한다! 잠깐..그러면 서버없이 배포는 어떻게 하지? 뭐 어떡해 이제 알아보면 되지😂] ( + AWS S3로 해결할 수 있을 것 같다!) 어떤 사이트를 개발하게 됐나요내가 만들어야 하는 웹사이트는 사용자들에게 휴대폰 셀프개통 방법을 안내하고 홍보하는 사이트이다.궁극적으로는 카카오톡 채팅 상담으로 연결을 유도하는 광고성 웹사이트다. 무엇을 중점으로 두고 개발해야 할지 생각해봤다지인이 따로 요구하는 디자인은 없고, 1페이지로 충분하다고 얘기해준 상태다.내맘대로 만들어도 된다는 뜻이다! 하하그래도 개발의 방향성을 정립하는 것이 필요하다고 생각해서 가장 중점으로 둬야할 3가지를 정해봤.. 2024. 6. 18. [JS] 자바스크립트 - 상황에 따라 달라지는 this 이 글은 ' 코어 자바스크립트' 책에서 this를 공부하고 정리하는 목적으로 남깁니다. 다른 대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미합니다. 클래스에서만 사용할 수 있기 때문에 혼란의 여지가 거의 없습니다. 그러나 자바스크립트에서의 this는 어디서든 사용할 수 있습니다. 상황에 따라 this가 바라보는 대상이 달라지는데 이번 포스트에서는 상황별로 this가 어떻게 달라지는지, 왜 그렇게 되는지 등을 알아보겠습니다. 1. 상황에 따라 달라지는 this 자바스크립트에서 this는 실행 컨텍스트가 생성될 때 함께 결정됩니다. 실행컨텍스트는 함수를 호출할 때 생성되므로, this는 함수를 호출할 때 결정된다고 할 수 있습니다. 각 상황별로 this가 어떤 값을 보게 되는지 살.. 2024. 2. 5. 이전 1 2 3 다음
