궁금한게 많은 코린이의 Developer 노트

타입 스크립트 설치 방법 + 기본개념 에 대해 기록해볼까 합니다. (설치 방법은 node.js를 설치했다는 가정 하에 작성한 것입니다.) Vs Code를 열고, 1. 코드를 짤 폴더를 만든다. 2. 해당 폴더를 오픈한다. (VsCode에서 'File' - 'Open Folder' 클릭) 3. 000.ts 파일 생성 후 코드를 짠다. 4. tsconfig.json 생성 후 내용을 작성한다. (tsconfig.json를 직접 타이핑 해주어서 만든다.) 브라우저는 무조건 javascript 파일만 읽을 수 있다. .ts 파일은 브라우저가 인식을 못한다고 한다. --> ts 파일을 js 파일로 변환해야 사용이 가능하다. 변환 방법: 터미널에 tsc -w 라고 입력하면 index.js 파일이 자동으로 생기고 ts..

저는 Class 탈 부착이라는 용어를 모르고 자연스럽게 강의를 들으면서 사용하게 되었었는데요, 다시 개념을 숙지해보면서 해당 개념을 자주 사용해야겠다는 생각이 들었습니다. 클래스 탈 부착하면 장점 1.애니메이션 추가가 쉽다. (2가지 이상의 애니메이션 사용 시) 2.나중에 재사용이 편리하다. ( : 탈부착할 클래스만 수정하면 되기 때문에) 이해를 돕기 위한 Css / javascript 코드 예시 입니다. 작동 원리는 html 상에서 보여지고 안보여져야 할 대상의 부모 클래스 스타일을 display:none 으로 처리를 해준 뒤에, 버튼을 누르면 show라는 클래스가 보여지고/ 안보여지게 하는 원리입니다. (toggle 메소드 사용) Css .list-group{ display: none; } .show..

Bootstrap의 장점은 UI를 쉽게 만들어볼 수 있다는 점! 사용해보니...신세계다. 맨날 직접 Css 코드를 입력해주었는데 코드 한 줄 이면 내가 원하는 UI를 사용할 수 있다니..! https://getbootstrap.com/docs/5.3/getting-started/introduction/#html5-doctype Get started with Bootstrap Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes. getbootstrap.com Success 이 한줄이면 버튼 스타일이 끝! ㅎㅎ 너무 간편한 것♥ 부트스트랩에서 제공해주는 기본 ..

오늘은 제가 놓쳤던 부분에 대해 기록해볼까 합니다. '버튼'을 클릭하면 동적으로 알림창을 만들어주고 '닫기'를 클릭하면 동적으로 알림창을 꺼주는 간단한 코드 입니다. Html 알림창임 //'버튼' 클릭 시 알림창 열기 버튼 //'닫기' 클릭 시 알림창 닫기 닫기 Css .alert-box{ display: none; width:500px; padding:20px; border-radius: 10px; background-color: rgb(167, 255, 255); } 보통 이벤트 경우 script 태그 안에 많이 적어서, Html 상에서 이벤트를 작성하는 것은 되게 오랜만이여서 신선하게 다가오네요 ㅎㅎ 원리는 div 박스를 display:none;으로 처리를 해놓았다가 '버튼'을 클릭하면 displa..

저번에는 이미지를 배경처럼 만드는 기능까지 구현하였고, 이번에는 div 클릭을 하면, 뒤에 그림이 서서히 바뀌면서 비춰지는 것을 구현해보려고 한다. 구현한 모습이다. 마크업은 항상 Html - Css - Javascript 순으로 하시는 것 알고 계실 것이라 생각하고... Html 코드 Origami Call Me: 010-0000-0000 Email: sera0465@naver.com Instagram: https://www.instagram.com/mino_ng_ppark/ Css 코드 *{ margin:0; padding:0; box-sizing: border-box; } body{ width:100%; height:100%; } header{ width:100%; height:80px; paddi..

자바스크립트 코드가 길어졌을 시 다른 파일(모듈)로 쪼개는 것이 좋다. 다른 파일로 쪼개놓고 첨부해서 사용하는 방법이 import / export 이다. - import: 다른 파일(모듈)로부터 원하는 함수나 클래스, 변수 등을 가져올 때 사용. - export: 함수나 클래스, 변수 등을 다른 곳에서 쓸 수 있도록 내보내기 하는 기능. ▼HTML 파일 안에서 ES6 import 문법을 쓰려면 script 태그 안에 type을 mpdule로 설정해주어야 한다. (index.html) import/export 문법을 사용하게 되면, ※ import 한 원하는 변수, 함수, class는 전부 사용 가능, 하지만 수정은 불가능! 특정 변수를 다른 파일에서 이용할 수 있게 내보내고 싶다면 export defau..

안녕하세요! 어제 지리산 등반을 하고 온 기념으로(?) Destructuring 문법에 대해 정리해 보겠습니다. Destructuring의 사전적 의미는 무엇일까? 궁금해서 찾아보았습니다. 별거없다. 그냥 구조분해라는 뜻을 가지고 있습니다.(...) 구조분해 할당 Destructuring = '패턴 매칭' : 배열이나 객체의 속성을 해체하여 그 값을 변수에 담을 수 있게하는 ES6문법이다. => 직관적으로 변수를 만들어 사용할 수 있음. 구조 분해 할당은 할당문의 좌변에서 사용하여 원래 변수에서 어떤 값을 분해해 할당할지 정의한다. Destructuring 문법은 크게 배열구조분해와 객체 구조분해로 나눌 수 있다. 배열 구조 분해 예시- var x = [1, 2, 3, 4, 5]; var [y,z] = ..

요즘 코딩에 대한 자신감이 붙으면서 이것 저것 만들어보고 싶은 것들을 시도 중이다..! 아직 드라마틱한 기능을 구현할 수는 없지만 내가 아는 선에서 재밌는 것들을 구현해보는 연습을 하고 있다. 과연 내 상상력이 현실이 될까?! 내가 구현하고자 하는 것은 배경이 깔려있고, 그 위에 사각형 여러개를 배치하여 마우스 호버 시에 그림이 보이도록 하는 것이다. 이후에 호버해서 그림이 다 보이게 되면 마우스에 랜덤의 이미지가 생기게 되는 것 까지 구현해보고자 한다. 호버 시에는 뒤에 있는 그림이 보이게 된다. 랜덤한 이미지로 할 지, 해당 그림 이미지로 할 지는 아직 미정이다. 처음엔 이미지를 배경으로 깔고 그 위에 div 박스들을 올리는 방법으로 z-index를 생각해 보았지만, 해당 방법으로는 구현되지 않았다...

어떤 이벤트가 발생했을 때 웹 브라우저가 기본적으로 처리해주는 것을 기본 이벤트라고 합니다. 이벤트의 종류에는 링크를 클릭했을 때 이동하는 것, 로그인 버튼을 눌렀을 때, 제출 버튼을 눌렀을 때 이동하는 것등이 있존재합니다. 보통 웹 브라우저에서 이미지 위에서 마우스 오른쪽 버튼을 클릭 하면, 옵션 창이 뜨게 됩니다. (컨텍스트 메뉴) 모든 img 태그의 contextmenu 이벤트가 발생할 때, preventDefault() 메서드를 호출해서 기본 이벤트를 막을 수 있습니다. 이미지에서 마우스 오른쪽 버튼을 클릭해도 아무 반응이 없는 코드를 작성해보려 합니다. Html Script 해당 코드를 작성하게 되면 기본으로 제공되는 이벤트를 호출하지 않도록 막을 수 있습니다. 이는 곧 인터넷에서 이미지 불펌방..

가끔 코드를 치다가 매개변수가 뭐였지..? 할때가 발생해서 개념에 대해 간략히 정리해 놓으려고 한다. 매개변수란? : 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 말한다. 인수란(arguments)? : 함수가 호출할 때 함수로 값을 전달해주는 값을 말합니다. 자바스크립트에서는 함수로 정의할 때 매개변수의 타입을 따로 정의하지 않는다고 한다. 함수를 호출할 때도 인수로 전달된 값에 어떠한 타입 검사도 하지 않는다. 함수를 호출할 때 함수의 정의보다 적은 수의 인수가 전달되더라도, 다른 언어와는 달리 오류를 발생시키지 않는다. ※ 자바스크립트는 전달되지 않은 나머지 매개변수에 자동으로 'undefined' 값을 설정한다. 매개변수를 가지는 함수에 각각 다른 수의 인자를 전달하..