Happy coding

@mixin 은 Sass 언어 전체에서 가장 많이 사용되는 기능 중 하나이며, 재사용성과 DRY(반복을 하지 마라) 컴포넌트의 핵심이다. 버튼, 아이콘 등을 Class로 만들어 놓고 필요한 태그 스타일링에 따라 클래스를 추가로 넣어주는 경우가 있었는데 @mixin 을 사용하면 이러한 부분들을 손쉽게 반복적인 작업을 할 수 있다. mixin 을 선언할 때는 @mixin 지시자를 사용하며, 적용 시 @include 지시자를 사용한다. 선언 및 적용 Sass // 버튼 스타일링 // @mixin 선언 @mixin button { border-color: #eaeaea; border-width: 1px; cursor: pointer; padding: 0.75em 1em; height: 50px; text-ali..

세상에는 다양한 서비스들이 존재하며, 각각의 다양성과 복잡성이 공존한다. 마찬가지로 그것을 코드로 표현하려고 한다면 조금 더 명확한 의미를 부여하여 전달하는 것이 필요하다. 쓰임새에 맞게 적절한 의미와 elements를 가지고 HTML 문서를 작성하면 웹 접속 장비에서도 해석이 수월해진다고 한다. 이번 시간에는 HTML 을 조금 더 의미있게 작성하기 위해 role 이라는 속성에 대해서 알아보자! role은 웹 접근성을 위해 나왔으며 위젯, 구조 및 동작에 대한 의미 정보를 올바르게 전달을 하기 위해 나왔습니다. 즉 elements의 확장 개념으로 좀 더 명확한 구조와 의미를 부여하는 역할을 합니다. 참조 이미지: https://www.w3.org/TR/wai-aria-1.1/ Role은 아래의 카테고리를..

아이오닉에서 카카오 플러그인을 설치 후 Android 실행 시 아래와 같은 에러들이 나온다. 에러의 내용들을 상세히 보면 아래와 같다. TextView textView = convertView.findViewById(KakaoResources.login_method_text); // View cannot be converted ImageView imageView = convertView.findViewById(KakaoResources.login_method_icon); // View cannot be converted ListView listView = dialog.findViewById(KakaoResources.login_list_view); // View cannot be converted But..

검색 노출을 위해 sitemap.xml, robots.txt를 사이트에 노출시켜야 합니다.Angular에서도 당연히 노출을 시켜줘야겠죠 ?방법 절대 어렵지 않습니다 :)시작해보겠습니다. 1. src 폴더 안에 sitemap.xml, robots.txt 파일을 넣습니다.2. angular.json 파일에 robots.txt와 sitemap.xml을 추가합니다. 이상 sitemap, robots.txt 등록하는 모든 세팅은 끝났습니다.오늘도 해피 코딩하세요 :)감사합니다 !

ES5 에는 원시 타입(primitive data type)인 Boolean, undefined, Number, String, null 그리고 객체 타입(object type)인 Object 를 가지고 있었다. ES6 부터 새로운 친구 Symbol 타입이 생겼다. Symbol 타입에 대해 알아보자. Symbol 생성Symbol 은 고유 값만 가지는 원시 타입(primitive data type)의 값이며, 객체 프로퍼티에 대한 식별자로 사용한다. Symbol 생성 시 Symbol() 을 사용하며, 다른 원시 타입의 객체 생성(new Boolean, new String, new Number)과 다르게 new 써서 생성을 하지 않는다. const createSymbol = Symbol();const numb..

JavaScript는 모두 알다시피 단순한 웹 사이트를 만들기 위한 보조적인 기능을 수행하기 만들어졌다. 그래서 다른 언어와 비교해 보았을 때 문제 되는 점들이 많았다. 그 중 제일 아쉬웠던 부분은 Module 기능을 지원하지 않는 것이었다. 왜 Module 기능을 지원하지 않은 것이 아쉬운 부분인지 한번 알아보자. Module 이란 ?구현 세부 사항을 캡슐화하고 공용으로 필요한 API를 노출시킨다. 즉, 다른 코드에서 쉽게 로드하고 사용할 수 있도록 재사용 가능한 코드 조각이다. Module은 기능별로 분리되어 작성되므로 유지보수 및 효율성을 더 높일 수 있다.Module의 특징은 ?1. 코드 추상화어느 특정한 Module에 기능을 위임하여 실제 구현의 복잡도를 이해할 필요가 없다.2. 코드 캡슐화공용..

Tistory에 code block을 스킨을 적용해보자. 1. 관리자 페이지 -> 스킨 변경(메뉴 - 꾸미기)를 클릭하여, html 편집을 누릅니다. 2. 아래의 JavaScript 코드를 삽입합니다. 여기서 skin은 여러 가지 종류가 있으므로 아래의 페이지에서 확인 후 "?skin=desert" 를 수정해주시면 됩니다. https://cdn.rawgit.com/google/code-prettify/master/styles/index.html 3. 사용글쓰기 에디터에서 오른쪽에 HTML을 클릭을 합니다. 아래와 같이 코드 사이에 사용하면 됩니다. 원하는 코드 삽입 이상 포스팅을 마치겠습니다.궁금하신 점이 있으시면 아래에 댓글 달아주시면 답변 드리겠습니다. 감사합니다.오늘도 해피코딩 하세요 !

이번 시간에는 NestJS 프로젝트를 생성하고 로컬 환경에 띄어봅시다.1. NestJS CLI를 통한 간편한 설치합니다. (저는 예시로 프로젝트 이름을 happycoding 으로 하였습니다.)$ npm i -g @nestjs/cli $ nest new (프로젝트 이름) CLI 실행 시 description(설명), version(버전), author(저자)를 물어보는데 원하는 답변을 해주면 됩니다.저는 아래와 같이 설정하였습니다. description: 해피코딩version: 0.0.1author: 박진우 그 후 package manager를 어떤 것(npm, yarn)으로 사용할 건지 물어보는데 저는 npm을 사용하기 때문에 npm을 적었습니다. 2. CLI를 사용하지 않고 프로젝트 설치첫 번째는 Gi..