profile
wishing is not enough, we must do.

React로 구구단 만들기 #2 //20210325

원래 render 함수 내에서 return 내 최상위에 아무 의미 없는 div태그로 감싸줘야 함.이 div는 element상으로 의미없는 div가 생기는 건데 이러면 css적용 등에서 문제가 될 수 있음.div 태그를 React.Fragment로 바꿔주면 문서구조에서

2021년 3월 25일
·
0개의 댓글

React로 구구단 만들기 // 20210319

react로 구구단을 만들어본다.React, ReactDOM, Babel은 cdn으로 사용GuGudan class 기본 틀을 만들고, GuGuDan을 렌더링하는 구조로 제작.this.state로 상태값의 default값을 설정해준다.대상은 1)곱하는 숫자 앞 2)곱하는

2021년 3월 20일
·
0개의 댓글

Using FireBase Auth // 20210308

nomadcoder 보고 공부하기Router에 있던 state를 지우자왜 지우느냐?Router는 라우터로서의 역할만을 해야 함. 페이지에서 state를 정의하지 않고 다른 페이지로 라우팅 하는 역할App.js에서 상태값을 props로 전달받아야 함.App.js에서 st

2021년 3월 10일
·
0개의 댓글

React Hooks, Routers // 20210308

프로젝트 진행 중에 리액트를 공부하면서 개념적인 부분들 정리함수형 컴포넌트에서도 상태관리(state, LifeCycle)를 할 수 있는 다양한 기능 제공내가 느끼기에는 내장 메소드와 비슷한 느낌인듯..사실 이 얘기를 듣기 전까지는 함수형 컴포넌트와 클래스형 컴포넌트의

2021년 3월 8일
·
0개의 댓글

2021.02.26 TIL

velog를 쓰지 못한 약 한달 반동안 굉장히 많은 일이 있어서 ㅠㅠ 오랜만에 쓴다. 이번에는 우리 팀의 프로토타입으로 테스트를 진행하기로 했는데 웹 플랫폼을 구축하기로 함. 그렇지만 내가 프론트엔드만 공부한 관계로 전체 서비스를 구축하기 전 테스트는 firebase로

2021년 3월 2일
·
0개의 댓글

TIL // 2021.01.08

데이터 수정 시에도 불변성을 지켜줘야 함map 함수를 사용할건데 아래 예제 참고위의 배열을 데이터 수정 없이 id 1인 객체의 text값을 korea로 바꿀 예정

2021년 1월 11일
·
0개의 댓글

TIL // 2020.01.07

컴포넌트 렌더링에 이어서\~~두 개의 신규 컴포넌트 생성1) PhoneInfo : 각 전화번호 정보를 보여줌info 객체를 props로 받아와서 렌더링해줌info값을 전달해주지 못할 경우 컴포넌트가 crash로 에러 발생함info가 undefined일 때는 비구조화 할

2021년 1월 7일
·
0개의 댓글

TIL // 2021.01.04

리액트에서 배열을 다룰 때 평소 다루던 것 처럼 하면 안됨js에서는 데이터 추가시 이런 식으로 push를 사용했는데, 리액트에서는 그러면 안된다.불변성 유지가 중요하기 때문.불변성 유지란? state 내부의 값을 직접적으로 수정하지 않는 것.push, splice

2021년 1월 4일
·
0개의 댓글

TIL // 2020.12.30

Props와 State가 너무 헷갈려서 복습부모 컴포넌트가 자식에게 주는 값App.js(부모) -> MyName.js(자식) 값 전달 예시App.jsMyName.js데이터 전달받지 못했을 때에 디폴트값을 설정해주는 방법단순히 데이터를 전달받아서 렌더링만 하는 경우엔 함

2020년 12월 30일
·
0개의 댓글

TIL // 2020.12.28-2

리액트에서 배열을 다룰 때, 자바스크립트처럼 this.state.array.push('some value')이런 식으로 하면 안된다.왜냐? 불변성을 유지해야 하기 때문state 내부의 값을 직접적으로 수정하지 않는 것을 불변성 유지라고 함.불변성을 유지해야 데이터가 필

2020년 12월 28일
·
0개의 댓글

TIL(2020.12.28)

npm 프로젝트 진행 시 init(초기화)단계 이후 작성되는 파일내 프로젝트의 카탈로그라고 할 수 있음. 카탈로그만 봐도 어떤 제품에 대해 파악할 수 있는 것처럼 package.json만 봐도 어떤 모듈이 포함되어있는지 알 수 있다.간단히 몇 가지 특성만 알아보자면해당

2020년 12월 28일
·
0개의 댓글

TIL(2020.12.24)

node.js를 직접 사용하지는 않지만 webPack, Babel이 node.js를 사용하기 때문에 필요함.windows는 공홈에서 설치(windows 8.1이상)이거땜에 포맷함 ㅎ 사실 할 때 됐지..node.js를 설치하면 npm이라는 노드 모듈 관리자가 설치됨.프

2020년 12월 24일
·
0개의 댓글

TIL(2020.12.21)

Application Programming Interface. 응용프로그램 프로그래밍 인터페이스.응용 프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스인터페이스란?인터페이스(interface)는 컴퓨터 시스템끼리

2020년 12월 21일
·
0개의 댓글

TIL(2020.12.16)

this!

2020년 12월 16일
·
0개의 댓글
post-thumbnail

TIL(2020.12.14)

state에 대해 공부하기 전 Props에 대해 리와인드부모가 자식에게 값을 내려줄 때 사용사실상 Props는 자식입장에서 볼 때 읽기 전용임.state는 콤포넌트가 내부에서 갖고 있음props와 달리 변경이 필요할때 사용state는 setState()함수 사용해서 변

2020년 12월 16일
·
0개의 댓글

TIL(2020.12.10)

기존 html상에서 문자열로 넣어주던 형태와 다르게 적용함.리액트 상에서는 객체 형태로 스타일을 적용함기존 background-color 같이 하이픈으로 구분하던 것을 카멜케이스로 구분함.ex) background-color: white; -> backgroundCol

2020년 12월 10일
·
0개의 댓글

TIL2(2020.12.07)

js에서 반복적이고 자주 사용되는 작업을 자동화해주는 툴(또는 빌드 시스템)작업시간을 줄일 수 있어 생산성 향상에 큰 도움이 됨Grunt 또는 webpack과 비교됨js 라이브러리, 서드파티 앱 등을 모으고 축소/압축단위테스트(unit test) 수행less/css 컴

2020년 12월 10일
·
0개의 댓글

TIL(2020.12.07)

실수로 통으로 날려서 대강 날림으로 재작성...변화가 일어나면 브라우저의 DOM에 새로운 것을 넣는 것이 아니라, js로 이루어진 가상의 DOM에 한번 렌더링(서버로부터 html파일을 받아 브라우저에 뿌려줌)을 하고 기존의 DOM과 비교 후 정말 변화가 필요한 곳에 업

2020년 12월 10일
·
0개의 댓글