전체 글 썸네일형 리스트형 [React] For react States that represent only Valid State (w. Reducer) 내리 추가하는 상태에 따라 지수적으로 복잡도가 증가하고 코드의 유지보수가 힘들어지는 경우를 한 번씩은 경험해보았을 것이다. 그런 경험을 반복하지 않기 위해, 정말 간단하지만 중요한 이야기를 해보고자 한다. 혹은 Reducer에 익숙하지 않은 분들도 보면 도움이 될 것이다. 💠 Type 관점에서의 "유효한 상태 표현" 타입을 설계할 때는 어떤 값들을 포함하고, 어떤 값들을 제외할지 신중하게 생각해야 한다. “유효한 상태”만을 표현하지 않고 “무효한 상태”를 함께 표현하는 타입은, 혼란을 초래하고 타입 체크 오류를 유발하게 된다. 알맞는 글을 불러와 나타내는 웹 페이지를 구현한다고 가정하고, 대표적인 다음 예시를 살펴보자. 페이지는 내용을 로드하고, 그 이후에 화면에 표시한다. 상태는 다음과 같이 설계한다... 더보기 [Network] What is CORS [ 2023/03 ] 2022/06에 작성한 내용을 보충하여 재발행합니다. ✈ CORS 아마추어 개발자들끼리 프로젝트를 진행하면 늘 한 번씩 CORS Error 를 보곤한다 원활한 문제 해결을 위해 이에 대한 개념을 더 살펴보기로 하자. SOP (Same-Origin Policy) 웹에서 돌아가는 어플리케이션은 사용자의 공격에 너어어어무 취약하다. 당장 DOM이 어떻게 되어있는지, 어떤 서버와 통신하는지, 리소스의 origin까지 다 알 수가 있다. 이에 대한 제한이 필요하였다. SOP는 "같은 출처에서만 리소스를 공유할 수 있다"라는 규칙을 가진 정책이다. 즉, 다른 출처의 리소스를 사용하는 것에 제한하는 보안 방식이다. (http ~ https 가 다르다거나 등등..) 그러나 웹상에서 다른 출처에 있.. 더보기 [회고] 2개월 현장실습으로 난 어떤 성장을 하였나 1, 2월 두 달간의 현장실습을 끝냈다. 15명 내외의 직원이 있는 작은 기업이었지만, 많은 것을 경험하고 배우고 싶다는 욕심이 있었다. 생각보다 많은 업무를 다루지는 못하였다. 직원분을 도와 QA 업무를 작업하는 것이 주였기 때문에, 기술적으로 큰 성장을 이루지는 못했다. 그러나 돌아보면 모두 내가 성장하는 과정이기에, 경험을 정리해보고자 한다. 방식은 KPT 를 차용하여 진행하였다. (참고한 글) Keep : 잘하고 있는 점. 계속 했으면 좋겠다 싶은 점. Problem : 뭔가 문제가 있다 싶은 점. 변화가 필요한 점. Try : 잘하고 있는 것을 더 잘하기 위해서, 문제가 있는 점을 해결하기 위해서 우리가 시도해 볼 것들 🧩 회사 업무 업무 툴. Jira, Google Confluence Keep.. 더보기 [JavaScript] How to implement Image Compression 목차 1️⃣ 트러블 슈팅 2️⃣ 어떻게 할 수 있는데? 3️⃣ 이미지? 압축? 4️⃣ JavaScript로 이미지 압축하기 5️⃣ 결론 1️⃣ 트러블 슈팅 현장실습 근무를 하며 이미지 에셋의 크기를 줄여 로드 시간을 줄이고자 하였다. 이후에 🔗 피클을 보니, 이미지가 뚝뚝 끊겨 페인팅 되는 이슈가 눈에 띄더라.. 웹페이지에서 대부분의 용량을 차지하는 건 이미지이다. 이미지를 최적화 한다면, 불필요한 대역폭을 줄일 수 있고 이를 통해 업로드 작업도 빨라지기 때문에 파일을 로드하여 화면을 빠르게 그리는 것 뿐만 아니라 통신 속도 역시 향상된다. SEO 향상까지! (사실 Nextjs를 사용하면 🔗 next/image를 활용하면 대부분 해결되지만, 호기심이 생겨버렸다) 절대적인 폭을 조절한다 포맷을 변경한다 i.. 더보기 [리팩토링][북스테어즈] 9개월 묵은 코드 뜯어내기 (2) Recoil https://snupi.tistory.com/213 [리팩토링][북스테어즈] 9개월 묵은 코드 뜯어내기 (1) 데이터 구조 변경 서론 나의 첫 협업 프로젝트인 북스테어즈는 지난 9개월 가까이 개발 진척이 잘 안되었다. 4 Depth 까지의 꼬리 질문/답변 기능이 주범이다. 절대적인 리소스 투입도 적었고, 클라이언트 팀에서의 snupi.tistory.com (위 링크의 글을 보시면, 흐름 이해가 쉽습니다) 하나의 atom 상태를 가지고 컴포넌트마다의 커스텀 훅을 불러오려니, 중복적인 서버 통신이 일어난다. Recoil 로써 캐싱을 할 방법은 없을지 알아보자. Recoil Selector + Loadable 1. 효율적인 서버 통신 각 reviewId 에 맞는 책 정보 데이터를 비동기로 불러와 관리하고, .. 더보기 이전 1 2 3 4 5 6 ··· 38 다음