'전체 글'에 해당되는 글 390건

다음 글은 Simon Holdorf의 10 Things Front-End Developers Should Learn in 2020를 번역한 글입니다.

Intorduction

Photo by Isaac Smith on Unsplash

프론트 엔드 개발이 2020 년에 가장 인기 있는 기술 중 하나가 될 것이라는 데는 의심의 여지가 없습니다.

이전에는 프론트 엔드 공간의 개발자가 HTML, CSS 및 jQuery를 통해 대화형 웹 사이트를 만드는 것으로 충분했지만 오늘날에는 광범위하고 끊임없이 변화하는 기술(툴, 라이브러리 그리고 마스터해야 할 프레임워크) 생태계와 자기 계발에 끊임없이 투자해야 할 필요성에 직면 해 있습니다.

지난 몇 년 동안 ReactJS, VueJS 및 Svelte와 같은 멋진 새 라이브러리와 프레임 워크가 Javascript를 사용하여 주요 웹 애플리케이션을 구동했습니다.

이 글은 2020 년에 프론트 엔드 개발자로서 당신이 프로그래밍을 시작하거나 이미 경험을 쌓았든 상관없이 레벨 업하기 위해 집중해야 할 것에 대한 지침을 제공하는 것을 목표로 합니다.

1. Framework

2020년에는 아마 Facebook의 ReactJS와 커뮤니티 중심의 VueJS사이의 결투가 있을 것입니다. React는 현재 Github에서 14만 개 이상의 스타를 받았으며 Vue는 더 많은 15만 3천 개의 스타를 받았습니다. Angular로 예를 들자면 5만 3천 개 밖에 받지 못했습니다.

2019년의 Raact(파란선), Vue(빨간 선), Angular(노란 선), Svelte(초록선)에 대한 검색량에 의하면 Vue는 React보다 약간 우위에 있습니다. Angular는 자리를 지키지 못하고 있으며 Svelete는 이 비교에서 아무런 역할을 하지 못하고 있습니다.
그래서 2020년에 Javascript 프레임워크와 함께 작업하거나 작업하려는 프론트엔드 개발자는 React나 Vue를 주요한 선택으로 집중해야 합니다.  만약 거대한 엔터프라이즈 프로젝트에서 일해야 한다면 Angular는 유효한 옵션입니다.

따라서 2020 년 동안 JavaScript 프레임 워크와 함께 작업하거나 작업하려는 프론트 엔드 개발자는 React 및 Vue를 기본 선택에 집중해야 합니다. 대규모 엔터프라이즈 프로젝트에서 작업하는 경우 Angular는 유효한 옵션입니다.

만약 당신이 이러한 프레임워크에 대해서 좀 더 배우길 원한다면 이 훌륭한 리소스를 확인하시기 합니다: 

• React
• VueJS

2. Static Site Generators

정적 사이트 생성기는 Server Side Rendering의 강력한 기능(SEO에 매우 중요하지만 초기 로드 시간이 있음)과 Single Page Application을 결합합니다.

요즘은 Next나 Nust 같은 솔루션이 마크다운 지원, 모듈 번들러, 통합 테스트 러너 등과 같은 편리한 기능을 제공하기 때문에 SSR이 필요하지 않더라도 많은 프로젝트에서 SSG를 선택합니다.

만약 당신이 프론트엔드 개발에 관심이 있다면 당신은 다음 프로젝트를 관심 있게 보고 실습 경험을 쌓아야 합니다.

• Next(리액트 기반)
• Nuxt(뷰 기반)
• Gatsby(리액트 기반)
• Gridsom(뷰 기반)

이것들은 아마 2020년에 가장 인기 있는 것들 일 것입니다. 자세한 내용을 보려면 다음 자료를 확인하세요:

• Next.js
• Nuxt.js
• Gatsby
• Gridsome

3. JAM Stack

Photo by www.cygnismedia.com

JAM스택은 Javascript(클라이언트에서 동작하는, 예를 들면 Reacy, Nue 혹은 VanillaJS), API(서버 측 프로세스는 추상화되어있고 Javascript를 통해 HTTPS 위에서 접근됨) 그리고 Markup(배포 시 미리 빌드된 탬플릿 마크업)을 의미합니다.
이것은 웹사이트와 앱을 더 나은 성능을 위해 빌드하는 방법으로 낮은 확장 비용, 보안 강화, 더 나은 개발 경험을 제공합니다.

이러한 용어는 새로운 것은 아니지만 모두 웹서버에 의존하지 않는다는 공통점을 갖습니다. 따라서 Ruby나 Node.js 백엔드 또는 Drupal이나 WordPress 같은 서버 측 CMS에 의존하는 모놀리틱 앱(단일 앱)은 JAMStack으로 구축되지 않습니다.

만약 JAM스택으로 작업하길 원한다면 여기 모범사례들이 있습니다:

• 모든 프로젝트가 CDN에서 제공됨: 서버가 필요 없기 때문에 모든 프로젝트는 CDM으로부터 제공받을 수 있습니다. 탁월한 속도와 성능을 제공합니다.
• 모든 것이 Git에 있음: 누구나 DB나 복잡한 설치작업 없이 Git 저장소로부터 전체 프로젝트를 클론 할 수 있어야 합니다.
• 자동화된 빌드: 웹 훅이나 클라우드 서비스 같은 모든 마크업은 미리 빌드되어 있기 때문에 빌드를  완벽하게 자동화할 수 있습니다.
• 아토믹한 배포: 큰 규모의 프로젝트에서 수백, 수천 개의 파일 재배포로 인한 일관성이 없는 상태를 피하기 위해 아토믹한 배포는 변경내용이 실제 반영되기 전 모든 파일이 업로드될 때 까지 기다립니다. 
• 인스턴트 캐시 무효화: 사이트가 운영 중일 때 CDN이 변경 사항을 확인할 수 있도록 인스턴트 캐시 제거를 처리할 수 있는지 확인해야 합니다.

Netfix나 Neit처럼 잘 알려진 호스트들은 JAMStack 애플리케이션을 지원하며 큰 규모의 회사는 이를 이용하여 고객에게 좋은 경험을 전달합니다.

이것은 분명히 2020년에 프론트엔드 개발자로서 알고 싶어 하는 것 일 겁니다. 만약 JAMStack에 대해 더 알고 싶다면 여기 좋은 자료가 있습니다.

• JAMstack
• JAMstack WTF
• “New to JAMstack? Everything You Need to Know to Get Started”

4. PWA

Progressive Web App(PWA)는 2020년에 확실히 인기 있는 트렌드가 될 것입니다. 더 많은 회사들이 네이티브 앱 보다 PWA를 통해 풍부한 모바일 경험을 고객에게 제공하고 있습니다.

PWA는 신뢰할 수 있고(빠른 로딩, 인터넷 연결 없이 작업이 가능) 빠르며(부드러운 애니메이션, 유저 작업에 대한 빠른 응답) 매력적(네이티브 앱을 사용하는 기분, 훌륭한 UX)입니다.

PWA는 오프라인 기능을 위해 서비스 워커를 사용하고 전체 화면을 위해 web-app manifest 파일을 사용합니다.

PWA 애플리케이션을 만들어야 하는 이유는 다음과 같습니다:

• 브라우저에서 유저의 홈 화면을 추가할 수 있음.
• 인터넷이 연결되어 있지 않더라도 동작함.
• 웹 푸시 알림을 지원함.
• 구글의 Lighthouse 기능을 사용할 수 있게 함.

만약 PWA에 대해 더 알고 싶다면 다음 추가 자료를 확인하세요:

• Progressive Web Apps
• “Your First Progressive Web App”

5. GraphQL

요즘 가장 인기 있는 토픽 중 하나이며 2020년에 배우거나 항상 시켜야 할 확실한 트렌드는 GraphQl입니다.

REST는 Stateless 서버와 같은 훌륭한 콘셉트를 제공함으로써 오랜 기간 웹 API를 설계하기 위한 사실상의 표준으로 여겨졌으나 점점 많은 이들에게 RESTful API는 급격히 변화하는 클라이언트를 따라잡기에 유연하지 않다고 여겨지고 있습니다.

GraphQL은 개발자가 RESTful API를 다룰 때 마주치는 그 이슈를 해결하기 위해서 Facebook에 의해 개발되었습니다.

REST API를 사용하면 개발자는 /users/ 엔드포인트 또는 /tours//location 엔드포인트 처럼 특정한 목적으로 생성된 여러 엔드 포인트로부터 데이터를 가져옴으로써 데이터를 수집합니다.

GraphQL을 이용하면 다르게 동작합니다. 개발자는 데이터 요구사항과 함께 GraphQL 서버에 쿼리를 보냅니다. 서버는 요구사항에 해당하는 모든 데이터를 JSON 객체로 반환합니다.

GraphQL을 사용해서 얻는 또 다른 이점은 강력한 타입 시스템을 사용한다는 것입니다. GraphQL서버의 모든 것은 GraphQL Schema Definition Language(SDL)을 사용하는 스키마를 통해 정의됩니다. 한번 스키마가 만들어지면 프론트엔드 개발자와 백엔드 개발자 모두 정의된 데이터 구조를 인지하고 있기 때문에 서로 독립적으로 작업을 할 수 있습니다.

GraphQL에 대해 더 자세히 알아보려면 다음과 같은 훌륭한 자료를 확인해 보세요:

• GraphQL
• How to GraphQL
• “Getting Started with GraphQL Content API”
• “GraphQL: A data query language”

6. Code Editors/IDEs

2019년과 마찬가지로 Microsoft의 VS Code는 2020년에도 대부분의 프론트엔드 엔지니어들에게 최고의 에디터가 될 것입니다.

VS Code는 코드 자동완성 및 강조 기능과 같은 IDE와 유사한 기능을 제공하며 Extension Marketpalce기능을 통해 서의 무한으로 확장할 수 있습니다.

특히 Marketplace는 VS Code를 매우 뛰어나게 만들어줍니다. 프론트엔드 개발자를 위한 몇 가지 훌륭한 확장 기능은 다음과 같습니다:

• JavaScript (ES6) code snippets
• npm
• Prettier
• CSS Peek
• Vetur
• ESLint
• Live Sass Compiler
• Debugger for Chrome
• Live Server
• Beautify

이것들은 꽤나 멋진 예시입니다. VS Code에는 더 많은 것들이 있으므로 아직 사용해보지 않은 경우 직접 사용해 보길 바랍니다.

7. Testing

테스트되지 않은 코드는 제품으로 도달해서는 안됩니다.

개인적인 프로젝트에서는 어떤 테스트도 없는 것이 편리해 보일지도 모르지만 상업적이고 엔터프라이즈 환경에서는 테스트가 필수적입니다. 그러므로 가능하다면 어떤 개발자든 개발 과정에서 통합 테스트를 하는 것이 낫습니다.

테스트 케이스들의 차이를 다음과 같이 비교할 수 있습니다: 

• 유닛 테스트: 단일 컴포넌트나 함수를 독립적으로 테스트.
• 통합 테스트: 컴포넌트 간의 상호작용을 테스트.
• End-to-end 테스트: 브라우저 상에서 모든 기능을 갖춘 채 사용자의 흐름을 테스트.

수동 테스트, 스냅숏 테스트 등 더 많은 테스트 방법이 있습니다.  만약 시니어 개발자의 위치로 이동하고 싶거나 개발 표준이 존재하는 몇몇의 큰 기업에 일자리를 갖고 싶다면 테스팅 스킬을 개선하기 위해 노력해야 합니다.

8. Clean Code

클린 한 코드를 작성할 수 있는 것은 훌륭한 기술이며 많은 기관에서 높게 요구됩니다. 만약 당신이 개발자에서 선임 개발자의 위치로 오르고 싶다면 당신은 정말로 클린 코드에 대한 개념을 배워야 합니다.

클린 코드는 우아하고 읽기에 즐거워야 합니다. 그건 집중되어야 하고 잘 돌봐야 합니다. 모든 테스트는 클린 코드로 실행합니다. 클린 코드는 중복을 포함하지 않으며 클래스, 메서드, 함수와 같은 엔티티의 사용이 최소화되어야 합니다.

클린 코드를 위해서 개발자가 해야 할 몇 가지가 있습니다:

• 변수, 클래스, 메서드, 함수에 의미 있는 이름을 지어야 합니다.
• 함수는 작아야 하며 가능한 한 적은 매개변수를 가져야 합니다.
• 주석은 필요하지 않습니다 - 코드 스스로가 말해주어야 합니다.

만약 클린 코딩에 대해 더 알고 싶다면 Robert C. Martin의 서적과 게시물을 참조하십시오.

9. Git

요즘의 웹 개발에 있어  Git은 의심할 여지없이 버전 관리의 표준입니다.  모든 프런트 엔드 엔지니어에게 모든 규모의 팀에서 효과적으로 잘 작동하게 하기 위해 기본 Git 개념과 워크 플로를 알고 있어야 한다는 건 정말 중요합니다.

다음은 몇 가지 잘 알려진 Git 커맨드입니다:

• git config
• git init
• git clone
• git status
• git add
• git commit
• git push
• git pull
• git branch

생산성을 향상하기 위해 이러한 커맨드를 알아두는 것은 언제나 좋습니다만 프론트엔드 엔지니어들은 Git 뒤에 있는 기초 개념 또한 알아두어야 합니다. 여기 당신을 위한 몇 개의 자료가 있습니다:

• “Explaining the Basic Concepts of Git and How to Use GitHub”
• “How To Use GitHub — Developers Collaboration Using GitHub”
• GitHub

10. Soft Skills

Photo by "Top 8 soft skills in UI/UX design"

종종 간과하곤 하지만 소프트 스킬을 배우는 것은 개발자들에게 정말 정말 중요합니다.

기술적 측면을 이해하는 데에 있어서 도움이 됩니다만 팀과 어떻게 의사소통하는지 아는 것도 똑같이 중요합니다. 만약 당신이 기술경력에 진지하거나 선임직 위치로 옮길 계획이 있다면 이러한 소프트 스킬을 배워야 합니다.

• 감정 이입(Empathy)
• 의사소통(Communication)
• 팀워크(Teamwork)
• 다가감과 돕는 것(Approachability and helpfulness)
• 인내(Patience)
• 열린 생각(Open-mindedness)
• 문제 해결(Problem-solving)
• 책임(Accountability)
• 창의력(Creativity)
• 시간 관리(Time management)

항상 염두에 두세요: 선임 개발자를 위한 가장 중요한 결과물은 선임 개발자입니다.

p.s) 이문장의 뜻을 잘 모르겠습니다. 원문은 "The most important deliverable for a senior developer is more senior developers." 입니다.

Conclusion

이 글에서 2020년에 프론트엔드 개발자가 배우거나, 향상하거나, 마스터해야 할 열 가지 중요한 것들에 대해 보여주었습니다.

이 리스트는 완전하지는 않지만 내년에 대한 영감을 주길 바랍니다. 선택은 당신의 것입니다.

출처: https://www.smoh.kr/275 [Simple is Beautiful.] 

클래스 다루기. 자바스크립트와 제이쿼리에서는 어떻게 클래스를 다루는지, classList를 지원하지 않는 익스플로러에서 대체할 메서드는 무엇인지 알아보기

바닐라(모던자바스크립트) JS의 classList로 제어하기

var element = document.getElementById( 'element' );

element.classList.add( 'someclass' );
element.classList.add( 'someclass1', 'someclass2' );

element.classList.remove( 'someclass' );
element.classList.remove( 'someclass1', 'someclass2' );

element.classList.contains( 'someclass' );
element.classList.contains( 'someclass1', 'someclass2' );

element.classList.toggle( 'someclass' );
element.classList.toggle( 'someclass', true ); // 강제로 class 추가
element.classList.toggle( 'someclass', false ); // 강제로 class 삭제

jquery로 class 제어하기

$( '#element' ).addClass( 'someclass' );
$( '#element' ).addClass( 'someclass1 someclass2' );

$( '#element' ).removeClass( 'someclass' );
$( '#element' ).removeClass( 'someclass1 someclass2' );

$( '#element' ).hasClass( 'someclass' );
$( '#element' ).hasClass( 'someclass1 someclass2' );

$( '#element' ).toggleClass( 'someclass' );

lassList를 지원하지 않는 익스플로러

classList는 익스플로러에서 일부만 지원한다고 나와있다. IE9 이하에서는 classList 속성이 지원되지 않고 10 이상이 지원된다. 아래 두 가지 호환용 스크립트를 페이지에 포함시키고 IE를 작동하면 9 이하 버전도 사용할 수 있다.

polyfill

• devongovett : https://gist.github.com/devongovett/1381839
• eligrey : https://github.com/eligrey/classList.js

참고

https://tonks.tistory.com/161

https://www.it-swarm.dev/ko/javascript/ie%EC%97%90%EC%84%9C-classlist%EA%B0%80%EC%9E%88%EB%8A%94-%EC%BD%94%EB%93%9C%EA%B0%80-%EC%9E%91%EB%8F%99%ED%95%98%EC%A7%80-%EC%95%8A%EC%8A%B5%EB%8B%88%EA%B9%8C/941292294/

http://blim.co.kr/archives/160

의도 : 버튼 1이 선택된 상태였을 때 버튼 2을 클릭할 수 있다. 버튼 1이 선택되었다는 것을 알려주는 이벤트를 유지하거나 log를 남긴다. 다른 곳을 눌렀을 때 onclick 이벤트를 없애서 동작하지 않게 한다. 

jQuery의 요소에 의해 발생된 이벤트 기록하기

웹킷 - 

monitorEvents(document.body); // logs all events on the body

monitorEvents(document.body, 'mouse'); // logs mouse events on the body

monitorEvents(document.body.querySelectorAll('input')); // logs all events on inputs

monitorEvents(document.getElementById('inputId'));

.data('events') : 특정 이벤트가 시작되는 순간 jQuery에 의해 요소에 이미 바인딩 된 모든 이벤트를 기록

function getEventsList($obj) {
    var ev = new Array(),
        events = $obj.data('events'),
        i;
    for(i in events) { ev.Push(i); }
    return ev.join(' ');
}

$obj.on(getEventsList($obj), function(e) {
    console.log(e);
});

console.log로 이벤트 찍어보기

$('body').on("click mousedown mouseup focus blur keydown change mouseup click dblclick mousemove mouseover mouseout mousewheel keydown keyup keypress textInput touchstart touchmove touchend touchcancel resize scroll zoom focus blur select change submit reset",function(e){
     console.log(e);
}); 

https://www.it-swarm.dev/ko/javascript/jquery%EC%9D%98-%EC%9A%94%EC%86%8C%EC%97%90-%EC%9D%98%ED%95%B4-%EB%B0%9C%EC%83%9D-%EB%90%9C-%EB%AA%A8%EB%93%A0-%EC%9D%B4%EB%B2%A4%ED%8A%B8%EB%A5%BC-%EC%96%B4%EB%96%BB%EA%B2%8C-%EA%B8%B0%EB%A1%9D%ED%95%A9%EB%8B%88%EA%B9%8C/940107866/

activeElement

• $(document.activeElement) : 현재 포커스가있는 DOM 또는 섀도우 DOM 트리 내를 반환
• dom focus 여부 (현재 활성화 (active)된 요소) 확인하기

document.activeElement.getAttribute('class');

focusEle = document.activeElement;
if (document.getElementById('nicknameForm') == focusEle) {
  console.log(true);
}

https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement

getSelection

사용자 또는 Caret의 위치에 따라 선택된 텍스트의 범위를 나타내는 Selection 객체를 반환한다. 

selection = window.getSelection();

function foo() {
    var selObj = window.getSelection(); 
    alert(selObj);
    var selRange = selObj.getRangeAt(0);
    // do stuff with the range
}

https://developer.mozilla.org/ko/docs/Web/API/Window/getSelection

focus 상태를 부여하거나 클릭 이벤트 트리거

function(){document.getElementById("focus_text").focus();}

/* 3초 후 새창 닫기 */
setTimeout(function(){open_moveby_window.close();}, 3000);
/* 3초 후 포커스 텍스트 박스에 주기 */
setTimeout(function(){document.getElementById("focus_text").focus();}, 3000);


출처: https://roydest.tistory.com/entry/window객체-focus [로이데스트]

$(document).ready(function() {
       $('td').on('click', function(e) {
           console.log('table cell clicked');
       });
});

focus 상태 유지하기

$('#SMS').attr('disabled',true);  //SMS버튼 비활성화
$('#SMS').attr('disabled',false);  //SMS버튼 활성화

출처: https://itjjabs.tistory.com/entry/jQuery버튼-활성화-비활성화 [개발]

제이쿼리 속성 존재 여부

Navtive$(this)[0].hasAttribute('name');
$(this).is('[name]');//boolean $(this).filter('[name="jkun"]');

var i, j;
for (i = 1; i <= 5; i++) {
  for (j = 1; j <= i; j++)
    document.write(i);
  document.write("<br>");
}

document.write("<br>");

var a, b;
for (a = 5; a >= 1; a--) {
  for (b = 1; b <= a; b++)  	
    document.write(a);
  document.write("<br>");
}

1
22
333
4444
55555

55555
4444
333
22
1

reduce() 메서드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고 하나의 결과값을 반환한다.

구문

arr.reduce(callback);
arr.reduce(callback[, initialValue]);

reducer 함수는 네 개의 인자를 가진다.

1. 누산기 accumulator (acc)
2. 현재 값 (cur)
3. 현재 인덱스 (idx)
4. 원본 배열 (src)

함수의 반환 값은 accumulator에 할당되고, accumulator는 순회 중 유지된다.
결국 최종 결과는 하나의 값이 되며, 누적 계산의 결과 값을 반환한다.

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

매개변수

1. callback : 빈 요소를 제외하고, 배열 내 각 요소에 대해 callback 함수를 한번씩 실행하며, 콜백함수는 다음 네 인수를 받는다.

• accumulator : 콜백의 반환값을 누적한다. 콜백의 이전 반환값/콜백의 첫번째 호출이면서 initialValue를 제공한 경우 initialValue 값이다.
• currentValue : 처리할 현재 요소
• currentIndex : 처리할 요소의 인덱스
• array : reduce()를 호출한 배열

2. initialValue : callback의 최초 호출에서 첫 번쨰 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생한다.  (배열이 비어있는데 initialValue도 제공하지 않으면 TypeError가 발생)

initialValue를 제공하지 않으면, reduce()는 인덱스 1부터 시작해 콜백 함수를 실행하고 첫 번째 인덱스는 건너뛴다. (initialValue를 제공하면 인덱스 0에서 시작)

배열의 요소가 하나 뿐이면서 initialValue를 제공되지 않은 경우, 또는 initialValue는 주어졌으나 배열이 빈 경우엔 그 단독 값을 callback 호출 없이 반환한다. initialValue을 제공하지 않으면 출력 가능한 형식이 세 가지이므로, 보통 초기값을 주는 것이 더 안전.

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

부트스트랩 모달 (bootstrap modal)에서 padding-right 이 계속 발생되는 문제 발생 시 임시방편 해결책이다.
css파일의 body 부분에 아래와 같이 추가해준다.

body { padding-right: 0 !important; }

다른 의견 : 아래와 같이 변경

.modal-open { padding-right: 0px !important; }

.modal { padding-right: 0px !important; }

참고 ::

https://stackoverflow.com/questions/32862394/bootstrap-modals-keep-adding-padding-right-to-body-after-closed

부트스트랩 bootstrap 모달 팝업도 마우스 드래그로 위치 이동이 가능합니다. 아래 소스를 참고해보세요

HTML

<button type="button" id="btn1">Show Modal</button> 

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
      </div>
      <div class="modal-body">
        Modal Body
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

JQUERY

$('#btn1').click(function() {
  var modalDiv = $('#myModal');
  modalDiv.modal({
    backdrop: false,
    show: true
  });

  $('.modal-dialog').draggable({
    handle: ".modal-header"
  });
});

코드를 보다가 생소한 <nobr> 라는 태그를 발견하고 찾아보게 되었습니다.

<nobr></nobr>

<nobr> 태그는 공식 HTML 명령어가 아닙니다.
사용법은 여는 태그와 닫는 태그가 쌍으로 필요합니다.
<nobr>태그의 기능은 자동 줄바꿈을 방지합니다. (no + br)

<nobr>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</nobr>

<nobr> 태그는 CSS의 white-space: nowrap; 을 적용한 것과 같은 결과를 보입니다.
<nobr>는 일부 브라우저에서는 작동하나 언제든지 제거 가능합니다.

대체 속성

white-space: normal | nowrap | pre | pre-line | pre-wrap | break-space | initial | inherit;

그래서 CSS의 white-space 속성의 사용을 권장합니다. 
white-space 문법은 위와 같습니다.

참고

https://www.w3docs.com/learn-html/html-nobr-tag.html

html 문서간 변수값 주고받기를 JS만으로 동작한다.

출처 : javascript만으로 html간 변수값 주고받기

- http://blog.daum.net/jhmoon77/17455746
- http://blog.naver.com/music_2004?Redirect=Log&logNo=120121496301

1. 보내는 html

<script language = "javascript">
  name = "Hey"
  content = "Fighting!!!"
  location.href="5.html?" + name + ":" + content
</script> 

<html>
<head>
  <script language = "javascript">
    function sendFunc( aValue )
    {
    name="You_are_working_well." ;
    jumsu=100;
    location.href="receive.html?"+name+":"+jumsu;
    }
  </script>
</head>

<body>
<h1>sending</h1>
  <ul class="list1">
    <li>
    <!-- <a href="5.html" onClick='location.href="5.html?1:3:1"' class="lnk"> -->
      <a href="#" onclick="javascript:sendFunc('1:3:1')" class="lnk">
        <span class="fl">
        	<img height="55" width="55" alt="이미지" src="img/seasonal/1.jpg" />
        </span>
        <span class="fl2">
        <br>
        <font size="4"><strong class="ells">계절회무침</strong></font>
        </span>
      </a>
    </li>
  </ul>
</body>
</html>

2. 받는 html

<script language = "javascript">
  temp = location.href.split("?");
  data=temp[1].split(":");
  name = data[0];
  content = data[1];
  document.write(name + " " + content);
</script>

<html>
<head>
  <script language = "javascript">
  temp = location.href.split("?");
  data=temp[1].split(":");
  name = data[0];
  content = data[1];
  document.write(name + " " + content);
  </script>
</head>
<body>
	<h1>receiving</h1>
</body>
</html>

표현식과 연산자는 프로그래밍 언어의 기본적인 구성 요소입니다. JS의 표현식과 연산자 표기법은 C와 자바의 그것과 매우 비슷하지만, JS에는 래퍼 객체가 있고 묵시적 타입 변환을 할 수 있다는 차이점이 있습니다.

1. 연산자

표현식과 연산자

표현식은 결과적으로 어떤 값으로 평가(evaluation)되는 것인데, '표현식을 평가한다'는 표현식의 값, 변수, 함수 등의 값을 바탕으로 식의 값을 계산하는 행위를 말합니다.

가장 간단한 표현식은 숫자, 문자열, 논리값 등의 원시 값(primitive values)이며 변수, 프로퍼티, 배열 요소, 함수 호출, 메서드 호출도 표현식입니다. 연산자(operator)를 사용하면 표현식을 조합해 더욱 복잡한 표현식을 만들 수 있습니다.

a + b

a(피연산자, operand) +(연산자, operator) b(피연산자) 로 위의 예는 2항 연산자입니다.
피연산자의 개수에 따라 연산자를 단항, 이항, 삼항 연산자로 구분합니다. 피연산자 개수가 하나면 단항, 세개면 삼항연산자이며 ?: 뿐입니다.

표현식은 왼쪽 피연산자 값부터 순서대로 평가되고 그 다음에 연산자로 계산이 시작됩니다. 예외로 ||, &&, ?:는 연산자가 먼저 평가된 후 피연산자값을 평가합니다.

연산자의 우선순위

연산자가 여러 개 있으면 계산 순서에 따라 결과가 달라집니다. 연산자에는 우선순위가 있고, 그에 따라 연산 순서가 정해집니다. 괄호 등의 그룹 연산자를 사용하면 괄호 안의 표현식이 가장 먼저 평가됩니다.

연산자 결합 법칙

결합법칙에 따라 연산자의 우선순위가 같으면 왼쪽에서 오른쪽 방향으로 결합합니다.

연산자의 부수 효과

부수 효과가 있는 표현식 : 대입하는 표현식 x = y 처럼 변수 값을 바꾸는 표현식으로 대입연산자, 증가연산자, 감소연산자, delete 가 있습니다.

2. 산술 연산

산술 연산자

산술연산자는 피연산자가 숫자인 연산자로 숫자가 아닐 때는 연산자가 피연산자 타입을 숫자로 바꾸어 연산합니다. 그러므로 결과도 숫자 값이 나오지만 피연산자가 숫자로 바꿀 수 없거나 계산이 불가할 때는 NaN이 나오게 됩니다. 모든 산술 연산은 64비트 부동소수점 연산으로 이루어집니다. 

산술 이항 연산자 

+, -, *, /, %

사용 시 주의점

• 정수끼리 나누어도 결과는 부동소수점
  - 다른언어는 정수끼리 나눈 결과값이 정수이나, JS는 정수끼리 나누어도 모두 부동소수점 

7 / 2     // 3.5

• 부동소수점으로 a%b 계산 가능 

• + 연산자는 피연산자 중 하나가 문자열이면 나머지 피연산자도 문자열로 만듦
  

• 계산 불가하면 NaN으로 평가 (undefined도 마찬가지)
  - true 는 1, false, null은 0

0/0    // NaN
"one" * 1    // NaN
true+true    // 2
1+null    // 1
1+undefined    // NaN

산술 단항 연산자 

증가연산자는 피연산자값에 1을 더하고 감소연산자는 1을 뺍니다. 모두 부수 효과가 있는 연산자이며 피연산자는 좌변에 둡니다. 증감연산자는 전위표기법이냐 후위표기법이냐에 따라 피연산자의 평가 시점이 달라져 결과값이 다르게 나오게 됩니다. 대입연산자의 왼쪽에 둘 수 있는 표현식인 좌변값은 JS에서 변수, 객체의 프로퍼티, 배열 요소를 둡니다.

* 증감연산자를 연속 사용하면 참조 오류가 발생합니다. (a++)++ 처럼요.

++a   // a에서 1을 더한 후 a 값을 평가
a++   // a 평가 후 1을 더함
--a   // a에서 1을 뺀 후 a를 평가
a--  //a 평가 후 1을 뺌
+a   //아무코토하지않음
-a   //부호 반전

산술 대입 연산자 

대입연산자와 산술이항연산자를 조합한 연산을 좀 더 간략하게 표현한 것입니다.

+=    // a += b   (a=a+b 와 같음)
-=
*=
/=
%=

Math 객체의 프로퍼티

Math 객체에는 다양한 프로퍼티와 메서드가 있습니다. 메서드와 설명을 더 보시려면 링크를 확인.

부동소수점과 정확도 문제

산술 연산 시 숫자에 유효한 자리수가 있어 계산 시 오차가 발생합니다. JS 숫자는 IEEE754로 규정된 64비트 부동소수점입니다. IEEE 754는 IEEE에서 개발한 컴퓨터에서 부동소수점을 표현하는 가장 널리 쓰이는 표준으로 ±0 등의 수와 무한, NaN 등의 기호를 표시하는 법과 이러한 수에 대한 연산을 정의하고 있습니다. 

일반적으로 값이 가까운 두 수를 뺄 때 정밀도 손실이 일어납니다. 피하는 방법 중 하나로 다음처럼 바꾸어 계산할 수도 있습니다. 

1/(Math.sqrt(10001) + Math.sqrt(10000))

10진수로 딱 떨어지는 값도 산술연산을 내부적으로는 2진수로 계산하여 결과가 조금씩 어긋납니다. 아래식으로 해결할 수 있습니다.

a / b    // 0.799999999999
a/b == 0.8    // false

Math.abs(a/b - 0.8) < 1e-10

3.  문자열 제어

문자열 연결 

+ 연산자로 연결합니다. 피연산자 중 하나가 문자열로 변환할 수 있는 객체라면 다른 피연산자의 타입을 문자열로 바꾼 후 연결합니다.  

문자열 조작 메서드

문자열 처리 객체로 String 객체가 있습니다. 문자열을 String 객체로 변환하려면 String 생성자를 사용합니다. 아래처럼 원시 값을 객체로 변환하는 행위는 래핑(wrapping)이라고 합니다. 스트링 객체에는 문자열을 처리하기 위한 다양한 프로퍼티와 메서드가 있습니다.

String 객체의 주요 메서드 >> 이동

문자열은 객체가 아니므로 프로퍼티가 없지만, 문자열에서 프로퍼티를 사용하려고 하면 자동으로 String 객체로 변환되어 동작하게 됩니다. 내부적으로는 아래와 같은 작업이 실행되며, 처리가 끝나면 메모리에서 바로 삭제됩니다.

var msgObj = new String(msg);
var c = msgObj.charAt(3);

이 객체를 래퍼 객체(wrapper object)라고 하며, 원시 값 처리 시 원시값은 래퍼 객체로 자동 변환됩니다. 문자열은 String 객체, 숫자는 Number 객체, 논리값은 Boolean 객체로 변환됩니다. null, undefined에는 wrapper 객체가 없습니다.

var msgObj = new String(msg);
var c = msgObj.charAt(3);

원시 값을 처리할 때는 원시값의 메서드를 바로 호출하며 String 객체 등으로 다시 변환해 처리하진 않습니다. 기대한 것과 다른 값이 불러졌을 때 오류가 발생할 수도 있기에 그렇습니다. 변환된 String 객체는 valueOf() 메서드를 사용해 다시 문자열로 변환해 출력할 수 있습니다.

var msg = new String("test");
console.log(msg); // String{[[PrimitiveValue]]: "test"}

msg.valueOf();
console.log(msg); //test

// ??? 예상결과인데 다 마지막 줄처럼 나옴

자바스크립트의 문자열은 불변 (immutable) 합니다. replace, toUpperCase 메서드 등이 반환하는 것은 새로운 문자열이며 메서드를 호출한 문자열은 수정되지 않습니다.

String 생성자의 메서드

JS의 함수는 객체이며 프로퍼티를 가집니다. String 생성자 또한 일종의 함수이며 프로퍼티를 가집니다. 

문자열을 배열로 읽고 쓰기

문자열을 읽을 때에는 charAt 메서드 대신 대괄호 연산자도 가능합니다. 그러나 배열처럼 값을 대입, 수정은 불가능합니다. 써로게이트 페어로 표현하는 문자는 두 개의 배열 요소로 분리합니다.

msg[3]
msg[msg.length-1]

s.codePointAt(0).toString(16) // 코드 포인트의 스칼라값
s[0].codePointAt(0).toString(16) // 상위 써로게이트
s[1].codePointAt(0).toString(16) // 하위 써로게이트
s[0] + s[1] // 써로게이트 페어 문자

써로게이트 페어 (surrogate pair) : 2바이트의 인코딩 값을 한 쌍 (a,b)로 묶은 것으로 a는 상위 써로게이트, b는 하위 써로게이트라고 합니다. 유니코드의 코드포인트 값 u를 구하는 공식은 다음과 같습니다.

u = (a - 0xD800) * 0x400 + (b-0xDC00) + 0x10000

a = (u - 0x10000) / 0x400 + 0xD800
b = (u - 0x10000) % 0x400 + 0xDC00

stringToArray는 정규표현식을 사용해서 써로게이트 페어가 포함된 문자열을 문자 배열로 만들어주는 함수입니다. 이를 사용하면 써로게이트 페어를 포함하는 문자열도 배열로 만들 수 있습니다.

4. 논리 연산자와 관계 연산자

관계 연산자

관계 연산자는 두 개의 피연산자를 비교한 결과를 논리값 (true/false)로 반환합니다. 주로 제어구조 (if/else, while, do/while, for문)에서 조건식을 만들 때 사용합니다.

동일연산자 (==)

좌,우변의 피연산자가 동일한지를 판별하는데, 내부적으로 피연산자들의 타입을 변환한 후 서로 같은지 비교합니다.

좌우피연산자의 타입이 같으면 true, false로 판정합니다. 원시타입 변수의 값과 객체타입 변수의 값은 내용이 다르기에 값의 의미가 달라집니다. (데이터 자체 vs 객체의 참조) 따라서 같은 객체를 가리키는지 판별하는 것과 같습니다.

좌우 피연산자의 타입이 다르면 두 피연산자가 같은 타입이 되도록 변환 후 다음 규칙에 따라 동일 여부를 판별합니다.

• undefined, null은 같은 것으로 한다
• 한쪽이 숫자고 다른 쪽이 문자열이면 문자열을 숫자로 변환해 비교한다
• 둘 중 한쪽이 논리값이면 true는 1, false는 0으로 변환해 비교한다
• 한쪽이 객체고 다른쪽이 숫자나 문자열이면 객체를 toString이나 valueOf 메서드를 사용해서 원시타입으로 변환 후 비교한다
• 규칙에서 벗어나면 모두 같지 않음으로 판정.

일치연산자 (===)

피연산자를 평가한 후 타입을 변환하지 않은 상태의 두 값을 비교합니다. 타입과 값이 모두 같아야 같다고 판정합니다. Nan은 NaN 을 포함한 모든 값과 같지 않다(false)로 판정합니다. (변수 값이 NaN인지는 isNaN 함수를 활용하면 됩니다.)

논리 연산자

관계연산자를 사용하여 만든 논리식과 결합해 복잡한 논리를 정리합니다. 관계연산자의 우선순위가 논리 연산자보다 높으므로 그럴 경우 괄호를 사용할 필요가 없습니다.

피연산자의 평가

논리 연산자의 피연산자는 논리값이 아니어도 됩니다. 논리값이 아닐 경우 피연산자의 타입을 변환합니다.

• 0, -0, 빈문자열, NaN, null, undefined : false

• 0을 제외한 숫자, 빈문자열을 제외한 문자열, 모든객체, 심벌 : true

논리곱 연산자와 논리합 연산자의 단락 평가

&& 연산자와 || 연산자는 단락평가(short-circuit evalution)를 합니다. 즉 첫 번째 피연산자값이 표현식을 결정하면 두 번째 피연산자를 평가하지 않는 것을 말합니다. 또한 논리곱, 논리합연산자가 가진 자바와의 차이점은, true, false라는 논리값 대신 마지막으로 평가한 피연산자 값을 반환합니다. 

a && b

a 평가값이 false이면 값과 무관하게 표현식 전체값이 false가 되며, b 값은 평가하지 않습니다. 이 때 && (논리곱) 연산자는 false 대신 a의 값 자체를 반환합니다. a 의 평가값이 true라면 전체 표현식 값은 b의 값으로 결정됩니다. true/false 대신 b의 값 자체를 반환하고요. 이렇더라도 논리값이 필요한 장소에서는 논리값으로 타입이 변경되어 식이 정상 작동합니다. (...라는데 안됨..)

&& 논리곱연산자는 객체의 프로퍼티를 이용할 때와 객체가 null인지의 여부를 체크할 때 자주 쓰입니다.

var p = null;
p && p.name // null : p가 false로 평가되므로 p 반환. 우변 평가 x
p = { name: "Tom", age: 18 }'
p && p.name // "Tom" : p가 true로 평가되므로 p.name 반환

논리합연산자 (||)도 값 자체를 반환하는 것은 마찬가지입니다. || 연산자는 여러 값 후보 중 null 또는 undefined가 아닌 값을 선택할 때 유용하게 쓰입니다. time_interval과 animationSettings의 프로퍼티가 정의되어있지 않다면 정수 33을 값으로 사용합니다. (...라는데 안됨..)

var time = time_interval || animationSettings.time || 33;

또한 논리합 연산자는 함수에서 인수의 초기값을 설정할 때 유용하게 사용할 수 있습니다.

아래 예시의 함수 f를 인수 없이 f()라고 호출하면 인수 x에는 undefined가 들어가고, false로 평가되므로 x는 100이 됩니다. f(2) 이런식으로 인수를 지정해주면 x는 true가 되어 2가 됩니다. 단점은 x에 false라고 평가되는 값 (0, 빈문자열) 등을 넘기면 그 값이 사용되지 않고 초기값(예시는 100)이 사용된다는 것입니다.

function f(x) {
	w = w || 100 ;
}

5. 비트연산

비트 연산은 2진수 숫자의 자리별 값(비트 값)을 다루는 연산입니다. 비트연산자는 피연산자를 부호 있는 32비트 정수로 변환해서 처리합니다. 비트연산자에는 비트논리연산자와 비트시프트연산자가 있으며 모든 비트연산자에는 대입연산자를 사용할 수 있습니다.

비트 논리 연산자

비트 값이 0이면 false, 1이면 true로 평가하는 연산자입니다. 자바스크립트에서는 음의 정수를 보수를 사용해서 표현합니다. a의 보수를 ~a+1이라고 표현하는 공식에 따라 ~105 = 105 - 1 = -106 이 됩니다.

비트 논리 연산자

논리 연산의 진리표

비트 시프트 연산자

정수를 2진수 비트 단위로 좌/우측으로 이동(시프트)시키는 연산자입니다. 지정된 수만큼 지정 방향으로 이동시키는데 빈자리는 0으로 채워지고 오버플로된 쪽의 비트 값은 버려집니다. 

비트 대입 연산자

비트 연산의 대입연산자를 사용할 수 있습니다.

6. 기타연산

typeof 연산자 : 단항 연산자이며 피연산자의 데이터타입을 뜻하는 문자열을 반환합니다. 함수 이외의 객체에 대해 모두 object를 반환하여 객체 유형을 알아보려면 instanceof 연산자와 객체의 constructor 프로퍼티를 사용합니다.

var s = "ABC";
console.log(typeof s); //string

?: (조건 연산자) : 3항 연산자로 첫번째 피연산자를 조건식으로 평가한 후 결과에 따라 값을 선택합니다.

var parity = (a % 2 == 0)? "짝수" : "홀수";
// 괄호 안의 값이 true면 짝수 false면 홀수

// 같은 결과
if(a%2 ==0) {
	parity = "짝수";
}else{
	parity = "홀수";
}

void : 정의되지 않은 값 반환

, (쉼표 연산자) : 이항연산자로 왼쪽에서 오른쪽 순서대로 피연산자를 평가한 후 우측 끝 피연산자의 값을 반환합니다. for문 소괄호 안에서 자주 사용합니다.

i = 0, sum = 0, product = 1;

eval 함수 : 연산자는 아니지만 연산자의 역할을 담당합니다. 문자열 하나만을 인수로 받아 JS 코드로 해석합니다. 코드를 평가한 후 마지막 표현식이나 문장의 값을 반환합니다. 문자열을 해석할 수 없을 시 문법 오류를 반환합니다. 

함수가 실행되면 eval 함수를 호출한 환경의 유효범위 내의 변수를 사용하며 일반 함수처럼 함수 유효범위를 만들지 않습니다. eval함수를 호출하는 행위는 인수로 받은 문자열을 코드로 바꿔 eval 함수를 호출한 부분과 맞바꾸겠다는 뜻입니다.

var x = 1;
eval("x++;");


// 이와 같음
// var x = 1;
// x++;

eval 함수로 실행한 코드는 속도가 느리며, 악의적으로 입력한 문자열을 eval 함수에 인수로 넘기면 악성코드가 실행되어 보안 문제가 생길 수도 있는 단점이 있습니다. 따라서 eval 함수 사용 시 인수의 문자열을 분석해서 안전을 확인 후 실행해야합니다.

delete : 객체의 프로퍼티나 배열 요소를 제거

new : 새로운 객체 생성

in : 객체의 프로퍼티 포함 여부를 확인

instanceof : 객체의 종류 확인

7. 명시적 타입 변환

JS는 피연산자의 타입을 묵시적으로 변환해 유연하게 연산을 시행하지만, 변수 값을 출력할 때처럼 명시적으로 타입을 변환해야 할 경우도 있습니다. 아래의 방법을 사용합니다.

숫자를 문자열로 변환

• 숫자 + 문자열

• Number 객체의 메서드 활용 (Number.prototype)

• String 함수 사용 : new 연산자를 붙여 String 객체를 생성하지 말고 String() 이런 형태로 사용하면 문자열을 반환

문자열을 숫자로 변환

• 수식 안에서 문자열을 숫자타입으로 묵시적으로 변환

var s = "2";
s-0 //2
+s; //2

• parseInt와 parseFloat 함수 사용 : 문자열을 해석(parse)해서 숫자로 바꿉니다. 문자를 해석할 수 없을 때는 NaN을 반환합니다. 문자열 앞의 공백은 무시합니다.

• Number 함수 활용

논리값으로 변환

모든 값을 논리값으로 바꾸는 방법은 두가지입니다.

!!x
Boolean(x)

바닐라자바스크립트로 만드는 30일 프로젝트, JavaScript 30 프로젝트의 두 번째, JS and CSS Clock 입니다. 주어진 예제에서 디자인을 바꿔보았고, 기존 예제인 아날로그 시계 말고 디지털 시계도 만들어보았습니다. 

자바스크립트 아날로그 시계 만들기 (코드원본)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS + CSS Clock</title>
</head>
<body>


    <div class="clock">
      <div class="clock-face">
        <div class="hand hour-hand"></div>
        <div class="hand min-hand"></div>
        <div class="hand second-hand"></div>
      </div>
    </div>


  <style>
    html {
      background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
      background-size: cover;
      font-family: 'helvetica neue';
      text-align: center;
      font-size: 10px;
    }

    body {
      margin: 0;
      font-size: 2rem;
      display: flex;
      flex: 1;
      min-height: 100vh;
      align-items: center;
    }

    .clock {
      width: 30rem;
      height: 30rem;
      border: 20px solid white;
      border-radius: 50%;
      margin: 50px auto;
      position: relative;
      padding: 2rem;
      box-shadow:
        0 0 0 4px rgba(0,0,0,0.1),
        inset 0 0 0 3px #EFEFEF,
        inset 0 0 10px black,
        0 0 10px rgba(0,0,0,0.2);
    }

    .clock-face {
      position: relative;
      width: 100%;
      height: 100%;
      transform: translateY(-3px); /* account for the height of the clock hands */
    }

    .hand {
      width: 50%;
      height: 6px;
      background: black;
      position: absolute;
      top: 50%;
      transform-origin: 100%;
      transform: rotate(90deg);
      transition: all 0.05s;
      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
    }
</style>

<script>
  const secondHand = document.querySelector('.second-hand');
  const minsHand = document.querySelector('.min-hand');
  const hourHand = document.querySelector('.hour-hand');

  function setDate() {
    const now = new Date();

    const seconds = now.getSeconds();
    const secondsDegrees = ((seconds / 60) * 360) + 90;
    secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

    const mins = now.getMinutes();
    const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
    minsHand.style.transform = `rotate(${minsDegrees}deg)`;

    const hour = now.getHours();
    const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
    hourHand.style.transform = `rotate(${hourDegrees}deg)`;
  }

  setInterval(setDate, 1000);

  setDate();

</script>
</body>
</html>

자바스크립트 디지털 시계 만들기 (응용)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS + CSS Clock</title>
  <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
</head>
<body>

	<div id="clock">
		<p class="date"></p>
		<p class="time"></p>
		<p class="text">DIGITAL CLOCK with CodingRestaurant</p>
	</div>

  <style>
	html,body {
		height: 100%;
	}
	
	body {
		background: #0f3854;
		background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
		background-size: 100%;
	}
	
	p {
		margin: 0;
		padding: 0;
	}

	#clock {
		font-family: 'Share Tech Mono', monospace;
		color: #ffffff;
		text-align: center;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		color: #daf6ff;
		text-shadow: 0 0 20px rgba(10, 175, 230, 1), 0 0 20px rgba(10, 175, 230, 0);
	}
   .time {
        letter-spacing: 0.05em;
        font-size: 80px;
        padding: 5px 0;
    }
    .date {
        letter-spacing: 0.1em;
        font-size: 24px;
    }
    .text {
        letter-spacing: 0.1em;
        font-size: 12px;
        padding: 20px 0 0;
    }


  </style>

  <script>
	const date = document.querySelector('.date');
	const time = document.querySelector('.time');
	
	function setDate() {
		const now = new Date();
		const dayNames = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
		const day = dayNames[now.getDay()];
		
		let second = now.getSeconds();
		let minute = now.getMinutes();
		let hour = now.getHours();		
		let month = now.getMonth() + 1;
		let today = now.getDate();
		
		hour = hour < 10 ? '0' + hour : hour;
		today = today < 10 ? '0' + today : today;
		month = month < 10 ? '0' + month : month;
		minute = minute < 10 ? '0' + minute : minute;
		second = second < 10 ? '0' + second : second;		
				
		date.innerText = now.getFullYear()+ "-" + month + "-" + today + " " + day;
		time.innerText = hour + ":" + minute + ":" + second;
		 
	}
	setInterval(setDate, 1000);
	setDate();
	
	
	 
  </script>

</body>
</html>

참고하면 좋을 시계 디자인 css

바닐라자바스크립트로 만드는 30일 프로젝트, JavaScript 30 프로젝트의 두 번째, JS and CSS Clock 을 만들어보았습니다. 디자인 수정 시 추가 참고해보면 좋을 css 작업물들 걸어드리면서 포스팅 마무리하겠습니다.

https://codepen.io/kylewetton/pen/QJbOjw

https://codepen.io/Wujek_Greg/pen/KRXYpg

학습의 속도가 빠른 것은 텍스트이기에 이 방법을 선택했다. 가끔 영상은 텍스트 읽기에 지쳤을 때나 클론코딩 시 사용한다. 

C# 참고한 문서

• C# 1번째 내용 (헬로월드 실행) : https://docs.microsoft.com/ko-kr/dotnet/csharp/tutorials/intro-to-csharp/hello-world?tutorial-step=5

• 2번째 내용 (수): https://docs.microsoft.com/ko-kr/dotnet/csharp/tutorials/intro-to-csharp/numbers-in-csharp

• 3번째 내용 (분기문) : https://docs.microsoft.com/ko-kr/dotnet/csharp/tutorials/intro-to-csharp/branches-and-loops

• 4번째 내용 (목록) : https://docs.microsoft.com/ko-kr/dotnet/csharp/tutorials/intro-to-csharp/list-collection

• 5번째 (클래스) : https://docs.microsoft.com/ko-kr/dotnet/csharp/tutorials/intro-to-csharp/introduction-to-classes

사용한 도구

문서 자체의 .NET 편집기

- 화면 우측에 브라우저에서 코드 사용 - 포커스 모드 시작 버튼을 클릭하면 실행된다.

c# 온라인 컴파일러

다른 c# 온라인 컴파일러

추후 참고하면 좋을 도서

• 이것이 C#이다 2018
• 뇌를 자극하는 C# 프로그래밍 (2011)
• C#이 보이는 그림책 (2009)
• C# 프로그래밍 (2015)