전체 글

TLDR또 한 번 AWS를 활용하여 웹서버 배포하는 방법입니다. 이전에는 CloudFront를 활용하여 https 웹 서버를 배포하였지만, 여기에 중요한 이슈가 발생했습니다.Cloudflare의 속도 저하위 사진처럼 api response를 받는데 평균적으로 350ms정도 소요되었고, 이게 웹뷰 앱으로 구성된 저희 앱으로 가게 되면 비교적 네트워크 속도가 느린 모바일에서 로딩이 좀 더 길어지게 되었습니다. 유저가 이탈할 거라고 우려될 수준으로 치명적인 속도였고, 개선을 위해 코드/DB 등의 개선을 진행했으나, 저 속도저하의 본질은 Cloudflare라는 것을 뒤늦게 알게 되었습니다.Cloudflare는 CDN 서비스를 제공합니다. 전세계 각국에서 접근했을 때, 가장 가까운 edge server에서 캐시 ..

React에서 HTML 문자열을 렌더링해야 하는 경우가 있습니다. 이런 상황에서 dangerouslySetInnerHTML을 사용하게 되는데, 이는 보안과 성능 측면에서 여러 문제를 일으킬 수 있습니다. HTML 아무 제약 없이 그대로 출력된다는 건 XSS 공격의 위험이 있고, 사용자 입력값이 직접 DOM에 주입될 수 있어 위험합니다.또한 React의 Virtual DOM 을 우회하게 되어, 최적화되지 않고 불필요한 리렌더링을 통해 성능 저하의 원인이 될 수 있습니다 대안 : html-react-parse + DOMPurify npm install html-react-parser dompurify @types/dompurify dangerouslySetInnerHTML을 대신하기 위해 위 두 가지 라이브..

자바스크립트는 동적 언어로서 다른 언어와 달리 독특하게 동작하는 경우가 종종 있습니다. 실행 컨텍스트는 자바스크립트가 이런저런 특이하게 동작하는 개념인 "실행 컨텍스트" 에 대해 깁게 학습한 내용에 대해 공유하고자 합니다. Execution Context ( 실행 컨텍스트 )실행 컨텍스트는, 코드를 실행하는데 제공할 환경 정보들을 모아놓은 객체입니다. 이 객체에는 식별자들에 대한 정보, 외부 환경 정보, this와 같은 정보들이 저장됩니다. VariableEnvironment : 해당 컨텍스트가 최초 실행 될 때의 식별자들의 정보(environmentRecord), 외부 환경 정보 (outerEnvironmentReference)LexicalEnvironment : 최초에 VariableEnvrionme..

📚 TLDR서비스를 개발하다 보면, 새로운 기능을 만드는 만큼이나, 기존의 코드를 다시 보고 다른 사람이 짠 코드를 살펴보는 시간이 많아졌습니다. 가벼운 해커톤이나, 동아리 프로젝트처럼 기간을 정해두고 하는 프로젝트성 개발과 달리 완성을 시키고 계속 유지보수 해나가야 하는 개발을 하다 보니 '아.. 리팩토링 해야 하는데..'라는 생각이 절로 들게 됩니다. 이제 와서 생각해 보면, '컨벤션을 좀 더 꼼꼼히 할걸', '코드리뷰 할 때, 이런이런 부분에 대해서는 의견을 나눠볼걸'과 같은 생각이 들긴 하지만, 그것도 1년 정도 한 프로젝트만 개발하고 코드를 보고 또 보면서 서비스를 발전시키다 보니 느껴지는 부분이지 그때의 제가 생각조차 못할 부분이지 않나 싶기도 합니다. 여러 후회와 그 후회를 바탕으로 발전시..

문제프로그래머스 코딩테스트 연습 : 공원 산책 자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: -시간 복잡도: O(n)소요 시간: 40분 코드function move(park, position, route) { let isMoved = true; const initializePosition = [position[0], position[1]]; const [direction, count] = route.split(" "); for(var i = 0; i = park.length || park[current_y + 1].split("")[current_x] === 'X' ) { isMoved = fals..

후기프론트엔드 주니어 개발자로서 클라우드 서비스에 대한 기초를 쌓을 수 있었습니다. 복잡해 보이는 AWS 개념을 쉽고 친절하게 설명하며, 실습 중심의 구성으로 따라 하며 배울 수 있어 유익했습니다. 특히 EC2, S3 같은 주요 서비스 활용법을 이해하고 간단한 애플리케이션을 배포하는 데 실질적인 도움을 받을 수 있었습니다. EC2와 S3 같은 필수 서비스의 설정과 활용 방법을 단계별로 안내해 실제로 따라 하며 익힐 수 있는 점이 큰 장점이었습니다. 특히 실습 위주의 구성은 이론과 실무를 자연스럽게 연결시켜주어 AWS의 구조와 작동 원리를 이해하는 데 큰 도움이 되었으며, 책의 전반적인 흐름이 명확하고, 실습을 통해 결과물을 눈으로 확인할 수 있어 이해하기 쉬었습니다. 클라우드와 AWS가 낯선 프론트엔드 ..

TLDR이번에는 Tab Navigation을 서비스를 개발하며 개선한 부분에 대해서 얘기해보려고 합니다. 그저 "탭의 상태" 에 따른 표시되는 UI가 변경되는 정도의 컴포넌트로 인식하고 있었지만, 사용자측면을 고려하고 베타테스트를 진행하면서 저 "상태"를 자연스럽게 관리하는 것에 대해 고민하고 개선한 내용과 그 로직에 대해 공유하려고 합니다. 초기 로직 : UI와 그 기능에 집중처음 개발한 Tab Navigation은 UI와 Highligt Animation 등에 더 신경을 많이 썼습니다. 다른 페이지에서도 활용 될 수 있게끔, 탭의 갯수와 상관없이 UI를 적용할 수 있게끔 고민했고, 탭의 상태는 크게 신경쓰지 않았습니다.컴포넌트의 Props를 통해 tab의 정보를 배열로 받았으며, tab navigat..

TLDR웹뷰형태의 앱을 서비스하게 되니, React에서 앱으로 데이터를 주고받을 수 없을까? 하는 생각이 들었습니다. 저희 서비스에서는 웹뷰로 표시될 앱을 외주를 맡기고 앱동작이 아닌 거의 모든 UI와 상태들이 웹에서 관리되고 있었기 때문에, 데이터를 전달해서 기능과 UI를 다르게 서비스하는 기능이 필요했습니다.이번 포스팅에서는 저희 서비스에서 웹과 앱간에 데이터를 주고받기 위해 사용한 두 가지 방식에 대해 소개해드리려고 합니다. URL params웹뷰로 연결된 앱에서는, URL 을 통해 앱에 웹을 표시합니다. URL 뒤에 약속된 params에 데이터를 남긴다면 데이터를 전달하거나 그에 맞춰서 UI를 변경할 수 있습니다.저희 서비스에서 앱에서 사용자의 몇몇 액션에 따라 페이지에 팝업이 떠야 하는 경우가 ..

문제프로그래머스 코딩테스트 연습 : [PCCP 기출문제] 1번 / 동영상 재생기도움말 자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: -시간 복잡도: O(n)소요 시간: 45분 코드function toFixedTime(minutes, seconds) { if(minutes.toString().length Number(op_start.split(":")[0]) && minutes = Number(op_start.split(":")[1]) ) { if( minutes Number(op_start.split(":")[0]) ) { return true; } else if( minutes === Number(op_start.split(":")[0]..

TLDR이번 포스팅에서는 Sub Domain을 연결하는 방법에 대해 작성합니다. 이전 게시글 중 [React + Vite + Nginx + Docker + AWS] 를 활용하여 배포 해봅시다! 을 통해 AWS EC2에 react 빌드 파일을 nginx와 docker를 설정해놓은 상태에서, Route53/ Cloudflare을 활용하여 https 연결과 배포를 진행한 상태입니다.도메인 연결 및 배포 설정과 관련된 Route53 및 Cloudflare를 활용했던 방법에 관한 정보는 추후에, 포스팅하여 연결될 수 있게 수정될 예정입니다. 아직 Cloudflare가 free 버전이고 어디까지 활용될 것 인지, 지식도 부족하다고 생각하여 https를 어떻게 배포할 것이고 장단점에 관련된 내용까지 담아 소개해 드리..

개요웹 프론트엔드 개발자 설탕시럽입니다. 이번에는 URL Encoding에 대해 알아보려고 합니다. TLDRReact를 통해 개발하다 보면, 전역 상태를 통해 데이터를 전달하기도, Component의 Props를 통하는 방법 등등 여러 방법으로 데이터를 전달하지만, URL의 params를 통해 데이터를 전달하곤 합니다. 이번 프로젝트 개발에서도 특정 데이터에 대한 "메모"와 "메모 수정 페이지"로 이동하기 위해 메모 데이터를 URL params를 통해 넘기고자 시도했습니다.api를 통해 받아온 responseData에서 바로 URL로 데이터를 전달하기 위해 아래와 같은 코드를 작성했습니다.navigate(`/place/${id}/edit?memo=${responseData.memo)}`); 결과는,, 원..

책 선정 이유QA( 품질 보증 ) 을 위해 서비스의 출시 이전 단계에서 테스트를 한다는 그 개념만 알고 있지만, 그 상세한 내용과 원리에 대해서는 이해도가  없었습니다. 창업팀에서 우리의 첫번째 서비스를 출시하기 위해 2주간 QA기간을 진행할때도, 기능에 대한 테스트만 진행할 뿐 이이상 무엇을 덜해야하는지? 어떤 부분이 잘못되었는지 아예 몰랐습니다.이 책을 통해 테스트와 QA에 대한 기본 개념을 쌓기 좋다고 생각해서 읽게 되었습니다 후기QA, 품질보증을 위해 소프트웨어 테스트의 기본과 실무에 대해 소개하는 가이드같은 책입니다. 테스트의 정의와 기초 개념부터 시작해 API 테스트, 자동화 테스트 등 다양한 테스트 방법론을 체계적으로 설명해 주고, 테스트와 QA에 대해 기본 개념과 원리에 대한 지식을 습득할..