자바스크립트 설계(?) 방법론(?)에 대해 여쭙고자 합니다.

Question

저는 자바스크립트 초급자 입니다.점점 자바스크립트 기술이 중요해지면서 저도 열심히 공부하는 중인데요.지금 회사에서 리뉴얼 프로젝트가 있고 거의 재구축해야되서 백엔드는 물론이고 자바스크립트도 새로 짜서 탄탄하고 유지보수성 좋게 설계하고싶은데요.문법적으로나 각종 테크닉에 대한것은 많이 찾아보고 공부하고 있는데 전체 시스템을 이끌어가는 자바스크립트 설계에 대한건 뭐라고 검색해야되는지도 모르겠고 해서 공부방향에 대해 여쭙고자 합니다 다른 사이트를 보면 각종 레이아웃과 ui.기능 관련된 함수와 이벤트, 변수들을 묶어서 사용하던데 그런건 뭐라고 검색해야 정보를 찾을수 있을지 모르겠습니다. 설명이 좀 이상한데 예를들면 const App 안에 애플리케이션에서 쓰이는 레이아웃 관련 ui 기능이라던가, 이벤트라던가 등을 다 넣어놓고html 안에서 App.init() 이렇게 하면 전체가 동작되도록 하는 것도 있고 또 어떤 시스템 보면 각 기능 모듈별로 const Search, const Table 이런식으로 해서 각각의 모듈별로 기능과 관련 변수, 이벤트를 묶어놓은것도 있고 하더라구요 이런 방법론과 관련된 정보를 찾아서 공부하려면 뭐라고 검색해야되는지 모르겠습니다. 또 저희 시스템이 Ajax를 이용해 json 을 가져와 데이터를 다시 뿌려주는 행위가 많은 시스템인데 늘 받아온 json을 자바스크립트 안에서 var html = `${data.data1}`html += `${data.data2}`; (이런식, 실제론 더 복잡함) 이런식의 코드를 넣어서 원하는 위치에 $("원하는위치").html(html); 이런방식으로 덮어 써주고 있는데 이게 너무 비효율 적인것 같은데 혹시 이런것에 대해 쉽게 해주는 기술이 있는지?

토끼왕 · Answer

구조적 프론트앤드 자바스크립트 프레임워크에 앵귤러라는게 있습니다. 타입스크립트를 강제하고 효율적인 구조를 강제하고 dependency injection도 제공하니 공부하시고 사용하시면 자연스럽게 구조적인 코드를 짤 수 있습니다

Mux · Answer

아직 JQuery를 많이 사용하지만 외국 커뮤니티를 보면 JQuery를 사용하기 보다는,Angular, React, Vue 등의 Framework를 공부하라는 여론이 많습니다. Dom의 내용을 조작하는 내용이 적으면 JQuery나 createElement, prepend 등을 이용해서제어할 수 있으나, 로직이 복잡해지고 다뤄야할 데이터가 많아 Dom의 변경이 잦아진다면,이를 관리하고 비슷한 기능들을 묶기에는 버거울 수도 있습니다. 그렇기에 Frontend의 Framework들이 나오게 되고 이를 사용하면 위와 같은 문제들을 해결할 수 있습니다. 그렇다고 Framework를 사용하는 것만이 꼭 답은 아닙니다. 질문자님의 회사의 사정에 따라 결정하시되, JQuery를 기반으로 Dom을 변경한다면 정해진 답은 없지만 Stackoverflow - Best Practice to edti HTML 옆의 링크처럼 Dom을 조작할 수 있는기능들 모듈화 또는 함수화 시켜서 사용할 수도 있습니다.

[object Object] · Answer

handlebars 같은 템플릿 라이브러리 사용하셔도 되고 구조가 어떻게 생겼는지 모르겠지만 let html = ` {{__data1__}} {{__data2__}} `; html.replace('{{__data1__}}', data.data1); html.replace('{{__data2__}}', data.data2); $(선택자).html(html); 이렇게도 할 수 있습니다. 컨벤션은 원하시는걸로 만드시면 돼요. + 참초: top 17 templating engines++ 프론트엔드 프레임워크를 도입해보시는건 어떠세요?

charlatan · Answer

자바스크립트에도 디자인 패턴이 있습니다.https://addyosmani.com/resources/essentialjsdesignpatterns/book 그런데 그냥 리액트 같은 프론트엔드 전용 라이브러리를 쓰는 것이 훨씬 효율적일 듯 싶네요.

h0ngz · Answer

나후나 Vue 말씀하시는건가요? 안그래도 지금 관련 자료 찾다가리액트라 앵귤라는 러닝커브가 너무 큰거같아서 Vue를 생각하고 있긴합니다 Mux 저희도 비슷한 방식을 쓰고있으나 첨부해주신 링크가 훨씬 간결하네요 일단 이것만으로 어쩔수없이 jquery 기반으로 재개발 한다하더라도 훨씬 효용성 있는 코드를 만들수있을거 같습니다 감사합니다. scala 님 저번질문에도 도움 많이 받았는데! 의견감사합니다. charlatan 님 Vue와 리액트중 고민중인데 뭐가 더 러닝커브적고 효율적일까요. 참고로 리액트는 경험해본적이 없지만 리액트네이티브로 앱 만들어봤던 경험은 있습니다.

h0ngz · Answer

스프링으로 구성된 프로젝트 그리고 리액트 경험은 없지만 리액트네이티브 경험은 있는정도의 제가 시도하기에Vue와 리액트중 뭐가 더 나은 선택일까요? Vue를 검색해봤는데 러닝커브가 제일 적은것 같아서 고려중이긴 합니다. 아 그런데 지금 스프링과 리액트 연동해서 사용하는것 관련 자료를 찾아보니 빌드과정이 npm을 실행해야하는등 복잡해지네요 ( 개발중인 시스템이 관공서 내부망에 들어갈수도 있어서 이런건 지양해야 해서..) 또 하나 프론트엔드 프레임워크를 써보지 않아서 드리는 초짜적인 질문이지만각 페이지마다 데이터를 컨트롤러에서 모델에 실어서 보내면 jsp에서 jstl을 이용해 표현 한뒤데이터 변경사항을 Ajax를 통해 json으로 받으면 jquery로 데이터 갱신을 해주고 있는데요. 프론트엔드 프레임워크를 도입하면 각 페이지마다 최초 데이터를 뿌려줄때도 스크립트로 데이터 가공해서 뿌려주는건가요? 이런질문 드리는게 현재 Vue 정보를 보고있는데 html안에 jstl을 쓰는것이 아닌 vue문법을 통해 데이터를 뿌리고 그 데이터는 스크립트로 생성되어 있어서 생긴 궁굼점 입니다. 또 const App 안에 함수, 이벤트등을 다 넣어놓고 App.init 하는 방식에 대한 이름은 따로 없고 그냥 스타일인건가요?

Mux · Answer

프론트엔드 프레임워크를 도입하면 각 페이지마다 최초 데이터를 뿌려줄때도 스크립트로 데이터 가공해서뿌려주는건가요? 맞습니다.SPA(Single Page Application)에서는 데이터를 API로 처리합니다. Vue, React, Angular에서는 받아온 데이터를 가공하여 변수에 저장하거나 반환 메소드를 만들고,HTML(또는 JSX)에서 변수 또는 메소드를 참조하여 화면에 보여줍니다. (마치 JSTL문법으로 Model에 담겨진 데이터를 뿌리는 것처럼요) const App 안에 함수, 이벤트등을 다 넣어놓고 App.init 하는 방식에 대한 이름은 따로 없고 그냥 스타일인건가요? 이거는 개발 성형인 것 같습니다. 다만 모든 기능을 하나의 변수 넣고 하는 거는 좋아보이지는 않습니다. 굳이 App.init만으로 호출할 거라면 즉시실행할 수 있는 익명함수가 더 좋아보이니까요.

h0ngz · Answer

Mux 님 그러면 제가 이해한대로라면 동작방식이jsp파일이 열림과 동시에 자바스크립트로 컨트롤러에 Ajax로 데이터 요청하고 받아온데이터로 Vue 모델 만들어주는건가요? 그러면 컨트롤러의 역할은 이전에는 - 페이지 요청하면 관련 데이터처리후 jsp 페이지 열어주는 메소드- json으로 주고받는 ajax통신을 위한 api 메소드로 구성되어있었는데 vue를 도입하면, 그리고 아직은 공부전이라 잘모르지만 vue의 route 기능을 활용하면컨트롤러에서는 페이지요청에 대한 메소드는 필요없어지는거고api 통신만 하는 메소드만 있어도 되는 형태가 되는건가요?

자바스크립트 설계(?) 방법론(?)에 대해 여쭙고자 합니다.

8개의 답변

Q&A 목록