profile
나 미대 나온 개발자야~
태그 목록
전체보기 (46)리액트(8)React(5)CSS(5)State(4)컴포넌트(3)github(3)route props(2)li(2)git(2)router(2)라우터(2)깃허브(2)link(2)선택자(2)build(2)Props(2)react data render(1)LikeButton(1)push(1)slide(1)메인(1)react router dom(1)addEventListner to multiple Element(1)동적컴포넌트(1)Location(1)링크 컴포넌트(1)리액트 스타일(1)네이밍컨벤션(1)Class Component(1)(1)리액트 css(1)componentdidupdate(1)create react app(1)crossfade(1)preload(1)이미지경로(1)git push origin main(1)react styling(1)JOIN(1)inner border(1)컴포넌트 생명주기(1)Updating(1)react github(1)JavaScript(1)키 프로퍼티(1)클론(1)리액트에러(1)크로스페이드(1)인스타그램(1)transparent border(1)레이아웃(1)route state undefined(1)React css(1)selector(1)deploy(1)섹션(1)classList(1)endpoint(1)Route(1)Unmounting(1)classList 메서드(1)네비게이션(1)컴포넌트 계획(1)componentWillUnmount()(1)super(props)(1)Link to(1)key props(1)gh-pages(1)instagram(1)reset.css(1)this(1)setInterval(1)navigation(1)엘리드림코딩(1)history(1)왕초보(1)JSX 정리(1)Router building(1)Constructor(1)html(1)planning Component(1)미디어쿼리(1)shift(1)border(1)카멜(1)에러(1)InnerHTML(1)Mounting(1)setState(1)클래스 컴포넌트(1)proptypes(1)imagegallery(1)word-break(1)render(1)slideshow js(1)onClick(1)JSX(1)slice(1)setAttribute(1)svg(1)Map(1)프로퍼티 타입(1)셋스테이트(1)Link component(1)map property(1)predeploy(1)미대생(1)리액트 라우터 돔(1)componentDidMount(1)리셋(1)리다이렉트(1)원격저장소(1)reactjs(1)hover(1)노마드코더(1)서비스워커(1)history push(1)nextElementSibling(1)
post-thumbnail

1. 프로젝트 셋업

초보를 위한 리액트js 강의를 다시 보면서 진행하고 있는 프로젝트이다. 때문에, 자세한 내용은 해당 시리즈에서 참고 바란다. typescript 템플릿으로 리액트앱 만들기 CRA 홈페이지 절대경로 설정하기 조금 난항을 겪은 부분 처음에는 tsconfig.json에서

2021년 8월 4일
·
0개의 댓글
post-thumbnail

Service worker Navigation PreLoad

tmdb api에서 지원되는 비디오들의 유튜브 키를 변수로 받아서 로드 하는데 자꾸 아래와 같은 에러가 떠서 찾아봤다.출처 https://love2dev.com/pwa/service-worker-preload/사이트의 페이지 속도를 향상시키기 위한 많은 미묘한

2021년 7월 9일
·
0개의 댓글

super(props)를 써야하는 이유

https://min9nim.github.io/2018/12/super-props/

2021년 6월 16일
·
0개의 댓글
post-thumbnail

[react] 노마드코더 영화웹서비스 제작 6.4 Redirecting

우리는 "/movie-detail"에서 리프레시를 하거나, 직접 쳐서 들어가면 state=undefined를 얻게되는 경우들을 보았다."/movie-detail"를 도메인에 직접 치거나, 리프레시를 하면 아예 홈화면으로 돌아가도록 유저를 홈으로 리다이렉트 시키는 것이

2021년 6월 11일
·
0개의 댓글
post-thumbnail

[react] 노마드코더 영화웹서비스 제작 6.3 Sharing Props between Routes

모든 컴포넌트에는 props가 있다. Movie.js처럼 About.js에도 props가 있는데,콘솔을 보면 4 개의 props가 보인다. history, location, match, staticContext. 이것들은 아직 About.js로 전송된 것은 아니고,

2021년 6월 11일
·
0개의 댓글

서버종료하는 법

출처port 번호로 PID 찾기lsof -i :포트번호실제로 코드를 실행한 결과, 다음과 같이 PID 를 얻을 수 있었습니다.PID로 강제종료하기kill -9 PID해당하는 PID 인 53665 로 종료한 결과, 성공적으로 종료되었습니다.kill -9 53665

2021년 6월 11일
·
0개의 댓글
post-thumbnail

[react] 노마드코더 영화웹서비스 제작 6.2 Building the Navigation

네비게이션이 라우터와 관련된 처음 듣는 용어일 거라고 생각했는데, 네비게이션 바 얘기할 때 그 네비게이션이란 것을 깨달았다.우리는 홈과 어바웃 두 개의 버튼만 만들어 줄 계획이다.먼저 Navigation.js 를 새로 만들어주고 <a>Home</a>과 &lt

2021년 6월 11일
·
0개의 댓글
post-thumbnail

[react] 노마드코더 영화웹서비스 제작 6.1 Building the Router

웹서핑을 하다보면 도메인 뒤에 대쉬와 키워드가 붙으면서 안쪽으로 더 깊숙이 들어가는 느낌을 자연스레 경험한다. ex) https://comic.naver.com/index.nhn 네이버 웹툰 화면 https://comic.naver.com/webtoon/list.nhn

2021년 6월 10일
·
0개의 댓글
post-thumbnail

[react] 노마드코더 영화웹서비스 제작 6.0 라우터를 위한 준비

react-router dom 설치네비게이션으로는 react-router dom이라는 것을 쓴다.네비게이션을 만들어주는 패키지이다.npm install react-router-dom을 입력해 설치한다.설치되는 동안, 더 많은 화면을 보고 더 많은 것들을 할 수 있도록

2021년 6월 10일
·
0개의 댓글
post-thumbnail

[react] 노마드코더 영화웹서비스 제작 5.0 Deploying to Github Pages

이제 깃허브에 우리의 프로젝트를 올리는 일이 남았다.터미널에서 npm i gh-pages 를 입력하면 뭔가 쭉쭉 설치되는 것이 보인다.gh-pages는 내 웹사이트를 깃허브의 것허브 페이지 도메인에 나타나게 해주는 명령어다. 일반적으로 나의 프로젝트의 이름을 갖고 와

2021년 6월 10일
·
0개의 댓글

[react] 노마드코더 영화웹서비스 제작 4.5 Cutting the summary

니꼬가 쓴 방법글자수를 length로 알아내서 slice()로 원하는 글자수 만큼 자르는 것.

2021년 6월 10일
·
0개의 댓글
post-thumbnail

스타일링 중에 생긴 일 1

리액트를 하면서 오랜만에 css를 했다.스타일링은 니꼬쌤이 클론 해보라고 보내준 behance의 웹디자인을 따라했다.따라하던 중 '아.. 이거 js로 따로 해야하나?' 싶었던 것이 아래 기능이었다.기능은 두가지 였는데1\. 각 메뉴에 hover하면 border-left

2021년 6월 8일
·
0개의 댓글

[react] 노마드코더 영화웹서비스 제작 4.3 장르 더하기

다른 props들과 다르게 genres는 배열로 이루어져있다. 한 드라마가 로맨스 스릴러이듯..첫번째 영화인 "Potter's Ground"의 장르는 아래와 같다.genres: \["Action","Drama","Thriller","Western"]때문에 genres는

2021년 6월 1일
·
0개의 댓글
post-thumbnail

[react] 노마드코더 영화웹서비스 제작 4.1 영화데이터 렌더링하기

비동기적 데이터 페치를 완료했다면 렌더링을 할 차례⬇️ 먼저 우리가 가져온 movies를 콘솔로그 해 영화 데이터가 어디에 있는지 찾아보자movies> data > data> movies: (20)\[{...},{...},{...},{...}, ...]⬇️ 찾은 영화데

2021년 5월 31일
·
0개의 댓글
post-thumbnail

[react] 노마드코더 영화웹서비스 제작 4.0 API로부터 영화 fetching하기

니꼬는 axios를 이용할 예정, axios는 fetch 위에 작은 레이어라고 한다. ex) 땅콩 주위에 멋진 초콜릿.axios의 설치방법은 이렇다.npm i axiosAPI를 다운로드한다. YTS는 URL이 자주 변경되기 때문에 니꼬가 아래의 파일로 재가공하여 제공했

2021년 5월 31일
·
0개의 댓글

[react] 노마드코더 영화웹서비스 제작 3.3 Movie 컴포넌트 계획하기

이론적으로 우리가 할 일은 componentDidMount에서 데이터를 fetch하는 것이다.6초 뒤에 We are ready를 보여주는게 아니라 movie 데이터를 보여주는 것!API로부터 data fetching이 완료되면 We are ready 대신에 movie를

2021년 5월 31일
·
0개의 댓글
post-thumbnail

[react] 노마드코더 영화웹서비스 제작 3.2 컴포넌트의 생명주기 메서드

react component에서 사용하는 유일한 function은 render function이지만, 그외에도 많은 것들을 가지고 있다.life cycle method라는 것들을 가지는데, 리액트가 컴포넌트를 생성하고 없애는 방법이다.component가 생성될 때,re

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

[react] 노마드코더 영화웹서비스 제작 3.1 State에 대한 모든 것 with setState

Previously...버튼을 누르면 콘솔에 각각 기록되도록 만들었다.어떻게 하면 버튼을 눌렀을 때, state가 작동해서 숫자가 변화할까?TILstate는 그냥 쓴다고 작동하지 않는다.이유는 react가 render()를 리프레쉬하지 않기 때문이다.우리는 state의

2021년 5월 27일
·
0개의 댓글
post-thumbnail

[react] 노마드코더 영화웹서비스 제작 3.0 Class 컴포넌트와 state 사용법

버튼을 클릭하면 각각 콘솔에 add와 minus를 기록하는 함수가 실행된다. 클래스 컴포넌트 function App()은 function component다. 우리는 리액트 컴포넌트의 많은 기능들을 사용하기 위해 이를 지우고 class component를 사용하기로

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