메이쁘

안녕하세요. HTML5에서 사용할 수 있는 Data 태그에 대해 알아보겠습니다. HTML5부터 DOM HTML 태그안에 데이터값을 삽입할 수 있게 되었습니다! 그전까지는 id값 또는 value값에 구분자로 구분해가며(ex. id_name_age) 이를 split해서 데이터를 사용하거나, 안에 값넣어서 이 태그를 get해오는 방식을 사용했었는데요.. 완전 신선했습니다! 바로 예시를 들어보겠습니다. 라는 div 가 있다고 가정합시다. (data의 tag 값은 무조건 소문자여야 합니다. HTML 태그 방식 준수) 이를 // jquery var temp = $("#temp").data("nameAndAge");// 메이쁘,secret $("#temp").data("nameAndAge", "메이쁘,비밀");// ..

안녕하세요. 보통 jsp에서 결론은 $(document).ready 가 window.onload 보다 먼저 호출됩니다. 그 이유는 $(document).ready 는 DOM 트리만 완성되면 바로 호출하기 때문입니다. 즉, 웹 페이지를 구성하는 단계에서 DOM 트리를 만든 이후, CSS나 외부 import한 js, 이미지, iframe 등을 추가적으로 로딩한 다음 웹 페이지가 완성되는데요. 이렇게 모든 구성 요소를 로딩(메모리에 적재 후 화면에 출력) 시킨 후에 호출하는 함수가 window.onload 이기 때문입니다. 그렇기 때문에, $(document).ready 는 빠른 실행 속도가 필요할 때 사용되며, 중복해서 여러 개를 만들어두면 순차적으로 실행됩니다. 반면, window.onload는 단 하나의..

안녕하세요. 지난 글에서는 ReactJS를 사용하여 View를 만들고, 포트를 열어 웹에 띄워보는 것까지 진행했습니다. 그래서 터미널에서 npm start 명령어로 클라이언트 브라우저(로컬호스트 서버 및 포트) 를 출력할 수 있었죠. 이번 글은 뷰가 아닌 서버를 만들어 서버를 열고, 서버 뷰 통신하는 것 까지 진행하는 단계를 설명드리겠습니다. 참고로, 서버는 NodeJS 방식으로 사용할 것입니다! 이전 글을 한 번 보고 올래요! 서버 통신에 필요한 모듈 설치하기 - 기본적으로 import 할 모듈은 크게 3 가지가 있습니다. - express, body-parser, cors - 하나하나 설치하면서 이 모듈이 어떤 역할을 하는지 간단하게 짚고 넘어가겠습니다. express - NodeJS의 웹 어플리케이..

안녕하세요. React하면 사용하는 컴포넌트. class TestComponent extends React.Component { render() { return ( Hello React! ) } } 와 같이, 컴포넌트를 만들기 위해 React.Component 를 extends 해서 사용하는데요. 이 React.Component 에도 안드로이드의 Activity, iOS의 AppDelegate 처럼 생명 주기(Life Cycle) 가 존재합니다. 이 생명 주기에 대해 알아보겠습니다. 컴포넌트의 전체 생명 주기 컴포넌트가 생성되고, 업데이트(새롭게 랜더링) 되며 제거되는 전 단계를 요약한 사진입니다. (생성 -> 업데이트 -> 제거) 이렇게 보게 되면 헷갈릴 수 있으니까, 하나씩 정리해보겠습니다. 그 전에..

안녕하세요. CORS 대신 proxy 를 사용해 클라이언트에서 서버 사용을 가능하게 하고, 더 편하게 만들어봅시다. proxy란? - 클라이언트가 자기 자신 안에서 다른 네트워크 서비스에 간접적으로 접근하게 해주는 것. - 보통, 시스템이나 프로그램을 사용한 것을 proxy, 서버를 사용한 것은 proxy server 라고 하는데 요즘 거의 대부분은 proxy server를 사용하기 때문에 proxy server 를 proxy 라고 부르기도 합니다. - 즉, 클라이언트 -> 서버 로 바로 접근할 수 없고, 클라이언트 -> 프록시 -> 서버 과정을 통해 클라이언트가 서버에 접근할 수 있습니다. **** 자바스크립트는 정책 상 같은 출처(프로토콜, 도메인 이름, 포트) 로만 접근이 가능하기 때문에, Reac..

******************** MAC 사양 : MacBook Pro(16인치, 2019) 프로세서 : 2.6 GHz 메모리 : 16GB ******************** 안녕하세요. React JS는 간단히 설명드리자면, Facebook에서 개발한 웹 / 앱의 View를 만들기 위해 사용하는 JavaScript 기반 라이브러리 입니다. 대표적인 React JS의 특징은 1) 가상 DOM 사용 2) 선언형 3) 컴포넌트를 활용한 웹 / 앱 의 View 제작 가능 4) SPA(Single Page Application) *** SPA에 대해 헷갈리시나요? [WEB CS] SPA(Single Page Application) 에 대해 간단 개념 정리! 안녕하세요. 스파 브랜드의 그 SPA가 아닌 웹에..

안녕하세요. Spring Framework 를 사용하다보면 MVC 중 컨트롤러에서 자주 사용하는 이 @Autowired 에 대해 알아보려 합니다. 예를 들어 @Autowired private TempBc tempBc; 이렇게 사용하곤 하는데요. 왜 저기서 @Autowired 가 사용되었을까? 궁금해서 찾아보며 공부해봤습니다. 그리고 제가 이해한 내용을 작성하면서 저와 같이 궁금한 사람들에게 정보를 나눠드리고자 포스팅하게 되었습니다. @Autowired 정의 - 알아서 의존 객체(Bean) 를 찾아서 주입한다. - 의존 객체(Bean) 가 2개 이상이면 오류를 발생시킨다. - 보통, 인터페이스 선언 시 사용된다. 잉?? 주로 다른 포스팅 글에서는 이렇게 정의내리고 끝나는데요. 의존 객체가 무엇인지, 어떻게..

안녕하세요. 개발 또는 프로젝트 설계 시 듣는 용어 중 하나인 CI과 DI. 주로 로그인과 회원가입 개발할 때 알아두면 좋은 용어 입니다. 큰 규모의 프로젝트에서는 반드시 고려해볼 사항이니까요. CI (Connection Information) ? - 본인확인(본인인증) 기관에서 개인별로 고유하게 부여하는 개인 식별 정보. *** 본인인증 기관은 대표적으로 NICE평가정보, SCI평가정보 등 이 있습니다. - 어느 업체(또는 사이트) 에서든지 개인 별로 유일한 식별 정보를 제공받습니다. 즉, A라는 사람이 티스토리, 네이버, 구글 사이트에서 본인인증을 진행했을 시, CI는 전부 "temp" 로 같습니다. - 온라인 주민등록번호 라고 생각하면 됩니다. - 총 88 Byte로 구성되어있습니다. - 핸드폰, ..

안녕하세요. 스파 브랜드의 그 SPA가 아닌 웹에 사용하는 SPA 에 대해 다뤄보겠습니다. SPA(Single Page Application) ? - 페이지가 하나인 어플리케이션 (!) - 주로 페이지 이동 시 Ajax로 동적 데이터를 요청하고, 받은 json 결과를 View에 바로 뿌려주는 Application. 그래서, 페이지는 하나. SPA 사용 이전까지는 페이지 요청 시 웹 서버에서 HTML을 만들고, 꾸미고 해서 그걸 받아 렌더링했었습니다. (뷰는 서버 - 사이드에서 담당) 그 결과, 웹의 규모가 커질수록 데이터 전송 과부하로 점점 속도가 느려졌습니다. 이를 해결하기 위해 SPA가 나왔는데요. 서버 단에서 HTML을 만들어서 클라이언트는 그 결과만 화면에 출력했다면, SPA는 클라이언트 - 사이..

안녕하세요. 웹 개발할때 듣는 쿠키, 세션, 그리고 캐시에 대해 정의와 사용 이유, 동작 원리에 대해 알아보겠습니다. 쿠키와 세션이 대비되는 차이점이 있고, 캐시는 쿠키와 용도가 비슷하지만 조금은 차이가 있습니다. 하나씩 알아볼까요? Cookie (쿠키) - 웹 브라우저가 별도의 쿠키 저장소에 보관하는 데이터 - 웹 서버에서 웹 브라우저에게 정보(데이터)를 전송하며, 정보의 유효기간을 지정할 수 있습니다. - 유효기간동안 웹 브라우저의 쿠키 저장소에 쿠키가 저장되고, 유효기간을 지정하지 않으면 웹 브라우저가 닫힐 때 삭제됩니다. *** 유효기간 미지정 시 메모리에 기록되기 때문에 웹 브라우저 종료 시 날라갑니다. - 바꿔말하면, 유효기간 이내에는 웹 브라우저를 닫아도 삭제가 되지 않습니다. *** 클라이..