You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🚀 자바스크립트에 sleep() & wait() 대기 함수 쓰기
자바스크립트 sleep(), wait() 대기 함수 보통 C언어, 자바, 파이썬에서 보면, 입력한 시간 만큼 코드의 실행을 멈추는 일반적인 기능으로 sleep()이나 wait() 같은 함수가 존재한다. 하지만 자바스크립트에선 따로 sleep()함수가 존재하지 않으니, 직접 개발자가 구현해주어야 한다. while문 활용 시간날짜를 얻는 함수 Date() 와 while문 조건으로 3초 지난걸 확인 function wait(sec) { let start = Date.now(), now = start; while (now - start < sec * 1000) { now = Date.now(); } } console.log(11) wait(3); console.log(22) Promise 객체 활용 우선 P..
![[JETTY] 📀 제티(Jetty) 설치 & 사용법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FxmXV0%2FbtrgogfvU6H%2FCWea1pPlwiiKZEA6t8eBdK%2Fimg.png)
[JETTY] 📀 제티(Jetty) 설치 & 사용법
Jetty 서버 Jetty는 서블릿과 JSP를 지원하는 자바 기반의 WAS 서버입니다. 실제로 Jetty는 다른 WAS에 비해 가볍고 빠르며, 설정도 더 쉽습니다. 게다가 Ant나 Maven, 그리고 이클립스와의 연동이 쉬울 뿐더러, WAS를 코드에 임베딩시켜서 동작시킬 수도 있기 때문에 개발 과정에서 상당한 편리함을 제공합니다. Jetty 설치하기 Jetty 홈페이지에서 다운로드할 수 있습니다. https://www.eclipse.org/jetty/download.html www.eclipse.org 다운로드 한, jetty-distribution-version을 사용하기 쉬운 위치로 이동시킵니다. Jetty Docs에서는 이 위를 $JETTY_HOME이라고 합니다. etc : jetty.xml 파일을..
🎨 CSS 선택자(Selectors) 문법 총정리 모음
기본 선택자 결합 선택자 요소간의 계층 관계를 결합하여 특정 요소나 하위 요소를 선택한다. 일치 선택자 E와 F를 동시에 만족하는 요소 선택 #EF{ margin: 0 auto; width: 1080px; } 자식 선택자 E의 자식 요소 F를 선택 #E>F{ margin: 0 auto; width: 1080px; } 자손 선택자 E의 자손(자식,손자, 등등 안에 있는 모든 태그들) 요소 F를 선택. 자식은 자손에 포함되어있다. 그러므로 자식 선택자를 E F로 써도 가능 #E F{ margin: 0 auto; width: 1080px; } 동위 선택자 동위 관계란 HTML 요소의 계층 구조에서 같은 부모 요소를 가지고 있는 요소들을 의미한다. 이러한 동위 관계에 있는 요소들을 형제(sibling) ..
💿 PuTTy 설치 & 사용법 (SSH / Serial 접속)
PuTTY 푸티는 가장 많이 알려진 SSH 프로토콜은 웹호스팅을 이용하거나, 리눅스서버에 접속하기 위하여 사용하는 원격접속 툴이다. 리눅스나 유닉스 계열의 서버에 원격으로 접속할 수 있는 클라이언트 프로그램으로 무료로 다운 받을 수 있으며, 프로그램 또한 가벼워서 윈도우에서 리눅스로 SSH 프로토콜을 이용하여 접속할 때 많이 사용한다. PuTTY 설치 하기 PuTTy 영문판 Download PuTTY: latest release (0.76) This page contains download links for the latest released version of PuTTY. Currently this is 0.76, released on 2021-07-17. When new releases come ou..
🌐 URL / URI / URN 차이점 - 한방 이해하기
URL / URI / URN 차이점 우리가 브라우저를 통해 웹을 이용하게 된다면, URL 단어는 익숙할 것이다. 하지만 가끔 뭔가 비스무리하면서도 다른 URI와 URN 이라는 단어를 사용하기도 하는데 이번 시간에는 URL / URI / URN 링크 문자의 명확한 차이를 알아보는 시간을 가져보자. 아래 그림에서 볼수 있듯이, URI는 URL과 URN을 포함하고 있다. 이들의 각 뜻은 다음과 같이 정의할 수 있다. URI - 자원의 식별자 URL - 위치(Location) URN - 이름(Name) URI / URL / URN 정의 URI (Uniform Resource Identifier) 통합 자원 식별자(Uniform Resource Identifier)는 인터넷에 있는 자원을 어디에 있는지 자원 자체..
📚 자바스크립트 this vs 제이쿼리 $(this) 차이
자바스크립트 this 자바스크립트에서 this는 현재 실행 컨텍스트에서 참조되는 객체를 가리킨다. 일반적으로 함수 내에서 사용되며, 함수 호출 방식에 따라 this가 가리키는 객체가 달라지게 된다. 예를들어 이베트 핸들러를 인라인으로 등록할 경우 함수내의 this는 버튼이 아닌 window 객체를 가리키게 된다. Button 반면 addEventListener 이벤트 핸들러 같은경우 이벤트에 바인딩된 요소를 가리킨다. 이것은 이벤트 객체의 currentTarget 프로퍼티와 같다. Button 제이쿼리 $(this) 자바스크립트 this와 제이쿼리 $(this)는 명칭은 같을 지라도 실제로 표시되는 정보는 서로 다르다. 제이쿼리에서 $(this)는 이벤트 핸들러 내에서 이벤트가 발생한 요소를 가리키는 역..
📚 return function() 함수를 리턴 하는 기법은 어디에 사용될까?
자바스크립트의 함수를 리턴하는 함수 클로저에서도 보았고 우리는 자바스크립트 코딩하면서 가끔 함수 자체를 리턴하는 함수를 한번쯤은 보았을 것이다. function hello(){ return function world(){ return "Hello Word"; } } const a = hello(); // == world() 원리는 알겠다. 사용법도 알겠다. 그런데 대체 이러한 기법이 어디에 쓰이는건가? 왜 굳이 값을 리턴하면되지 함수안에 함수를 리턴하는가? 지금부터 return function() {} 의 실용 기법을 알아보자. 일반적인 이벤트 콜백 함수 등록법 여기 버튼이 3개 있는 웹문서가 있다. C1 C2 C3 우리는 저 3개의 버튼마다 다음과 같이 이벤트 리스너를 등록할 예정이다. addEven..
🎨 요소 크기 값의 단위 ( % / px / em / vw )
CSS의 크기 단위 현실에선 cm, mm, inch 등의 단위도 존재하나, CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다. px은 절대값이고 em, %는 상대값이다. 프로퍼티 값이 0인 경우, 단위를 생략할 수 있다. 대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100% 로 설정되어 있다. px 단위 px은 픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미한다. 22인치 LCD 모니터의 경우 해상도가 1680 * 1050 인데 이것은 가로에 1680개의 픽셀, 세로에 1050개의 픽셀을 가진다는 의미이다. px은 요소의 크기나 이미지의 크기 지정에 주로 사용된다. 그런데 픽셀은 디바이스 해상도(resolution)에 따라 상대적인 크기를 갖는다. 아래의 1920x108..
🚀 자바스크립트 forEach() 에 break 거는 방법
자바스크립트 break Array.forEach() 는 기본적으로 break 문을 따로 지원하지 않는다. 만일 일반 for문의 break 구문을 forEach에 구현하고 싶다면 다음 3가지 방법이 존재한다. try catch문 안에서 forEach를 돌리고, 강제 throw에러로 루프를 벗어나는 방법 Array.some() 메소드를 쓰는 방법 Array.every() 메소드를 쓰는 방법 try catch - forEach는 return true / false 둘 다 continue로 작동된다. - forEach 자체의 return은 undefined 이다. - 따라서 리턴으로 break를 걸수가 없어 아예 예외처리를 통해서 예외를 throw하여 강제로 루프문을 벗어나게 하는 방법을 쓴다. var arr ..
![[JS] 📚 자바스크립트 map 과 filter 차이](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FObPvs%2FbtrgdDCOJhg%2FNF7RHkAWk8fp1WU511EIg1%2Fimg.jpg)
[JS] 📚 자바스크립트 map 과 filter 차이
자바스크립트 map() / filter() 함수 둘은 매우 비슷하게 생겼다. 콜백함수의 인자도 거의 똑같고 생김새도 완전 판박이라 할수 있다. 다만 각 함수의 리턴하는 기능이 다르다고 볼수 있다. map() callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 생성 arr.map(callback(currentValue[, index[, array]])[, thisArg]) callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가짐 currentValue : 처리할 현재 요소 index (Optional) : 처리할 현재 요소의 인덱스 array (Optional) : map()를 호출한 배열 thisArg (Optional) : cal..
![[JS] 📚 reduce 고차함수 - 이해하기 쉽게 설명](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fl2YDw%2Fbtr0ozOyxI6%2F5K5zk5tg0PJvmpf8UBGWm1%2Fimg.webp)
[JS] 📚 reduce 고차함수 - 이해하기 쉽게 설명
Array에는 map()이나 filter()나 join() 같은 메소드들이 있다. 사실 위의 기능은 모두 reduce로 구현이 가능하다. for in, for of, forEach 를 몰라도 생 for문으로 모두 구현할 수 있듯이 말이다. 한마디로 reduce는 Array메소드들의 아버지라고도 불리울수도 있다. 또한 initialValue에 배열이나 객체를 주면 전역으로 객체변수를 하나 만드는 듯한 효과를 낼 수 도 있다. reduce 고차함수 - 배열의 왼쪽부터 콜백 함수를 실행 후 누산함 배열.reduce( function(acc, cur, index, arr) { } [, initialValue] ) 누산기accumulator (acc) 현재 값 (cur) 현재 인덱스 (idx) 원본 배열 (sr..
![[JS] 📚 map 고차함수 - 이해하기 쉽게 설명](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkNriS%2Fbtr0oPKwDJB%2FQ2kUNON9JrK8gQmZnz9JH1%2Fimg.webp)
[JS] 📚 map 고차함수 - 이해하기 쉽게 설명
map 고차함수 map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다. array를 돌면서 array 로 결과가 출력된다. array.map(callbackFunction(currenValue, index, array), thisArg) currentValue : 배열 내 현재 값 index : 배열 내 현재 값의 인덱스 array : 현재 배열 thisArg : callbackFunction 내에서 this로 사용될 값 var numbers = [ 1,2,3,4,5,6,7,8,9]; function multiplyTwo(number){ return number *2; } var newNumbers = numbers.map(multiplyTw..
