본문 바로가기

전체 글

 (36)
[Vue.js] MVVM 패턴과 관련 용어 정리 1. MVVM 패턴이란? - MVVM 패턴이란 화면을 Model - View - View Model 로 구조화 하여 개발하는 방식을 의미 2. 왜 MVVM을 사용하는가? - 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 좀 더 직관적으로 이해 할 수 있으며, 유지보수가 편리해 지기 때문. 3. MVVM의 구조도와 용어 - 뷰 (View) : 사용자에게 보이는 화면 - 돔(DOM) : HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리 - 돔 리스너(DOM Listener) : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 - 모델(Model) : 데이터를 담는 용기. 보통 서버에서 가져온 데이터를 자바스크립트 객체 형태로 ..
[JavaScript200제] 초급 016. 숫자형 이해하기 ~ 029. 객체 이해하기 [ 016. 숫자형 이해하기 ] ● 숫자형(Number) : 정수, 부동 소수점, 작은 수, 큰수 등 여러유형의 숫자 > 자바스크립트는 다른 언어와는 달리 숫자의 형태를 구체적으로 나눠 정의하지 않음 > 국제 IEEE 754 표준에 따라 정의돤 방식으로, 숫자값을 64bit 정보로 저장. 숫자는 비트 0~51, 지수는 비트 52~62, 부호는 비트 63에 저장 > Infinity : 수학적으로 무한대를 의미. 어떤 수보다 가장 큰 수를 뜻함. > NaN : 산술 연산의 결과가 유효하지 않은 값 또는 숫자가 너무 커서 표현 할 수 없는 값일 때 NaN으로 표현. [ 017. 문자열 이해하기 ] ● 문자형(String) : 값이 텍스트 혀애인 데이터를 의미 > 큰따옴표( "" ), 작은따옴표( '' ), 억..
[JavaScript200제] 입문 006 ~ 015 [ 006. 자바스크립트 문장 배우기 ] 1. 자바스크립트 코드를 구성하는 기본단위 => '값', '변수', '연산자', '키워드' 2. 표현식(Expressions) : 연산자를 통해 값을 생성하거나, 변수 또는 함수 인자로 값을 넣을 때 표현식 사용. 3. 명령문(Statements) : 행동 또는 행위를 수행하게 하는 코드. 'if, if-else, for, switch 등'. [ 007. 자료형 이해하기 ] 자바스크립트는 크게 ①원시 타입(Primitive Data Type)과 ②참조 타입(Reference Data Type) 으로 구분 1. 원시타입 : 값이 변수에 할당 될 때 메모리상에 고정된 크리고 저장. 즉, 해당 변수가 직접 값을 보관 >>종류 불린형(Boolean) > 문자형(Strin..
Vue.js 독학해보기!! (feat. Doit! Vue.js 입문) 이번주는 프론트엔드 언어인 Vue.js 를 공부해보겠다며 1일 1포스트도 못한채 공부삼매경이었습니다. 계속 프론트엔드 언어도 함께 공부해야겠다 생각만 했지 실천으로는 못옮겼었는데..ㅎㅎ 가계부 프로젝트를 시작하려다보니 JAVA와 SpringFramework만으로는 좀 무거운 느낌도 있었고, 프론트 부분을 구현하는데 있어 아쉬움이 많이 있어서 다른 언어로 구현해보는것은 어떨까 하며 찾던 중 Vue.js를 접하게 되었습니다. Vue의 경우 자바스크립트, CSS, HTML의 기본지식만 있어도 시작할 수 있을 만큼 처음 접하는 사람들이 금방 익힐 수 있다는 말에 '오? 그럼 나도?!!' 하며 당차게 책부터 구입을 하고 공부를 시작하였습니다. 그리고 일요일에 맛보기로 Vue.js 강좌글을 몇개 찾아보고 월요일에!..
[Clone Project] autosize로 내용 더보기 기능 구현하기 오늘은 프로젝트를 진행하면서 겪은 위기 베스트에 드는 '내용 더보기'기능 구현하기에 대해서 기록을 남겨볼까 합니다. 보통 '더보기'기능과 관련해서 검색을 해보면 80%이상이 '게시글 더보기'에 대한 글만 나오는 것을 확인할 수 있었습니다. 글이 너무 길어 숨겨놓은 내용을 버튼 등을 눌러 모든내용이 보이도록 하는 기능은 웹 페이지를 이용하면서 알게모르게 많이 쓰인 부분인 것 같은데.. 막상 이 기능을 구현한 케이스가 없어서 좀 아쉬웠습니다. 우선 아래는 제가 최종적으로 구현한 화면입니다. 맨 처음 컨텐츠의 상세보기 화면에 들어가 고객후기 탭버튼을 누르면 나오는 화면입니다. 사실 내용이 이게 전부인 것 같지만..!!! 오른쪽의 '더보기를 누르게 되면 아래의 화면처럼 아래 숨겨져 있던 모든 내용이 나타나는 것..

티스토리툴바