코딩연습장

브라우저마다 기본적인 default style이 적용되어있기 때문에 사용자들에게 동일한 화면을 보여주기위해서는 default style을 제거해주어야 한다. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbod..

https://styled-components.com/docs/api#typescript //src/styled.d.ts // import original module declarations import 'styled-components'; // and extend them! declare module 'styled-components' { export interface DefaultTheme { textColor: string; bgColor: string; btnColor: string; } } theme에 들어갈 속성들의 타입을 지정해주고 export해준다. //src/theme.ts import { DefaultTheme } from 'styled-components'; export const l..

import React, { useState } from 'react'; function App() { const [userName, setUserName] = useState(''); const onChange = (event: React.ChangeEvent) => { const { currentTarget: { value }, } = event; setUserName(value); }; const onSubmit = (event: React.FormEvent) => { event.preventDefault(); console.log(`hello ${userName}`); }; return ( Log in ); } export default App; 원래는 인자에 e만 넣었어도 됐는데 typescri..

const [counter, setCounter] = useState(1); useState를 사용하면 typescript가 알아서 형태를 파악한다. 이렇게 setCounter을 하면 어떤 형태의 인자를 넣어야하는지도 알려준다. 만약 다른 형태의 인자를 넣는다면 에러를 띄워준다. 보통 state의 형태가 바뀌는 일은 거의 없지만, 만약 다양한 형태의 값을 state로 사용해야한다면, 위 사진처럼 useState옆에 안에 작성하여 해당 형태들을 선언해줄수있다. 만약 해당 형태에 적합하지 않은 값이 들어온다면 (true) 에러가 발생한다. 즉, 일반적으로 형태가 변하지 않는 useState에서 초기값을 특정 형태로 잡아주었을 때 typescript는 해당 형태를 파악하고 자동으로 type을 지정해주므로 따로..

import styled from 'styled-components'; interface CircleProps { bgColor: string; } const Circle = ({ bgColor }: CircleProps) => { return ; }; const Container = styled.div` width: 200px; height: 200px; background-color: ${({ bgColor }) => bgColor}; border-radius: 100px; `; export default Circle; 해당 코드에서 bgColor은 필수적인 props이다. 만약 두 원중 하나에만 border을 적용하고 싶다면, 즉 optional props를 사용하고 싶다면 어떻게 해야 할까? in..

import Circle from './Circle'; function App() { return ( ); } export default App; import styled from 'styled-components'; interface CircleProps { bgColor: string; } const Circle = ({ bgColor }: CircleProps) => { return ; }; const Container = styled.div` width: 200px; height: 200px; background-color: ${({ bgColor }) => bgColor}; border-radius: 100px; `; export default Circle; Circle컴포넌트에서는 App컴포넌..

import { useMemo } from 'react' function Component() { const value = calculate(); return {value} } function calculate() { return 10; } 함수형 컴포넌트는 렌더링 >> 컴포넌트 함수 호출 >> 모든 내부 변수 초기화의 순서를 거칩니다. 컴포넌트가 렌더링 될 때마다 value라는 변수가 초기화되고, calculate함수는 반복적으로 호출됩니다. 만약 calculate함수가 무거운 일을 하는 함수라면 성능적으로 굉장히 비효율 적일 겁니다. useMemo를 사용하면 렌더링 >> 컴포넌트 함수 호출 >> Memoize된 함수를 재사용 의 순서를 거칩니다. useMemo를 사용해서 memoization을 해주면..

WebSocket을 사용하면 원하는 방식으로 특정 이벤트에 따른 값을 전달하거나 전달받기 어렵다. 그래서 socket.io같은 웹소켓 라이브러리를 사용한다. socket.io에는 emit이라는 것이 있는데, 이는 서버나 클라이언트 각 어느곳에서라도 원하는 이벤트명으로 특정 인자를 전달 할 수 있다. 값 뿐만 아니라 객체, 함수 등을 보낼 수 있다. 함수를 보낼 때는 서버에서 함수를 실행하는 것이아닌, 함수 실행 버튼을 보낸다고 생각하면된다. 서버단에서 함수실행버튼을 눌러 클라이언트에 실행하는 정보를 넘기고 클라이언트에서 해당 함수를 실행하는 것이다. 클라이언트에서 보낸 함수를 서버에서 직접 실행하면 심각한 보안상의 문제가 발생할 수 있다고 한다. socket.emit('enter_room', input...

소켓통신이란? 소켓이란 두 프로그램이 서로 데이터를 주고 받을 수 있도록 양쪽에 생선되는 통신 단자이다. 소켓통신이란 서버와 클라이언트 둘이 양방향으로 연결이 이루어지는 통신으로, 클라이언트의 요청이 없더라도 서버가 클라이언트로 요청을 보낼 수 있는 통신이다. 보통 스트리밍이나 실시칸 채팅 등 실시간으로 데이터를 주고 받아야 하는 경우 connection을 자주 맺고 끊는 HTTP통신보다 소켓 통신이 적합하다. 소켓 통신은 계속 연결이 되어있기 때문에 HTTP통신에 비해 많은 리소스가 소모된다. 리액트에서는 socket.io-client나 stamp 등의 패키지를 사용한다.

HTTP란? 기존에 사용하던 HTTP통신은 클라이언트에서 서버로 요청을 보내면 서버가 응답하는 방식으로 통신이 이루어진다. 응답에는 클라이언트의 요청에 따른 결과를 반환한다. 클라이언트의 요청이 있을 때만 응답이 가능하여 단방향 통신이다. 응답을 받은 후 연결이 끊어지는 것이 보통이지만, 성능 상 필요하다면 Keep Alive옵션을 주어 일정시간동안 연결을 유지하는 것이 가능하다.