hahagarden의 블로그

이 문제 나만 겪는 것인가....? 구글링, 네이버, 다음을 아무리 뒤져봐도 답이 나오지 않았다. $7이 신용카드로 결제되고 있다. 설정을 바꾸어야 하는데 로그인을 할 수가 없다. 인증자앱이 생성한 코드를 입력하십시오. 무엇을 입력하는 것인지. 2단계 인증이 설정되어있는 것 같은데, 나는 설정한 기억이 없다... QR코드를 스캔한 적도 없는 것 같은데... 그래서 아무리 해도 안되는 것인지... Google authenticator OTP코드와 Github 2fa method로 시도해보았는데 '잘못되거나 만료된 코드입니다. 다른항목으로 시도하십시오', '요청된 형식과 일치시키세요' 라는 메세지만 떴다. 공식 홈페이지에도 더이상의 문제는 support@heroku.com에 문의하라고 되어있어서 연락해 보았..

개발 프로세스 요구분석 및 시스템 명세서 작성 → 설계 → 구현 → 테스트 → 배포 및 유지보수 전통적인 개발 프로세스, Waterfall 폭포수 개발 방식 실제 출시 기한을 정해놓고 순차적으로 단계를 진행한다. 실제로 배포되어 유저에게 제공되는 시간이 오래 걸린다. 또한 실제 디자인 또는 개발 화면을 볼 수 있는 것은 꽤 많은 단계를 지나온 시점이기 때문에 버그나 수정 사항이 생기면 다시 처음으로 돌아가야 하므로 비용과 시간 등이 소요된다. 따라서 소프트웨어의 신뢰성 및 안정성을 보장하기가 힘들며, 배포된 후에도 많은 버그가 있을 수 있다. 모던 개발 프로세스, Agile 애자일 방식 전통적인 개발 프로세스에서 벗어나기 위해 고안된 방식으로, 짧은 주기인 스프린트(sprint)를 기준으로 개발 사이클이..

세션(Session) 쿠키는 브라우저가 어떤 데이터를 쿠키로 가지고 있는 것이고, 사용자가 요청할 때마다 브라우저는 쿠키를 자동으로 서버에 전송한다. 우리가 로그인 상태를 유지할 수 있는 방법 중 하나는 세션을 이용하는 방법인데 간략하게 이야기하자면, 이 쿠키에 우리가 로그인(사용자라고 인증)을 완료한 상태임을 증명하는 세션ID를 저장하고 요청마다 이 세션ID가 든 쿠키를 전송함으로써 서버는 '이 세션ID는 등록된 사용자가 맞네, 인증된 사용자니까 요청에 응답해줄게'라며 처리를 한다. 세션은 쿠키와도 밀접하게 연관된다. 쿠키에 대해서 다음의 포스팅에서 다루었다. Cookie란, 쿠키 옵션 종류 HTTP는 stateless하다 HTTP는 웹 서버와 웹 브라우저가 데이터를 주고받기 위한 약속이다. HTTP는..

HTTP는 stateless하다 HTTP는 웹 서버와 웹 브라우저가 데이터를 주고받기 위한 약속이다. HTTP는 상태를 가지지 않는다. 이 말은 웹에서 데이터를 주고받을 때 상태를 가지지 않는다는 것이다. 클라이언트가 서버에 어떤 요청을 하면 서버는 그 요청을 곧이곧대로 듣고 적절한 응답을 해주지만, 처리 후에 그 일을 기억하고 있지 않다. 항상 아메리카노를 주문하는 카페에 가서 '늘 마시는 것으로 주세요'라고 해도 처리를 못하는 것이다. 카페 입장에선 항상 처음 보는 사람이고 어떤 메뉴를 주문했는지 정보를 알고 있지 않다. 단골 손님인데 매번 처음 보는 사람으로 인식한다면 손님 입장에서는 항상 장황하게 주문을 해야하고 불편할 것이다. 그래서 카페에서 어떤 특별한 영수증을 준다. 이 영수증을 가지고 오면..

HTTP HTTP는 HyperText Transfer Protocol로 HTML과 같은 문서를 전송하기 위한 프로토콜이다. 프로토콜이라 함은 일종의 규약이다. 웹 서버와 웹 브라우저가 데이터를 주고받기 위해 생긴 약속이다. 요청을 하는 클라이언트는 HTTP message 양식에 맞게 요청을 보내고, 응답을 하는 서버도 HTTP message 양식에 맞게 응답을 한다. 무상태성 stateless 무상태성이다. HTTP는 상태를 가지지 않는다. 이것이 HTTP의 가장 큰 특징이다. 사용자가 장바구니에 상품을 추가할 때, HTTP 요청을 보내고 적절한 응답과 함께 사용자가 원하는 작업이 완료될 것이다. 그러나 HTTP는 통신 규약일 뿐이므로, 장바구니에 저장을 했는지 저장이 안되어있는지 상태를 가지지 않는다...

SOP(Same Origin Policy) 동일 출처 정책. 같은 출처의 리소스만 공유가 가능하다는 정책이다. http://naver.com 은 https://naver.com 과 프로토콜이 다르기 때문에 출처가 다르다. https://hahagarden.github.io 는 https://github.io 와 호스트가 다르기 때문에 출처가 다르다. http://hello.world:81 은 http://hello.world 와 포트번호가 다르기 때문에 출처가 다르다.(http 프로토콜의 기본 포트번호는 :80이다) SOP에 따라 다른 출처의 리소스는 기본적으로 공유를 제한하기 때문에 정보가 다른 곳으로 새어나가는 것을 방지할 수 있다. 방지책이 없다면 사용자가 깜빡하고 로그아웃을 안하거나 공유 기기를 ..

REST API? 웹 애플리케이션은 HTTP 메서드를 이용해서 서버와 통신한다. 이러한 HTTP 메서드를 이용해서 데이터를 주고 받을 수 있도록 서버 개발자가 API를 만들텐데 이 때 Restful한 API를 만드는 것이 좋다. 요청과 응답을 제대로 보내고 받을 수 있도록 일종의 규약이 정해져 있다. REST API의 REST는 Representational State Transfer의 약자로, 로이 필딩(Roy Fielding)의 박사학위 논문에서 소개된 아키텍처이다. 웹에서 사용되는 데이터나 자원(resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말한다. REST 성숙도 모델 어떻게 RESTful API를 만들 수 있을까? 레오나르드 리차드슨(Le..

URL과 URI 브라우저의 주소창에 입력한 URL은 인터넷에서 웹페이지, 이미지, 비디오 등 리소스가 존재하는 위치를 나타낸 문자열이다. URL는 Uniform Resource Locator의 줄임말로, 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타낸다. URL은 scheme, hosts, url-path로 구분한다. scheme은 통신방식(프로토콜)을 결정하고 hosts는 웹 서버의 이름이나 도메인, IP 등의 주소가 온다. url-path는 CLI에서 파일에 접근하는 것처럼 웹 서버에서 지정한 루트 디렉토리부터 시작하여 파일의 경로와 파일명을 나타낸다. URI는 Uniform Resource Identifier의 줄임말로, URL의 기본 요소에 더해 query와 frag..

클라이언트 서버 아키텍처 쇼핑몰 어플리케이션을 인터넷 없이 이용하려고 한다면? 어플리케이션을 이용할 수 없다. 인터넷 어딘가에 존재하는 서버로부터 정보를 받아와야 하기 때문이다. 만약, 서버가 존재하지 않고, 어플리케이션 내부에 모든 정보를 저장하고 있다면, 쇼핑몰 상품의 가격 하나만 변동이 되어도 모든 정보를 앱 안에 담고있는 앱 자체를 전부 업데이트 해주어야 한다. 빈번한 업데이트가 필요한 경우 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시키는 것이 유리하다. 이러한 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2-Tier 아키텍처, 다른 말로 클라이언트-서버 아키텍처라고 부른다. 용어 뜻 그대로, 클라이언트(client, 손님)와 서버(server, 서빙하는 사람)의 역할을 ..

Presenters스터디 시간에 DOM을 발표하며 HTML의 script태그에 대한 이야기를 했다. script태그로 자바스크립트를 import할 때에는 DOM조작을 위해 body태그 내부의 하단에 삽입해야 한다는 주제였다. 어떤 스터디원 한 분이 테일윈드나 폰트 등을 사용할 때에도 script 태그를 사용하는데 그 때에는 head에 넣어도 된다고 이야기를 하셨다. 그렇다. script태그는 자바스크립트파일 뿐만 아니라 다른 경우에도 썼는데 조금 더 알아보니 CDN이라는 개념이 나왔다. (script는 '각본, 대본'이라는 뜻과 같이 컴퓨터가 수행할 명령들의 집합이다.) CDN 사용 사례 처음에는 Fontawesome같은 아이콘을 임포트하는 방식인 줄 알았다. 그런데 React에도 CDN이 있었다. CD..

DOM이란? https://hahagarden.tistory.com/76 DOM과 브라우저 동작원리 DOM이란 DOM은 Document Object Model 문서객체모델의 약자이다. 웹페이지의 구조를 나타낸 text일뿐인 HTML파일이 DOM을 통해 태그 하나하나 생명력을 얻는다. DOM은 연결다리이다. DOM은 HTML, XML문서의 프로 hahagarden.tistory.com 브라우저의 렌더링 서버에서 HTML, CSS, JavaScript, 이미지파일 등을 응답을 보내주면 브라우저의 렌더링 엔진이 DOM트리와 CSSOM트리를 만들고 렌더트리로 병합한다. 그리고 그 후에 position이나 size 등 CSS가 계산되고 화면의 좌표에 맞춰서 배치가 되고 색칠되고 그려진다. DOM트리를 만드는 과정..

CLI(Command Line Interface) CLI(Command Line Interface)는 입력하는 글자와 출력하는 글자로 컴퓨터와 소통하는 것이다. 보통 우리는 일상생활에서 CLI보다는 GUI를 사용한다. 컴퓨터에게 원하는 작업을 시키려면 명령을 해야 한다. 우리가 컴퓨터를 킬 때부터 버튼을 클릭하는 과정의 연속이다. 본체의 스위치를 누르고(Hardware Interface) 바탕화면에서 인터넷 아이콘, 폴더 아이콘을 찾아서 더블클릭하고, 마우스 오른쪽을 클릭하여 새 폴더를 만들 수 있고, 텍스트문서를 만들 수 있고, 파일을 드래그하여 옮길 수 있다(GUI, Graphic User Interface). 컴퓨터를 처음 보는 사람도 보면 따라할 수 있을 정도로 직관적이고 편하다. 그러나 대부분의..