Enjoy Programming

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

Socket.IO 는 WebSocket을 기반으로 클라이언트와 서버의 양방향 통신을 가능하게 해주는 자바스크립트 라이브러리이다. 브라우저와 Node.js용 서버 측 라이브러리, 두 부분으로 구성된다. 먼저 MDN에서 websocket이 무엇인지 살펴보자. 웹 소켓은 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술이다. 개발자는 웹 소켓 API를 통해 서버로 메세지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능하다. HTTP를 생각해보면 HTTP는 stateless 이다. 그래서 클라이언트에 접속해서 서버로 get이나 post요청을 하게되면 응답이 이루어지게 되는데 이 하나의 과정이 끝나면 서버와의 연결이 끊긴다. 서버가 유저를 지속적..

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

이번은 타입스크립트로 react 이벤트 관리에 대해 간단하게 다뤄보겠다~ 기존 코드에 input 관련 코드 작성, 두가지 랜더링할 컴포넌트를 작성해주는데 Input 과 Form이다. 두개 다 interface로 props의 type을 결정해주고 각각의 컴포넌트가 React.FunctionComponent임을 명시해준다. 그리고 작성한 interface를 전달해준다. 음 심도있게 더 공부해야겠지만 받아들이자 ㅎㅎ;; 일단 props에서 전달받은 onChange함수와 onFormSubmit함수의 타입을 void로 선언하는데 역시 event: React.~~~~ 를 작성해서 event타입도 확인해줘야 한다. 이제 부모컴포넌트로 가보면 부모컴포넌트에서 Input과 Form을 import하고 rendering해주..

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

자바스크립트로 클래스네임을 추가하고 싶을때는 필자는 보통 element.className = "name";을 통해 클래스 명을 삭제후 새로 설정하거나 element.className += "name", element.classList.add("name") 을 통해 추가를 해줄 수 있다. 해당 클래스 명이 있으면 삭제를 하고 없다면 추가를 해주는 메서드가 있는데 바로 toggle이다. 한가지 좋은거 알았다.~~