Enjoy Programming

오랜만에 넷플릭스 클론사이트 업데이트를 하다가 문제가 생겼다. 다름이 아니구.. themoviedb api 에서 detail 화면에 예고편을 뿌려주려고 컴포넌트를 하나 만들었는데~ mixed content error가 발생하면서 비디오를 받아오지 못하는 것이다. 수정은 해놔서 스크린샷은 없다. 아무튼 에러 코드를 읽었을때 https: http 어쩌고 한다. https 에서 http를 써서 그런다는 듯 했다 코드를 보니 유튭 영상을 가져와 뿌려줄 때 http로 적었다. 요걸 https로 수정하니 자알 나온다... 흠 그럼 도대체 어떤 문제일까 검색해보니 https 사이트에서 ajax를 사용해 비동기로 http로 연결되어 있는 다른 컨텐츠(이미지, 비디오, 파일)을 이용해서 화면에 출력하려고 했을때 발생한다..

직장 구하면서 포트폴리오 사이트 하나를 만들었는데.. 뭔가 코드가 너무 지저분해 보였다.. 기존 코드다 ㅡㅡ;; 모달창 하나 띄우는데 코드를 이렇게 많이쓰다니.. 형편없다.;; 포트폴리오 라우터에서 각각의 포트폴리오당 모달창을 띄우는데 flag를 각각에 주고 각각을 실행하다보니 가가가가가가각이다.. 그래서 아침에 급하게 이번에 배운 useTab을 활용해 볼까했다. 이미 npm에 배포는 되어있으니 설치를 해주고 네개나 쓰던 modal flag를 하나도 줄였다. 그리고 useTabs를 사용해서 portDatas를 배열 인자로 넣어주었다. closeModal 함수도 간결해졌다. 하나니까.. 그렇게 하고서~ 포트폴리오 데이터 스테이트를 map함수를 이용해 각각 화면에 띄워준다. onClick시 setModal을..

노마드 코더 react hook 강의를 듣고 배포하는 것을 해봤는데 뭔가 헷갈렸다;; 다행히 잘 해결되어서 과정을 조금 적어본다. 먼저 useTabs이라는 섹션 선택시 해당 섹션의 내용을 보여주는 hook을 하나 배포해본다. 먼저 readme 파일을 간단하게 정리하고 ~ (이건 배포자가 알아서 작성하면 될 듯 .. 사용법이라던지 주요기능이라던지 설명을 적으면 좋겠다) 가장 헷갈렸던 부분인 index.js 파일의 존재... 이것부터 정리하고 순서를 적어본다. index.js 를 먼저 인식하기 때문에 이걸 이용해서 배포를 하는 걸로 생각은 들었는데.. useTabs에 만들어놓은 function을 index.js에 임포트해서 배포를 했더니;; 안된다.. 뒤에서 다루겠지만.. 이게 npm init을 해주고 pa..

https://codesandbox.io/s/day-five-blueprint-forked-mfsgd

PropTypes 종류 - array: 배열 - arrayOf: 특정 propType으로 이루어진 배열 - bool: true or false 값 - func: 함수 - number: 숫자 - object: 객체 - string: 문자열 - symbol: ES6의 Symbol - node: 렌더링할 수 있는 모든 것(숫자, 문자열, JSX코드) - instanceOf: 특정 클래스의 인스턴스(ex: instanceOf(MyClass)) - oneOf(['dog', 'cat']): 주어진 배열 요소 중 값 하나 - oneOfType([React.PropTypes.string, PropTypes.number]): 주어진 배열 안의 종류 중 하나 - objectOf(React.PropTypes.number):..

기존 자바스크립트에서 삼항연산자의 경우 condition ? ture - return : false- return 이런식으로 condition이 true이면 true일때의 리턴갑슬 false이면 false일때의 리턴값을 보내주는 방식이다. 뭐 중첩도 되고 여러 방향에서 쓰일 수 있다. 그런데~ react를 공부하며 삼항연산자에 && operator를 알게되었는데 true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가된다. 쉽게 말해 true일때만 expression이 실행된다. false라면 그냥 react는 무시한다. 살짝 맛만 보자면 위 코드에서 기본적으로 nowPlaying이 false이면 오른쪽은 아에 실행되지 않는다,..