반응형

1) CDATA로 감싼 JAVASCRIPT부분이 의도치 않게 XML Parser 에 의해 잘못 인식되는 것을 막기 위함.
2) XHTML이 아닌 HTML로 인식되는 경우에도 JAVASCRIPT가 문제없이 동작하도록 하기 위함.
3) javascript안에서 태그를 사용할 경우 CDATA 선을 해줘서 오류처리를 막기 위함.

 * 사용예제
<script>
//<![CDATA[
 JAVASCRIPT
//]]>
</script>

 //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오톡 링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    Kakao.Link.createTalkLinkButton({
      container: '#kakao-link-btn',
      label: '카카오링크 샘플에 오신 것을 환영합니다.',
      image: {
        src: 'http://dn.api1.kage.kakao.co.kr/14/dn/btqaWmFftyx/tBbQPH764Maw2R6IBhXd6K/o.jpg',
        width: '300',
        height: '200'
      },
      webButton: {
        text: '카카오 디벨로퍼스',
        url: 'https://dev.kakao.com/docs/js' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.
      }
    });
  //]]>

 

가끔 JAVASCRIPT 소스를 보다보면 아래처럼 스크립트 태그 내부에 <!--  -->로 영역을
잡아놓은 소스를 볼수있습니다.
 
<script>
<!--
  스크립트 내용
-->
</script>

 

이와 같이 짜여진 이유는 자바스크립트가 만들어진 초창기에 웹브라우저가

자바스크립트로 인식하지 못하고 html로 인식하여 인터프리팅 하는 것을 방지하기 위해서였습니다.

html 주석으로 감싸 스크립트 부분을 주석으로 인식하게 하는 것이죠.

하지만 현재에는 거의 사용하지 않는 방식이며 대신 

 

<script>

//<![CDATA[

스크립트 내용

//]]>

</script>

 

위와 같은 방식으로 변하였습니다.

웹 브라우저가 자바스크립트를 충분히 인식할 만큼 발전 하였지만 아직도 구분을 해주는 이유는 무엇일까요?

그것은 자바 스크립트를 인식을 하기는 하지만 

브라우저가 해당 페이지를 XHTML이 아닌 HTML로 인식하게되면 작동하지 않기 때문입니다.

(구 버전의 브라우저에서는 Content-type을 정해주지 않으면 정말 HTML로 인식하는 브라우저(IE)가 있었습니다.)

 

또 다른 문제점은 XML Parser에 있는데 XML Parser는 < 를 새로운 엘리먼트로 인식하며

&는 문자 엔티티로 인식하기 때문에 파싱중 에러로 인식합니다.

그래서 자바스크립트 부분만 CDATA( Unparsed Character Data)로 감싸서 XML Parser로 부터 자유로워질 수 있게 됩니다.

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] 엔터키 입력 이벤트, KeyboardEvent keyCode  (0) 2023.05.26
[VS Code] 인코딩 변경  (0) 2023.05.09
9 Projects You Can Do to Become a Front-End Master in 2023  (0) 2022.11.02
[javascript] GoJS, A Web Framework for Rapidly Building Interactive Diagrams  (0) 2022.11.01
[jQuery] Checkbox 컨트롤 (체크, 체크여부, 전체체크 등)  (0) 2022.10.31
반응형

9 Projects You Can Do to Become a Front-End Master in 2023

https://levelup.gitconnected.com/9-projects-you-can-do-to-become-a-front-end-master-in-2023-a4389153148c

 

9 Projects You Can Do to Become a Front-End Master in 2023

e-commerce, blog, app, and more!

levelup.gitconnected.com

9 Projects You Can Do to Become a Front-End Master in 2023

Photo by Pankaj Patel on Unsplash

Introduction

Whether you’re new to programming or already an experienced developer in this industry, learning new concepts and languages/frameworks is
mandatory to keep up with the rapid changes.

Take, for example, React — open-sourced by Facebook just a shy four years ago, it’s already become the number one choice for JavaScript devs around the globe.

Vue and Angular, of course, also have their legitimate follower base. And then there are Svelte and universal frameworks like Next.js or Nuxt.js. And Gatsby and Gridsome and Quasar … and, and, and.

If you want to shine as an expert JavaScript developer, you should at least have some experience in different frameworks and libraries — besides doing your homework with good, old JS.

To help you become a front-end master, I have collected nine projects, each with a specific topic and a different JavaScript framework or library as a tech stack that you can build and add to your portfolio. Remember, nothing helps you more than actually building stuff so go ahead, sharpen your mind, and make this happen.

 

Build a Movie-Search App Using React (With Hooks)

The first thing you could start with is building a movie-search app using React. Below is an image of how the final app will look:

What you’ll learn

In building this application, you’ll improve your React skills using the relatively new Hooks API. The example project uses React components, many hooks, an external API, and, of course, some styling via CSS.

Tech stack and features

  • React with hooks
  • create-react-app
  • JSX
  • CSS

Without using any classes, this project gives you a perfect entry point into functional React and will definitely help you in 2020.

You can find the example project here. Follow along with the tutorial, or give it your flavor.

 

Build a Chat App With Vue

Another great project for you is to build a chat app using my favorite JavaScript library: VueJS.

The app will look something like this:

What you’ll learn

Following this tutorial, you’ll learn how to set up a Vue app from scratch — creating components, handling states, creating routes, connecting to a third-party service, and even handling authentication.

Tech stack and features

  • Vue
  • Vuex
  • Vue Router
  • Vue CLI
  • Pusher
  • CSS

This is really a great project to get started with Vue — or to improve your existing skills — to tackle development in 2023.

You can find the tutorial right here.

 

Build a Beautiful Weather App With Angular 8

This example will help you build a beautiful weather app using Google’s Angular 8:

What you’ll learn

This project will teach you valuable skills while creating an application from scratch — starting with the design over development and going all the way to a production-ready deployment.

Tech stack and features

  • Angular 8
  • Firebase
  • Server-side rendering
  • CSS with Grid Layout and Flexbox
  • Mobile friendly and responsive
  • Dark mode
  • Beautiful UI

What I really, really like about this comprehensive project is you don’t learn things in isolation. Instead, you learn the whole development process — from the design to the final deployment.

You should really do this one.

 

Build a To-Do App With Svelte

Svelte is the new kid on the block — at least compared to React, Vue, and Angular. Nonetheless, it’s one of the hotties for 2023.

OK, to-do apps aren’t necessarily the hottest topic out there, but this will really help you to sharpen your Svelte skills. It’ll look like this:

What you’ll learn

This tutorial will show you how to make an app using Svelte 3 from start to finish. It makes use of components, styling, and event handlers.

Tech stack and features

  • Svelte 3
  • Components
  • Styling via CSS
  • ES 6 syntax

There aren’t that many good Svelte starter projects out there, so I found this one to be kind of good to start with.

And, who knows, maybe you’ll be the one creating another, more comprehensive Svelte tutorial that’ll be presented in the next year’s version of this post?

 

Build an E-Commerce Shopping Cart With Next.js

Next.js is the most popular framework for creating React applications that support server-side rendering out of the box.

This project will show you how to build an e-commerce shopping cart that looks like this:

What you’ll learn

In this project, you’ll learn how to set up a Next.js development environment — creating new pages and components, fetching data, and styling and deploying a Next application.

Tech stack and features

  • Next.js
  • Components and pages
  • Data fetching
  • Styling
  • Deployment
  • SSR and SPA

It’s always great to have a real-world example, such as an e-commerce showcase, to learn something new. You can find the tutorial here.

 

Build a Full-Blown Multilanguage Blog Website With Nuxt.js

Nuxt.js is to Vue what Next.js is to React: a great framework to combine the power of server-side rendering and single-page applications.

The final app that you could create will look like this:

What you’ll learn

This example project will teach you how to build a full-blown website using Nuxt.js — from the initial setup to the final deployment.

It uses many of the cool features Nuxt has to offer, like pages and components, as well as styling with SCSS.

Tech stack and features

  • Nuxt.js
  • Components and pages
  • Storyblok module
  • Mixins
  • Vuex for state management
  • SCSS for styling
  • Nuxt middlewares

This is a really cool project for you and covers many of the great features of Nuxt.js. I personally love working with Nuxt, so you should really try this one out, as it will also make you a better Vue developer.

 

Build a Blog With Gatsby

Gatsby is a great static-site generator that uses React and GraphQL under the hood. This is the result of this project:

What you’ll learn

In this tutorial, you’ll learn how to leverage Gatsby to build an outstanding blog that you use for writing your articles while making use of React and GraphQL.

Tech stack and features

  • Gatsby
  • React
  • GraphQL
  • Plugins and themes
  • MDX/Markdown
  • Bootstrap CSS
  • Templates

If you ever wanted to start a blog, this is a great example of how to do so by leveraging React and GraphQL.

I’m not saying that WordPress always is a bad choice, but with Gatsby, you can create highly performant sites while using React — which is an awesome combination.

 

Build a Blog With Gridsome

Gridsome is to Vue … OK, we already had that with Next/Nuxt.

But the same is true for Gridsome and Gatsby. Both use GraphQL as a data layer, but Gridsome uses VueJS. It also is an awesome static-site generator that’ll help you create great blogs:

What you’ll learn

This project will teach you how to build a simple blog to get started with Gridsome, GraphQL, and Markdown.

It also covers how to deploy the application via Netlify.

Tech stack and features

  • Gridsome
  • Vue
  • GraphQL
  • Markdown
  • Netlify

This, for sure, isn’t the most comprehensive tutorial, but it does cover the basic concepts of Gridsome and Markdown and could be a good starting point.

 

Build a SoundCloud-like Audio-Player App With Quasar

Quasar is another Vue framework that can also be used to build mobile applications.

In this project, you’ll create an audio-player app like this:

What you’ll learn

While the other projects focus mainly on web applications, this one will show you how to create a mobile app using Vue via the Quasar framework.

You should already have a working Cordova setup with Android Studio/Xcode configured. If not, there is a link in the tutorial to the Quasar website, where they show you how to set this up.

Tech stack and features

  • Quasar
  • Vue
  • Cordova
  • WaveSurfer
  • UI Components

A small project that shows the power of Quasar for building mobile apps.

 

Conclusion

In this article, I showed you nine projects that you can build, each focusing on another JavaScript framework or library.

Now the choice is all yours: Will you try something new by using a framework you haven’t used before? Or do you want to strengthen your skills by doing a project for a technology you already have some knowledge of? Or will you rely on your favorite framework/library and do all the projects in 2023 with it?

If you like what I write and want to support me and my work, please follow me on Twitter to learn more about programming, making, writing & careers🥰

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[VS Code] 인코딩 변경  (0) 2023.05.09
[ javascript ] CDATA 사용 이유  (0) 2023.05.08
[javascript] GoJS, A Web Framework for Rapidly Building Interactive Diagrams  (0) 2022.11.01
[jQuery] Checkbox 컨트롤 (체크, 체크여부, 전체체크 등)  (0) 2022.10.31
Masonry - Cascading grid layout library  (0) 2022.10.12
반응형

https://gojs.net/latest/index.html

 

GoJS - Build Interactive Diagrams for the Web

GoJS A Web Framework for Rapidly Building Interactive Diagrams

gojs.net

GoJS in 12 Minutes: JavaScript Diagramming Library Tutorial

 

https://www.youtube.com/watch?v=7cfHF7yAoJE 

 

 

GoJS Samples  https://gojs.net/latest/samples/

 

GoJS Sample Diagrams for JavaScript and HTML, by Northwoods Software

 

gojs.net

Our samples demonstrate how to build several Diagram types and showcase specific features and layouts. You can use the HTML and JavaScript in these samples as the starting point for your application.

If you are done looking around and are ready to experiment with GoJS, read the getting started tutorial.

There is a React sample on GitHub at: gojs-react-basic, and an Angular sample at: gojs-angular-basic. See more at Projects.

If you are looking for examples of a particular GoJS method or property, you can search the source code of all samples and extensions and documentation on GitHub:

 

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[ javascript ] CDATA 사용 이유  (0) 2023.05.08
9 Projects You Can Do to Become a Front-End Master in 2023  (0) 2022.11.02
[jQuery] Checkbox 컨트롤 (체크, 체크여부, 전체체크 등)  (0) 2022.10.31
Masonry - Cascading grid layout library  (0) 2022.10.12
How TO - Create a Draggable HTML Element  (0) 2022.10.06
반응형

1. CheckBox 체크

$('#ckBox').prop('checked',true);
$('input:checkbox[name="네임"]').prop('checked',true);

첫 번째 라인과 같이 체크박스의 id를 지정해서 체크하여도 되고, 두 번째 라인과 같이 name, id 등을 선택하여 체크할 수 있다.

true로 설정하면 체크가 되고, false로 설정하면 체크가 해제 된다.

2. CheckBox 체크여부 확인

$('#ckBox').is(':checked');

.is(':checked') 를 이용하여 체크되어 있는지 아닌지를 알 수 있다.

(true : 체크되어 있음, false : 체크되어 있지 않음)

3. CheckBox 전체 체크

<div>전체<input type="checkbox" id="allCk"></div>
<div>테스트1<input id="ck1" type="checkbox"></input></div>
<div>테스트2<input id="ck2" type="checkbox"></input></div>
<div>테스트3<input id="ck3" type="checkbox"></input></div>

위와 같은 checkbox가 있을 때, 전체 체크하는 방법은 간단하다.

	$('#allCk').click(function(){
		var checked = $('#allCk').is(':checked');
		
		if(checked)
			$('input:checkbox').prop('checked',true);
	});

allCk 체크박스를 클릭 했을 때, allCk가 체크되어 있다면 checkbox를 전부 다 true로 해주면 된다.

 

 

테스트 소스

<!DOCTYPE html>
<html>
<head>
	<script src="./jquery-3.4.1.min.js"></script>
</head>

<div>전체<input type="checkbox" id="allCk"></div>
<div>테스트1<input id="ck1" type="checkbox"></input></div>
<div>테스트2<input id="ck2" type="checkbox"></input></div>
<div>테스트3<input id="ck3" type="checkbox"></input></div>

<button type="button" id="btn1">1번 체크/언체크</button>
<button type="button" id="btn2">2번 체크/언체크</button>
<button type="button" id="btn3">3번 체크/언체크</button>
<script>
	$('#btn1').click(function(){
		var checked = $('#ck1').is(':checked');
		$('#ck1').prop('checked',!checked);
	});
	
	$('#btn2').click(function(){
		var checked = $('#ck2').is(':checked');
		$('#ck2').prop('checked',!checked);
	});
	
	$('#btn3').click(function(){
		var checked = $('#ck3').is(':checked');
		$('#ck3').prop('checked',!checked);
	});
	
	$('#allCk').click(function(){
		var checked = $('#allCk').is(':checked');
		
		if(checked)
			$('input:checkbox').prop('checked',true);
	});
</script>
반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

9 Projects You Can Do to Become a Front-End Master in 2023  (0) 2022.11.02
[javascript] GoJS, A Web Framework for Rapidly Building Interactive Diagrams  (0) 2022.11.01
Masonry - Cascading grid layout library  (0) 2022.10.12
How TO - Create a Draggable HTML Element  (0) 2022.10.06
“제 2의 노드JS 노린다” 오픈소스 런타임 환경 ‘번’이란?  (0) 2022.10.05
반응형

Masonry - Cascading grid layout library

https://masonry.desandro.com/

 

Masonry

Install Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower:  bower install masonry --save Install with npm:  npm install masonry-layout Getting started HTML Include the Masonry .js file in your site. Masonry works o

masonry.desandro.com

https://codepen.io/desandro/pen/JdEyYQ

 

Masonry - layout method

...

codepen.io

 

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] GoJS, A Web Framework for Rapidly Building Interactive Diagrams  (0) 2022.11.01
[jQuery] Checkbox 컨트롤 (체크, 체크여부, 전체체크 등)  (0) 2022.10.31
How TO - Create a Draggable HTML Element  (0) 2022.10.06
“제 2의 노드JS 노린다” 오픈소스 런타임 환경 ‘번’이란?  (0) 2022.10.05
[React] DnD - Drag andDrop for React  (0) 2022.09.08
반응형

How TO - Create a Draggable HTML Element

https://www.w3schools.com/howto/howto_js_draggable.asp

 

How To Create a Draggable HTML Element

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

https://jqueryui.com/draggable/

 

Draggable | jQuery UI

Draggable Allow elements to be moved using the mouse. Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport. view source 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1

jqueryui.com

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#draggable" ).draggable();
  } );
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>
 
 
</body>
</html>
반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[jQuery] Checkbox 컨트롤 (체크, 체크여부, 전체체크 등)  (0) 2022.10.31
Masonry - Cascading grid layout library  (0) 2022.10.12
“제 2의 노드JS 노린다” 오픈소스 런타임 환경 ‘번’이란?  (0) 2022.10.05
[React] DnD - Drag andDrop for React  (0) 2022.09.08
[Node.js] Node.js 패키지 생성 및 실행 - Node.js package, npm init, npm run  (0) 2022.09.07
반응형

“제 2의 노드JS 노린다” 오픈소스 런타임 환경 ‘번’이란?

https://www.itworld.co.kr/news/258112

 

“제 2의 노드JS 노린다” 오픈소스 런타임 환경 ‘번’이란?

노드JS(node.js)와 데노(Deno)의 새로운 경쟁자가 등장했다. 자바스크립트 및 타입스크립트의 런타임 기술인 ‘번(Bun)’이 그 주인공

www.itworld.co.kr

노드JS(node.js)와 데노(Deno)의 새로운 경쟁자가 등장했다. 자바스크립트 및 타입스크립트의 런타임 기술인 ‘번(Bun)’이 그 주인공이다. 
 

ⓒ Getty Images Bank 
베타 버전으로 공개된 번은 노드JS나 데노와 유사한 역할을 하며, 번들러, 트랜스파일러, 패키지 매니저 같은 자바스크립트 코드를 위한 종합 기술을 제공한다. 특히 성능을 높이고, 빠르게 시작할 수 있게 만든 것이 특징이다.

번의 공식 홈페이지에 따르면 “번은 전 세계 자바스크립트를 브라우저 밖에서 실행하고, 미래 인프라에서 활용할 수 있도록 성능을 높이고 복잡성을 줄인 기술”이라고 소개됐다. 번 개발진은 이런 구조 덕에 개발자가 보다 간편하게 생산성을 높일 수 있을 것이라 기대하고 있다. 또한 궁극적으로 로컬 컴퓨터, 서버, 엣지 등에서 실행되는 자바스크립트 및 타입스크립트 기반 앱과 스크립트를 대체할 수 있다고 설명했다. 

번은 노드 API 기능의 90%를 지원하고 있으며, 자체 내장된 API로 fetch, WebSocket, ReadableStream 등을 제공한다. 지그(Zig)라는 로우레벨 언어로 작성된 번은 웹킷 프로젝트의 자바스크립트 코어 엔진을 사용한다. 또한 NPM, SQLite, HTTP, 웹소켓(WebSocket)용 클라이언트와 JSX/타입스크립트의 트랜스파일러를 지원한다. 

번 개발진은 “번은 지그 언어를 사용해 메모리나 제어 흐름을 관리하고 있기 때문에, 개발자는 소프트웨어를 더욱 빠르게 개발할 수 있을 것”이라며 “노드JS나 데노가 사용하는 V8 기반 기술보다 번의 속도가 더 빠를 것”라고 밝혔다. 

원문보기:
https://www.itworld.co.kr/news/258112#csidx8977b9ea249046bbfaa56c90270aa86 

 

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

Masonry - Cascading grid layout library  (0) 2022.10.12
How TO - Create a Draggable HTML Element  (0) 2022.10.06
[React] DnD - Drag andDrop for React  (0) 2022.09.08
[Node.js] Node.js 패키지 생성 및 실행 - Node.js package, npm init, npm run  (0) 2022.09.07
[React.js] React.js 시작하기  (0) 2022.07.27
반응형

[React] DnD - Drag andDrop for React 

https://react-dnd.github.io/react-dnd/about

 

React DnD

 

react-dnd.github.io

React DnD is a set of React utilities to help you build complex drag and drop interfaces while keeping your components decoupled. It is a perfect fit for apps like Trello and Storify, where dragging transfers data between different parts of the application, and the components change their appearance and the application state in response to the drag and drop events.

Installation

npm install react-dnd react-dnd-html5-backend

The second package will allow React DnD the HTML5 drag and drop API under the hood. You may choose to use a third-party backend instead, such as the touch backend.

// Let's make <Card text='Write the docs' /> draggable!

import React from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './Constants'

/**
 * Your Component
 */
export default function Card({ isDragging, text }) {
  const [{ opacity }, dragRef] = useDrag(
    () => ({
      type: ItemTypes.CARD,
      item: { text },
      collect: (monitor) => ({
        opacity: monitor.isDragging() ? 0.5 : 1
      })
    }),
    []
  )
  return (
    <div ref={dragRef} style={{ opacity }}>
      {text}
    </div>
  )
}

 

 

https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/01-dustbin/multiple-targets?from-embed=&file=/package.json 

 

react-dnd-example-3 - CodeSandbox

auto-generated package for codesandbox import

codesandbox.io

Backends

HTML5
Touch
Test
반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

How TO - Create a Draggable HTML Element  (0) 2022.10.06
“제 2의 노드JS 노린다” 오픈소스 런타임 환경 ‘번’이란?  (0) 2022.10.05
[Node.js] Node.js 패키지 생성 및 실행 - Node.js package, npm init, npm run  (0) 2022.09.07
[React.js] React.js 시작하기  (0) 2022.07.27
[Chart] billboard.js is a re-usable, easy interface JavaScript chart library, based on D3.js.  (0) 2022.07.26

+ Recent posts

티스토리툴바