hahagarden의 블로그

라우팅으로 기본적인 화면들을 만들었다. dummy data로 채팅방 목록과 메세지 목록을 만들어서 임시로 그렸다. 스크랩 목록은 별도로 존재하지 않고 메세지 목록의 스크랩 프로퍼티 값으로 필터링하여 스크랩 페이지에 그린다. 각 데이터마다 id값이 있고 id값이 url의 param이 되어 페이지를 구분한다. 클릭하여 url을 이동하는 것 말고는 button의 기능과 form 기능은 없다. 🙌 github repository 🙌 GitHub - evergarden0412/gptea-web Contribute to evergarden0412/gptea-web development by creating an account on GitHub. github.com

Node.js 서버 만들기 https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction 문서를 참고하여 Node.js의 HTTP 처리 과정을 정리해본다. HTTP 트랜잭션 해부 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 1. 서버 생성하기 모든 Node.js 웹 서버 애플리케이션은 웹 서버 객체를 만들어야 한다. cont http = require('http'); const cuteServer = http.createServer(); cuteServer.on('request', (req, res) => { // 매 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에 따라 다른 출처의 리소스는 기본적으로 공유를 제한하기 때문에 정보가 다른 곳으로 새어나가는 것을 방지할 수 있다. 방지책이 없다면 사용자가 깜빡하고 로그아웃을 안하거나 공유 기기를 ..

리액트 컴포넌트와 라우터를 정했다. 이름을 짓는데 시간이 오래 걸렸다. Chats, Chat, ChatItem 등 라우터로 쓸 것인지 단순 컴포넌트인지에 따라서 생각을 해보았다. Chats페이지에 chat 리스트가 뜨는데, 1. 하나하나의 chat 리스트아이템을 Chat이라고 하고 채팅방을 ChatRoom으로 하는 방법 2. 하나하나의 chat 리스트아이템을 ChatItem이라고 하고 채팅방을 Chat으로 하는 방법 중에서 2번을 택했다. 리스트는 채팅방 삭제 기능을 하기는 하지만 리스트 아이템일 뿐이고 조금 더 메인의 역할을 하는 채팅방을 Chat으로 하기로 했다. 채팅방의 path 엔드포인트는 /chats/chatId 로 할 것이다. Scraps페이지에 scrap 리스트가 뜨는데 따로 모달창을 띄우지..

Scrapbook 페이지와 Scraps 페이지 목업을 작성했다.

Text Wireframe 순서 및 방향 원칙 목록은 위가 최신: scrap, highlight, chats 내용은 밑이 최신: 내용에서는 사람이 왼쪽 gptea가 오른쪽 pagination X 재정렬 기능 XLogin Page첫 페이지. 웰컴사인과 네이버로그인 처음에 표시Chat 목록 Page제목을 달’수‘있음(제목 없으면 ’제목없음‘) Chat 삭제 가능Chat 내용 Page메세지에 스크랩버튼 ♡, 본문, 작성시간 포함Scrap PageChat 목록 page와 유사한 구성이지만 내용이 일정 길이 이상에서 생략, 눌렀을때 새 창이 뜸 modal 방식으로 -> 딴걸 볼려면 꺼야함 새창에서 해당 Chat으로 이동할 수 있음. Chat으로 이동하면 URI fragment사용하여 해당 메세지로 스크롤 이동해있..

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, 서빙하는 사람)의 역할을 ..

MPA(Multi Page Application)와 SSR(Server Side Rendering) 전통적인 웹사이트는 모두 MPA(Multi Page Application)이었다. 어떤 페이지에 접속하려면 서버에서 그 페이지의 html을 보내준다. 페이지마다 각각의 html이 있고 서버에서 렌더링 연산을 담당하고 페이지가 완성이 되면 응답한다. 따라서 페이지를 새로고침하거나 이동하면 페이지 전체가 렌더링된다. MPA는 멀티 html을 서버에서 제공해주는 SSR방식이다. SSR방식의 MPA의 장점은, 초기 로딩이 매우 짧다는 것이다. 서버에서 렌더링이 완료된 상태로 파일을 주고, 자바스크립트 파일 다운로드가 완료되지 않았어도 html이 보여지기 때문에 사용자가 대기하는 시간이 줄어든다. 또한 검색 엔진 ..

React 리액트는 프론트엔드 개발을 위한 자바스크립트 라이브러리이다. 다른 프로그래밍 언어이거나 자바스크립트로부터 독립적인 프로그램이 아니다. 리액트는 JSX문법을 이용해서 개발자가 간편하고 직관적인 코드를 작성할 수 있지만, 이것은 결국 오래된 버전의 자바스크립트로 변환된다. 리액트는 컴포넌트 기반으로 개발한다. 컴포넌트는 한 기능 단위로 만드는데, 기능에 집중하여 만들 수 있고 컴포넌트 사이에 의존성이 없어져서 독립적으로 작동한다. 클래스처럼 컴포넌트를 여러 곳에서 재사용할 수 있다. 또한 독립적인 한 묶음이기 때문에 테스트하기에 좋고 유지보수에도 좋다. 리액트는 선언형이다. 페이지에 어떻게 렌더할지가 아니라, 무엇이 페이지에 렌더링될지를 작성하는 것이다. 이는 프로그램을 예측 가능하게 하고, 덜 ..

Fetch API const promise = fetch(url[, options]); 자바스크립트에서 서버에 네트워크 요청을 보내고 데이터를 받아올 수 있다. 그 방법 중 하나는 브라우저에서 제공하는 fetch API이다. options를 주지 않으면 기본적으로 GET 메서드가 진행된다. (먼저 동기와 비동기, 자바스크립트의 비동기 처리에 대해서 다음 포스팅을 참고하자) JS 동기와 비동기, Callback, Promise, async/await 동기와 비동기 커피숍에서 커피를 시킬 때, 한명이 주문하고 그 주문이 완료되면, 다음 사람이 주문하고 그 주문을 완료하고, 그리고 또 다음 사람이 주문하고 완료시킨다면 대기 줄이 굉장히 hahagarden.tistory.com 프로미스 체이닝 fetch()를 ..