React

리액트(React) 는 자바스크립트 라이브러리(웹 프레임워크)의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.출처 : 위키백과이외에도 유명한 Vue,Angular... 등이 있다.알아보기 쉽게 Reac

이전 글인 React - 기초의 처음으로 돌아가 보자.버튼을 누르면 counter가 늘어나는 코드가 있었다.이 코드를 다시 React JSX(JavaScript XML) 문법으로 작성해 보자.두개의 공통점은 대괄호{}를 사용한다는 것이다.EventListener의 경우

React의 input 사용법을 알아보자.기본코드는 생략...이 코드를 보면 어떠한가?그렇다 html과 다를게 없다.<label>도 같이 사용이 가능하다.html에서는 <label for="minutes"> 형태이지만react에서는 위 처럼 표현해주면 된다.

기존 component인 App의 내용을 제목 빼고 다 지운 뒤 나머지 내용을 MinutesToHours라는 component에 넣어보자.제목을 제외한 나머지 코드 복붙이제 이 컴포넌트를 App 컴포넌트에서 불러와 보자.뿅아주 간단하게 불러 오는걸 볼수있다..그렇다면

PropTypes 는 전달받은 데이터의 유효성을 검증하기 위해서 다양한 유효성 검사기(Validator)를 내보낸다. ReactJS만약 prop의 속성을 string,number 등 으로 정해 놓거나 경고를 보고 싶다면 PropTypes를 사용해 보자.여기서 text

node.js 설치vscode 설치자동으로 만들어지고 y누르라고 하면 눌러주자.src폴더로 들어가서 필요없는 파일 & 내용 삭제 (index.js , App.js 빼고 전부 삭제했음)terminal 켜서 react시작!

이제 모든 준비가 끝났다.바로 시작해 보자!Button.jsReact App이라고해서 다를게 전혀없다.이전 처럼 prop을 활용하고 tag도 넣어서 사용한다.그러나 Button.js를 다른 js파일에서 불러오려면 export를 해주어야한다.export defalut c

useEffect의 구조 useEffect React에서 중요한 Hook중의 하나 이다. useEffect 는 코드가 딱 한번만 실행될 수 있도록 보호 해주는 역할이다.import 코드예시 코드를 작성하여 알아 보도록 하자이 코드는 컴포넌트의 변화가 일어날 때마다 계속

클릭하면 글자가 바뀌는 버튼을 만들어 보자.삼항연산자를 이용해 state가 true면 Hide false이면 Show가 보이는 기능그 다음은 Show를 눌럿을때 제목이 나타나는 함수를 만들고 useEffect를 사용해서 컴포넌트가 생성될 때 콘솔을 띄우게 해보자.Sh

먼저 form을 만들고 그 안에input과 버튼을 만들어 보자.form 에는 onSubmit 기능을input 에는 onChange 기능을 넣어주자.submit 에는 새로고침 되는 기능을 없애고 공백일 경우에 반응이 없도록 만들었고 submit된 후에는 공백으로 변환하게

이번에는 코인(암호화폐)들의 정보를 가져오는 API를 사용해 볼 것이다.coinpaprika의 API를 사용하였다.코인정보가 대략 8000개 쯤 되는데 렉이 장난 아니여서limit을 넣어 50개만 받아오게 하였고fetch로 받아온 정보가JSON형식이기 때문에 JSON으

2022년 6월 4일 기준 영화목록이 API의 아쉬운 점은 여러모로 많은데 우선 10개 제한의 영화 수량, 장르, 포스터 등 좀 아쉽긴하지만 그냥 테스트용 으로 데이터 추출할 때는 간단해서 쓰기 편할것 같다.

회원가입과 간단한 튜토리얼은 여기를 클릭!내용은 이전 포스팅한 글과 별반 다를게 없어 자세한 설명은 생략한다.fetch 부분 설명The Movie DB API의 popular는 page로 나눠져 있으며 한 페이지 당 20개의 인기 영화목록을 가져온다.return 부분

강의가 1년전 내용이라 5.3.0버전을 사용하였는데 업데이트 된 6버전을 보니 코드들을 좀더 깔끔하게 쓸수 있어 같이 작성해 보려고 한다.제목을 눌렀을 때 페이지이동을 시키고 싶다면 router를 사용해 보자.5.3v6v6v 에서는 Switch -> Routes로 변

CSS를 어떻게 할까 이리저리 만져보다가 Slider를 넣고 싶어져서 구글링하던 중 Swiper라는 Plugin을 찾아서 사용해 보았다.https://swiperjs.com/get-started헤더에 React 부분이 따로 구분되어 있어서 편리하다.이제 사용할

VScode에서 github page를 생성해 주는 gh-pages를 알아보자.install code설치가 다 되었다면 사용하고 있는 VScode의 폴더에 package.json을 열어보자.scripts 를 찾아서 deploy & predeploy 코드를 추가 작성해

화면을 줄이게 되면 가운데를 벗어나게 되고 또 이미지들이 꽉찬 느낌이 있어서 시작된 반응형 만들기위 사진 처럼 뭔가 어긋난 느낌이 든다.여기저기 찾아보다가 알게된 breakpointsbreakpoints란 Swiper에서 slider를 반응형으로 만들게 해주는 pro

어떤 기능을 넣어볼까 하다가 검색창 기능이 많이 보여서 넣어 보기로 했다.먼저 검색창에 검색어와 변화를 알기위해 useState hooks를 선언한다.그 다음 변화된 value값을 변경해 주기 위해 onChange함수를 사용한다.<input>태그로 검색창을 만들고

탑 버튼을 만들기 전에 구글링으로 검색하여 여러 방법들을 봤었는데 내가 생각했던 javascript 코드와는 살짝 달랐었다.어떤 사람은 hook을 만들었고 또 어떤 사람은 내가 생각했던 javascript 방식과 비슷했다.무엇보다 코드를 작성하기 이전에 나는 React

Velog를 여기저기 파도타다가 검색결과가 나오는 기능을 발견했다.영화웹 프로젝트에 기능을 넣어보자.Search here(input)과 영화 포스터 위에 남는 공간에 넣어 보자.filterTitle = 검색어로 영화를 필터링해주는 함수filterTitle.length

컴포넌트와 라우터많이 만들고 나누다 보니 여기저기서 fetch가 중복적으로 들어갔다.코드를 줄이고 효율적으로 사용하기 위해 hook을 만들어 본다.기존 코드의 경우는 TmdbApi(영화api)에서 movie & popular(인기 영화)만 가져오는 코드였다.(DATA_

메인 화면에 movie와 tv를 tap으로 만들어보자.name = tap의 이름content = tap의 내용 (Movie & TV)content안에는 return하던 코드를 그대로 가져와 movie와 tv 두 가지로 나눠주었다.movie와 tv를 선택할 수 있는 ta