Frontend 16

앵귤러 Can't bind to 'ngModel' since it isn't a known property of 'input' 오류 해결

문제 발생 앵귤러에서 양방향 바인딩을 하기 위해 ngModel 문법을 사용하려고 하니 아래 에러가 발생했다. Can't bind to 'ngModel' since it isn't a known property of 'input' 해결 방법 해결법은 매우 간단하다. 양방향 데이터 바인딩을 사용하기 위한 ngModel은 앵귤러 모듈에서 FormsModule 패키지를 import 해야 가져다 쓸 수 있다. 따라서 app.module.ts 파일에서 FormsModule 관련 정보를 추가한다. import { FormsModule } from '@angular/forms'; ... @NgModule({ imports: [ FormsModule ], }) 즉, 아래처럼 두 줄을 추가하면 에러는 사라진다. 앵귤러를 ..

Frontend/Angular 2024.03.19

앵귤러 프로젝트 생성 및 개발환경 설정하기

대표적인 프론트엔드 3대장은 리액트, 뷰, 앵귤러가 있다. 이 중 앵귤러 프로젝트에 투입 예정이라서 앵귤러에 대해 간단하게 공부해보려고 한다. (사실 앵귤러가 아니라 리액트를 하고 싶었던 건 안비밀🙉) SPA 앵귤러를 알기 위해서는 SPA(단일 페이지 웹 애플리케이션)의 개념이 중요하다. SPA는 서버에 요청할 때마다 전체 리소스를 로드하는 것이 아닌, Ajax 요청을 통해 필요한 부분만 렌더링하는 것이다. 앵귤러는 SPA 개발을 위한 자바스크립트 프레임워크이며 점차 브라우저에서 재사용 가능한 단위인 컴포넌트 기반으로 웹 애플리케이션 개발이 가능하게 된다. SPA 및 컴포넌트를 활용하는 대표적인 것이 바로 앵귤러인 셈이다. 앵귤러(Angular) 앵귤러(Angular)는 구글에서 만든 SPA 프레임워크이..

Frontend/Angular 2024.03.13

WebSquare5 유튜브 동영상 출력하기

웹스퀘어에서 유튜브 영상을 재생하기 위해 기능을 구현하다보니 작은 시행착오가 발생해서 이를 기록해두려고 한다. video 태그로 구현 웹스퀘어API 에서는 video 컴포넌트가 명시가 되어있어서 해당 컴포넌트를 사용할 수 있다고 생각했으나, 아직 video 컴포넌트를 정식 지원하지 않는다고 한다. 따라서 해당 object에 직접 접근할 수 없고, $("#video1")와 같이 jQuery 방식을 이용하여 접근해야 한다. var url = "https://youtu.be/dP0hwfPJoa4"; $("#video1").attr("src", url); 유튜브의 단축url로 구현 위와 같이 jQuery 방식으로 구현했는데도 영상이 재생되지 않았다. 찾아보니 유튜브 같은 경우는 iframe을 대신 사용해야 한다..

Frontend/WebSquare 2021.03.25

JavaScript 웹으로 SNS 공유하기 구현 예제(트위터, 페이스북, 카카오톡)

웹에서 SNS로 콘텐츠를 공유하는 기능을 구현해야 할 때가 있다. 트위터, 페이스북, 카카오톡 같은 SNS에서는 이를 공유하는 기능을 제공하고 있다. 이 기능으로 이미지, 링크, 멀티미디어 등 다양한 콘텐츠를 공유할 수 있다. 아이콘 추가하기 이미지 버튼으로 보여줄 아이콘 이미지를 다운로드 받는다. (트위터, 페이스북, 카카오톡의 아이콘 이미지) CSS 추가하기 다운받은 아이콘 이미지를 적용하기 위해 아래 CSS를 추가한다. 각 이미지 버튼에 아이콘을 매핑하는 작업이다. .link-icon { position: relative; display: inline-block; width: auto; font-size: 14px; font-weight: 500; color: #333; margin-right: 1..

Frontend/JavaScript 2021.03.24

JavaScript 텍스트를 클립보드로 복사하는 방법

텍스트 복사하는 기능은 웹으로는 어떻게 처리할까? execCommand 기능을 이용하여 매우 쉽게 구현할 수 있다. JavaScript로 구현하기 let dummy = document.createElement("textarea"); document.body.appendChild(dummy); dummy.select(); // 복사할 URL 선택 document.execCommand("copy"); // 클립보드에 복사 document.body.removeChild(dummy); // 복사한 URL 선택 풀기 alert("URL이 클립보드에 복사되었습니다"); 웹스퀘어에서 구현하기 ibxObj.select(); // 복사할 URL 선택 document.execCommand("copy"); // 클립보드에 ..

Frontend/JavaScript 2021.03.24

WebSquare5 웹스퀘어 시작하기

최근 프로젝트에서 WebSquare를 처음으로 사용하게 되었다. 프로젝트에서 사용하기 위해 WebSquare 공부를 시작하지만, 이 점을 항상 명심하려고 한다. 편하게 제공된 UI 툴을 쓰다 보면, 화면을 찍어내는 느낌과 웹 기술에서 점점 퇴보되가는 느낌을 받는다고 한다. 따라서 회사에서 UI 툴을 쓰더라도, 회사 밖에서 의식적으로 react, vue 등의 기술을 공부하는 습관을 들이자. 지금부터 유튜브 사용자 가이드, API를 통해 WebSquare의 기본적인 사용법을 적어보려고 한다. 웹스퀘어 인스웨이브사에서 만든 웹스퀘어는 웹표준을 따르는 UI/UX 개발툴로 현재 버전 5까지 나와있다. 함께 언급되는 툴로는 투비소프트의 Nexacro, xPlatform, 토마토시스템의 eXbuilder 등이 있다...

Frontend/WebSquare 2019.12.27