Minwoo Dev.

이 게시물은 Udemy 의 [The Web Developer 부트캠프 2024] 를 보고 개인적으로 정리한 게시글입니다. CSS에서 많이 사용하는 div를 정렬하기 위해서 사용하는 방법들 중 하나는 flexbox, display 속성의 flex를 사용하는 것이다. 이번에는 display:flex와 함께 사용되는 justify-content, align-items 에 대해서 알아보자. 우선, display의 flex를 사용한 상태에서 시작하겠다. index.html Let's Play With Flexbox CSS를 연결해두었다. 그리고 5개의 div를 만들어 색상을 다르게 지정하였다. app.css body { font-family: 'Open Sans', sans-serif; } h1 { text-al..

Udemy [The Web Developer 부트캠프 2024] 강의 중 섹션 5 : HTML: 폼과 테이블 _ 57. 마라톤 선수 등록 양식 만들기를 보고 만든 폼입니다. Race Registration! First Name: Last Name: Select a Race: Fun Run 5k Half Marathon Full Marathon Email: Password: Select Age Group 0-9 10-19 20-29 30-39 40-49 50-59 60-69 70-79 80-89 90-99 Submit 결과

생성자는 객체를 만드는 역할을 한다. function a() { } let ab = a(); console.log(ab); 예를 들어, 위와 같이 a라는 함수가 존재하고, 그 함수를 ab라는 변수에 넣는다고 하자. ab를 출력하면 , 우리의 의도대로 객체 a 가 들어있어야 한다. 결과 하지만 결과는 undefined가 나온다. 왜냐하면 a 함수는 현재 아무 반환값(return)을 가지고 있지 않기 때문이다. 변수에 우리가 만든 함수(객체)를 넣고 싶을 때, 우리는 생성자인 new를 사용할 수 있다. function a() { } let ab = new a(); // new 생성자 추가 console.log(ab); 위처럼 new 생성자를 사용하여 객체를 추가해주면, new 생성자가 객체를 임의로 하나 생..

사용할 함수.call(this, 사용할 함수의 첫번째 인자, ..., 사용할 함수의 N번째 인자) B라는 함수에서 A객체의 내용을 호출할 때 사용한다. 다시 말해서, 함수 밖의 객체를 함수로 불러와 사용할 때, 사용한다. 인자들은 사용할 함수의 형식을 따른다. 전달할 객체가 없는 경우에는 null, undefined를 넣는다. const minu = { name: 'Minwoo', }; const yewon = { name: 'Yewon', }; function ShowName() { console.log(this.name); } ShowName(); // 아무것도 출력되지 않음 ShowName.call(minu); // Minwoo라는 값이 출력. ShowName() 을 호출하면 아무 일도 일어나지 않..

이 게시물은 인프런 강의 [생활코딩 - 자바스크립트(JavaScript) 기초] 강의를 듣고 개인적으로 기록한 게시물입니다. arguments 함수에 전달된 인자들을 담고있는 객체이다. 아래 코드를 보자. function sum() { let i, _sum = 0; for (i = 0; i < arguments.length; i++) { console.log(i + ' : ' + arguments[i] + "\n"); _sum += arguments[i]; } return _sum; } console.log('result : ' + sum(7, 8, 9, 10)); 위 코드에서 sum은 매개변수가 없다. 하지만 제일 아래의 코드에는 sum(7,8,9,10) 과 같은 방식으로 인자를 전달해주고 있다. 이런..

JavaScript에서 함수는 값으로 사용될 수 있다. 그 말은 즉, 함수가 매개변수와 인자의 값으로도 전달될 수 있다는 이야기인데, 아래 코드를 통해 자세히 들여다보자. function sayDate(month, day, callback) { let wo = '오늘은 ' + month + '월 ' + day + '일 입니다.'; callback(wo); } sayDate('1', '17', function (month, day) { console.log(month, day); }) 위 코드의 sayDate 함수는 wo라는 변수를 가지고 있다. 그리고 함수의 내부에서 wo 변수를 가지고 callback 함수를 실행시킨다. 마지막 줄에서 sayDate를 실행시키는데, 첫번째 두번째 인자는 각각 month와..

이 게시물은 인프런 강의 [생활코딩 - 자바스크립트(JavaScript) 기초] 강의를 보고 개인적으로 기록한 게시물입니다. 값으로서의 함수 JavaScript 코드들을 보면 아래와 같이 함수가 변수에 대입되는 경우를 본 적이 있을 것이다. let a = function(){} 변수에 담을 수 있는 것은 값일텐데, 함수가 어떻게 들어간걸까 ? 그 이유는, JavaScript에서는 함수가 값으로도 사용되기 때문이다. 즉 함수도 객체라는 말이다. 위처럼 변수뿐만 아니라, 객체의 값으로도 사용될 수 있다. a = { k: function () { // k : 속성(property) , funtion(){} : 메소드(method) } }; 위 코드는 객체의 key 값으로 k를 주었고, 그에 해당하는 value..

유효 범위(Scope) JavaScript에서 유효범위란 말 그대로 해당 변수가 유효한 범위를 의미한다. 전역 변수(Global Scope)와 지역 변수(Local Scope)의 유효범위(Scope) Javascript에서 전역변수는 가장 바깥쪽, 즉 어떤 함수나 객체에도 속해있지 않은 바깥쪽에서 선언된 변수를 뜻한다. 전역변수의 예 let global = 2; // 전역변수!! for (let i = 0; i < 10; i++) { let local = 5; console.log(i * 5); } 위 코드에서는 global이 전역변수이다. 그에 비해 for문 안에 속한 local은 지역변수라고 할 수 있다. 지역변수는 함수, 객체 등에 속해있어서 그 객체의 범위만큼만 데이터가 유효하다. 지역변수의 예 ..

클로저(Closure) Javascript에서 클로저(Closure)는 함수의 내부 범위에서 함수 외부 범위의 변수를 보호하는 데 사용되는 형태이다. 예를 들어 아래와 같은 함수가 있다고 하자. let num = 5; function minustwo() { num -= 2; } minustwo(); console.log(num); minustwo라는 함수는 2만큼의 값을 빼는 함수이다. 결과 5에서 2를 뺀 3이 정상적으로 나온 것을 확인할 수 있다. 하지만 위 코드에서는 num이라는 값에 다른 코드들로 언제든지 접근할 수 있다. num이라는 변수가 현재 전역변수이기 때문이다. let num = 5; function minustwo() { num -= 2; } num = 500; minustwo(); c..

포크(Fork) 프로젝트에 참여하는 방법은 여러가지가 있다. 그 중에서 "기여자(Contribute)"가 있는데, 이는 같이 프로젝트에 참여하는 사람을 의미한다. 하지만 오픈소스 프로젝트와 같이 수많은 사람들이 작업에 일정부분 참여하는 프로젝트 같은 경우에는 그 많은 사람들을 다 기여자로 등록하기 어려울 것이다. 그럴 때 사용하는 것이 포크(Fork) 이다. fork는 원본 계정의 Repository에서 우리의 원격 Repository로 포크로 찍어서 가져오듯이 코드들을 가져오는 것을 의미한다. fork는 Github에서 많이 사용하는 Pull Request와 함께 자주 사용되는데, 우선 Pull Request부터 알아보자. PR(Pull Request) 일단 우리가 fork를 통해 원본 Reposito..