본문 바로가기
728x90
반응형
SMALL

분류 전체보기135

1)HTML5_기본 용어 정리_자주 쓰는 태그(1) 기본적으로 Tag는 크게 두가지로 분류를 해볼수 있다 Box tag와 Item teg Box Tag Item Tag header section a video footer article button audio nav div input map aside span label canvas main form img table 그리고 Item tag도 두가지로 나뉘어 진다 Item Tag Block Inline Block은 블록 쌓듯 한줄에 하나씩 쌓이는걸 말하고 Inline은 줄줄이 연결되어가는걸 말한 태그 & 요소 Content class 는 속성을 나타내며 나중 CSS 로 꾸며줄때 저걸 갖다 쓰는거다 페이지의 구조 => 웹 프라우저가 현재 웹 페이지가 html5 문서입니다 라고 하는거 => HTML 페이지의 .. 2023. 6. 21.
0)HTML5_ Web Page.. Let's Start. .! 인터넷.. 요 웹(Web)이라는 녀석이 세상에 나온지 뭐 오래되지도 않았지만 정말 다양한 단말기에서 쓰이고 있음 애플리케이션 수준의 웹 페이지들이 이를 증명하지 않나 웹을 넘어 데스크탑 애플리케이션을 만들수도 있는데.. GitHub에서 아톰(Atom) 이라는 에디터를 만들려고 HTML5 기반의 데스크탑 애플리케이션 개발 엔진인 아톰 쉘을 개발 했는데 이를 나중엔 일렉트론(Electron) 이라 이름이 변경된다 리엑트 네이티브 어도비에서 폰갭 이라고 모바일 애플리케이션 만드는거 뭐 있었는데 그거 성능적으로 하자있어서 페북 측이 모바일 앱 만드는 새로운 엔진을 개발 했다 그게 리엑트 네이티브 이거 쓰면 HTML5로 개발 했을시 내부적으로 안드로이드나 아이폰에 맞는 네이티브 코드로 변환이 된다 HTML5를 잘.. 2023. 6. 19.
14)JavaScript Web Animation Library Typelt 라이브러 글자를 타이핑하듯 만들어내는 라이브러리 https://www.typeitjs.com/ TypeIt The most versatile JavaScript typewriter effect library on the planet. www.typeitjs.com 사용방법으로는 총 JS, React, 워드프레스 이렇게 3가지가 있고 우린 JS를 쓸거니까 이렇게. . 스크립트에 바로 CDN 링크를 갖다 쓸수도 있고 node환경에선 저거 라이브러리를 갖다 설치해 쓸수도 있다 예제 head 태그에 script 태그 두개 넣을껀데 하나는 아까 CDN링크가 든놈이랑 또하나는 타이핑 코드가 들어갈 JS파일 이렇게 준비한다 그리고 JS 파일에 순차적으로 이런식으로... 이벤트리스너를 사용해 콜백함수로 T.. 2023. 6. 14.
13)JavaScript_ES6, ES11에 있 문법 정리 Shorthand property name JS에서 Object는 key와 value로 이뤄져 있다 미리 저렇게 이름과 나이가 변수로 사용되고 있는걸로 이렇게 새로운 Object를 생성해 만든다면 이렇게 된다. . 그런데 만약 저렇게 key와 value의 값이 같은 경우라면 사실 생략해도 된다 뽑아보면 다 같다. Destructuring assignment Object의 key와 value에 접근하기 위해선 이렇게 Object.key를 해야 했다 그런데 해당 Object에 있는 key의 이름 { } 로 정의해 주면 저기 student에 있는 것들과 각각 할당이 되어 진다 그럼 꼭 동일한 명으로만 선언해줘야 함..? Nope. .! 오리지널 키명: 바꿀명 하면 됨 배열에서도 가능함 기존에 배열에 접근 하기.. 2023. 6. 13.
12)JavaScript_함수를 전달하는 기본 개념 정리 함수를 JS에서 전달하는 기본 개념 정리 함수는 뭔 언어를 쓰든 기본적으로 이 2가지만 이해하면 됨 1. 함수 선언 2. 함수 호출 function() 선언과 호출 먼저 뭔 역활을 하는 함수 하나를 이렇게 정의 해보자 저기 () 는 함수의 어떤 값을 전달받아 올건지 인자를 정의하는 부분과 {} 에는 이 함수 안에서 어떤 기능이 수행될 코드가 들어갈 부분으로 나뉘어진다 지금 상태로는 뭔 기능도 없으니 consol.log()를 뽑아보는 기능이라도 넣어보자 여기까지가 함수 선언 한 상태이며 이대로는 아무런 액션도 취하지 않는다 호출을 해야한다 이렇게 특정 기능만 수행하고 끝내는 함수가 있는가 하면 특정 계산을 끝내 값을 리턴하는 함수도 있 값 리턴 함수 값받아 더하는 add라는 함수가 이렇게 있다고 하자 그 .. 2023. 6. 13.
11)JavaScript_ async, await, Promise APIs 앞에서 콜백 함수로 지옥을 보여줬고 https://whaledowny.tistory.com/12 9)JavaScript_Callback, 동기처리, 비동기처리 콜백 hoisting이 된 이후부터 코드가 우리가 작성한 순서에 맞춰서 하나하나 동기적으로 실행된다는것 hoisting?? : var, function 선언등이 자동적으로 가장 위로 올라가는것을 말함. 호이스팅이 이뤄진 whaledowny.tistory.com Promise 를 사용하여 그 지옥에서 탈출도 했으며 https://whaledowny.tistory.com/13 10)JavaScript_ Promise 비동기를 간편하게 처리하도록 도와주는 Object 콜백 안쓰고 이 promise 오브젝트를 써서 비동기 코드를 깔쌈하게 만들 해볼거 - .. 2023. 6. 13.
10)JavaScript_ Promise 비동기를 간편하게 처리하도록 도와주는 Object 콜백 안쓰고 이 promise 오브젝트를 써서 비동기 코드를 깔쌈하게 만들 해볼거 - JS안에 내장되어있는 Object. - Promise는 비동기처리를 할때 Callback 함수 대신 유용하게 사용되는 오브젝트 state : 프로세스가 무거운작업을 수행하고있는지, 기능수행이 완료되어 성공했는지 실패했는지 정보제공 Producer와 제공받는 Consumer의 차이 알아야함 Producer, Consumer Promise 오브젝트를 생성했다 이건 주로 네트워크에서 데이터를 받아온다거나 전송을 할 때 아님 뭔가 큰 데이터를 읽어들인다거나 이런건 시간이 걸린다 그래서 이렇게 시간이 좀 걸리는 녀석들은 비동기적으로 처리를 해야 하므로 프로미스를 쓴다 그리고. ... 2023. 6. 7.
9)JavaScript_Callback, 동기처리, 비동기처리 콜백 hoisting이 된 이후부터 코드가 우리가 작성한 순서에 맞춰서 하나하나 동기적으로 실행된다는것 hoisting?? : var, function 선언등이 자동적으로 가장 위로 올라가는것을 말함. 호이스팅이 이뤄진 순서대로 자동적으로 나타내진다 비동기를 설명하기에 좋은 예로.. setTimeout() 이라고 브라우져에서 제공하는 API가 있음 지정한 시간이 지날시 지정한 콜백함수를 실행하는 녀석임 밀리세컨드 단위라 1000면 1초를 의미하며 저거 읽으면.. 1뽑고~ 셋탐아웃() 1초 뒤에 2뽑으라네? 3뽑고~ 1초됬다 2뽑고 끝내자! 자자 콜백 함수 정리 끝. . 콜 했는데 저 setTimeout() 안에 1초뒤 백해달라함 그래서 1초 뒤에 콜백함수가 실행된다 Synchronous callback .. 2023. 6. 6.
웹 개발을 위한 익스텐션 정리 Microsoft에서 만든 IDE(Intgrated Development Environment). 설치는여기서 하면됨 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 게임 다운 받듯 내 컴사양에 .. 2023. 6. 6.
728x90