profile
wishing is not enough, we must do.

slack 클론코딩 3 babel, webpack설정 // 20210430

js와 ts의 간단 비교 js의 변수, 함수의 매개변수, 함수의 리턴값에 타입이 붙어있다고 생각하기ex) const config : webpack.Configuration ()위의 경우 변수 config에 타입(webpack.Configuration)을 붙여준건데 저

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

slack 클론코딩 2 // 20210429

세팅하는데 원래 좀 걸린다그래서 강좌 소스코드에 같이 동봉되어있는데 직접 세팅해보면서 익히는게 중요함그걸 쓰면 기본 세팅이 다 포함되어있기 때문에 뭐가 문제인지 모르는 경우가 생길 수 있음. 그래서 없이 연습을 하는게 좋다.git bash 쓰는걸 추천. git 설치하면

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

slack클론코딩 1 // 20210426

https://www.inflearn.com/course/%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9-%EC%8B%A4%EC%8B%9C%EA%B0%84%EC%B1%84%ED%8C%85죽~죽 처지는 react 공부 텐션..뭐라도 만들어봐야

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

import, require, export // 20210422

node의 모듈 시스템에서 사용되는 키워드. module.exports로 모듈화된 소스코드를 다른 파일에서 불러옴.남이 만든 스크립트도 require로 불러올 수 있음.(ex: react)import도 require처럼 소스코드를 가져올 수 있는데 문법은 아래대신 im

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

webpack dev server, hot reloading // 20210421

웹팩을 사용할 경우 코드를 조금만 수정하더라도 npm run dev 또는 npx webpack을 통해 다시 리로딩을 해야하는 것이 불편함.그럴때 조금씩 수정한건 바로 반영이 되도록 하는 핫 리로딩 방법package.json에서script dev 명령어를 "webpack

2021년 4월 21일
·
0개의 댓글
post-thumbnail

@babel/preset-env와 plugins // 20210421

preset-env는 plugin의 모음. 기본적으로 babel은 최신 문법을 예전 문법으로 작동하게 해주는데 preset-env는 예전 브라우저에도 적용을 해주는 기능이 있음.이런 preset-env에 대해 추가로 옵션을 적용할 수 있음.이런 브라우저 옵션 등은 웹팩

2021년 4월 21일
·
0개의 댓글
post-thumbnail

구구단 webpack으로 빌드하기 // 20210417

기존에 cdn방식으로 react를 호출해서 단일 html형식으로 빌드했던 구구단을 webpack을 사용해 빌드해보기.\-author, license정도만 수정npm i react react-domnpm i -D webpack webpack-clinpm i -D bab

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

webpack으로 빌드하기 // 20210416

1. webpack 빌드 준비 webpack실행하려고 터미널에 webpack이라고 바로 치면 에러나옴. webpack이 명령어로 등록되지 않았기때문. package.json에서 script에 'webpack'을 test명령어로 등록해주면 터미널에서 webpack명령어로

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

모듈시스템과 webpack설정 // 20210412

컴포넌트를 모듈화함. 전체 코드 소스를 실행시키는게 아니고 각 코드 소스를 모듈화해서 필요한 코드만 불러와 실행모듈화하면 코드 유지보수도 간편해지고 재사용성이 뛰어남.코드 맨 위에서 React 호출 필요코드 맨 아래에서 해당 컴포넌트 모듈화해서 export해야 다른데서

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

webpack 개발환경 세팅(Create-React-app x) // 20210408

여러개의 js 파일을 합쳐서 하나로 만들어줌중복을 최소화하기 위함Node.js를 알아야 함(= js 실행기)프로젝트 시작 경로에서 실행package.json 생성react, react-dom 설치웹팩 설치\-D : 개발용으로만 사용할 것웹팩 모듈 정보 기록용

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

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개의 댓글