코딩연습장

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컴포넌..

//타입스크립트로 cra하기 npx create-react-app project-title --template typescript //or yarn create react-app project-title --template typescript //js파일을 타입스크립트로 바꾸기위해 설치 npm install --save typescript @types/node @types/react @types/react-dom @types/jest //or yarn add typescript @types/node @types/react @types/react-dom @types/jest tsconfig.json파일이 없다면 추가로 설정 //tsconfig.json npx tsc --init "jsx": "react-j..

import styled from 'styled-components'; function App() { return ( {/* styledComponents에 props내려주기 */} ); } const Father = styled.div` display: flex; `; const Box = styled.div` width: 100px; height: 100px; //내려받은 props로 style 설정하기 background-color: ${({ bgColor }) => bgColor}; `; //타 styledComponents를 상속하고, 새로운 styled을 입력하기 const Circle = styled(Box)` border-radius: 50px; `; export default App; i..

이번주는 클론코딩 주차였다. 솔직히 crud를 한번 더 해서 연습량을 늘려보고싶었지만, 한분이 웹소켓을 해보는 것은 어떻겠냐는 말에 웹소켓을 하기로했다. 웹소켓은 클라이언트와 서버의 통신방법이다. http통신은 클라이언트에서 request를 보내면 그에따른 response값을 서버로부터 클라이언트가 받게 되는 형식이었다. 하지만 웹소켓은 클라이언트가 서버와 처음 handshaking을 하면 접속이 끊기기 전 까지 계속해서 통신을 주고 받는 것이다. 이 때 서버는 클라이언트의 특정 req가 없더라도 res를 보내 줄 수 있으며, 클라이언트 또한 연결이 되어 있다면 따로 제한 없이 데이터를 보내고 받을 수 있다. 우리는 다양한 웹소켓 툴 중 socket.io를 사용했다. 웹소켓을 통해 방을 만들어 채팅방을 ..

마지막 실전 프로젝트가 시작됐다. 단계적으로 mvp를 설정하여 조금씩 기능을 추가해 나갈 예정이다. 그래도 이번주에 해야하는 스코프가 크긴하지만 어떻게든 완성하고싶다. 하고싶은건 너무 많은데 시간이 부족할 것 같은게 벌써 느껴진다.

클론코딩 주차가 끝났다! 시간이 부족해 웹소켓을 잘 사용해보고자 스코프는 매우 작았지만, 새로운 기술을 사용해 볼 수 있어 너무 뜻깊은 시간이었다. 처음에 자료도 너무 없고 리액트에서 동시 접근 제어를 구현한 자료가 진짜 거의 없어서 가닥 잡기가 너무 힘들었다. 결국엔 구성했던 스코프대로 완성이 잘 되었다. 한 textarea에 작성하면 동시에 다른 사용자에게 뿌려주고, 동시에 여러명의 사용자가 작성해도 정상적으로 데이터가 오고간다. 하지만 해결 못한 점도 있다. 바로 한줄에서 여러명의 사용자가 타이핑을 할 때의 문제이다. 일단 이 문제는 원인도 잡지 못했는데, 가나다 를 여러명이 입력하면 ㄱㄱ가간가낙닫닫나낟ㄴㄴ닫나 이렇게 이상한 문자열이 들어온다... 노션이나 구글docs도 완벽히 해결하지 못한 걸로 ..

라이브러리 설치 yarn add styled-components yarn add framer-motion 코드 import React from 'react'; import styled from 'styled-components'; import { motion } from 'framer-motion'; function App() { return ( ); } const Wrapper = styled.div` width: 100vw; height: 100vh; background-color: black; display: flex; justify-content: center; align-items: center; `; const Box = styled(motion.div)` // Framer-motion과 st..