Front-End
-
React 개발에 왜 Node.js가 필요할까??Front-End/react 2021. 3. 6. 03:09
구글에 React를 검색하면 항상 Node.js가 붙어다니는 광경을 목격할 수 있습니다. React를 공부하면서 개발하기도 시간이 촉박한데 Node.js까지 공부를 해야하는지 의문이 많이 들 것입니다. 도대체 React랑 Node.js랑 무슨 관계가 있는 것일까요?? 결론부터 말하자면, React를 사용하기 위해 Node.js가 반드시 필요한 것은 아닙니다. 그럼에도 왜 항상 React 뒤에는 Node.js가 따라 붙는 것일까요? 그 이유는 Node.js가 React를 사용하기 더 쉽게 해주는 도구들을 내장하고 있는 오픈소스이자 JavaScript runtime environment이기 때문입니다. 더 자세하게 설명하자면 Node.js는 설치하는 경우 NPM(Node Package Manager)이 같이..
-
jsrender 사용시 화면이 나오다 만 경우Front-End 2021. 3. 2. 14:37
QA팀에서 어느 한 페이지에 화면이 나오다 말았다는 이슈가 들어왔다. 처음에는 육안으로 언뜻 보았을때 UI의 한쪽면이 안나오고 있길래 직감적으로 jsrender라는 플러그인을 사용해서 발생한 문제 인줄 알고 한동안 템플릿을 뜯었다 고쳤다 해봤다. 그러나 템플릿 자체에는 별다른 문제가 없었다. 콘솔과 크롬의 자바스크립트 디버깅을 이용해 jsrender의 render()함수를 통해 렌더링 해온 데이터를 출력해보면서 깨달았다. 그런데 이상한점은 랜더링 해온 데이터를 jquery의 html() 함수에 삽입한 경우에 데이터가 온전히 다 출력되지 않고 잘려서 DOM tree가 형성 되었다는 점이다. $("#content").html( $jstemplate.render(data)); 이때부터 나의 삽질이 시작되었다...
-
AJAX, Asynchronous Javascript with XMLFront-End/Javascript 2020. 9. 16. 11:45
Ajax 정의 (XML을 이용한) 비동기식 자바스크립트 HTTP 통신을 자바스크립트를 이용하여 비동기식으로 수행하는 것 자바스크립트로 HTTP요청을 보내고 XML 또는 JSON 파일 형식으로 응답을 받는 기술 자바스크립트의 내장객체인 XMLHttpRequest 를 사용 Ajax 사용 예 ) 이미 사용중이거나 탈퇴한 아이디입니다. (onblur, onfocus 이용 // onblur에 Ajax사용) 처음에는 안보여주다가 버튼클릭시 가져오는식으로 사용할때(게시판+댓글) +XHR 객체 XMLHttpRequest 객체 AJAX 통신을 하기 위한 자바스크립트 기본 내장 객체 IE 예전버전에서는 존재하지 않는 객체이며 ActiveX를 이용해 구현된다(크로스브라우징 처리가 필요) 개발자 도구 네트워크 > 콘텐츠 형식..