리액트 공부를 하다 리덕스를 사용하게 되었는데 리덕스...? 리덕스 이론은 알겠는데 어떻게 적용해야할지 막막해져서 블로그 쓰면서 정리해보겠습니다! 🤔Redux(리덕스)란? 자바스크립트 상태관리 라이브러리로 ,자바스크립트 앱을 위한 예측가능한 상태 컨테이너입니다. 리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있습니다. 리덕스를 사용하는 이유 리덕스가 등장하기 전 MVC 패턴 방식으로 데이터 흐름을 관리하였습니다. 그림과 같이 State가 변화하게 되면 MVC에 이벤트가 발생하고 양방향의 데이터 흐름때문에 파악하기 힘든 구조로 되어있습니다. 위와 같이 양방향 데이터의 흐름이라는 문제점을 해결하기 위해 단방향 데이터 흐름이라는 라이브러리로 리덕스를 사용합니..

구조분해할당이란 비구조화라고 생각하시면 되는데, 객체나 배열을 분해하는 것입니다! 기존 코드 배열 해체 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}`; 되게 간단해졌습니다! 따옴표 대신 ` 백틱을 사용하였고 문자..

ES6 때 자바스크립트에 화살표 함수가 추가되었습니다! 기존 함수 코드 var object = { name: 'Zero', friends: ['One', 'Two', 'Three'], alertFriends: function() { var self = this; this.friends.forEach(function(friend) { alert(self.name + ' and ' + friend); }); } }; object.alertFriends(); // 세 번 알림 function(매개변수){} forEach문 안에서 this가 바뀌기 때문에 미리 self에 object의 this를 저장해서 활용했습니다. 화살표 함수 코드 const object2 = { name: 'Zero', friends: [..

ES6에서 자바스크립트의 객체가 변경되었다는데 자바스크립트에 대해 공부하고있는데 차근차근 자바스크립트 변화에 대해서도 살펴보려합니다! 변화 전 코드 var sayYeah = function() { alert('Yeah'); }; var a = 1; var b = 'Wow'; var object = { sayHello: function() { alert('hello'); }, sayYeah: sayYeah }; object[a + 3] = 'four'; object['say' + b] = function() { alert('Wow'); }; 이름 : function(매개변수){내용} 참초하는 변수의 이름과 속성의 이름이 같은 경우 {이름: 이름} 두번씩 씀 변화 후 코드 const a = 1; const ..

먼저 ECMAScript란 자바스크립트의 결점을 보완하기 위해 ECMA라는 단체에서 결점을 보완한 표준 자바스크립트입니다! ECMAScript도 자바스크립트라고 봐도 무방합니다ㅎㅎ ES6는 2015년에 결점을 보완하고자 나온 자바스크립트 버전으로 const와 let부터 얘기해보겠습니다. var VS const와 let 자바스크립트에는 변수를 선언할 때 var뿐이었는데 const와 let이 추가됐습니다. var과의 가장 큰 차이점은 const와 let은 해당 블록에서만 접근할 수 있는 블록스코프를 따르고, var은 함수스코프라서 블록과 상관없이 접근할 수 있습니다. if (true) { var x = 3; } console.log(x); // 3 if (true) { const y = 3; } consol..

이번 게시글은 배열에 관해 설명해보겠습니다. 회사에서 실무를 하다보니 배열이 정말 많이 쓰이는 것을 느꼈습니다! 그래서 배열은 알고계시면 나중에 유용하게 사용되니 잘 숙지해두세요!! 먼저 배열은 var a = [1,2,3] 이런 형식으로 사용됩니다. a라는 변수는 값 1,2,3을 가지고 있는 배열이죠. 배열.length var array = [1, 2, 3, 4]; array.length; // 4 배열.length는 배열의 길이를 반환해줍니다. array의 길이는 4이므로 4가 반환됩니다. 배열.join var array = [1, 2, 3]; array.join(); // "1,2,3" array.join(':'); // "1:2:3" 배열.join은 배열을 구분해줍니다. 괄호안에 아무것도 입력하지 ..

이번 편은 자바스크립트의 반복문에 대해 설명해보겠습니다! 자바스크립트 반복문은 for과 while이 대표적인데 for문 for(시작; 조건; 끝){ 내용 } for (var i = 0; i < 10; i++) { alert(i); } 이 코드 같은 경우에 시작이 var i =0 , 즉 i라는 변수를 0으로 선언하고 0부터 시작한다는 것이고 조건은 i가 10미만일 때 까지 실행하겠다! 끝은 i++로 한번 실행이 완료될때마다 i값을 한개씩 증가시키겠다입니다. 따라서 alert(i)는 0번째부터 9번째까지 총 10번 출력이 됩니다. while문 while(조건) { 내용 } var i = 0; while (i < 10) { alert(i); i++; } for문과 유사하지만 for은 주로 반복 횟수를 정할 수..