본문 바로가기

분류 전체보기48

Weather API & data component 오늘자 todolist 작업 1. 와이어 프레임 + 컴포넌트 나누기. 2.Data , Weather Component 만들기. 1. 와이어 프레임 + 컴포넌트 나누기. 전체 페이지는 App에 띄우고, 다른 컴포넌트들은 각자 할일을 작게 나누어 만들기로 했다. App에 표시될 컴포넌트 외에는 List폴더에 따로 담아두었다. 어떻게 state와 props를 내려주어야 할지 헷갈릴것 같아서 부모자식간의 트리구조도 표현해봤다. 매일 반복할 일정을 띄울 DayLoop와 당일 일정후엔 리셋 될 TodoList는 AddList를 통해 사용자가 일정을 추가할때 토글버튼을 이용해 맞는 컴포넌트Prop으로 내려 줄 예정. remove는 어디에 포함해야할지 잘모르겠어서 진행하다가 끼워넣을거 같은데 아마 addlist에 들어.. 2022. 2. 5.

[React 자습서] Tic Tac Toe.. 투두리스트를 시작 하기에 앞서 리액트를 너무 모르는거 같아, 공식문서 자습서의 틱택토를 공부하고있다. function Square(props) { return ( {props.value} ); } class Board extends React.Component { constructor(props){ super(props); this.state = { squares: Array(9).fill(null), xIsNext : true, }; } handleClick(i) { const squares = this.state.squares.slice(); if(calculateWinner(squares) || squares[i]){ return; } squares[i] = this.state.xIsNext ? '.. 2022. 2. 3.

[TodoList]create react app 설치 프론트엔드 개발셋팅을 도와주는 툴 인 create react app 을 이용하여 투두 리스트를 시작하려고 한다 터미널에 `npx create-react-app todo` 를 넣었는데 뭔가 에러가뜸. 읽어보니 버전의 문제인것같고 해결하기 위한 명령어와 참고할 사이트 주소를 알려주어서 검색해봄. 리액트 공식문서에 가보니 이전에 create react app을 전역적으로 설치하였을 경우 삭제후 재설치하여 항상 npx 최신 버전을 사용하는것을 권장함. 그래서... 위의명령어로 삭제 해보려했는데 뭔가...무서워서 npm 버전 확인후 업데이트 하는법을 검색 해서 -g를 넣은 (-g는 global로 전역 설치?? 를말하는것 같다 npm 명령어 인듯) cra를 다시 설치 해봤지만 이버전은 안쓰이는 버전인것같다. 얼른 .. 2022. 1. 30.

리액트로 Todo list를 만들어보자 투두리스트를 쓰고싶은데 마음에 드는게 없어서 만들어보기로함 공부에 도움될수있도록 리액트 날씨api 비동기(어디서 들어가야할진 모르겠지만..) 부캠에서 배우는것들을 되도록 많이 사용해볼예정 2022. 1. 30.

Call back 함수로 Method 만들기 학습목표 forEach() ,indexOf(), map(), slice(), reduce(), filter()와 같은 메서드를 자바스크립트 코드로 만들고 만든 함수를 콜백하여 다른 함수를 만들어보자!😎 (비동기에서 콜백을 원활히 쓰기위한 선행학습) 만든것 예제.slice() _.slice = function (arr, start, end) { let _start = start || 0, _end = end; // 입력받은 인덱스가 음수일 경우, 마지막 인덱스부터 매칭 // (ex. -1 => arr.length - 1, -2 => arr.length - 2) // 입력받은 인덱스는 0 이상이어야 한다. if (start < 0) _start = Math.max(0, arr.length + start); .. 2022. 1. 24.

22.01.23 내가 자료구조를 쉽게 쓰는 날이 올까? 어려워서 너무 하기 싫다 + 중요한거라 자꾸 미루고싶다 그래도 꾸준히 해보고 포기하지말자 화이팅😣 2022. 1. 24.

Class와 Instance 학습목표 클래스와 인스턴스라는 용어를 이해할 수 있다. new 키워드의 사용법을 이해할 수 있다. class 키워드의 사용법을 이해할 수 있다. 현실 세계의 모델을 바탕으로 클래스의 메서드와 속성을 디자인할 수 있다. 객체 지향 프로그래밍 특징을 이해할 수 있다. 캡슐화 상속 추상화 다형성 JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다. Prototype이 무엇인지 이해할 수 있다 객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다. 상속관계를 가진 현실 세계의 모델을 코드로 작성할 수 있다. 클래스 상속의 원리를 이해할 수 있다. Prototype chain을 이해하고 설명할 수 있다. (__proto__) 면접에 자주등장하는 개념이라고 하니 잘.. 2022. 1. 22.

섹션 2 1주차 회고 너무나 기대하던 섹션2 1주차가 끝난 오늘 지난 5일을 돌아보며 적는 회고록. 우선, 섹션2 첫인상 너무 강렬하다... 오티시간에도 크루님이 진짜 어렵다고 하셨지만, 거짓말이였다. 어나더 레벨의 어려움이다. 지난 섹션1이 어려움 ㅠㅠ 였다면 여긴 좀 불바다 느낌이다. 살려주세요!! 했는데, 다 같이 조난자인 느낌... ㅋㅋㅋ 하지만 그만큼 성취감도 엄청나서 뭔가 알겠다 싶으면 기분이 날아간다 ㅎㅎ 섹션 2 1주차 하면서 좀 고민인 부분이 레퍼런스와 검색에 대한 부분이다. 코스에 많은 사람이 참여해서인지 첫검색 상단에 과제나 코플릿 관련 레포가 뜬다.. 이게 첨엔 정리 된걸 읽으려 들어갔다가 레포를 만나 버리니까, 근데 나는 또 안풀리는중이니까 슬쩍 읽게 된다 ㅜㅜㅜㅜ.. 공부안되면 어쩌지 하는 불안감이 .. 2022. 1. 22.

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

이전 1 2 3 4 5 6 다음

티스토리툴바