본문 바로가기

전체 글

 (188)
React - Material-UI [설치] CSS 에서 Material - UI로 - 별로 만들지 않은 웹사이트 지만 CSS 파일들을 조금씩 material - ui 로 변경시켜 종국에는 모든 css파일 자체가 없게 만들어보자 Material - UI - 기존의 웹개발에서는 UI 구성을 css를 사용해서 컴포넌트 js에 import시켜서 직접 해당 컴포넌트를 꾸며줬다. 물론 이방법도 나쁜 방법은 아니지만 컴포넌트의 상태가 바뀌게 되면 해당 css를 따로따로 넣어줘야 한다는 점이 매우 귀찮다. 즉, 유동적 변화에 대처가 어럽다. - Material UI는 React 개발에 쉽게 사용할 수 있는 UI - Framework 이다. - 다양한 브라우저가 기기와 맞지 않는 호환을 갖거나 html문법이 먹히지 않을 경우 material - ui 가 이를 수..
Mac - BicSur 업데이트 [발열 해결, git 에러] 카탈리나에서 빅서 출시가 되어서 업데이트 하였다. 업데이트 후 한 2시간 정도 발열이 엄청심했다. 뭐지 하면서 재부팅 2번 정도하고 계속 백그라운드에 뭐가 돌아가나 봤다. kernel 이랑 windowsServer이라는 프로그램이 돌아가길래 하 이게 뭐지 하면서 서핑하던 와중 원래 업데이트하고 하루 이틀 정도는 인덱싱을 다시한다고 해서 백그라운드 프로그램이 돌아가서 발열이 난다고 했다. 이말이 정답인 것같아 그냥 백그라운드에서 뭔가 돌아가나 보다 하고 팬소음 상관없이 계속 돌렸다. 그리고 재부팅을 한번하자 지금은.. 조용하다!! 탭 10개 정도에 동영상 돌리고 있지만 평소 사용하던 느낌과 매우 유사! 빅서는 여전히 매우 잘 돌아가고 있고 팬소음은 나지 않는다. 점점 이 백그라운드 점유율이 떨어지는 중!!..
우테코 1차 도전 - 탈락 제대로 준비했던것은 솔직히 아니였다. 기존에 python언어로 코테를 준비했다가 2차 오프라인 코딩테스트때 java로 풀어야 한다는 것을 보고 바로 일주일만에 기본 자바 문법들을 익히고 코테문제를 풀기 시작했으니.. 같이 스터디 했던 사람들도 코테 문제들을 풀때에 내가 제일 못하긴 했다. 그래도 풀면서 급격히 성장하는 모습을 느꼈고 혹시나? 하는 생각을 가져봤던 것이 사실이나.. 역시는 역시 역시다. 1차 우테코 코테를 봤을때 1,2,3,5 번은 40분만에 풀었지만 4,6,7 번에서 오래 걸리고 4, 6번 에서 모든 시간을 잡아먹고 코테 예외 코드를 볼 시간도 없이 광탈했으니 말이다. 사실 문제는 쉽게 느껴졌다. 머리속으로는 풀수 있는 방법이 떠올랐지만 구현을 못한 것들이니까.. 우선 전략은 같았다. 문..
React 기초 : 영화 소개 리스트 https://yts-proxy.now.sh/list_movies.json?sort_by=rating 위 토렌토 영화 다운로드 사이트의 영화 정보를 api로 받아와서 영화들을 정렬시키고 영화를 누르면 해당 영화의 제목만 간단하게 뜨는 react-app이다. 작품 https://Doodream.github.io/doodream_app/ Doodream App Doodream.github.io github repository github.com/Doodream/doodream_app Doodream/doodream_app # React JS를 배우기 위한 기초 앱입니다. Contribute to Doodream/doodream_app development by creating an account on Git..
React - 8 [Router, HashRouter, BrowserRouter, Link] Router - 기본적으로 router라는 것은 어떤 인풋 하나로 다양한 아웃풋으로 나아가게 하는 중계기의 의미이다. 즉, react에서도 router 라는 것은 index.html에 들어오고 나서 router를 거침으로서 나머지 페이지로 이동할 수 있게 하는 중계의 역할을 한다. 사용자가 url로 웹페이지에 접속하면 해당 하는 웹페이지를 나눠주는 중계 역할을한다. import React from 'react'; import { HashRouter, Route } from "react-router-dom"; import About from "./routes/About"; import Home from "./routes/Home"; function App(){ return } export default A..
React - [github에 page 배포하기] 만든 react app을 무료로 배포하려면 어떻게 해야할까? github에서는 무료로 backend가 없는 페이지들을 배포시켜준다. 먼저 git-pages를 설치해야한다. 1. gh-pages 패키지 설치 npm install gh-pages 설치가 되면 react-app내부에 있는 package.json 페이지로 넘어간다. 2. package.json 파일 수정 맨아래에 hompage 속성을 하나 넣는다. https://username.github.io/reactAppName/ 이러한 형태로 url을 넣는다. 물론 곧 만들어진 페이지 주소이다. 아직은 만들어지지 않았다. username: github 닉네임 reactAppName: react 프로젝트 이름(단 프로젝트 이름은 모두 소문자여야만 한다.)..
React - 다른사람의 react project가 실행이 안된다면? 내 react-project를 git push해서 올려놓고 다시 시작하려고 하면 안되는 경우가 굉장히 많다. 혹은 다른 사람의 react-project를 받아와 놓고 로컬에서 실행시키면 안되는 경우도 굉장히 많다. 해당 에러는 전부 아래 코드로 시작한다. "npm start" permission denied 이런경우는 react_app에 들어있는 node 모듈들이 현재 내컴퓨터에 있는 node 모듈과 맞지 않아서 그렇다. 즉, react_app의 node_module을 지워주고 다시 nodeJS를 설치해주면된다. medium.com/@heygabriel/npm-start-permission-denied-error-how-to-solve-it-2387c7472319 "npm start" permission..
React - 7 data-fetch [setTimeout, async/await] 컴포넌트가 실행될때 constructor -> render() -> componentDidMount() 이렇게 실행된다.그렇다면 6초후에 상태를 변경하고 싶다면? class App extends React.Component { state = { isLoading: true }; // render하면 진행되는 함수이다. 이함수는 setTimeout()함수를 통해 setState()를 6초 후에 시켰다. // 즉 data를 fetch 한것이다. componentDidMount() { setTimeout(() => { this.setState({ isLoading: false }); }, 6000) } render() { const { isLoading } = this.state; return ( {isLoa..

티스토리툴바