Buang

'소플의 처음만난 리액트' 강의 필기록입니다. 1. JSX가 뭘까? 자바스크립트를 영어로 JavaScript라고 한다. 이 자바스크립트를 줄여서 JS 라고 한다. JSX에서 JS는자바스크립트를 의미한다. 그렇다면 맨 마지막의 X는? X는 Extenstion에서 x를 따온 것으로 자바스크립트의 확장 문법(A Syntax extenstion to Javascript)란 뜻을 가지고 있다. 쉽게 말해 JSX는 자바스크립트와 연관되어 있으며 자바스크립트 문법을 확장시킨 게 JSX 라고 할 수 있다. 그런데 문법을 확장 시켰다는 데 뭘 확장시킨 걸까? JSX는 JavaScript 에 더해 HTML + XML 까지 합쳐진 코드를 의미한다. JSX의 예제코드를 보면 쉽게 이해가 갈 것이다. let welcomeMes..

'컴포넌트'를 알고 있다는 전제 하에 작성됩니다. 아직 컴포넌트에 대해 모르신다면 '컴포넌트는 뭐고, 왜 쓰는 걸까?'를 참고해 주시면 감사하겠습니다. 더보기 리액트 컴포넌트 1. 리액트 컴포넌트 리액트에서 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트 이 두가지로 나뉜다. 원래 리액트 컴포넌트는 클래스 컴포넌트를 사용했었는데 클래스컴포넌트가 사용하기 불편해 함수 컴포넌트가 등장했다. 2. 함수 컴포넌트(Function Componenet) function Welcome(props) { return 안녕, {props.name}; } 위의 코드는 함수 컴포넌트의 간단한 예제다. Welcome이란 이름을 가진 함수로, 하나의 props 객체를 받아서 안녕이란 인삿말이 담긴 리액트 * 생활코딩님의 React 2..

1. 배열 등장 배경 2. 배열 정의 3. 배열의 수정 4. 배열의 특징 4-1. 많은 요소 포함 4-2. push 4-3. pop 4-4. unshift와 shift 5. 배열과 for문 6. for of문 코딩앙마님의 '자바스크립트 기초 강좌' 영상을 필기한 글입니다. 1. 배열 등장 배경 한 반에 30명의 학생이 있다고 해보자. const Mike = "Mike"; const Jane = "Jane"; .... const Tom = "Tom"; 이를 자바스크립트로 나타내면 위와같이 나타낼 수 있다. 그런데 학생 이름 하나에 변수 하나를 생성해서 만드는 건 시간이 너무 오래 걸리고 코드 길이도 길어진다. 코드 길이를 줄이면서 더 빠르게 30명의 학생 이름을 정리하기 위해 '배열'이란 걸 사용하고자 한..

이전 시간에 객체에 대해서 알아봤다. 아직 객체에 대해 잘 모르시는 분께선 객체 '자바스크립트 '객체'가 뭘까?' 글을 읽고 이 글을 읽는 걸 추천드리다. 이번 시간엔 객체의 method와 this에 대해서 알아보고자 한다. *코딩앙마님의 자바스크립트 기초 강좌를 보고 필기한 글입니다. 1. 메서드 정의 2. 단축구문 3. 객체와 method의 관계 4. 객체에서의 this 사용법 1. 메서드의 정의 const superman = { name:'clark', age: 33, } 위와같은 superman 객체가 있다고 해보자. superman은 이름도 있고, 나이도 있겠지만 superman의 능력 중 하나인 '날아다니기' 능력도 있을 것이다. const superman = { name:'clark', ag..

'코딩앙마' 님의 '자바스크립트 기초 강좌' 필기를 정리한 글입니다. 1. 객체 정의 2. 객체 접근 3. 객체 함수 4. 객체 축약 5. in을 이용해서 true와 false 반환하기 ex) 나이가 20이상이면 true를 반환하시오 1. 객체 정의 객체(Object)란 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 자신과 다른 것을 식별가능한 것을 말한다. 예를 들어 물리적으로 존재하는 사람, 책, 자동차, 컴퓨터 등 과 추상적으로 생각할 수 있는 학과, 강의, 주문 등이 모두 객체가 될 수 있다. 객체의 가장 좋은 예시로 슈퍼맨을 들 수 있을 거 같다. 슈퍼맨 또한 물리적으로 존재할 수 있기에 객체다. 그 슈퍼맨의 이름은 clark고, 나이는 33이다. 이걸 정리해서 표현하면 아래와 같을..

'코딩앙마'님 자바스크립트 기초 강좌 필기록입니다. 함수 표현식: 화살표 함수 사용법 let add = function(num1, num2){ return num1 + num2; } 위와같은 함수 표현식을 화살표 함수로 나타내면 아래와 같이 나타낼 수 있다. let add = (num1, num2) => { return num1 + num2; } function이란 단어가 사라지고 (num1, num2) 뒤에 =>가 생겼다. 함수 표현식은 이렇게 바꿀 수 있다. 함수 선언문은 아래처럼 바꿀 수 있다. 함수 선언문: 화살표 함수 function add(num1, num2){ return num1 + num2 } 맨 처음에 소개한 함수 표현식과 다르게 위의 코드는 함수 선언문이다. add = (num1, n..

1. 컴포넌트 정의 컴포넌트는 사용자 정의 태그라고 할 수 있다. 카페에 갔는 데 바나나 우유와 딸기 우유만 판다고 해보자. 나는 바나나도 딸기 우유도 마음에 들지 않았다. 초코 우유를 먹고 싶었다. 그래서 직접 초코 우유를 만들었다. 이렇게 기존에 있던 것(바나나 우유, 딸기 우유)에서 벗어나 새로운 것(초코 우유)을 내가 직접 만드는 것이 컴포넌트의 개념과 유사하다. 이 개념을 숙지하고 아래 글을 읽어도 좋고, 만약 html을 접해봤다면 더 정확한 개념 이해를 위해 아래 '더보기'를 추가로 보는 걸 추천한다. 더보기 html을 안다면 태그라는 걸 들어봤을 것이다. 태그는 list의 약자로 '목록'을 만드는 태그다. li 태그 외에 head태그, ol 태그, body 태그 등 각자 특정한 기능을 가지고..

1. 함수 선언문과 함수 표현식 정의 자바스크립트에선 함수를 몇 가지 형태로 표현할 수 있다. function sing(){ //sing이란 함수 선언 console.log("LaLaLa~"); } sing(); //함수 호출. LaLaLa가 console 창에 출력된다. 가장 일반적으로 위의 코드처럼 함수이름(sing) 앞에 function 을 써서 함수를 만들어 줄 수 있다. 위와같은 형태를 함수 선언문이라고 한다. let sing = function(){ console.log("LaLaLa~"); } sing(); //함수 호출. LaLaLa가 console 창에 출력된다. 두 번째 방법으론 변수 = function() 형태로 sing이란 이름의 변수를 선언(let sing)하고 그 뒤에 funct..

1. 형변환 등장 배경 10+20의 값은 30이다. 그런데 자바스크립트에선 10 + 20의 값이 1020으로 나올 수도 있다. 이러한 문제는 문자를 숫자로, 숫자를 문자로 바꾸는 형변환에 대해 알면 쉽게 해결할 수 있다. 2. 문자를 숫자로 바꾸기 위의 코드는 내가 두 개의 숫자를 입력했을 때 그 두 개의 숫자의 합을 출력하는 코드다. 예시로 내가 숫자 10과 숫자 20을 입력하면 10 + 20의 결과값인 30이 출력되게 하는 코드인 것이다. 그런데 결과로 30이 아닌 1020이 나와버렸다. 이런 현상이 나타나는 이유는 prompt 때문이다. 코드 첫 줄을 보면 prompt가 보일텐데 prompt는 입력을 받게 해주는 것으로 숫자가 아닌 문자 형태로 입력을 받는다. 예시로 내가 키보드를 통해 숫자 10을..

1. 오아시스 해커톤 대회 팁 다음 오아시스 해커톤 대회가 열릴지도 정확하지 않고, 다음 대회가 열린다고 해도 이번처럼 똑같이 열릴지는 아무도 모른다. 내가 아래에 적은 오아시스 해커톤 대회 팁은 제 3회 오아시스 해커톤 대회에 기반해서 작성한 글임을 미리 인지하고 봐주면 좋을 듯 하다. 1-1. 좋은 팀을 만들고, 원할히 협업하는 방법 1) 일단 빠르게 DM부터 돌리자. 이번 오아시스 해커톤 대회 같은 경우 본인의 자기소개서를 '슬랙'이란 사이트에 올려야 했었다. 기획자라면 기획과 관련한 수상 이력 및 경험을 작성해서 올릴 수 있고, 개발자라면 그간 개발했던 것과 깃허브 링크를 올릴 수 있고, 디자이너라면 그간 작업했던 디자인 작업물 포트폴리오를 올릴 수 있다. 상대방의 자기소개서를 보고 함께 팀을 이..