몽땅뚝딱 개발자

📌 기본용어 태그(tag): 명령어의 형태가 괄호로 되어있는 것 요소(element): 같이 태그의 시작과 끝 마크업(markup): 요소를 사용하여 웹문서를 작성하는 것 속성(attribute): 요소에서 'href' 같은 것 빈 요소(empty element): 한 쌍의 태그가 아닌 하나의 태그로 되어있는 요소로 대표적으로 br, hr img input area meta link 등이 있다. 📌 마크업 작성 시 주의사항 인라인 요소는 블록 요소 안에 포함시키는 것이 좋다. DTD를 transitional(하위버전 호환)로 선언한 경우에는 통과되지만 strict(엄격한 표준 준수)로 선언한 경우 문법적 오류가 발생한다. 웹 표준 문서 작업 시 은 꼭 마크업 해주어야 한다. 보통 회사나 단체의 상호명(로..

◽ 디렉티브란? v-를 prefix로 갖는다. ◽ 디렉티브의 종류 v-text 요구값: string 엘리먼트의 textContent를 업데이트한다. {{ msg }} v-html 요구값: string 일반 html을 삽입하며, vue 템플릿으로 컴파일되지 않는다. 해당 디렉티브를 사용하여 작성하려는 경우 컴포넌트를 사용하는 해결법으로 다시 생각해보라고 한다. 사용자가 제공한 컨텐츠에서는 절대로 사용하지 말아야 한다. v-show 요구값: any true, false 여부로 엘리먼트의 display 속성을 전환한다. v-if / v-else-if / v-else 요구값: any 표현식 값의 true, false에 따라 엘리먼트를 조건부로 렌더링한다. 단, v-else의 경우 표현식이 필요없다. A B C ..

nth-child(n)는 부모안에 모든 요소 중 n번째 요소를 선택하는 선택자이다. 처음에 nth-child를 사용했을 때 자꾸 순서가 밀려서 짜증이 났던 기억이 있다. 같은 선택자를 알아서 선택해주는 줄 알았지만.. 그냥 안에 있는 모든 요소를 처음부터 세는 것이었다. 이렇게 나열된 html의 경우에 세번째 라는 명확한 위치가 주어지면 3번째 div에 적용된다. // html 1 2 3 // css .main:nth-child(3) { background-color: red; } 하지만 갑자기 다른 요소가 중간에 있으면 :nth-child가 읽는 index가 밀리게 되어 의도한 위치에 마크업을 적용할 수 없다. // html 1 갑툭튀 2 3 따라서 이런 경우 [선택자:nth-of-type(num)]을..

◽ 개요 의 id 속성과 의 for 속성의 value를 같은 값으로 연결하면, 클릭 시 체크박스가 "clicked" 상태가 된다. 아래 코드와 같다. 클릭 나의 경우 아래와 같이 이미지를 클릭할 때 해당 이미지의 체크박스가 클릭되도록 만들었다. 그리고 이미지를 클릭하면 태그에 노란색 선을 추가해서 클릭한 효과를 주도록 했다. ◽ 적용 순서 1. v-model로 데이터를 연결하고, 클릭 시 해당 체크박스의 value는 prodArr에 차례대로 들어간다. 2. prodArr을 검사하는 ‘checked’ 메소드를 통해 prodArr에 해당 value가 있는지 검사한다. 3. :class=“checked(item.name)”에서 return 값에 따라 checked 속성이 동적으로 할당된다. 📄 HTML // ..

◽ 웹서버(WEB)란? - HTTP 프로토콜을 통해 읽힐 수 있는 정적인 웹 리소스를 반환(처리) ex) HTML, 이미지, js 등 - Apache, tMax, WebtoB가 대표적인 예이다. ◽ 웹 어플리케이션 서버(WAS, Web Application Server)란? - DB에 접근하는 등의 동적인 웹 리소스를 반환(처리) ex) jsp, asp 등 - Tomcat, Jeus, tMax가 대표적인 예이다. ◽ 웹서버와 WAS를 분리하는 이유 - 분산처리를 위한 것이다. - 기능을 분리하여 서버 부하를 방지한다. - 물리적인 분리로 보안을 강화한다. - 여러 웹 어플리케이션을 하나의 웹 서버를 통해 서비스 가능하다. 출처 및 참조 왜 웹서버와 WAS를 분리하나요? [기본] WEB과 WAS의 차이 개..

자바스크립트의 경우 클릭한 값을 찾을 때 for, foreach를 사용하여 엘리먼트를 찾아야한다. Vue는 v-model을 사용하여 클릭 시 data에 바로 값이 바인딩되기 때문에 굉장히 편리하게 찾을 수 있다. 값 할당하기 클릭한 input 엘리먼트의 value가 data()에 선언된 'prodArr'이라는 배열에 삽입된다. ... ... 기본값 설정 v-model을 사용하는 경우 "checked"를 사용할 수 없다. 그래서 기본값을 세팅할 때는 v-model에 연결된 데이터에 input의 value를 미리 넣어두면 체크된 상태가 된다. ◽ radio, select의 경우 음료 커피 주소 티 ◽ checkbox의 경우 케이크 레드벨벳 케이크 당근 케이크 고구마 케이크 참고 폼 입력 바인딩 — Vue.j..

보호되어 있는 글입니다.

기본값이나 전영역의 컴포넌트, 페이지에서 공통적으로 사용하는 값일 경우 json 파일에서 불러왔다. 예를 들어 상품의 상세페이지 구현 시, 상품유형코드(ex. 'N', 'O')에 따라 단어(ex. '니트', '아우터')만 달리 출력하는 것이다. 당시 lodash도, Vue.js도, ES6 문법도 처음 사용했던 나는 json 파일과 _.filter()를 사용하여 알아서 착착 뿌려지는 값들을 보며 '정말..! 편리하다..! vue...! 정말 개발 친화적이다......!'하고 놀라고 즐거워했던 기억이 난다. 이 방식의 개인적인 장점은 공통파일에 한번에 모아놓으니 한번에 파악하기도 쉽고, 값을 변경할 때도 따로 API를 건드는 일 없이 json만 수정하면 됐기때문에 유지보수하기도 편하다는 것이다. json 파..

다른 페이지를 가거나 뒤로 가기를 했을 때도 입력 정보를 유지하기위해 Local Storage를 사용했다. 항상 쿠키를 사용해서 구현했다가 이번엔 다르게.... ◽ 로컬스토리지와 쿠키의 차이는 뭘까? Cookie Local Storage 용량 쿠키 하나 당 최대 4KB 최대 5MB 저장유형 문자열만 저장 가능 - Primitives Type(원시 타입) ex) Boolean, number, String, null, undefined 등) - Object 만료기준 - 만료기한이 있는 키-값 저장소이다. - 자바스크립트 코드를 통해 삭제해야한다. - 자동으로 삭제되지 않는다. - 캐시를 삭제하는 경우 삭제된다. 저장되는 위치 - 웹브라우저에 따라 다르다. - 내 컴퓨터에 물리적 위치에 저장된다. ex) C:..

v-model로 값을 바인딩하고 실시간으로 validation을 체크하여 글자수와 관련된 warning 문구를 띄워주고 싶었다. 이 때, 문제가 생기는데 영어는 상관없지만 한글 입력값의 경우 커서를 옮기거나 다른 곳을 클릭해야 최종 입력값이 바인딩되는 점이다. 제대로 바인딩하기 위해서 아래와 같은 방법을 사용한다. // 스크립트 영역의 methods에 작성 typing(e) { this.username = e.target.value; } 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.