본문 바로가기

Javascript9

[React-Redux] 리액트에 리덕스 적용하기 - 노래 리스트 만들기(1) 일주일 정도 리덕스, 리덕스 리액트 공부를 했는데 100% 이해는 하지 못했다😂 이러다간 계속 공부만 하게될 거 같아서 일단 이해한 부분, 활용해 볼 수 있는 부분까지 정리해두고 모르는 건 다시 찾아보고 배우면서 이해하려고 한다. 아래 링크로 걸어둔 두 번째 레퍼런스를 따라서 만들어 봤다. 구현하고자 하는 기능은 노래 목록을을 화면에 출력하고, 해당 항목을 클릭할 때 그 항목의 세부사항이 나오는 기능이다. 여기에 추가로 input 창에 입력한 userData를 버튼을 누르면 화면에 출력하는 것까지구현해 보려려 했으나, 맘처럼 잘 안돼서,,ㅠㅠ!!! 일단 오늘은 인풋창에 입력하면 바로 화면에 출력되게까지만 구현해 봤다.. 방법을알게 되면 다시 이 글에 추가하려고 한다. 1. 리액트 리덕스 환경셋팅 $ cr.. 2021. 11. 18.
[Redux] 리덕스 기본구조 이해하기 미루고 미뤘던,,, 리덕스 공부를 다시 시작했다. 전에 인강 살짝씩 들었을때 음.,,,, 뭔말인지 정말 이해가 안가서 이번에 공부를 시작하기 전에 많이 위축돼 있었는데 제로초님 인강 듣고 조금은 이해가 갔다. (다행,,, 계속 이해 안될까봐 걱정했는데😂) 강의 내용을 바탕으로 리덕스를 왜 사용하는지, 기본 구성을 어떻게 만들어야 하는지에 대해 정리하려고한다. 리덕스는 어떤 상황에서 써야할까? 리액트를 사용해서 프로젝트를 만들다 보면 props로 데이터를 넘겨받는데 한계가 있다. 부모-> 자식으로 넘겨주는 구조인데, 만약 ... ->조부모-> 부모 -> 자식 ->... 이런식으로 과정이 늘어날 경우에는? 그리고 만약 조부모의 데이터 요소를 자식요소에서 사용해주기 위해 일부러 부모요소까지 거쳐서 자식에게 데.. 2021. 11. 12.
[JS] Hoisting 이란? 호이스팅이란? 선언변수와 함수를 가져가서 미리 메모리에 저장을 해둔 다음 호출하는 것이다. 즉, 함수가 실행되기 전에 안에있는 변수들을 범위의 최상단으로 끌어올려서 먼저 선언함. 1) var a = 1; console.log(a); // 1 이럴땐 문제가 없음 2) console.log(a); var a = 1; // undefined 이 경우에 error가 뜨는 게 아니라 undefined 가 뜬다. 이게 왜 가능한가? 호이스팅 때문이다. 자바스크립트는 호이스팅을 할 때 변수의 선언과 초기화(undefined)를 같이 해준다. var는 지역, 전역 변수의 경계가 명확하지 않다. 함수만 지역변수로 호이스팅 되고 나머지는 다 전역 변수로 올라오게 됨. 아래의 코드를 보면 알 수 있음. 3) for (var.. 2021. 10. 11.