profile
안녕하세여
태그 목록
전체보기 (68)리액트(25)JavaScript(9)자바스크립트(8)스터디(8)State(5)프론트엔드(5)컴포넌트(4)Props(4)함수(4)localstorage(3)객체(3)배열(3)useEffect(3)json(2)front end(2)onchange(2)useState(2)for(2)스택(2)Flex(2)foreach(2)프로젝트(2)CSS(2)padStart()(2)proptypes(2)Map(2)화살표함수(2)addEventLister(2)setInterval(2)setTimeout(2)부트스트랩(2)조건문(2)코딩(2)Effect(2)연산자(2)반복문(2)모듈(1)수학객체(1)navigator(1)표현식(1)Math.round(1)네임스페이스(1)라우팅(1)프로토타입(1)do/while문(1)HashRouter(1)데이터(1)while문(1)Prototype(1)exact(1)insertBefore(1)중첩함수(1)Math.ceil(1)HR(1)class(1)export(1)argument객체(1)이벤트리스너(1)위치(1)입력값(1)UI(1)이름공간(1)createTextNode(1)이터레이터(1)콜백함수(1)프로토타입체인(1)classList(1)클로저(1)Cleanup(1)filter(1)실행문맥(1)Math.floor(1)복사(1)console.dir(1)삼항연산자(1)재귀함수(1)@Target(1)날씨(1)stringify()(1)first-child(1)그리드(1)html(1)BrowserRouter(1)reduce(1)asi(1)getCurrentPosition(1)preventDefault(1)[...변수](1)데이터타입(1)break문(1)제어구문(1)appendChild(1)continue문(1)array(1)setState(1)시계(1)Fetch(1)geolocation(1)parse()(1)상속(1)JSX(1)setAttribute(1)내장함수(1)semicolon(1)iframe(1)Math.random(1)CreateElement(1)Date(1)grid(1)memo(1)이벤트(1)생성자(1)apply(1)call(1)git(1)switch문(1)믹스인(1)component(1)parentElement(1)math(1)parentNode(1)BEM(1)import(1)요소(1)접근자(1)querySelector(1)prepend()(1)노드(1)라이브러리(1)모더레이터(1)bind(1)CRA(1)PRE(1)프로퍼티(1)세미콜론(1)className(1)for문(1)align items(1)flex direction(1)flex wrap(1)justify content(1)

동적(dynamic) url : url에 변수넣기

ㄴㅇurl에 있는 값, 즉 변수를 반환해주는 함수React Router에 이 url이 변수를 받을거라고 말해준다.id 말고 아무 이름으로나 설정할 수 있다.중요한건

4일 전
·
0개의 댓글

toDo pt.2 - map( ) 함수

기존 배열에 함수를 넣어서 새로운 배열을 리턴할 수 있게 한다.기존 배열 안의 모든 item에 대해 실행된다.첫 번째 인자는 각 item의 value, 두 번째 인자는 각 item의 index이다.콘솔창에 "Warning: Each child in a list shou

6일 전
·
0개의 댓글

toDo pt.1 - state로 배열 추가하기 [...배열]

리액트에선 JS에서 하듯 직접적으로 state를 수정해선 안된다.toDos의 배열을 수정해주고 싶다면와 같은 방법을 써야한다.에서6 이라는 값을 넣으려면,즉 6을 포함한 새로운 배열을 만들고 싶다면이 아닌방법을 써야하는 것이다.

6일 전
·
0개의 댓글

CleanUp

useEffect를 이용해서 컴포넌트가 생성될때는 물론 파괴될 때도 무언가를 할 수 있다.이 함수를 통해 컴포넌트가 언제 create 그리고 destroy됐는지 알 수 있다.위 코드는 아래의 코드와 같은 이야기를 한다.Hello 컴포넌트가 생성될 때 hiFn 이 실행되

6일 전
·
0개의 댓글
post-thumbnail

EFFECTS-2

전체 코드 input창에 이벤트발생할때마다 API를 매번 새로 호출하고 있다. 매우 별로.검색을 예로 들면, console.log("SEARCH FOR", keyword);를 하면, 입력창이 변할때마다 인식하는건 좋은데,counter라는 state가 변할때도 검색이 되

7일 전
·
0개의 댓글
post-thumbnail

EFFECTS-1 리렌더링되더라도 특정코드는 처음1번만 실행시키기

state에 변화가 생길때마다 렌더링은 매번 일어난다.만약 그게 싫다면?특정 코드는 첫번째 렌더링에서만 실행되게 하고 싶다면?예를 들어, "call an API"는 처음 실행될때, 그리고 onClick이 발생해 변화가 생길때마다 호출된다. 만약 처음 실행될때만 위의 콘

7일 전
·
0개의 댓글
post-thumbnail

CRA를통해 propTypes 설치, CSS모듈화하기

콘솔창에 npm i prop-types 입력파일 상단에 import propTypes from "prop-types"원하는 prop에 propTypes 지정CSS파일을 통해 html을 꾸미려할 때, button 이라는 태그에 스타일을 주면 모든 button들에 적용될

7일 전
·
0개의 댓글
post-thumbnail

Props의 type 알기

위와 같이, text 라는 애는 string을, fontSize라는 애는 number를 전달하고 싶은데 실수로 다른 타입의 값을 넣는다면, 잘못 작성한 것이지만 문법상의 오류는 없기 때문에 ReactJS가 캐치하지 못한다.ReactJS가 알아채고 경고문을 띄우게 하기

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

props가 변경되지않는 컴포넌트는 리렌더링하지 않도록 하기-memo

부모컴포넌트의 state가 변하면 props가 변경되는 컴포넌트가 있든 없든 모든 자식컴포넌트는 리렌더링된다. 변화가 없는 컴포넌트의 리렌더링을 방지하는 memo 기능이 있다. memorization의 줄임말임

2022년 1월 7일
·
0개의 댓글
post-thumbnail

props 사용법

props 는 속성 이라고 볼 수 있다. 버튼 2개에 같은 스타일을 주고싶은데, 이렇게 하면, 굳이 같은 스타일을 중복해서 2번 사용해야 한다. 저 속성들을 따로 담아주고 그것을 재사용하는것이 바람직해보인다. 그래서 아예 Btn 이라는 컴포넌트를 만들어주고, ``컴포넌트 2개를 App 컴포넌트 안에 넣어준다. 하지만 버튼마다 텍스트를 각자 다르게 작...

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

State Practice part One-시간변환하기

hours에 사용할 state를 굳이 새로 안만들어주고minutes 변수를 통해 활용

2022년 1월 6일
·
0개의 댓글

state Functions

현재 state 값을 바탕으로 다음 state 값을 계산하고 싶다면직접 값을 설정해주기함수를 전달하기2번과 같이 함수를 사용하는 것이 더욱 안전하다.current 라는 파라미터가 언제나 현재 state인 counter를 줄 것이고, 설령 중간에 예상못한 변화가 있더라도

2022년 1월 6일
·
0개의 댓글

setState part2

그렇다면 왜 변경하는 함수 f 가 필요할까?이전강의에서는 리렌더링을 직접 일일이 했다. 그럴필요 없이 React.useState()함수는 counter같은 데이터를 숫자형으로 넘겨주고, 그 데이터값을 바꿔줄 modifier라는 함수도 제공한다.그 함수를 통해 데이터를

2022년 1월 6일
·
0개의 댓글

setState part1

React.useState() 는 초기값을 설정할 수 있는 함수

2022년 1월 6일
·
0개의 댓글

리액트-페이지 나누기(라우팅)

여러 페이지를 만들기위한 라우팅 세팅해서 사용해보기.

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

import/export 사용하기

코드가 너무 길어져 다른 파일로 쪼개서 연결시키고 싶을 때 사용할 수 있는 import/exportdata.js 라는 파일의 변수, 데이터 등을 App.js 로 보내려면1\. data.js에서 원하는 데이터를 export 하고2\. App.js에서 그 데이터를 imp

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

리액트에 부트스트랩 적용하기

기존 bootstrap을 함께 사용할 수도 있다.React-bootstrap 사이트에서 CSS에 있는, 앞선 글에 있는 부분도 같이index.html에 복붙해주면 적용 잘 된다.

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

리액트 프로젝트 새로 만들기+부트스트랩 설치

새로운 프로젝트 만들기 위해 폴더 새로 열고npx create-react-app 이름어쩌구 터미널에 입력구글에 'react bootstrap' 치고 맨위 사이트 들어가서 npm install react-bootstrap bootstrap 터미널에 입력아래 CSS로 내려

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

class사용한 예전 리액트 문법

예전 문법으로 리액트 작성하기 (class문법, setState함수)

2021년 12월 28일
·
0개의 댓글
post-thumbnail

리액트(React)-사용자가 입력한 글 변수에 저장하기

onChange혹은onInput기능을 통해 input의 값을 출력해주기

2021년 12월 27일
·
0개의 댓글