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..

드디어 다음 포스팅을 한다..;; 이번 포스팅은 저번에 typescript를 사용한 react의 state에 대해 알아봤다면. 이번에는 props를 전달해보자. 이전에 부모컴포넌트에서 바로 카운터state를 prop으로 전달하고 Number 컴포넌트에서 전달받아 이를 출력하는 코드를 짜보면 먼저 오른쪽이 기존 부모컴포넌트이다. 자식 function 컴포넌트를 import해주고 count이름으로 counter props를 전달해준다. 이를 받은 자식 Number컴포넌트는 count를 랜더링 해주는데 이때 역시 interface로 props의 타입을 정해준다. prop-types에서 정해주는것처럼 그리고서 Number: React.FunctionComponent 로 명명해서 이 컴포넌트가 react의 fu..

타입스크립트란?\ 타입스크립트는 자바스크립트에 타입을 부여한 언어이자 자바스크립트를 확장한 언어이다. MS에 의해 개발 관리되는 오픈소스 프로그래밍 언어. ES5의 Superset이므로 기존의 자바스크립트ES5 문법을 그대로 사용할 수 있다. ES6의 새로운 기능들을 사용하기위해 babel같은 별도의 트랜스파일러를 사용하지 않아도 새로운 기능을 기존의 자바스크립트 엔진에서 실행할 수 있다. 자 어떤점이 더 나은 것일까? 디버깅이 쉽다라는 것을 찾을 수 있는데 예를 들어 이런 함수가 있다고 생각해보자. 개발자가아닌 다른사람이 보더라도 이 함수는 덧셈을 나타내는 함수임을 알 수있다. 그런데 인자에 숫자가 아닌 다른 string이라던지 다른 타입이 들어간다면 원하는 결과가 아닌 값을 얻게 된다. c언어라면 i..

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