소소한 코딩 이야기 (28) 썸네일형 리스트형 도무지 풀리지 않는 app.vue에서 레이아웃 잡기(해결!) 드디어 프로젝트를 시작한다!! 한 지 하루만에 풀리지않는 수수께끼의 늪에 빠졌다. 왜!!! 왜왜!!!! 이 태그의 범위가 623px에 고정되어 더 늘어나지 않는것인지.....ㅠㅠㅠㅠ 헤더와 푸터, 그리고 메인화면을 배치하는데 까지는 성공! slot도 급하게 공부해서 적용해보고, Layouts를 이용하여 틀도 잡아보았지만 app태그의 크기가 고정되어 footer에 Contents의 내용이 묻혀버리는 현상이 계속 일어나고있다. 조금만 더 해보면 풀릴 것 같은데 같은데~~~ 하면서 이방법 저방법을 써보는데도 도무지 해결되지가 않는다. 오늘은 제발 풀렸으면 좋겠다 ㅠ =========================================================== 글 올린지 5분만에 해결되었습니다.ㅠㅠ.. <router-link>를 이용하여 네비게이션 메뉴 만들기 1. 연결 될 컴포넌트 만들기 ->router에 등록하여 사용 할 Component ->router 등록 없이 항시 보여질 Component 2. router/index.js 에 component 등록하기 3. App.vue에 생성한 컴포넌트 연결하기 App.vue파일은 localhost:3000으로 접속 했을 때 보여지는 페이지 입니다. 페이지에서 기본적으로 보여져야 할 헤더와 컨텐츠영역, 그리고 푸터를 화면에 보여질 순서에 맞도록 태그 안에 배치를 하였습니다. 여기까지 작성을 하면서 제가 가장 궁금했던 것은 과연 MainHeader.vue에서 네비게이션 메뉴에 페이지 이동 링크를 어떻게 걸어야 하는가 였습니다. 서칭 끝에 찾은 방법은 를 사용하는 것 이었습니다. (참고사이트 : https://ms4h.. Vue.js 단위테스트 에러 기록 1 (form 바인딩에러) 문제상황: Register Form의 입력과 데이터 모델의 바인딩을 검증하는 테스트에서 data로 전달된 값이 input태그의 value값으로 바인딩 되지 않는 현상 ->RegisterPage.vue ->RegisterPage.spec.js 실제 코드를 가지고 테스트를 진행 했을 때에는 data의 form 값이 input태그의 v-model에 바인딩되어 정상적으로 반영되는것이 확인되었으나, 단위테스트를 진행 할 경우에는 data에는 값이 정상적으로 전달되기는 했지만 그 값이 input태그의 v-model에 바인딩 되지 않았습니다. 정말 이 오류를 가지고 1주일을 넘게 고민해보고 찾아보았지만 명쾌한 답을 찾이 못했고 그러던 중, 아래의 사이트에서 다음과 같은 내용을 발견할 수 있었습니다. https://v.. [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.. [Clone Project] autosize로 내용 더보기 기능 구현하기 오늘은 프로젝트를 진행하면서 겪은 위기 베스트에 드는 '내용 더보기'기능 구현하기에 대해서 기록을 남겨볼까 합니다. 보통 '더보기'기능과 관련해서 검색을 해보면 80%이상이 '게시글 더보기'에 대한 글만 나오는 것을 확인할 수 있었습니다. 글이 너무 길어 숨겨놓은 내용을 버튼 등을 눌러 모든내용이 보이도록 하는 기능은 웹 페이지를 이용하면서 알게모르게 많이 쓰인 부분인 것 같은데.. 막상 이 기능을 구현한 케이스가 없어서 좀 아쉬웠습니다. 우선 아래는 제가 최종적으로 구현한 화면입니다. 맨 처음 컨텐츠의 상세보기 화면에 들어가 고객후기 탭버튼을 누르면 나오는 화면입니다. 사실 내용이 이게 전부인 것 같지만..!!! 오른쪽의 '더보기를 누르게 되면 아래의 화면처럼 아래 숨겨져 있던 모든 내용이 나타나는 것.. [CloneProject] 여러개의 file태그로 이미지 업로드하기 안녕하세요, 우주콩입니다. 오늘 업로드할 내용은 저를 정말정말X100000 힘들게 만들었던 MultipartFile에 대한 이야기 입니다. 이 기능을 구현할 화면은 Admin Upload페이지 이며, 오로지 Admin만 접근이 가능하기 때문에 관리자페이지 내 컨텐츠게시판에서 글쓰기버튼을 통해 진입 할 수 있습니다. 위의 이미지와 같이 Admin이 업로드 해야하는 이미지는 총 4개였으며, 기존에 여러 블로그에서 기술된 것 처럼 하나의 태그로 여러개의 이미지를 한번에 선택해서 올리는 것이 아닌 여러개의 태그로 파일을 선택 한 후에 form에 담아 한번에 전송해야만 했습니다. (저와 같은 방식으로 구현하는 파일업로드가 많을 것이라 생각했는데 이러한 경우를 찾기가 너무 어려워서 놀랐습니다.^^;;) 우선 jsp.. 이전 1 2 3 4 다음
