리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 기반의 라이브러리입니다. 리액트는 순수 자바스크립트와 JSX를 사용하기 때문에 자바스크립트는 알아야 합니다. 기본적인 문법들을 모르신다면 자바스크립트 게시글을 참고해주세요! 👇 javascript #1. 변수, 자료형 자바스크립트가 대세라고 했던가... 대학 재학 4년째에 처음 자바스크립트를 접해봅니다ㅎㅎ.. 제로초로 공부하라고 추천을 받아서 제로초로 자바스크립트 기본기를 다졌습니다! 복습이나 할 dvlpseo.tistory.com 주요 개념 정리 Part.1 feat. 공식문서 JSX - JavaScript + XML 1. JSX JSX는 javascript 코드에 xml을 추가하여 확장한 문법이다. 리액트의 가장 작은 단위의자 화면에 표시할 내용을..

Promise는 콜백지옥 현상을 해결하기 위해 등장한 패턴입니다! Promise가 나오기 전까지는 콜백이 중첩될 때마다 복잡해지고 가독성을 해지는 일이 많아져서 콜백지옥에 빠지는 현상이 많았습니다. 이런 문제를 해결하고 또 비동기 작업을 조금 더 편하게 처리할 수 있도록 도입되었습니다. 기존 비동기 처리(콜백 지옥) 파라미터로 n을 받아 setTimeout으로 5번에 걸쳐 1초마다 1씩 더하여 출력하는 코드입니다. 코드의 깊이가 너무 깊어 가독성이 좋지 않고 복잡합니다. function increaseAndPrint(n, callback) { setTimeout(() => { const increased = n + 1; //클로저 console.log(increased); if (callback) { c..

이번 게시물에서는 Map과 Set이 특정상황에서 유용하도록 추가된 메소드에 대해 이야기해보겠습니다! Map이 무엇인지 잘 모르겠다면 자바스크립트 배열 내장함수에 설명해두었으니 참고해주세요 :) javascript #10. 배열 내장 함수 실무에서 많이 쓰이는 배열 내장 함수!! 배열을 다루어 써야할 때 유용한 내장 함수에 대해서 알아보겠습니다! forEach - for문을 대체하는 함수 //for문 const superheroes = ['아이언맨', '캡틴 아메리카', dvlpseo.tistory.com Map Map 객체는 object를 변형하여 만든 것이라 Object와 상당히 유사합니다. Map은 Object와 달리 넣은 순서가 기억되며 키가 문자열이 아니어도 가능합니다. var map = new ..

실무에서 많이 쓰이는 배열 내장 함수!! 배열을 다루어 써야할 때 유용한 내장 함수에 대해서 알아보겠습니다! forEach - for문을 대체하는 함수 //for문 const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지']; for (let i = 0; i { console.log(hero); }); 만약 배열의 전체 원소를 출력하고 싶다면 forEach문을 사용하여 더 간편하게 구..

JSON이란? JavaScript Object Notation으로 자바스크립트 문법을 빌린 데이터 교환 형식입니다. { "title": "Sujin Park", "age: 23", "Birthday": "2023-02-01", } JSON은 이런식으로 하나의 객체에 데이터를 표현합니다. 객체에는 문자열, 숫자, 불린, 배열, 객체 등등 다 사용가능하지만 함수는 사용이 불가능합니다! 또한 키와 값 모두 큰따옴표로 감싸져야합니다. stringify/ parse var example = { "stringifyMe": "Good", "andParseMe": "bye" }; var string = JSON.stringify(example); // '{"stringifyMe":"Good","andParseMe":"..

자바스크립트식 객체 지향 프로그래밍에 대해 알아봅시다! 생성자 생성자 함수란 , 객체를 생성하는 함수를 말합니다. 객체인데 new를 붙여 함수처럼 호출을 합니다. function Person(name, gender) { this.name = name; this.gender = gender; this.sayHello = function() { alert(this.name + ' said "hello"'); } this.... // 사람의 속성과 메소드를 더 정의할 수 있습니다. } 위 코드는 사람 생성자를 정의한 코드인데 함수처럼 function을 사용하였지만, 함수와 달리 앞에를 대문자로 시작하게 만듭니다. 이렇게 정의해둔 생성자를 new라는 키워드를 사용하여 실제 사람 객체로 만들 수 있습니다!! ne..

구조분해할당이란 비구조화라고 생각하시면 되는데, 객체나 배열을 분해하는 것입니다! 기존 코드 배열 해체 var array = [1, 2, 3]; var a = array[0]; var b = array[array.length - 1]; console.log(a); // 1 console.log(b); // 3 구조 분해 할당을 사용하지 않은 경우에는 배열의 위치를 각각 다 선언해준 뒤 호출하고 있습니다. 객체 해체 var obj = { e: 'Eeee', f: { g: 'Gee' } }; var e = obj.e; // 'Eeee' var g = obj.f.g; // 'Gee' 객체의 값들을 또 다시 변수로 선언해주고 있습니다. 구조 분해 할당 코드 배열 해체 const [c, ,d] = [1, 2, 3..

이번 포스트는 템플릿 문자열에 대해서 가져왔습니다! 템플릿 문자열?? 템플릿 문자열이란 미리 준비되어 있는 틀 안에 문자열을 넣는 것입니다. 이렇게 이야기하면 이해가 안되시죠? 바로 코드를 보여드리겠습니다. 기존문자열 var a = 3; var b = 'hi'; var object = { c: 'friends' }; var string = b + ', my ' + a + ' ' + object.c; // 'hi, my 3 friends' 기존에 문자열을 만들 때에는 +와 따옴표를 사용하고~ 띄어쓰기도 고려해야하고~ 복잡한 방식으로 문자열을 만들었습니다. 템플릿문자열 const string2 = `${b}, my ${a} ${object.c}`; 되게 간단해졌습니다! 따옴표 대신 ` 백틱을 사용하였고 문자..