본문 바로가기

분류 전체보기155

[CSS] CSS 선택자 정리 - 가상 클래스 가상 클래스는 클래스 or 태그명 선택자 뒤에 콜론(:)을 붙여서 표시하는 특별한 요소의 상태, 요소의 순서를 기준으로 자식 요소를 선택하는 방법이다. 1 상태 가상 클래스 선택자 :link, :visited, :hover, :active 는 링크 요소(마우스 클릭에 반응하는 요소)의 다양한 상태를 표현하는데 사용할 수 있는 가상 클래스이다. :link 방문하지 않은 링크를 선택 a:link{ color:red; } :visited 사용자가 방문한 링크를 선택 a:visited{ color:green; } :hover 마우스를 위에 올린 상태 a:hover{ color:orange; } :active 마우스로 클릭한 상태 a:active{ color:coral; } ※ 주의할 점! 링크 클래스들은 스타일.. 2021. 9. 15.
[IT 용어 정리] 비즈니스 로직이란? 1 로직이란? 어떤 프로그램을 만들 때의 논리적인 흐름. 2 비즈니스 로직이란? 홈페이지 회원가입을 예로 들어본다. 유저는 회원가입 폼에 양식을 입력하고 회원가입 버튼을 누르면 회원가입이 진행된다. 개발자는 이 과정들을 구현하기 위해 생각보다 많은 코드를 짜야한다. 이 때 아이디 중복찾기를 예시로 들면 아래와 같은 비지니스 로직이 작성된다. 1. 회원이 작성한 아이디 값을 저장 2. 회원정보가 있는 데이터베이스 연결 3. 데이터베이스에 회원이 작성한 아이디 값이 있는지 중복검사 4. 회원의 아이디가 이미 있는지 없는지 여부를 데이터화 하여 저장 5. 데이터베이스 연결 끊기 6. View 영역에게 가공된 데이터 전달 유저가 바라는 결과물을 올바르게 도출하기 위해 비지니스 로직을 잘 구상해야 한다. 비지니스.. 2021. 9. 14.
[Vue] Watch 속성 1 Watch 속성 computed속성 vs watch 속성 watch를 사용했을 때보다 computed를 사용했을 때 코드가 더 짧다. 최대한 computed 속성을 우선적으로 사용하고 불가피할때 watch를 사용하는 것이 좋다. watch 속성 {{message}} Click {{updated}} 결과값 : 클릭 이벤트 후 : 2021. 9. 12.
[Vue] Computed 속성 1 computed 속성 너무 많은 연산을 템플릿 안에서 사용하면 코드가 비대해지고 유지보수가 어렵다. {{ message.split('').reverse().join('') }} 결과값 : 요세하녕안 위와 같이 긴 연산자는 computed로 처리해줄 수 있다. {{ reverseMessage }} 결과값 : 요세하녕안 computed로 처리해줄 때는 함수와 달리 {{ }} 중괄호 안에 computed의 이름만 넣어주면 된다. 그래서 이때 드는 의문은 '그냥 함수로 처리해주면 되는거 아닌가?' 라는 생각이 든다. {{ reverseMessage() }} 함수로 처리해주면 함수를 실행시키기 위해 이름 뒤에 ()소괄호만 넣어주면 똑같이 실행된다. 그렇다면 computed와 methods의 차이는 뭘까? co.. 2021. 9. 12.
[Vue] 데이터 양방향 바인딩 (Data Two Way Binding - v-model) 1 데이터 양방향 바인딩 텍스트를 입력했을 때 미리보기(양방향 바인딩) {{text}} Submit 결과값 : @keyup 은 v-on:keyup을 골뱅이를 통해 표현할 수 있다. input 내에서 keyboardevent가 일어나며 console.log를 통해 확인했을 때 target-value 값이 input 안의 내용임을 알 수 있었다. 그래서 text 객체를 event.target.value값과 데이터바인딩을 시켜주면 input에 문자를 쳤을 때 {{text}}의 값이 똑같이 입력되는것을 볼 수 있다. 그런데 이러한 양방향 바인딩 과정을 더 쉽게 표현할 수 있다. 그것이 바로 v-model...! {{text}} Submit 결과값 : 2021. 9. 12.
[Vue] 이벤트(Event) 1 이벤트 이벤트란? Click Me 보통 자바스크립트로 줄 때는 이런 형식으로 이벤트를 줄 수 있다. 그렇다면 뷰에서는?? Click Me 결과값 : v-on: 지시어를 이용해서 자바스크립트 이벤트를 사용할 수 있다. 2 이벤트 응용 버튼을 누르면 숫자에 1씩 더하고 뺄 수 있는 이벤트 {{year}} 더하기 빼기 결과값 : 클릭 이벤트를 이용해서 plus 함수를 눌렀을 때는 년도가 올라가고 minus 버튼을 누르면 년도가 내려가도록 이벤트를 설정할 수 있다. 제출했을 때 알림창으로 'submitted!'를 알려주는 이벤트 Submit 결과값 : 3 이벤트 수식어 event.preventDefalut() 같은 메서드를 사용해줄 때 수식어를 이용할 수 있다. v-on:click.prevent 인사하다 무.. 2021. 9. 12.
반응형

티스토리툴바