목록분류 전체보기 (242)
Minwoo Dev.
Arrow Function(화살표 함수) 화살표 함수(Arrow Function) 형태는 JavaScript에서 흔히 보이는 함수의 선언 형태이다. 기본 함수 선언식 우선, 기본적으로 함수를 선언할 때 우리는 아래와 같은 형식을 사용한다. function add(a,b){ return a+b; } 위 함수는 a와 b를 더하는 함수이다. const add = function (a, b) { return a + b; } 그리고 함수는 객체임을 생각한다면 add라는 변수에 a와 b를 더하는 익명함수를 저장해주는 방식으로도 선언할 수 있다. 위의 함수 선언과 동일한 결과를 나타낸다. 여기서 익명함수는 아래 게시글을 참고하면 좋을 거 같다. [JavaScript] 익명함수(Anonymous Function) 익명..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ciJ9xT/btsEZSCUqxf/830Q04trhxVy3MAjXI8pA1/img.png)
Array.prototype.map(실행할 함수) map() 메서드는 배열에 붙여 사용하며, 배열의 각 요소를 불러와 괄호 안의 내용을 수행하고 반환하여 새로운 배열을 만든다. 즉, return 값이 있다. 예시를 보자. 배열과 map() const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const map = numbers.map(function (number) { return number * 3; // 3을 곱한 값을 반환 }) console.log(map); 위 코드는 1부터 10까지의 숫자가 배열로 담긴 numbers를 map을 사용하여 각 값에 3을 곱한 값을 반환하도록 하는 함수이다. 결과를 보면 map이라는 변수에 3이 곱해진 값들이 정상적으로 들어가있는 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dLs38o/btsEHq6nauY/PyM5aSMkyZKeO0qkCCShz1/img.png)
Props 란 ? 컴포넌트(사용자 정의 태그를 만들기 위한 함수)에 속성값을 받는 매개변수 함수에서의 매개변수(Parameter)와 인수(Argument) 대부분의 프로그래밍 언어에서는 위 그림처럼 매개변수(Parameter)와 인자(Argument)가 존재한다. React에서의 Props 함수에서와 마찬가지로, React의 컴포넌트(Components)가 함수와 비슷한 목적을 지니고 있다고 했으므로 React props는 컴포넌트(Components)의 매개변수(Parameter)인 셈이다. function Header(props) { return ( {props.title} ); } function App() { return ( ); } 컴포넌트 이름 뒤에 괄호로 props라는 값이 들어간 것을 확인..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cI7RJ4/btsENTNmGWY/o4b42nuyOwkuNHigKwE1s1/img.jpg)
컴포넌트란 ? 사용자 정의 태그를 의미한다. 컴포넌트 사용의 장점 코드 양의 간소화 같은 기능의 재사용으로 인한 효율성 증가 web 위와 같은 html 태그에서, header 부분을 우리가 임의로 함수처럼 정의하여 사용하고 싶을 때, 우리는 컴포넌트를 생성한다. function Header(props) { return ( {props.title} ); } 위와 같이 Header라는 컴포넌트를 만들었고, return 값으로 우리가 묶고 싶은 태그들을 넣었다. 이로써 우리는 Header라는 태그만 작성하면 3줄의 태그들이 담긴 코드를 사용할 수 있는 것이다. 위와 같이 사용자가 정의하여 코드들을 기능별로 묶어둔 것을 컴포넌트(Components)라고 한다. 강의들에서 다들 복잡하게 설명하여 어렵게 느껴졌는데..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bLIoRN/btsDQ2Z2uE8/NAAyncuxlY2n0imBkEDkz1/img.png)
이 게시물은 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dfvyO1/btsDGmSxaX7/IfrnkTumK8ZtLLKjCskt81/img.png)
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 결과
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/qW41l/btsDDdzRYMY/LuxJOL1HbdAsCP9sId0MK0/img.png)
생성자는 객체를 만드는 역할을 한다. 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 생성자가 객체를 임의로 하나 생..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/TpRDa/btsDAhctOdK/wx3K5Flb1BJrVFQxeraxGk/img.png)
사용할 함수.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() 을 호출하면 아무 일도 일어나지 않..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/UTwyu/btsDAFcTibC/19o9SEKGvrLT6rIUuDlXPk/img.webp)
이 게시물은 인프런 강의 [생활코딩 - 자바스크립트(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) 과 같은 방식으로 인자를 전달해주고 있다. 이런..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b08JEt/btsDArMoeZj/gmDKCKbQfRkrngMrrer9R1/img.png)
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와..