본문 바로가기

전체 글

(47)
리액트 사용 환경 구축 -node.js 설치 하기 (npm을 사용하기 때문) -cmd창을 활용 (cmder추가 설치해도 됨) -페이스북에서 만든 yarn이 보안성이나 성능이 좀 더 좋다. npm대신 사용가능. 그렇다고 해서 node.js를 설치 안하면 안됨. -npm install --global yarn 명령어로 yarn 설치. -cmd창에 작업할 파일경로로 들어가고 -> cd \파일이름\하위파일이름 yarn start를 하면 브라우저에 리액트가 실행된다. -실행하면서 cmd창에 명령어를 입력하고 싶다면 ctrl+c로 종료해야 하거나, 다른 cmd창을 열어서 실행하면 됨. **각자의 버전을 확인할 수 있는 명령어 git -v node -v npm -v yarn -v 크롬 웹 스토어에서 React Developer Tools을..
리액트 개념 정리 리액트란? -유저 인터페이스를 만들 수 있게 도와주는 라이브러리. -사용자에게 ui를 보여주고 이벤트를 처리함. -컴포넌트로 이루어진 라이브러리. 컴포넌트? -컴포넌트는 한 가지의 기능을 수행하는 UI의 단위. -서로 독립적이고, 고립되어져 있으며 재사용이 가능함. -제일 상위에 있는 컴포넌트를 Root라고 함. -컴포넌트 안에 state가 변경되면 리액트에서 자동으로 render함수까지 업데이트 된다. -가상의 리액트 돔트리에서 업데이트를 하기때문에 성능에 문제가 생기지 않는다. *state - 데이터를 가지고 있는 것. *render- 사용자에게 어떻게 보여질지 정의하는 것. **리액트 공식 사이트 Docs: https://reactjs.org/docs/getting-started.html Getti..
JavaScript| 클래스 예제와 콜백 함수 최종 정리 Counter이라는 class안에는 constructor()이라는 함수가 있는데 이건 처음에 생성이될 때 라고 생각하면 됨. 그 안에는counter이라는 변수가 있는데, 이 class를 이용해서 오브젝트를 만드는 순간 0으로 초기가 된다. 그 밑에는 increase라는 함수가 있는데 counter을 1씩 증가 시킨다. (그리고 콘솔창에보여줌) *class에서 함수를 선언할때는 function을 작성하지 않아도 된다. const로 coolCounter이라는 변수를 만들고 new라는 연산자로 Counter의 값을 지정해준다. new라는 키워드를 사용해서 class를 만들게되면 constructor가 실행이 되는데, this.counter를 0으로 초기화 해준다. 그리고 coolCounter에 1씩 증가하는 ..
JavaScript| boolean의 모든 것 / && 연산자 false: 0, -0, ' ', null, undefined true: 1, -1,그 외 모든 숫자, 'hello' , [ ](이것은 텅텅 비어져있지만 배열 자체이기때문에 true) 이렇게 num이라는 변수를 만들고 값을 설정하지 않는다면 출력은 false로 된다. 이유는 값을 설정하지 않으면 undefined가 설정되기 때문이다. 여기서 && 연산자는 앞에가 true일때만 뒤에 문장이 실행된다. 위에 사진에서는 num이 false기 때문에 (undefined이라) 실행이 안된다. 이렇게 num이 8을 작성해서 true로 되자, && 연산자가 출력되는 것을 볼 수 있다. 또, 이것처럼 데이터가 없는것을 출력하면 아예 에러가 뜬다. &&연산자를 사용하면, 에러는 뜨지 않지만 데이터가 없기때문에 실행되지 ..
JavaScript| 함수, 함수 정의, 호출, 그리고 콜백 함수 이런식으로 변수 + 다른변수를 해야할 때, 변수만 가지고서는 같은 작업을 할때 계속 변수를 입력해줘야하는 번거로움이 있다. 이럴 때, 사용하는 것이 바로 함수! 반복 수행할 식을 적어서 이름을 정해준다. 이때, 이름도 간결하지만 의미가 있게 설정해주는 것이 좋다. 이것을 함수라고 하는데 JS에서 함수라고 알 수 있도록 function을 사용해서 선언해주는 것. function add(a, b) { return a + b; } 풀어서 해석하자면, a와 b를 받아와서 두 개를 더하는 식을 add라는 이름의 함수로 선언한다! 여기까지는 정의만 한 것이다. 이것을 이용해서 호출해 보자면, sum이라는 변수는 add함수에 3, 4의 인자를 전달해주는 것. const sum = add(3, 4); 그러면 add함수..
JavaScript| 변수(primitive) 타입과 object의 차이점 변수 : 데이터를 담는 곳 - 자세한 정보를 담고있는 이름이 좋다. 변수를 선언하면 그 변수를 위한 공간이 생긴다. 그 공간안에는 데이터가 담겨있다. 여기서, number2의 변수 데이터 값을 변경하면 number2만 변경이 된다. number에 있는 값만 복사해서 붙여넣은거라 number에는 영향이 가지 않는다. object 오브젝트는 number, string, boolean, null, undefined를 제외한 모든 것이다. 오브젝트란? 최소한 한 두 가지의 다양한 데이터를 한 곳에 묶어 놓은 것. (배열, 리스트, 함수등 모두가 오브젝트다.) 오브젝트는 적어도 한 두 가지 이상의 큰 데이터가 들어있기 때문에 단순하게 변수를 선언해서 담아 놓을 수 없다. 오브젝트 안에 있는 name과 age의 k..
Dream Coding | 쇼핑몰 미니 게임 만들기 5편 / handling events 마지막으로 setEventListeners의 함수를 만든다. 로고와 버튼을 등록한다. 버튼이 들어있는 컨테이너 자체의 이벤트 리스너를 등록한다. 이것을 이벤트 위임이라고 한다. 하나 하나의 이벤트 리스너를 반복해서 등록하는 것 보다, 버튼들이 들어있는 컨테이너에 이벤트리스너를 등록해서 한 곳에서만 핸들링할 수 있도록 만드는 방법. logo.addEventListener('click', () => displayItems(items)); 로고가 선택되면 모든 아이템들이 보여질 수 있도록 하는것. buttons.addEventListener('click', event => onButtonClick(event, items)); 버튼이 클릭되면 이벤트를 처리할 수 있도록, 이벤트가 발생한 아이를 인자로 전달해주고..
Dream Coding | 쇼핑몰 미니 게임 만들기 4편 / display items fetch로 json파일을 받아 왔으면, 화면상에 item들을 보여주는 식을 작성할 것이다. 이렇게 displayItems의 함수를 만들어줄 건데, 함수 안에는 container를 만들고, document.querySelector로 items의 클래스를 선택해준다. 그리고 이것을 html언어로 만들어줄 것이다. 위에서 만든 container의 innerHTML을 이용해서 우리가 받아온 items를 li의 그룹으로 만들어서 container에 추가해줄 것이다. 즉, items안에 json으로 정의한 아이템의 오브젝트들을 HTML요소로 변환을 해줄 것이다. 한 가지의 배열 형태에서 다른 형태의 배열로 변환하는 것, 맵핑하는 것은 map을 이용하면 된다.👇 container.innerHTML = items.m..