WonStack

저번에 화면을 동적으로 바꿔주는 기능을 구현해보자 했었다. 버튼을 클릭하면, 브라우저 주소는 그대로지만, 돔 요소만 변경되도록 코드를 구현해보자.  하나는 돔 요소를 동적으로 변경하는 코드를 html 내부에 삽입하는 것. 또 하나는 돔 요소 자체를 서버 리소스로 들고 있다가, 필요할 때 통신으로 쏴주는 것이다.돔 요소를 조작하는 건 그렇게 어려운 일이 아니다.간단한 코드 몇줄로 얼마든지 정적 요소를 동적으로 유저에게 노출 시켜줄 수 있다. 유저의 서비스 맥락만 로컬 클라이언트에 제대로 저장되어 있고, 클라이언트의 실행 환경이 항상 동일하다는 전제에선, 해당 방식 또한 매우 양호한 편이다. 이를테면, 어릴적 많이 하던 인터넷 플래시 게임이 있겠다. 그럼 돔 요소 자체를 백 서버에서 들고있다가, 프론트로 보..

build 시 productHandler.js가 되는 것을 염두하여 js 파일로 import 해야되는 번거로움이 있다. 언제 한번 손을 좀 볼까 고민 중이다. 이제 url에 맞춰서 30 가지의 상품 정보를 보여주는 기능을 사이트에 담아보았다. 만약 상품이 30개 밖에 없다면, 지금 같은 코드도 큰 문제는 없어보인다. 만약 상품 페이지 말고, 관심사가 아예 다른 페이지들을 노출해야된다면 어떻게 될까?핸들러를 여러개 생성해주면 그만이다. 물론 매번 새로운 관심사가 생길때 마다 핸들러를 추가해줘야한다는 불편함이 있지만, 결과적으로 handler 라는 요소로 url 요청에 상응하는 리소스를 잘 반환해주고 있다.  사실 폴더 위치만 제대로 정해줄 수 있다면, 하나의 핸들러로 모든 파일을 제공해줄 수 있다. 페이지..

컨트롤러를 만들어야할 것 같다.server.ts에 url path를 변경해줄 때 마다 상응하는 페이지를 보여주면 된다. 5개 이내일 땐 문제가 없어보이지만, 페이지 개수가 많아지면 매우 비효율적으로 변할 수 밖에 없다. 일단 product 페이지를 전달해주는 productHandler를 구현해보자.ProductHandlerserver에 선언했던 path 모듈이 전역으로 선언되어있는 모양이다. 전역에서 모듈을 접근할 수 있는 환경은 그닥 안전하지 않지만, 모듈의 스코프를 정해주는 행위는 나중에 고려하도록 한다. 외부에서 모듈을 불러올 때, tsc로 ts파일을 js 파일로 전환할 때 각각 문제가 생긴 것을 파악했다.  import 불가  require를 사용할 땐 문제가 없었지만, import를 사용하면 에..

웹 프로젝트를 아무런 종속성 없이 만들고 싶다.일단 페이지 띄우자. 이렇게 만들고 나니깐, url path에 따라 다른 화면을 보여주는 기능을 만들어 보고싶었다. spa에선 라우터, mpa에선 서블렛 또는 컨트롤러를 구현하면 되겠다. 일단 spa를 직접 만들기 위해서 처리해야할 기능이 많으니, mpa의 컨트롤러를 간단하게 구현해보자. req.url 을 기준으로 값을 반환해주는 걸 알 수 있다.   조건부만 추가해줘도 페이지들을 여러개 생성할 수 있다. 만약 보여줘야하는 페이지가 10개 이하라면, 그냥 해당 방식으로 웹 사이트를 구축해도 문제없다고 생각한다. 하지만 사이트의 페이지 개수가 50개라면 얘기는 달라지겠다. 다음 번엔 30개의 html을 핸들링할 수 있는 컨트롤러를 만들어보도록 한다.