Enjoy Programming

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에 접근..

react 에서 component는 HTML을 반환하는 함수이다. 위 react.StrictMode라고 되어있는 태그형태안의 가 컴포넌트의 형태이다. App은 다른 자바스크립트 파일에서 만든 export된 function형태의 html을 반환하는 함수인 것이다. 반드시 HTML처럼 작성해야한다. 이렇게 처럼 자바스크립트와 html사이의 조합을 jsx라고 한다. react에서 나온 매우 custom한 유일한 개념이다. 자 새로운 컴포넌트를 한번 만들어보자. src 폴더에 BlueBerry라는 자바스크립트 파일을 하나 만들고 중요한 건 컴포넌트에는 반드시 react를 import해줘야 리액트가 인식 할 수있다. 안에 블루베리 함수를 하나 만들어 리턴해준다. 그리고 모듈을 export해주면 사용가능한 comp..

이제 html5의 기본 구조를 살펴 보자 html은 반드시 로 시작한다 이는 이 문서는 html코드를 포함하고 있다고 브라우저에게 말해주는 역할을 한다. 이후 실질적인 html 코드들이 실행 되는데 크게 head, body로 구분된다. head에는 문서의 title이나 참조, meta태그 등이 들어가는데 이는 문서의 configure라 할 수 있다. meta 태그는 문서의 별도의 정보를 알려주는 역할을 한다. 그리고 body에는 실제 웹에 보여질 content들이 들어간다. 기본 문법은 앞서 설명한 것도 있지만 추가로 더 다뤄 보겠다. html태그는 기본적으로 중첩이 되는데 이때 부자관계가 형성 된다. 위 사진에 바디안에 h1태그와 p태그가 있다 바디는 부모 요소가 되고 h1과 p는 직계 자식요소가 된다..

자 저번 시간에 이어 chat창을 만들어 보자. 우선 상단에 status-bar와 header를 포지션 고정 시키고 위치값 조정하고 레이어 순서를 z-index를 통해 정렬 해주었다. 이제 메인 태그로 돌아와 main-chat을 손보자 메인태그는 고정된 스테이터스바와 헤더와 다른 레이어이므로 고정된 애들과 같이쓰면 겹치게 되어 안보이니 마진탑으로 위치를 조정해주고 태그들을 만들어 나간다. 마진탑 120정도 주고 타임스탬프의 글씨는 흰색 배경색은 회색 비스꾸리한걸로 조정한다 박스에 패딩을 15정도 주고 글씨크기 보더의 둥글기 조절해주고 박스가 가운데 오도록 하기 위해 flex해주고 flex-direction을 column으로 바꿔주자 그런 다음 align-items:center로 중앙 정렬 해주면 끝! f..

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 엔진을 내장하고 있음. browser뿐만 아니라 서버사이드인 Node.js도 자바스크립트 엔진을 내장하고 있다. 기본적으로 브라우저에서 동작하는 코드는 Node.js에서도 동작한다. 그러나 두개의 목적이 달라 브라우저와 node.js 모두 자바스크립트 코어인 EcmaScript를 실행 할 수 있지만 브라우저와 Node.js에서 ECMAScript 이외에 추가적으로 제공하는 기능은 호환되지 않는다. ex > 브라우저는 HTML요소를 선택하거나 조작하는 기능들의 집합인 DOM API를 기본적으로 제공 Node.js는 Web API인 DOM API를 제공하지 않는다. 반대로 Node.js에서는 파일을 생성하고 수정하는 File시스템을 기본 제공하지만 브라..

이제 세번째 페이지인 chat페이지를 만들어 보자. 자 이번 페이지는 잘 생각해보면 간단하다. 이전에 만들었던 friends.html페이지에서 필요없는 부분 빼고 몇 부분만 수정 해주면 된다. 아 그리고 수정하기에 앞서 friends & chat페이지의 네브바에 default로 해놨던 #대신에 각각 링크에 연결될 html주소를 적어주자 그리고서 friends.html을 전부 복사해 chat.html에 붙여넣고 필요없는 부분을 살펴보면~~~ 상단 friends name display부분이 필요없으니 삭제 해주고 메인의 friends-screen에서 두번째 user-component칼럼부터는 아에 필요없다. 삭제 해주자. 이제부터 변경해야 할 부분을 찾아보자 먼저 nav-bar부분! user 아이콘이 변화가..