리액트 (19) 썸네일형 리스트형 리액트에서 유튜브 API를 이용해 뮤직 플레이어 만들기 제목은 뭔가 완성된 프로그램을 만든 것처럼 보이지만 내가 만든건 프로그레스바(재생바)가 동작하지 않는 반쪽짜리 프로그램이다. UI에서부터 느껴지는 반푼이 프로그램의 기운... 주제에 반응형으로 늘어났다 줄어들었다 한다 ㅎ 아무튼 이걸 어떻게 만들었냐면 유튜브 ifram API라는걸 이용해서 만들었다. ifram player API에 대한 자세한 정보는 아래 링크를 참조하면 된다. https://developers.google.com/youtube/iframe_api_reference?hl=ko iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API | Google for Developers 애플리케이션에 YouTube 플레이어를 삽입합니다... 리액트에서 axios로 POST 요청할 때 401 오류 해결 후기(feat : object형 데이터 사용 오류) ReactJS와 NestJS를 이용하여 프로젝트를 제작중인데 로그인 기능 구현 도중 오류를 만났다. axios를 이용해 id정보와 password 정보를 서버로 post 했는데 브라우저에서 401 오류를 반환한 것이다. 오류 해결을 위해서 구글링을 진행했고 이런 저런 해결 방법들을 찾아 시도해보았지만 해결이 불가능했다. 1시간 가량을 삽질하던 중 object형 데이터에서 key와 value가 같다면 value만 적어도 된다는 글을 발견했다. // 이 코드를 let body = { username: id, password: password }; // 이렇게 바꿀 수 있다. let body = { id, password }; 참고로 로그인관련 코드를 구글링하면서 만들고 있었는데 내 원래 코드는 아래와 같았다.. ReactJS에서 외부 JSON 파일 불러와서 사용하기 1. 개요 데이터나 컴포넌트 같은 걸 app.js에 다 집어넣으면 코드가 길고 복잡해짐 그래서 따로 파일을 만들어서 불러오기 하면 코드가 간결해지고 가독성이 좋아짐 컴포넌트나 데이터를 담을 js파일 하나 만들고, 코드를 작성한 후 export 외부 파일을 사용할 JS파일에서는 외부 파일을 import 하면 됨 2. 사용법 (1) data.js 일단 data.js파일 하나 만들어봅시다 let data = [ { id : 0, menu : "김밥", price : 1000 }, { id : 1, menu : "떡볶이", price : 1000 }, { id : 2, menu : "만두", price : 1000 } ] // 변수 export // export default 변수명 export default .. ReactJS에서 이미지 저장하고 불러오는 방법 1. 개요 리액트는 빌드시 JSX파일들을 HTML과 CSS파일로 변환하는 번들링 과정을 거치면서 public폴더를 제외한 나머지 경로의 파일들을 압축, 변환함 그래서 압축, 변환하면 안되는 이미지 파일들은 보통 public 폴더에 보관함 2. 사용법 그냥 public 폴더에 이미지를 저장하면 됨 위와 같이 코드를 짜면 public 폴더에 있는 이미지를 불러올 수 있음 ReactJS 디자인 초보를 위한 부트스트랩 사용하기 1. 개요 리액트로 웹페이지 만들어보고싶은데 디자인똥손이라면 리액트 부트스트랩을 사용하면 이미 예쁘게 만들어진 디자인을 가져다 쓸 수 있음 2. 설치하는 방법 npm install react-bootstrap bootstrap 위 명령어 입력해서 부트스트랩 설치 3. 사용법 import 'bootstrap/dist/css/bootstrap.min.css'; app.js파일에 위 코드 삽입하면 셋팅 끝 https://react-bootstrap.github.io/components/alerts React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 위 사이트에 접속해서 다양한 컴포넌트 .. ReactJS 프로젝트에서 빌드가 뭔지 알아보자 1. 개요 웹브라우저는 HTML, CSS, JS만 해석 가능 그러므로 웹브라우저는 리액트의 JSX 문법을 해석 할 수 없음 빌드란 JSX파일을 HTML파일로 변환하는 과정임 2. 빌드 방법 npm run build 리액트프로젝트 폴더에서 위 명령어 실행하면 build 폴더 생성됨 거기에 App.js에서 열심히 코딩한 JSX코드가 HTML, CSS, JS파일로 변환되어 담기게 됨 build 폴더의 내용물을 서버에 올리면 배포까지 끝나는 것 참고로 public 경로에 있는 파일들은 빌드해도 그래도 남아있음 ReactJS 필수 개념, props 알아보기 1. 개요 컴포넌트를 만들어서 쓰다보면 다른 컴포넌트에서 만든 state를 사용할 수 없다는 사실을 깨닫게 됨 그럼 모든 컴포넌트에서 같은 state를 쓰고 싶을때 각각의 컴포넌트에다가 state를 선언해야하나? 다행히도 리액트에는 props라는 개념이 존재함 부모 컴포넌트 안에 자식 컴포넌트가 들어있다면, props를 이용해 state를 전달할 수 있음 근데 제한사항이 있어서 자식 컴포넌트끼리 혹은 자식으로부터 부모 컴포넌트에게로의 전달은 불가능 2. 코드 import {useState} from 'react' function App(){ let [글제목, 글제목변경] = useState(['1번제목','2번제목']); return( ) } function Babycomponent(props)){ re.. reactjs에서 반복문으로 HTML태그 만들기 1. 개요 map 함수를 알아야 함 어레이 자료형 뒤에 map()을 붙이면 map()의 콜백함수안에 있는 코드를 어레이 원소 수 만큼 반복해줌 콜백함수에 파라미터 붙이면 어레이 안에 들어있던 값을 순서대로 꺼내줄 수도 있음 마지막으로 콜백함수의 return에다가 뭐 담으면 어레이로 담아줌 [1,2,3].map(function(i){ console.log(i); }) 2. 코드 예를 하나 들어봅시다 import {useState} from 'react'; function App() { let [글제목, 제목바꾸기] = useState(['1번제목', '2번제목']); return ( { 글제목.map(function(a, b){ return( 글번호 : {b+1} {a} ) } } ) } state에 글제.. 이전 1 2 3 다음
