더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
총 8개의 일치하는 문서를 찾았습니다.
js[Typescript] 2편. 타입스크립트 클래스 생성 및 interface
타입스크립트를 사용하여 클래스(class)를 생성하고 사용하는 방법에 대하여 알아봅니다.# 타입스크립트에서의 클래스 사용하기타입스크립트에서도 자바스크립트와 동일하게 클래스를 선언하고 사용할 수 있습니다. 먼저 간단하게 Site라는 이름의 클래스를 하나 만들어 봅니다.class Site {}아무것도 없는 빈 클래스를 하나 생성하였습니다. 이제 클래스에 새로운 프로퍼티를 선언해보겠습니다.class Site { no: number;}class 내부에 no, url 두 개의 프로퍼티를 선언하였습니다. 하지만 타입스크립트에서는 다음과 같이 에러를 발생합니다. "Pr...
Last Modified : 2022-01-19 21:36:27
Created : 2022-01-17 19:12:00
react[react] className을 조건에 따라 여러개 다이나믹하게 선언하기
React 앱에서 클래스 이름을 조건에 따라 다이나믹하게 설정하는 방법을 알아봅니다. 어떻게 하면 될까요?# React 클래스 이름 선언하는 방법React는 다른 프레임워크는 문법이 많이 다른 편입니다. 특히 클래스 이름을 선언할 때 역시 방법이 조금 틀립니다. 그런데 자세히 보면 틀린게 아니라 자바스크립트 문법을 그대로 적용한다라고 볼 수 있습니다. 아래에서 자세히 알아봅니다.! 클래스 이름을 설정하기먼저 기본부터 알아봅니다. 그냥 조건없이 문자로 바로 선언하는 방법이죠~ i 태그가 있다면 아래와 같이 active 클래스를 추가할 수 있습니다.<i ...
Last Modified : 2020-03-24 20:29:50
Created : 2020-03-24 18:03:30
vuejsVueJS에서 스타일 적용하는 방법 알아보기
VueJS에서 웹어플리케이션에 스타일(style)을 적용하는 방법에 대하여 알아보고 어떻게 사용하고 활용할 수 있는 방안은 무엇인지 알아보려고합니다.# VueJS에 스타일(Style) 적용하기시작에 앞서 스타일(Style)음 무엇이고 왜 중요한지 알아야겠죠? 간략하게 알아봅니다.! 웹페이지에서 스타일 Style이란?스타일(Style)은 웹페이지를 더 이쁘게, 보기 좋게 그리고 더 편리하게 사용할 수 있도록 UI 디자인을 웹 어플리케이션에 맞게 입히는 과정이라 할 수 있습니다. 이때 css의 다양한 속성을 사용하여 적용이 가능합니다.VueJS에서는 이런 스타...
Last Modified : 2019-08-07 20:38:13
Created : 2019-02-07 11:30:23
vuejs[VueJS] v-bind:class 사용방법 및 예제
vuejs에서 클래스 이름을 저장된 scope 값에 따라서 다이나믹(dynamic)하게 적용하는 방법을 알아보려고합니다. vuejs 역시 다른 프론트엔드 엔진처럼 클래스명을 값에 따라 그때그때 다르게 적용할 수 있습니다. 이때 v-bind:class를 사용합니다.v-bind:class="{ condition }"위와 같이 조건식을 사용하여 원하는 클래스명을 추가하거나 제거할 수 있습니다. 예를들어 vuejs에서 사용되는 변수 hide의 값이 true인 경우에만 hidden이라는 클래스를 보여줄 수도 있고 아니면 status='active'인 경우에만 active 클...
Last Modified : 2019-01-04 00:36:06
Created : 2019-01-04 13:37:31- python
python class 선언 및 상속 이해하기
객체지향언어에서 클래스의 상속은 매우 중요합니다. 서버사이드 언어뿐만 아니라 프론트엔드 역시 상속 및 인스턴스의 개념을 잘 알고 활용하여야 하죠. 아래는 Python언어에서 클래스를 상속하는 방법을 예제와 함께 알아보려합니다.#Python에서 상속받기Python은 알기 쉬운 언어답게 상속 역시 매우 쉽습니다. 클래스를 선언 후 ()를 사용해 상속받을 부모클래스를 파라미터로 전달하기만 하면 됩니다.class ClassName(ParentClass):그럼 예제를 볼까요? 먼저 부모가 될 클래스가 필요합니다. 여기서는 baseClass라는 이름의 부모 클래스를 아래와 같이...
Last Modified : 2017-11-09 13:06:56
Created : 2017-11-06 07:55:35 - js
ECMA Script 2015, ES6에서 class를 사용하여 클래스 선언하기
ES 5 이후의 자바스크립트... 즉 ECMA Script 2015, ES 6부터는 자바스크립트에서도 클래스를 사용할 수 있게 되었습니다. ES 6에서 어떻게 클래스를 선언하고 사용하는지 자세히 알아봅니다.@ 이전에는 어떻게 클래스, 객체지향을 구현하였나...ES 6 이 후부터는 자바스크립트에서 클래스를 사용하여 선언할 수 있지만 이 전에는 프로토타입(prototype) 방식을 사용하는 방법으로 생성자 함수를 만들 수 있습니다. 하지만 클래스를 사용하면 더 쉽게 클래스를 만들고 확장하는게 간단하겠죠. 그렇다면 클래스는 무엇일까요?! 자바스크립트에서 클래스(class)...
Last Modified : 2022-01-19 14:54:56
Created : 2017-07-31 01:39:51 
angularjsng-class 속성 사용하기 ngClass 디렉티브 사용방법
AngularJS에서는 클래스명을 추가할때 가장 많이 사용되는 ngClass 디렉티브에 대하여 알아보려 합니다. ngClass를 사용하는 방법은 매우 다양합니다. 언제 ngClass를 쓸 수 있을까요?! ngClass 디렉티브를 사용하는 경우는?ngClass는 받아오는 데이터값이 다른 경우 서로 다른 class를 적용할 때 주로 사용합니다. 데이터는 scope 변수로 저장하고 html에서 이를 읽어서 각각 다른 class를 적용할 수 있는점이지요. 즉, html 내에서 유연하게 클래스를 사용하기 위해서 사용합니다. 이를 사용하여 쉽게 클래스명을 변경할 수 있...
Last Modified : 2018-08-01 10:36:20
Created : 2016-12-04 22:20:23
js[jQuery] toggleClass() 메소드 알아보기
제이쿼리의 toggleClass() 메소드 매우 자주 사용됩니다. 이 메소드를 사용하면 원하는 요소에 새로운 클래스를 추가하거나 제거하기를 매우 쉽고 간단하게 반복할 수 있습니다.toggleClass()는 설정된 클래스명을 해당하는 요소가 가지고 있는지 판단하여 해당 요소가 있으면 이를 제거합니다. 반대로 해당 요소가 없다면 이를 부여하는 매우 유용한 메소드입니다. 간단한 사용방법은 아래와 같습니다.element.toggleClass('클래스명')[ 1 ] toggleClass() 예제소스 코드 보기<html><head><style type...
Last Modified : 2017-12-22 04:15:20
Created : 2016-07-04 13:55:07