분류 전체보기 (79) 썸네일형 리스트형 SPA와 WebPack에 관해 동적인 웹페이지, 웹 어플리케이션 그리고 이를 구현하기 위한 아키텍처와 프레임워크들. 이렇게 웹 어플리케이션을 구현하다 보면 다음과 같은 문제의식에 직면하게 된다. http 요청에 대한 응답으로 매번 html 파일을 렌더링 해주어야 하는데, 이를 한 번만 하게 할 수는 없을까? 즉 매번 다른 페이지를 보여주는 것이 아니라 새로고침처럼 변화하는 부분만 변하게 하고, html 전체를 렌더링 안하게 할 수는 없을까? 이러한 문제의식에서 나온 것이 SPA(Single Page Application)이라는 기술이다. 이 방식은 기존의 방식과 달리 HTML을 한 번만 렌더링 해주고, 그 때 그 때 변화가 필요한 부분만 바꾸어 준다. 헌데 이 방식 역시도 문제가 존재한다. 기존에는 html 파일을 변화가 있을 때마다.. MVC 패턴, 삼중 레이어 패턴 그리고 웹 프레임워크에 관해 웹 어플리케이션을 만들다 보면, 무언가 반복되는 부분이 있다는 것을 느낄 것이다. 모든 웹 어플리케이션은 MVC 패턴이라는 반복되는 부분이 존재한다. 클라이언트가 보게 되는 화면이 존재하고, 이를 위해 어떤 데이터를 가져올지가 필요하며, 이러한 화면과 데이터를 조정하는 부분이 존재한다. 이렇게 반복되는 패턴을 아키텍처라 한다. MVC 패턴은 또다른 이름으로 삼중 레이어 패턴이라 부르기도 한다. 삼중 레이어 패턴은 다음과 같이 구성된다. 1) 프레젠테이션 레이어 = View 2) 비즈니스 로직 레이어 = Controller 3) 데이터 액세스 레이어 = Model MVC 패턴, 삼중 레이어 패턴이라는 것이 존재하기 때문에 결국, 어떤 웹 어플리케이션을 만들든, 반복되는 작업이 존재할 수 밖에 없다. 이에 .. 정적 웹페이지와 동적 웹페이지, CGI 그리고 웹 어플리케이션에 관해 http://info.cern.ch/hypertext/WWW/TheProject.html The World Wide Web project The World Wide Web project World Wide Web The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents. Everything there is online about W3 is linked directly or indirectl info.cern.ch 우리가 보는 웹페이지는 굉장히 다이내믹해졌지만, 초창기 웹사이트는 굉장히 정적이었다. 위 링.. IP, TCP/UDP, Port에 관해 HTTP 등의 응용 프로토콜로 통신을 할 때, 누구에게 보낼지를 알아야 한다. 예를 들어, 우리가 보내고 싶은 메시지가 있다면, 그 메시지를 누가 받는지 주소와 연락처를 알아야 제대로 메시지를 보낼 수 있다. 이 때 그러한 주소, 연락처 역할을 하는 것이 IP이다. 이 IP는 글로벌한지 혹은 사설인지에 따라 나뉜다. 글로벌 IP는 우리의 주민등록 상의 주소와 같다. 한 지붕 아래 두 집 살림이 아닌 이상, 동일한 집주소를 가진 경우는 없다. 이게 글로벌 IP이다. 반면에 가족끼리 집 주소를 이야기할 때는, 보통 '우리집'이라는 말을 많이 쓴다. 이렇게 간단히 '우리집'으로 말하는 것이 사설 IP이다. 연락처(IP)를 알았다면, 이에 메시지를 상대방에게 보낼 수 있다. 헌데 이 메시지를 보내는 방식에는 두.. 응용 프로토콜에 대한 이야기 우리가 응용프로토콜에 대해서 이야기할 때, 대부분은 HTTP에 대해서 이야기하기 마련이다. 그러나 HTTP는 수많은 응용 프로토콜 중에 하나일 뿐이다. 이것을 위해서는 우선 응용 프로토콜이 무엇인지에 대해서 이해해야 한다. 응용 프로토콜이란 무엇인가? 우리가 성벽에 불을 지펴, 봉화로 소통한다고 생각해보자. 서로 다른 지역에 있는 사람들끼리 봉화로 정보를 주고 받기 위해선, 무언가 약속이 있어야 한다. 이것이 어떠한 의미가 있는지 나름대로의 통신규약이 있어야 한다. 이것이 프로토콜이다. 응용프로토콜이란, 이러한 통신규약이 응용 프로그램의 수준에서 이루어 진다는 것을 의미한다. 이러한 응용 프로토콜에 HTTP, Telnet, SSH 등이 있는 것이다. HTTP는 일반적으로 웹 브라우저에서 우리가 사용하고 .. 타입스크립트 기본 개념 타입스크립트는 자바스크립트가 데이터 타입을 명시적으로 정의하지 않기 때문에 이를 보완하기 위해서 만든 언어다. 타입스크립트의 작동방식은, 타입스크립트로 코드를 작성한 뒤, 이를 타입스크립트 컴파일러로 컴파일해서 자바스크립트를 만들고, 이렇게 만들어진 자바스크립트 파일을 실행하는 형식으로 이루어 진다. 추후에는 자바스크립트로 컴파일하지 않더라도, 타입스크립트 파일 그 자체를 실행할 수 있도록 개선한다고 한다. 타입스크립트는 데이터 타입을 정의하기 위해서 만들어진 언어인 만큼, 변수/함수의 측면에서 기존의 자바스크립트와 차이점을 보인다. 우선 변수의 측면에서, 자바스크립트로 객체를 만들 경우, 그 안에 여러 변수들을 정의하게 된다. 이 때 변수를 일일히 정의할 수도 있지만, 이를 인터페이스라는 것으로 만들어.. #5. 프로젝트 후기 https://github.com/chanmin-kim/spootify chanmin-kim/spootify Writing and Sharing Song Reviews with Others (node.js, express, bootstrap, mongoDB) - chanmin-kim/spootify github.com 전체적인 소스코드는 여기서 확인할 수 있다. 맨땅에서, express와 mongodb 그리고 bootstrap을 이용해 웹사이트를 만들어 본 것이 처음인데, 아무래도 몽고db에서 스키마를 정의하고 이것을 다루는 것이 쉽지 않았다. 기존에는 mongoDB 아틀라스를 이용해 클라우스 서비스를 이용했는데, 이번에는 mongodb를 개발용 컴퓨터에 직접 설치하고, mongoose로 query문을 .. #4. 삭제 기능 구현 삭제버튼을 누르면 작성한 리뷰가 삭제되도록 한다. 1) 비밀번호를 입력했는지 체크하고 2) 작성한 비밀번호가 맞으면 삭제하고, 메인페이지로 렌더링해준다 3) 작성한 비밀번호가 틀렸다면, 에러메시지를 띄운다. 우선 프론트엔드부터 구현하면 다음과 같다. function submitDelete(){ let confirm_password = $('#confirm_password').val(); if (!confirm_password) { alert("비밀번호를 입력하지 않았습니다"); return false; } $.ajax({ type: "DELETE", url: "/api/delete/", data: { confirm_password: confirm_password, }, success: function (.. 이전 1 2 3 4 5 6 ··· 10 다음
