열정보단 시스템

여태 웹 애플리케이션 개발에서는 다양한 렌더링 기법을 사용하여 성능을 최적화하고 사용자 경험을 향상시키는 데 집중되고 있습니다. 오늘 게시글에서는 이러한 렌더링 기법들인 SSR(Server Side Rendering), SSG(Static Site Generation/쓱 아닙니다), CSR(Client Side Rendering)에 대해 이해해보고, 각 기법의 장단점과 간단한 예제를 살펴보려고 합니다. 먼저 전통적인 웹 동작 방식부터 살펴보겠습니다. 전통적인 웹 애플리케이션은 MPA(Multi-Page Application)방식으로 동작했습니다. 사용자가 탭이나 링크를 클릭할 때마다 서버로부터 새로운 HTML을 받아와서 페이지 전체를 렌더링하며, 한 페이지에서 다른 페이지로 이동할 때 전체 콘텐츠를 로드..

이번 글에서는 지난 번 데이터 백업에 이어 데이터 복원과 폐기는 어떻게 구현되는지에 대해 정리하려고 한다. 데이터 백업, 복원, 폐기에 대한건 사용자 측면에서 민감하게 취급되기 때문에 NIPA 인증 취득을 위해서 제출되는 여러 서류에서 세부적으로 다뤄진다. 하단에 첨부한 신뢰성 항목에 기재된 SLA(Service Level Agreement) 문서가 그 중 하나인데 데이터 보관과 폐기에 대한 정책은 3개월을 기준으로 설정했다. 서비스 회복 시간은 10분 미만으로 설정하였고, 이는 파드가 다시 Running 상태로 돌아오고 백업 압축 데이터를 복원시키는데까지 충분한 시간이다. 백업준수율은 백업되어야하는 실제 횟수와 성공한 횟수를 백분율로 계산한 수치인데 99%로 설정하였다. 별개 내용이지만 문득 '데이터 ..

NIPA인증 1. 시작글에 이어 '확장성'에 대한 기술 구현을 적어보려고 한다. 인증 취득을 위한 SaaS 솔루션은 보장되어야할 주요 요건들이 있는데, 이번 글에서 다룰 것은 '신뢰성'에 대한 것이다. 신뢰성이 뭔지 간략히 설명하자면, 선뢰성을 가지는 솔루션은 리소스 관리에 있어서 장애 발생 또는 특정 동작을 통해 삭제되었을시 서비스가 다시 회복되는 데에 얼마나 걸리는지를 의미하는 '서비스 회복 시간'이 보장되어야한다. 운영을 위해 유지되어야할 데이터가 백업준수율을 지키고 있는지도 보장되어야하고, 데이터 보관(백업), 반환, 그리고 폐지에 대한 정책 및 기술도 구현되어있어야 한다. 그럼 시작해보자-!데이터 백업 데이터는 왜 백업되어야하는가? 를 먼저 얘기해보려고 한다. '단순히 서버가 다운되면 데이터베이..

메모에 가까운 게시글 하나 올립니다. 새 프로젝트를 시작함에 있어서 프레임워크 및 언어 선택, 구조 등 고려할 것들이 참 많은데, 이 게시글에서는 프론트엔드를 위해 어떤 프레임워크를 쓸 것인가에 대해 쓰려고 합니다. 두 개의 프로젝트 경험과 프론트엔드(React + Vite) 리딩을 해오면서 생긴 깊고도 얕은 안목으로 리서치하였고, 부족한 부분에 대해서는 추후 게시글을 보완할 계획입니다. 따라서, 리액트와 스벨트에 대한 장황한 이론들은 생략하고, 비교에 대한 것만 간략히 다룹니다.컴파일러 기반  vs  런타임 라이브러리Svelte가 각광받고 있는 이유는 뛰어난 성능 때문입니다. 이 성능은 리액트뿐만이 아닌, 앵귤러(Angular)와 Vue보다 더 뛰어나다고 하는데, 여기서 성능은 속도, 최초 로딩, 메모..

너무나도 오랜만인 글.. 반성 한 번 하고 시작.. 개발 일을 시작한지 오늘이 정확히 16개월째인 날이다. 앱 프론트엔드 직무를 9개월 하다가 현재는 R&D 분야로 옮겨서 클라우드 SaaS 솔루션 개발을 하고 있다. (react-native)앱/(react)웹 프론트엔드와 nestjs 백엔드, 그리고 인프라 공부들을 확장시켜오면서 기록의 필요성을 느끼는 와중에 오늘은 무조건 시작해야겠다 싶어 냅다 블로그에 뛰어들어왔다. 그치만 이번 글은 그 시작점으로 근래 메인으로 맡은 NIPA 클라우드 컴퓨팅 품질 성능 인증에 대하여 아카이빙해보려고 한다. 아마 이번 게시글에서는 일정과 절차에 대해서만 다루고, 다음 게시글에서 기술적인 기록을 할 예정이다. NIPA인증은 클라우드컴퓨팅서비스 품질 성능 인증으로, Saa..

오랜만에 글을 써봅니다. 바쁜 탓에 블로그를 들어오지 못한 사이 누적 조회수가 1만이 넘어섰는데 뭔가 기쁘네요. 제 블로그가 공부에 대한 기록이지만 그와 동시에 누군가가 공부하기에 도움이 되길 바라는 마음이었는데 실제로 그랬을지.. 6월 중순에 모빌리티 서비스 개발을 하는 스타트업에 들어가게 되었습니다. 현재까지 열심히 달렸고 며칠 전에 정규직 계약을 했습니다. 수습을 마치고 새 계약서를 쓰면서 더 열심히 달릴 예정이에요. 요새 드는 생각은 개발자하기를 참 잘했다고 생각합니다. 능동적으로 발전하는 직업을 갈구했고 그게 적성과 맞아서 꽤 기쁩니다. 신입 개발자로서 지금 회사에 들어오게 된 것은 제가 이뤄낸 인생에서 첫 번째 성공이자 도약점입니다. 지금 제 모습이 5년,10년 후에는 월급쟁이로 사는 것 이상..

너무너무 오랜만에 글이다.. 최근에는 졸업 전시 관련 하드웨어 쪽 코드를 다루고 이력서 작성에 정신이 팔려서 개발의 비중이 조금 줄어들었다. 이력서를 작성하면서 느낀 것 중에서 클린 코드에 대해 다룬 것이 있다. 서칭을 하면서 찾아보는데 클린 코드를 위한 가장 기본적인 참고사항은 적용을 마쳤다. 변수명(네이밍 규칙) 명시적으로 변경 삼항연산자의 상황에 따른 대응 ( + 논리 연산자(&&)로 조건부 렌더링 적용 ) True(boolean) 값을 Props로 넘길시 생략 useEffect Hook 내부 함수는 밖으로 뺄 것 인자가 Event 뿐인 이벤트 핸들러 함수는 함수명만 명시 React-Query와 Axios 모듈화로 API 요청 관리 (진행중) 정도가 될 것 같은데 마지막 항목은 현재 작업 중이다. ..

어제 React Native 포지션의 이력서를 드디어 제출했다. 개발로서의 첫 번째 이력서였으며, 이래저래 많은 생각이 들었다. 무엇보다 가장 강하게 든 생각은 '이력서를 쓰는 과정조차 좋은 경험'이라는 것이다. 배우는 과정은 정리하고 되풀이하는 데에서 그 모양이 더 잡힌다는 것을 잘 알고 있지만, 이력서를 정리하고 쓰는 이 전체 과정은 이를 강하게 보여주면서 동시에 현실적인 내 모습을 냉정하게 드러내는 고통스러운 시간이지 않나 싶다. 내가 어떤 게 부족하고, 어떤 것들이 어필이 덜 되는지를 스스로 느끼는 도중에도 정리를 멈출 수 없음이 마음을 더 무겁게 한다. 혹자는 '부족한 것을 알면서 왜 더 준비하고 내지 않는가?'라고 물음을 던질지도 모르겠다. 필자는 학원과 같은 커리큘럼 없이 구글링으로 시작하여..

오늘은 헷갈린 Hook들에 대해 정리해보려고 합니다. useState와 useEffect보다는 useMemo, useCallback이 다소 헷갈리기 때문에 해당 글을 작성하게 되었습니다. useEffect의 라이프사이클 관련 정리도 필요해 보이지만 그건 추후 추가된 글에서 다뤄보겠습니다. "useMemo와 useCallback이 왜 필요한가?"를 먼저 생각해보겠습니다. 리액트 내장 훅인 이 두 함수가 우리에게 편리함을 제공해준다면, 분명히 필요성이 제시되었기 때문에 누군가 개발했다는 것을 의미를 합니다. 가장 핵심적인 키워드는 '렌더링 최적화'입니다. 예시를 하나 들어보겠습니다. 컴포넌트가 렌더링 되었다는 것은 사용자가 해당 함수(컴포넌트)를 호출시켰다는 것을 의미하며, 이 과정에서는 내부에 있는 변수 ..

오늘은 스토리지에 대해서 다뤄볼까 합니다. 스토리지를 다루기 위해 두 가지 라이브러리를 정리해보려고 하는데, Async-storage와 Encrypted-storage가 바로 그 주인공입니다. 가장 먼저, 스토리지(Storage)를 왜 써야하는지, 어떤 데이터를 넣어야하며- 그렇다면 redux는 어떻게 활용 측면에서 비교가 되는지 정리를 하고 마지막엔 코드 예제까지 정리하면서 마무리 해보려고 합니다-! 어제 작성한 글에서는 효율적인 상태 관리를 위해서 Redux-toolkit을 다뤄보았다. Redux의 store는 데이터 저장 공간으로 활용되며 실제로 앱이 켜져있는 상태에서 데이터를 불러오는 성능이 가장 뛰어나다. 하지만 앱이 꺼지면 데이터가 사라지는 일시적 저장 공간이기 때문에 그 한계 또한 명확하다...