본문 바로가기
반응형

분류 전체보기323

Vue.js 인스턴스 - 옵션(속성) 및 라이프사이클 Vue 인스턴스 Vue를 사용하기 위해 필수적으로 생성해야 하는 기본 단위(new Vue();) Vue인스턴스는 Vue를 통해 생성하는 하나의 오브젝트 인스턴스를 사용함으로써 Vue에서 미리 선언되어 있는 속성,API를 재사용 및 활용 할 수 있음 Vue 인스턴스 옵션(속성) el: Vue가 실행되는 html DOM요소를 지정, CSS선택자를 사용(ex. id: #, class: . 접두어 사용) data: Vue인스턴스가 관리하는 데이터, Reactivity 반영(data 변경 시 화면 자동 반영) template: 화면에 표시할 요소(html, css 등) props: 부모컴포넌트의 데이터를 받을 수 있는 속성의 리스트([]) methods: 화면의 동작 및 이벤트 로직을 제어하는 메소드 선언 com.. 2022. 3. 16.
SSR vs CSR SSR(Server Side Rendering) - 완전한 형태의 HTML을 브라우저에서 받는 것 브라우저가 데이터를 요청하면 그림의 순서대로 브라우저 => 프론트 서버 => 백엔드 서버 (=> 데이터베이스) 를 거쳐 백엔드 서버쪽에서 즉시 렌더링 가능한 html파일을 클라이언트에 전달하는 방식 사용자가 요청 보냄 서버는 html을 생성하여 브라우저에 전달하고, html은 즉시 렌더링 됨. 하지만 js가 읽히기 전이라 상호작용(interactive)은 불가능 브라우저가 js다운로드 받았으나 아직 사용자가 상호작용(interactive)은 불가능 브라우저가 js 프레임워크를 실행하고 페이지는 상호작용(interactive) 가능 장점 초기 진입 속도가 빠름 SEO(Search Engine Optimizat.. 2022. 3. 16.
Vue.js란 무엇인가? - Hello World Vue.js 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크 MVVM패턴의 ViewModel에 해당하여, UI코드와 데이터제어 제어 로직을 분리 SPA(Single Page Application)를 구축하는데 이용 가능 View(html DOM): 사용자에게 보이는 화면. Model(JS): 데이터를 담는 용기, 보통 서버에서 가져온 데이터를 javascript 객체로 저장 ViewModel: View와 Model의 중간 영역으로 DomListener와 DataBinding을 제공하는 영역 DOM: HTML 문서에 들어가는 요소(tag, class, attribute 등)의 정보를 담고 있는 데이터 트리 DOM Listener: DOM의 변경에 대한 즉각.. 2022. 3. 16.
VSCode Prettier 사용 Prettier 코드를 분석하여 깔끔하고 일관된 코드 스타일을 유지할 수 있도록 해주는 Code Formatter Prettier 설치 vsc에서 좌측에 '확장' 메뉴를 클릭하고 "prettier"로 검색 후 "설치" 클릭 Prettier 설정 vsc에서 'Code > 기본설정 > 설정' 클릭 - 상단 검색창에 "editor format on save" 입력하고, 체크박스 체크(파일 저장 시 Formatter 적용) - 다음으로 상단 검색창에 다시 "editor default formatter" 입력하고, Default Formatter에서 "Prettier - Code formatter" 선택 2022. 3. 15.
그리스 로마 신화 - 에디스 해밀턴 지금까지 그리스 로마 신화에 대해 관심을 가져본적이 없었다. 그러다가 우연히 인문고전분야에 관심을 가지면서 서양 인문고전의 시작은 그리스 로마 신화라는 얘기를 여기저기서 봤고, 유명한 영화나 TV 등에서 그리스 로마 신화에서 영감을 얻은 작품들도 많이있고, 특히 책에서 많이 인용을 하고 있어서 점점 궁금해지기 시작해서 이번에 한번 읽어보게 되었다. 여러 그리스 로마 신화 관련 책 중에서 에디스 해밀턴의 책을 선택한 이유는 이 책 또한 그리스 로마 신화에 관한 책 중에서 시간을 이겨낸 고전으로 소개가 많이 되고 있고, 전체적으로 많은 이야기를 담고 있어 처음 읽기에는 부담이 없을 것 같았다. 또한, 그리스 로마 신화를 이야기 했던 시인들 작가들의 얘기를 종합하여 원작에 가장 가까운 내용을 취했다는 부분이 .. 2022. 3. 15.
SpringBoot ResourceLoader 사용해서 classpath 파일 읽기 SpringBoot에서 ResourceLoader를 사용하여 classpath 파일들을 읽을 수 있다. getResource()메소드에서 "classpath:" 접두어로 설정하면 target/classes에서 리소스를 찾아서 볼러온다 아래는 간단한 ResourceLoader 코드 샘플이다. Resource resource = resourceLoader.getResource("classpath:/static/file.txt"); // 절대 경로 System.out.println(resource.getURI().getPath()); // File내용 String으로 가져오기 1 (JDK 11이상) String str1 = Files.readString(Path.of(resource.getURI())) // .. 2022. 3. 14.
Elastic Stack HelloWorld(Elastic Cloud, EC2 filebeat설치) Elastic Stack - Elastic사에서 제공하는 로그관리 오픈소스 제품들의 모음 Beats - 다양한 종류의 데이터를 Logstash, Elasticsearch로 보낼 수 있는 데이터 수집기 - Metricbeat(시스템 지표), Filebeat(로그 파일), Packetbeat(네트워크 데이터) Logstash - Elasticsearch로 데이터 전송 전 가공하는 역할 - ex. Elasticsearch 형식에 맞게 변환, 개인정보 등 민감 데이터 삭제, IP주소 기반으로 지역정보 추가 등 Elasticsearch - Apache Lucene 검색 엔진 기반 데이터 저장, 인덱싱, 데이터 검색, REST API 제공 Kibana - 데이터 시각화(대시보드 등) Elastic Cloud 테스트.. 2022. 3. 13.
AWS CloudWatch Logs 적재(CWAgent) 지표를 통한 모니터링이 아닌 "로그"를 통한 모니터링을 지원 CloudWatch Logs 구성 로그 이벤트 - 독립적인 이벤트로 볼 수 있는 로그 모음 - ex. 클라이언트 요청부터 응답까지 쌓인 여러 줄의 로그를 하나의 이벤트로 볼수 있음 로그 스트림 - 동일한 소스에서 기록된 로그 이벤트들을 시간순으로 모아둔 스트림 로그 그룹 - 여러 로그 스트림을 하나로 모아둔 곳. - ex. 여러 인스턴스에서 발생한 로그들을 모아둔 그룹 CloudWatch Agent를 통한 Nginx Log 적재 * 기존에는 CloudWatch Logs Agent가 별도로 존재했지만 최근에는 CloudWatch Agent가 지표 및 로그를 동시에 처리 할 수 있음 - CloudWatch 로그그룹에서 '로그 그룹 생성' 클릭 - .. 2022. 3. 12.
반응형

티스토리툴바