본문 바로가기

전체 글

[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 에 맞는 책 정보 데이터를 비동기로 불러와 관리하고, .. 더보기
[리팩토링][북스테어즈] 9개월 묵은 코드 뜯어내기 (1) 데이터 구조 변경 서론 나의 첫 협업 프로젝트인 북스테어즈는 지난 9개월 가까이 개발 진척이 잘 안되었다. 4 Depth 까지의 꼬리 질문/답변 기능이 주범이다. 절대적인 리소스 투입도 적었고, 클라이언트 팀에서의 버그를 잡지 못해 지난 달에는 API 구조 변경까지 논의되었다. 애정하는 프로젝트로 사용자들을 만나고 싶다는 동일한 목표로 우리 팀은 지속해서 코드를 살펴보았고, 최근 들어 버그를 Fix 할 수 있었다. 이 Fix 작업으로 인해 코드를 리팩토링하며 서비스를 다시 만들어나가는 계기를 마련했다. 그 과정을 다시 복기하고 정리하고자 한다. 작업에 불을 붙인 에러 해결 신뢰 가능한 단일 출처를 지키지 못한 제어 컴포넌트와 비제어 컴포넌트의 결합 위 영상과 같은 꼬리 질문/답변을 React에서 권장하는 제어 컴포넌트만을.. 더보기