[Project] 재생화면으로 이동 시, 디폴트 값이 "가사" 항목 1. 문제 여느덧 평화롭게 프로젝트를 만들던 중.. 이때까지 발견 못 한 문제를 발견하게 되는데?! 어머나... 재생목록으로 이동 했을 때, 가사 항목에 불필요한 재생목록까지 같이 나오는 것! 내가 의도했던 것과 다르게 작동하는 것을 발견했다.. 어떻게 해결할까....? 2. 해결법 (1) componentDidMount를 쓸까? "컴포넌트 실행 시, 바로 적용이 되어야 한다"는 점에 초점을 맞춘 나는, 불현듯 componentDidMount가 생각났다. 하지만 이 오류를 해결하는데 componentDidMoutn는 적합하지 않다고 판단했다. (2) document.getElementById('playlistArea').style = "display:none"; react 파일에 document.getE.. [Project] 페이지 이동 시, 화면을 맨 위로 자동 스크롤 1. 문제 재생목록을 클릭하면 페이지 이동을 하면서 재생목록의 상세페이지로 넘어가는 것을 구현하던 중! 허걱.. 이동한 페이지가 맨 위로 자동 스크롤 되지 않는다는 것을 확인 !! 나는 자동으로 맨 위로 스크롤 되고 있는 줄 알았다 ... ㅎㅎ 이런 문제를 해결하는 것은 사용자가 좀 더 편한 웹사이트 사용을 할 수 있도록 돕는다. 그렇다면 어떻게 해결할 수 있을까? 2. 해결법 React 공식문서에도 이와 같은 내용이 기술되어 있다. https://v5.reactrouter.com/web/guides/scroll-restoration Home v6.14.1 I'm on v5 The migration guide will help you migrate incrementally and keep shipping.. [Project] 리액트 프로젝트 기획 1차: 2023.06.19 작성 2차: 2023.06.24 작성 3차: 2023.06.29 작성 4차: 2023.07.10 작성 (js, css 파일과 id, class이름 전격 수정 > 중복된 이름 다수 발견) 5차: 2023.07.26 작성 (API 확정) 안녕하세요! 보라해바라기입니다 ㅎㅎ 저는 요즘 학교 + 자격증 공부 + 근로 + 창업 동아리 + 번역 봉사 등등... 아주 바쁘게 살아왔습니다. 최근 자격증 합격과 다음주 학교 종강이 다가와 조금 여유로워지기 시작하여 리액트 프로젝트를 진행하려합니다! 사실 시간이 남을 때 개발을 하는 것이 아니라, 없는 시간도 쪼개서 해야되는게 사실이지만... 이제라도 만들어봅니다 ㅠㅠ 사실 한창 리액트를 배울 때보다 시간이 훨씬 더 걸릴 수도 있습니다. 솔직히 .. [React 공식 문서] Tania Rascia React Tutorial Note 0. 기본 개념 - DOM(Document Object Model) : 프로그래밍 언어가 웹사이트의 콘텐츠, 구조 및 스타일을 조작할 수 있도록 하는 인터페이스 - DOM과 HTML 소스코드의 차이 (1) DOM은 클라이언트 측 JS에 의해 수정됨. (ex. 콘솔에서 배경색 수정 시, 바로 반영) (2) 브라우저는 소스코드의 오류를 자동으로 수정 1. React란? - 자바스크립트 라이브러리 (프레임워크 X) * 라이브러리 vs 프레임워크 - 프레임워크: 애플리케이션 코드는 프레임워크가 짜놓은 틀 안에서 수동적으로 동작 > 제어의 흐름: "프레임워크" - 라이브러리: 개발자가 직접 제어. 라이브러리를 "가져다"쓰게 됨. - 모델, 뷰, 컨트롤러 중 "뷰" 층에 해당 ! - 컴포넌트 생성 가능 (효율적이고.. [FrontEnd6] naver-movie-api를 이용하여 네이버 영화 검색 페이지 만들기 (router, naver-api, pagination, axios, query-string) 안녕하세요~ 보라해바라기입니다! 오늘은 naver 영화 검색 api를 사용하여 라우터에 따른 영화검색 페이지를 만들어보았습니다:) 1. App.js import './App.css'; import { Component } from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Home from './components/Home.js' import Search from './components/Search.js' import InputComp from './components/InputComp.js' class App extends Component { constructor(props){ super(props.. [FrontEnd6] yts-movie-api를 사용하여 영화 리스트 만들기 (yts-api, axios, pagination) 안녕하세요~ 보라해바라기입니다:) 저는 코딩 학원 마지막 수업을 듣고 있는데요 ㅎㅎ 프로젝트를 만드는 수업이라 오늘은 제가 만든 프로젝트를 보여드리려 합니다 ㅎㅎ (아주 작긴 하지만) 대략의 내용은 axios, pagination, yts-api를 사용하여 영화 리스트를 만드는 것입니다! 1. App.js import axios from 'axios'; import { Component } from 'react'; import './App.css'; import MovieList from './components/MovieList.js' import Pagination from './components/Pagination.js'; class App extends Component { constructor.. [React] component 요소를 이용한 게시판 구조 짜기 (페이지 넘기기, 원하는 포스팅 갯수 만큼 보이도록 하기 etc..) 안녕하세요~ 보라해바라기입니다! 요즘 저는 react를 배우고 있답니다 ㅎㅎ react의 component요소가 개발을 할 때 편리하게 작용하더군요! 이 특성을 살려 간단하게 게시판 구조를 만들어보았습니다. 1. App.js import { Component } from 'react'; import './App.css'; import SmList from './components/SmList.js' import Pagination from './components/Pagination.js' class App extends Component { constructor(props){ super(props) this.state={ smList:[ {imgSrc: 'tvxq.jpg', no:1, name:'동방신.. 이전 1 다음
