본문 바로가기

TIL -일간학습기록31

Array와 Object의 값 사용하기 학습목표 배열을 생성하고 추가하고 삭제하고 수정할수있다. 배열에서 활용할 메서드를 떠올릴수있다. 객체에서 키와 값을 쌍 혹은 개별적으로 생성, 추가, 삭제, 수정 할수있다. 객체에서 활용할 메서드를 떠올릴수있다. 반복문으로 객체를 조회하는것을 설명할수있다. 배열 배열의 값 = 요소(Element) 순서 = Index(0부터 시작) 배열.length를 사용하면 배열속 요소의 갯수를 알수있다. [대괄호를 이용해만들고 각각의 원소는 ,를 이용해 구분한다.] 없는 요소를 조회하면 undefined를 출력한다. 배열 활용 Method 배열의타입을 확인하는 법 typeOf 를 사용하면 object가 출력되어 객체와 구분할수없음. Array.isArray(확인할 요소) //boolean값으로 리턴함(If문에 바로 적.. 2022. 1. 16.

3W_JS_클로저함수 학습목표 클로저 함수의 정의와 특징에 대해서 이해할 수 있다 1. 함수의 리턴문이 함수인 형태(외부함수 변수에 접근가능한 내부함수) 2. 내부함수는 외부함수에 선언된 변수에 접근가능하다. 3. 함수실행이 끝나도 데이터를 보존한다.(특정데이터를 스코프안에 가둬두고 계속 사용할수있게 한다) 4. 정보의 접근 제한 클로저가 갖는 스코프 범위를 이해할 수 있다(외변접내!!!!!!) 클로저를 이용해 유용하게 쓰이는 몇 가지 코딩 패턴을 이해할 수 있다 발견한것 함수의 매개변수와 전달인자의 유무 / 선언의 유무에 따라 값이달라진다 느낀점 실제 활용문에 많이 적용해봐야겠다. 예제를 오답노트에 정리하면서 다시 봐야겠다. 다음 공부방향 클로저와 스코프를 이용해 어떤 로직을 짤수있을지 궁금하다. 2021. 12. 29.

3W_JS_Scope 학습목표 스코프의 의미와 적용 범위를 이해할 수 있다 Scope 는 범위라는 의미를 갖고, 더 자세히는 변수의 유효범위의 뜻을 갖는다 두log가 동일한 변수를 출력하는듯 하지만 message라는 변수가 안쪽 스코프 ({} 중괄호로 구분됨)에 선언 할당 되어있으므로, 4번째줄에선 출력 가능함. 6번째줄에서는 바깥에서 안으로 들어갈수 없기 때문에 출력할수 없음. -스코프의 주요 규칙을 이해할 수 있다 중첩 규칙 block scope와 function scope(블록-중괄호기준/ 함수-함수로 둘러싼 범위 ) *화살표함수는 블록 스코프로 취급됨 전역 스코프와 지역 스코프 전역 변수와 지역 변수간의 우선 순위 (지역이 우선!) 김코딩 - 박해커 - 박해커 순으로 출력 첫번째 출력시 첫줄의 전역 name이 출력 두.. 2021. 12. 29.

REACT - 21.12.26 - JSX, STATE, PROPS 학습목표 REACT & JSX React의 3가지 특징에 대해서 이해하고, 설명할 수 있다. JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다. React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다. create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다. SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다. SPA의 장, 단점에 대해 이해하고 설명할 수 있다. 와이어프레임을 보고 어느 부분을 컴포넌트로 구분해야 할 지 스스로 정할 수 있다. React에서 npm으로 React Router DOM을 설치(npm install react-router-dom@5.3.0)하고 이용할 수 있다. React.. 2021. 12. 26.

21.12.24 - 배열 항상 어려워하고 헷갈려했던 배열을 다시만났다. 특히 배열의 반복문 부분을 늘 어려워했는데, 오늘 페어와 코플릿을 푸니 할만하게 느껴졌다. 코스리뷰 시간에 크루님이 '어려운게 아니라 낯선 것이다 ' 라는 유명한 교수님의 말을 알려주셨는데.. 섹션1 2회차에 들어온 이후로는 너무나 공감가는 말이다. 1회차에 얼마나 많은 개념들과 낯을 가렸는지 이제 알것같다. 공부하며 느끼는것은 나는 이해를 하고 숙성이 되어야 적용이 가능하구나 하는것이다. 지난주에 늘 말썽이던 함수와 이벤트 핸들러를 공부했는데, 정말 따라적으면서도 이게 무슨말인지 모르겠다 싶었다. 그래서 노트와 펜을 들고 화살표를 그려가며 로직을 그렸다. 그렇게 하고나니 문법도 작성방법도 어떤 타이밍에 써야할지도 알겠고 나만의 함수를 가질수 있게되었다. 내.. 2021. 12. 25.

그림판만들기 21.12.16 canvas태그를 사용해 마우스로 그림그릴 부분을 만들고 range로 붓의 두께를 조절하기위한 부분 Fill,Save 기능구현을 위한 버튼 두가지 10가지의 컬러를 고를수있도록 준비해두었다. 목업중 깃헙에 잔디심으면 좋을거 같아서 급 init > add > commit 했지만 레포지토리가 없어서 push가 안되었고, 이문제를 해결하기 위해 1시간가량 검색해 해결했다ㅎㅎ 오류사항은 오류해결에 따로 작성할것! 이과정을 통해 얻고 싶은것.. 1. 그림판을 만들며 가장 공부하고 싶은부분은 함수의 사용법과 이벤트 핸들러 사용법에 대한 숙지 레퍼런스 없이 구현해보는 것에 초점을 맞춰야 겠지만... 조금은 참고할예정(캔버스에 그림이 그려지는 과정이 이해가 잘안가서...) 2. HTML의 여러 attribute를 사용.. 2021. 12. 17.

바닐라JS로 그림판만들기(feat.니꼬쌤) 이번 주말에 니꼬쌤 강의 보고 따라만든 그림판 컬러칩을 누르면 해당컬러로 펜이 변하고, Range로 펜의 두께를 조절할수있고, Fill/Paint로 캔버스에 도배하거나 그림을 그릴수있게 했다. 펜을 캔버스내에서 움직일때 X,Y의 좌표를 따라 픽셀에 컬러가 이어지게 하는게 어려웠다. Save 기능은 마우스 오른쪽버튼의 기능을 숨긴뒤 버튼에서 저장하는방법으로 제작했다. HTML의 Canvas 로 제작함. 내 기여도 1% ... 이제 안보고 따라 해야지 2021. 12. 15.

4W_JS_React Route 시간이 진짜 왜이렇게 빨리가는지 모르겠다. 메서드 공부하다 갑자기 리액트로 돌아온 블로그.. 그사이에 굉장히 많은 학습이 이루어졌지만, 어제 오늘 리액트 수업듣고 깨달았다. "..아! 여기까지 온것은 다 리액트 배우려고 온거구나!! " 그래서 마음이 편해졌다. 뒤로 구르든 옆으로 구르든 어쨋든 프론트엔드의 꽃, 리액트만 잘해도 반은가겠구나..! (물론 리액트 잘하려면 앞에 배운거 다잘해야함) 여하튼 어제의 기본문법에 이어 오늘은 라우터를 공부했고, 리액트 라우터의 주요 컴포넌트를 배운것 위주로 정리해보려한다. 먼저 라우터를 사용하기 전에 라우터 모듈이 들어있는 리액트 라우터 돔을 설치하여야한다. npm install react-router-dom@5.3.0 우리는 버전 5.3.0을 사용했는데 최신버전 받.. 2021. 12. 3.

3W_JS_Method expect() - 리턴값이 기대값과 같은지 확인하는 함수 expect(테스트하는값).기대하는조건 expect(isEven(3)).to.be.true => 'isEven(3)'의 결과값은 참(true)이어야 한다' expect(1 + 2).to.equal(3) => 'sum(1, 2)의 결과값은 3과 같아야(equal) 한다' 기대하는 조건에 해당하는 함수를 matcher 라고 함. 프레임워크도 있음 (mocha,chai.등) 테스트를 시행할때 기대하는값은 표현식이거나 함수의 실제 실행 결과 1) 표현식: true || false, 1 + 1, 10 * 3 2) 함수의 실행: isEven(3), sum(1, 2) 하지만 엄격하게 비교하지 못할경우엔 expect('테스트하는값').to.equal('기대하는.. 2021. 11. 25.

이전 1 2 3 4 다음

티스토리툴바