프론트엔드
defaultProps
defaultProps 란? defaultProps : props를 따로 지정해주지 않아도 기본값으로 전달 해주는 props defaultProps 사용법 defaultProps 사용법은 간단합니다 2가지 방법을 살펴보겠습니다. MainComponent.js 생략 코드 => state 개념잡기 참고 방법 1. import React, { Component, Fragment } from 'react' export default class MainComponent extends Component { } MainComponent.defaultProps = { name:"초기값" } // or export default class MainComponent extends Component { static defa..
Typescript 병합 선언과 개별 선언
* 같은 파일에서 동일한 이름에 타입과 함수가 있으면 에러가 발생하지 않지만 import 해서 동일한 이름에 타입으로 가져와 사용한다면 에러가 발생한다. //todoList.tsx import type { Mybodyinfo, TodoData, TodoAdd } from "@components/home/type"; . . . // error ms : Individual declarations in merged declaration // 'TodoAdd' must be all exported or all local.ts(2395) export const TodoAdd = (props: TodoAdd) => { return ( {props.Icon} {props.text} ); }; * 단순하게 타입으로 네..
웹 소켓 활용한 채팅구현
웹 소캣을 활용한 채팅을 구현 할려고한다. 전반적인 작업이 처음 하는 작업이다 보니깐 실수가 많았다. stemp를 사용하는데 특정 컴퍼넌트 안에서 구독해야만 사용할수 있다는 걸 모르고 js파일를 따로 만들어서 axios로 인스턴스로 만들어서 api를 각 함수로 만들어 관리하는것 처럼 관리해서 import해서 리덕스스토어 안에 미들웨이로 컴퍼넌트에서 구독해서 사용하게 로직을 만들었는데 서버와 연결이 안되는거다 한참을 찾다가 stomp를 구독방식으로 컴퍼넌트 안에서만 선언 해야 한다는걸 알았고 다시는 초보적인 실수를 하지 않을러고 한다. 웹소캣이란? Transport protocol의 일종으로 쉽게 이야기하면 웹버전의 TCP 또는 Socket이라고 이해하면 된다. WebSocket은 서버와 클라이언트 간에 ..
Clean-up function
프로젝트를 작업 하면서 프로젝트를 계속 사용하고 있으면 속도가 느려지는 버그를 확인 했다. 처음에는 크롬이 또 말썽을 부리는구나 생각해 브라우저를 닫거나 캐쉬도 주기적으로 제거하고 안 쓰는 코드도 지웠다 하지만 속도 변화는 없었고 라이트 하우스로 속도 측정을 했지만 문제점은 발견 하지 못했다. 콘솔에 react-action에 표시된 store에 데이터를 확인해 보니깐 안쓰는 데이터가 엄청 쌓여 있던고 알고 보니깐 리플레쉬하면 리덕스가 비워지는 현상만 믿고 리덕스를 주기적으로 비우는 작업을 하지않아서 생기는 오류 였다. 버그를 발견하고 리덕스에 스토어 마다 스토어 state를 리셋하는 action를 만들어서 컴퍼넌트가 없어지면 리셋하게 useEffect에 return에 걸어서 스토어를 주기적으로 비우니깐 ..
[React] 컴포넌트 렌더링 이후 effect 수행하기
데이터를 다 받아서 분류해서 css에 적용 시키는 작업을 많이 한다 예를 들어서 useEffect로 dispatch로 요청을 해 db에서 받아 온 값을 리덕스에 저장하고 컴포넌트에 useSelector로 받아와서 데이터 값에 특정 string이 있으면 버튼 색상를 업데이트하는 함수를 작성했다 하지만 바로바로 적용이 안되고 스크립트로 코드를 건드렸을때만 적용이 되는거다. 함수에서부터 받아온 값에서부터 상위컴포넌트로 하나씩 받아온 값을 console.log로 디버깅 해 본 결과 데이터가 다 렌더링 되기 전에 함수가 실행된걸 확인 했다. 렌더링에 문제라는걸 확인하고 컴포넌트에 렌더링을 관리하는 리엑트에서 제공되는react hook 중에 useEffect로 특정 값을 받아 왔을때만 실행되게 작업 함 잘 정리 된..
git 새로운 시작
첫직장에서 git이 뭔지도 모를때 처음 git를 깃크라켄을 사용 해서 배웠는데 여태까지 깃크라켄으로 작업 했다. 그래서인지 처음 부터 편리한 에디터로 git를 관리하니깐 깃이 관리하는데 깃크라켄에 의지하게 되는거 같아서 이번에 항해 시작 하면서 깃크라켄을 과감하게 포기 할려고 한다. 깃이란? 패러렐 월드 평행우주라고 해서 내 선택 외에 다른 선택에 같은 시간대가 우주가 발생한다는 이론이다. 왜 패러렐 월드를 설명 하는 이유는 깃이 패러렐 월드를 착안한 버전 관리 시스템이기 때문이다. 개발 중에 여러명이 한가지 파일을 관리하면 서로 충돌이 생긴다. 그렇게 때문에 같은 파일을 여러 명이 동시에 작업하는 병렬 개발이 가능하게 해야한다. 깃은 메인이되는 프로그램에 여러 브랜치를 통해 개발한 뒤, 본 프로그램에 ..
moment를 적용 하면서
채팅을 입력 하면 입력시간을 노출 시키기 위해서 각 입력했을때 시간을 받아 비교를 해야하는데 new Date로 값을 비교할려고 하니깐 코드가 너무 지저분해지기 때문에 코드를 더 간결하게 하게 위해 moment.js를 사용 해 보왔다. moment가 무엇이냐? Moment.js는 자바스크립트에서 dates를 다루기 위한 Swiss Army knife(맥가이버칼)이다. 깔끔하고 간결한 API를 이용해서 날짜와 시간을 분석, 검증, 조작, 표시할 수 있다. 그리고 js 매소드인 new Date()보다 간결하고 깔끔한 코드를 할수 있게 해준다. npm install moment import moment from 'moment' function Demo = () =>{ const today = moment() c..
JavaScript란?
1.JavaScript란? 스크립트 언어 , 웹브라우저 인터프리터 내장 , 클라이언트 단에서 웹 페이지 가 동작하는 걸 담당 - 스크립트 언어 JS로 작성한 프로그램을 script라고 부른다. script는 웹페이지의 html 안에 작성할 수 있으며, 웹페이지를 불러올 때 script가 자동으로 실행된다. JS는 브라우저뿐만 아니라 서버에서도 실행 가능하며, JS엔진이 들어있는 모든 디바이스에서도 동작한다. node.js 에서는 임의의 파일을 읽거나 쓰고, 네트워크 요청을 수행하는 함수를 지원한다. 브라우저 에서는 웹페이지 조작, 클라이언트-서버 간 상호작용에 관한 모든 일을 한다. - 웹브라우저 인터프리터 내장 2. 역사 초반 - livescript -> javascript -> 무리한 추상화 에 성능..