본문 바로가기
반응형

Coding

 (39)
[AWS] MFA 키 분실 후 인증받고 재설정 한 경험 사내 프로젝트 진행을 위해 회사 공용 이메일 계정으로 AWS 계정을 만들어 사용했다. 이메일은 회사 공용 계정이었지만 인증은 내 휴대폰으로 해 두었는데 휴대폰에 문제가 생겨 초기화하면서 MFA 인증을 하지 못하게 되었다. 테스트 버전으로 세팅 중이어서 IAM 계정도 별도 설정해두지 않았던 터라 로그인을 할 방법이 없었다. 도움말에는 대체 인증방법이 있는데, 계정에 등록된 휴대전화가 있는 경우 그 방법이 가능했다. 하지만 이 계정에는 회사 전화번호가 등록되어있어 내 휴대폰으로 인증번호를 받을 수가 없는 상황. IAM 계정을 할당해서 사용했어야 했는데, 처음이라 몰랐다. 서비스팀에 지원 요청하기 결국 방법이 없어 아래 페이지에서 Request를 작성했다. (현재는 한국어 지원은 안 되는 것 같다.) http..
클라이언트사이드 렌더링(CSR) vs. 서버사이드 렌더링(SSR) 초심플하게 말하면, 서버에서 페이지 html을 완성해 클라이언트에 전달하면 서버사이드 렌더링, 클라이언트에서 페이지HTML을 완성해 클라이언트에 전달하면 클라이언트 사이드 렌더링이다. 서버 사이드 렌더링 서버사이드 렌더링은 매 요청마다 페이지 전체를 렌더 하기 때문에 새로고침이 발생하고 트래픽이 증가한다. 사용자가 느끼기에는 작동은 되지 않지만 정적인 화면을 빠르게 렌더해 보여주기 때문에 첫 로딩 속도가 상대적으로 속도가 빠르다고 느낄 수 있다. asp, jsp, php 클라이언트 사이드 렌더링 이에 비해 클라이언트 사이드 렌더링은 HTML과 자바스크립트 파일 등을 로드한 후 브라우저에서 렌더링을 하므로 상대적으로 초기 로딩 속도는 서버사이드 렌더링 오래 걸린다. 하지만 이후로는 서버로부터 페이지를 다시..
쿠키, 로컬스토리지, 세션스토리지 비교해보기 헷갈리기 쉬운 쿠키, 로컬 스토리지, 세션 스토리지의 공통점과 차이점은 뭘까? 각각의 항목별 특징을 표로 만든 자료를 보면 비교가 쉽다. 쿠키, 로컬스토리지, 세션 스토리지 모두 데이터를 저장하는 저장소이며, 'key-value' 값으로 데이터를 저장한다. 이때 모든 key와 value는 항상 string으로 저장된다. (object와 integer 등도 string으로 자동 변환됨.) 이 세 가지 저장소의 가장 큰 차이점은 데이터의 보관 기간이라고 할 수 있는데, 얼마만큼의 영속성을 갖는지에 따라 목적에 맞게 활용하면 된다. 로컬 스토리지 클라이언트의 정보를 영구적으로 저장한다. 의도적으로 삭제하지 않으면 영구 보관됨. 클라이언트에서만 읽을 수 있고, HTML5 이상의 브라우저만 지원된다. 세션 스토리..
브라우저는 어떻게 동작하나? 브라우저는 몇 가지 단계를 거처 사용자가 입력한 URL의 웹 페이지 정보를 렌더링 해서 사용자에게 보여주는 역할을 한다. 브라우저의 기본 구조와 작동하는 방식을 내가 말로 설명할 수 있도록 쉽게 정리해봄. 브라우저의 기본구조 브라우저마다 약간의 차이는 있지만, 대부분 다음 이미지와 같은 구조를 가지고 있다. UI 레이어(사용자 인터페이스) 브라우저 엔진 렌더링 엔진 네트워킹(통신) 자바스크립트 해석기 UI 백엔드 저장소(스토리지) 브라우저 동작 과정 1. Get Request 유저가 주소창에 URL을 입력하면, 브라운저는 URL의 서버에 get요청을 보낸다. 요청한 HTML 리소스에는 html내의 텍스트 정보와 각종 태그, img 등 미디어 콘텐츠, 자바스크립트, 스타일시트 등이 포함된다. 2. Get ..
갑자기 발생한 react-native run-android 에러 상황 01. 오늘 새벽까지 잘 작동했던 react-native run-android 가 오후에 실행했더니 에러가 발생했다. 아니 코드 한 줄 바꾼게 없는데 왜?? 내용을 보면 빌드는 성공한 것 같은데 에뮬레이터에서 앱을 실행시키지를 못했다. 내 작업환경은 macOS에서 안드로이드 앱을 디바이스 없이 에뮬레이터로만 확인하는 중. android build Error type 3 Error: Activity class { } does not exist. 같은 문구로 구글링해서 몇 가지 블로그 글을 찾았지만 따라해도 해결되지 않았다. 대부분 제시한 해결방법은 안드로이드 스튜디오에서 상단 메뉴에 build > Clean Project 를 한 후 안드로이드 스튜디오 재 실행 > rebuild project 클릭 >..
프로젝트 0주차 회고 - 주제선정과 기획 1차 프로젝트를 꾸역꾸역 끝내고 나니 이런 식으로 하나의 제품이 만들어지는구나 를 어렴풋이 알게 되었다. 1차에서는 뭐가 뭔지 모르는 중에 큰 기능 정의만 가지고 페이지들을 만들었고 코드가 작동하는 것에만 급급해서 동료들의 도움을 받아가며 겨우 끝마쳤다. 뿌듯함과 아쉬움이 반반. 그리고 쉴틈 없이 바로 이어지는 파이널 프로젝트. 7주간 진행되는 프로젝트인 만큼 적어도 주 단위로는 기록하자고 한다. 1. Project Idea 이번에도 해은 님의 아이디어로 진행하기로 했다. 이름하여 개.구.리. 개발자/구석에서/이제 나와! 라며 개발자들의 사이드 프로젝트를 위한 커뮤니티 앱이다. 개발자들은 대부분 사이드 프로젝트를 해 보고 싶은 마음은 있지만, 마음 맞는 멤버를 구하기는 어렵다. 그들을 위한 플랫폼으로 개..
state 불변성 관리, immer 라이브러리 써보기. 프로젝트를 진행하면서 전에 써보지 않은 redux-saga, hooks, styled-components 등을 적용해보고 있다. 또 한 가지는 immer 인데 코드 반영 전후로 필요성과 문법을 살펴보고 정리해둔다. 레퍼런스 : https://immerjs.github.io/immer/docs/example-reducer https://react.vlpt.us/basic/23-immer.html immer 가 무엇이고 왜 쓸까? 리액트에서는 배열이나 객체를 업데이트 할 때 직접 수정하지 않고 불변성을 지켜주면서 업데이트를 해야 한다. 객체의 경우 Spread syntax (...)를 사용하고, 배열의 경우 push, splice 같은 함수 대신 concat, filter, map 등의 함수를 사용해야 함...
쿠키, 세션, 토큰에 관하여 처음 관련 자료를 접했을 때 쿠키와 세션은 독립적인 별개의 것이라고 생각했는데 그렇지 않았다. 애매하게 혼동되는 쿠키, 세션, 토큰의 개념을 한번 더 정리합니다. http 통신은 stateless 한 그 특징 때문에 사용자의 주고받은 개별 통신에 대한 정보를 저장하지 않는다. 때문에 같은 사용자가 여러 번 요청을 하더라도 그것을 알 수 없음. 따라서 사용자에 대한 상태를 파악할 수 없음. 이 것을 보완하기 위해 쿠키와 세션이 있음. Cookie 쿠키는 일종의 서버와 클라이언트가 대화하기 위한 수단. 브라우저가 서버와 연결이 되었을 때 브라우저에서 자동적으로 쿠키를 생성하고, response 할 때 쿠키를 담아서 보낸다. 특정 호스트에서 생성된 쿠키는 이후 모든 요청마다 서버로 전송됨 요청 해더의 set-..

티스토리툴바