쁘띠코딩

콜백 함수는 이름만 언뜻 들어보면 어렵게 느껴진다. 어떤 함수 내에서 호출하기 위해 그 함수를 호출할 때 인자로 넘겨지는 함수를 바로 콜백 함수라고 하는데, 이 콜백함수는 비단 자바스크립트 뿐 아니라 거의 모든 종류의 프로그래밍 언어에서 구현이 가능하다. 예를 하나 들어 보자. const merryChristmas = (name) => { console.log(name + ", Merry Christmas!"); } merryChristmas("Petit"); 위 함수는 매우 단순하다. 이름을 인자로 넘겨주면, 그 이름을 화면에 크리스마스 인사와 함께 뿌려준다. 그럼 새해 인사를 뿌려주는 함수를 하나 더 만들어보자. const happyNewYear = (name) => { console.log(name..

Favicon - 내 홈페이지를 좀더 예쁘게 꾸미는 방법 Favicon은 아주 최소한의 노력으로 홈페이지의 완성도를 올릴 수 있는 방법이다. 바로 브라우저 상단 탭에 내 홈페이지의 로고가 나오도록 하는 것. 이것은 비단 브라우저 탭 뿐 아니라 주소 창에서도 요렇게 보여진다. 파비콘을 삽입하는 방법은 매우 간단하다. index.html내의 파비콘 로고는 16x16, 32x32 등 정사각형으로 준비해준다. 다음 영상에서 파비콘 삽입 예시를 확인할 수 있다 HTML 삽입 미리보기할 수 없는 소스

로또 번호 생성 프로그램~ 광고 등을 통해 많이 보셨죠? 오늘은 로또 번호 생성 코드를 만들어보려고 합니다. 저는 javascript / html/ css를 사용해서 만들었어요 우선 HTML 코드입니다 번호 받기 number클래스로 지정된 div들이 7개의 로또 구슬이 될 거구요, 버튼을 클릭하면 이 구슬들에 랜덤으로 번호가 나타납니다. Javascript코드는 이렇게 될거에요~ button의 onclick이벤트 함수 안에서 구슬 엘리먼트 (number)들 안에 숫자를 표시해 주는 로직입니다. let element = document.getElementById("button"); element.onclick = () => { let result = []; while(1) { var num = parseI..

HTML/CSS UL, OL HTML에서 리스트를 작성하기 위해 사용되는 태그들이 있다. 바로 UL / OL / DL등이 그것인데, 각각 다음과 같은 의미를 가지고 있다. Unordered List (정렬되지 않은 목록) Ordered List (정렬된 목록) Description/Defined List (서술(정의) 목록) Unordered List는 목록이 다음과 같이 보여진다. 목록은 태그 안에 정해주어야 한다. List 1 List 2 List 3 List 1 List 2 List 3 만약 CSS 속성의 list-style-type 항목을 circle로 설정해 주면 이렇게 보인다. List 1 List 2 List 3 CSS를 사용해서 원하는 모양으로 바꾸어 주면 되고, 만약 원하지 않으면 해당 ..

CSS에서 색상 표기법은 여러 가지가 있다. 다음과 같이 배경색을 지정했다고 했을 때, 배경은 무슨 색이 나올까? 1. background: #ff0000; 2. background: #F00; 3. background: rgb(255, 0, 0); 4. background: red; 5. background: rgba(255, 0, 0, 1); 6. background: rgba(255, 0, 0, 100%); 7. background: rgba(255 0 0 / 1); 8. background: rgba(255 0 0 / 100%); 정답은 모두 빨강 이다. rgb의 값은 Red (빨강), Green(초록), Blue(파랑) 이렇게 세 가지로 구성되어 있는데, 이는 16진수 헥사코드에서도 동일한 구성..

Javascript has a special type named undefined. This means, someone defined the variable but didn't set the value yet. For example: var a; console.log(a); // undefined Do you think null == undefined is true? If you use == for comparing them, it's true. (false == false) but if you use === , then it says false. (undefined !== null) That means, they're basically different. Here's an example for unde..

Javascript에서 문자열을 출력할때 보통 다음과 같이 + 연산자를 사용하여 문자열을 출력한다. console.log("Test" + apple + "it"); 그런데 ES6에서는 + 연산 외에도 다음과 같이 ` 기호 를 사용해 문자열 출력이 가능하다. console.log(`Test ${apple} it`); 상황과 취향에 맞게 적당히 골라서 사용하면 된다. :-)

자바스크립트를 처음 시작할 때 다른 언어에는 없어서 헷갈렸던 "===" 이건 도대체 뭘까요? 보통 C언어나 Java에서는 보이지 않는 "==="는 생각보다 단순한 개념을 가지고 있습니다. 예제를 한번 볼까요? 다음 중 어떤 것이 거짓일까요? 10 == "10" 0 == false 1 == true 1 == 1 "apple" == "apple" null == undefined 네, 모두 참(True) 입니다. 타입을 엄격하게 지정하는 Java나 c와는 달리, 자바스크립트에서는 var / let/ const등을 통해 모든 타입의 변수를 선언합니다. 그래서 자바스크립트에서는 "===", "!==" 를 사용하는 것을 권장합니다. 그런 경우 위의 케이스에서 대부분의 비교문들이 거짓(False)이 되겠죠? "===..

안녕하세요, 쁘띠 코딩입니다. C나 Java등과는 다르게 자바스크립트의 경우에는 var 또는 let 을 이용해 다양한 타입의 변수를 선언할 수 있습니다. 그런데 이 변수들은 어떤 차이가 있을까요? 오늘은 자바스크립트 변수 타입에 대해 한번 알아보겠습니다. var는 function scoped 변수입니다. 즉 주어진 함수 내에서 사용할 수 있는 변수를 의미하는데요, 다음과 같은 함수가 있을 때, 이 함수 내에서 해당 변수를 호출하면 그 위치가 어디가 되었든 오류 없이 변수에 엑세스가 가능합니다. const functionScopedExample = () => { valueA = 5; console.log("value A: ", valueA); var valueA = 6; console.log("value ..

4. 연봉 협상 4.1 환율, 세금을 고려해서 내가 받을 연봉 정하기 해외 취업은 우리나라에서 취업하는것과 연봉 체계도 다르고 내야할 세금도 다르다. 연봉협상을 할 때에는 어떤 방식으로 급여를 주는지 미리 파악하고 환율과 세금을 고려해서 내가 받아야 하는 금액을 산정해 놓고 면접에 임하는 것이 중요하다. 4.2 큰 수의 단위는 영어로 어떻게 표현하는지 미리 계산하기 가뜩이나 환율이 다른 것도 헷갈리는데, 큰 수의 단위까지 모르면 연봉 협상시 더 큰 혼란을 초래할 수 있다. 1Million USD = 약 13억원, 1Billon USD = 약 1조 3천억원 등 큰 금액에 대해 원화로 얼마나 되는지 미리 파악을 해 놓는다. 면접을 보고자 하는 회사가 이번에 3Million원을 투자받았습니다. 라고 말한다면 ..