Enjoy Programming

https://developer.mozilla.org/ko/docs/Web/CSS/color_value - CSS: Cascading Style Sheets | MDN CSS 자료형은 sRGB 색 공간의 한 색을 표현하며, 추가로 알파 채널 투명도 값도 가질 수 있어 자신이 가리키는 색상과 배경이 어떻게 합성되어야 하는지 지정할 수 있습니다. developer.mozilla.org react연습을 하던중 잘 사용하지 않던 transparent 키워드를 사용했는데 이게 무엇인지 찾아보았다. 기본적으로 transparent라는 말은 투명도이다. color 속성에서 사용되며 기존에 필자는 거의 opacity를 사용했다. 또는 rgba(r,g,b,a)로 사용했는데 color에 transparent라는 키워드를 ..

앞서 글로벌 css작성도 했고 약간의 헤더 수정도 진행했다. 이제 header가 어떤 route에 있는지 확인 하는 방법을 강구해보자. 무슨말이냐~ 그냥 네비게이션에서 마우스 커서가 올라가면 어떤 곳에 올라가있고 어떤 곳을 클릭하게 될지 그냥 보여주는거다 이런식으로~ 아래쪽에 줄 것이기 때문에 border-bottom을 5px solid로 주고~ 색상을 주는데 li의 stylecomponent인 Item에 current={true}로 flag를 설정해주고 border-bottom의 색상값을 주는 곳에 함수를 작성해주는데 props.current가 true이면 지정한 색을주고 아니면 transparent로 투명하게 해준다 그리고 이를 하기 위해 react-router-dom에서 withRouter를 imp..

앞서 사용한 css방법은 local한 방법이다. 이번에는 해당 사이트의 전역 설정을 하는 global한 css를 해본다. 라이브러리 한개를 설치하는데 styled-reset이다 styled-reset은 style-component를 이용해서 css를 초기화해 0의 상태에서 시작하게 해준다. 먼저 npm install styled-reset으로 설치해주고 component폴더에 GlobalStyles.js를 만들어 줬다. 파일안에 createGlobalStyle function을 styled-components로부터 임포트 해주고 reset도 import해줬다ㅓ. 그리고 globalStyles라는 이름의 globalstyle 컴포넌트를 만들어주는데 위와 같이 createGlobalStyle함수 와 리터럴을..

react에서 styling해주는 방법은 css파일을 만들어 한번에 import 해주거나 또는 각 컴포넌트들과 묶어서 css를 import해주는 방법이 있다. react는 각 부분부분을 나누어 쓰는 컴포넌트화 시키는 것에 의미가 있기에 이런식으로 index.js파일을 포함한 폴더를 만들어서 default로 내보내주면 인식이된다. 음 .. index라는게.. 의미가 크구나 싶다. 아직 잘 이해는 안간다 계속 봐야 할듯 하다. 그런데 css를 하다보면 class명을 주기가 참 까다롭다. class명이 중복되지 않도록 코드를 짜는게 상당히 성가시다. 물론 같은 class를 줘서 함께 prop을 주기는 좋지만~ 코드가 방대해지다 보면 다른 부분과 겹칠 가능성도 농후한데 react에서는 css모듈이라는 것을 이용..

react router에 있는 composition에 대해서 알아보자. composition은 두개 이상의 route를 동시에 랜더링 하는 방식이다. 예를 들어 tv라는 Router가 있는데 tv안에는 또 다른 tab들이 있다고 생각해보자. 이런거다 이런거~ tv/popualr/blabal/123/45 이런식으로 tv를 랜더링함과 동시에 연결된 route들이 있으면~ /tv와 /tv/popualr는 /tv로 location이 일치한다. 접속해보면~ 역시 동시에 랜더링 되어버린다... 이때 필요한건?! exact인가?! 일단 니코는 header를 만들어 이해해보자고 한다. componenets폴더에 Header.js를 만들고 route로 링크를 걸어주자~ 그런데.. 문제가 생겼다 해당 링크로 url에 접근..

앞서 간단한 무비 info앱을 만드는 것으로 react를 맛보았다. 이제 본격적으로 movie app을 clone coding해볼것인데 바로 팝콘타임이라는 스트리밍 사이트를 클론해본다. 약간 넷플릭스 비슷하지만 ~ 해적판 사이트라 불법;;; 사용해본적은 없는데 클로닝만 진행해보자 먼저 앞서 create-react-app을 설치한 것 처럼 새로운 폴더를 생성해서 npx를 이용해 repository를 생성했다 그리고 필요한 prop-types도 설치하고~ 라우터를 설정해줄 react-router-dom도 설치하고~ 필요한 라이브러리 설치후~ 라우트와 컴포넌트들을 만들어 주었다. 각 라우트들에는 default로 export하는 함수를 설정해주고 라우트 접속시 각 페이지의 이름을 띄워주었고~ 중요한 라우터의 경..