코딩연습장

//타입스크립트로 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..

//src/App.js import './snow.css' const A = () => [ const Snowflake = ({ style }) => { return ( {'\u2745'} ); }; const makeSnowFlakes = () => { let animationDelay = '0s'; let fontSize = '14px'; const arr = Array.from('Merry Christmas!!!'); return arr.map((el, i) => { animationDelay = `${(Math.random() * 16).toFixed(2)}s`; fontSize = `${Math.floor(Math.random() * 10) + 10}px`; const style = { anim..

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

처음으로 백엔드 분들과 협업을 했다. 백엔드 분들은 주특기 3주 내내 crud를 하셔서 조금 질리셨다는 이야기는 들었지만 다행히도 너그럽게 이해해주셔서 스코프를 작게 잡고 시작할 수 있었다. 다른 조에 비하면 너무 작았기 때문에 실제로 일찍 끝났고, 정상적인 범위의 스코프로 확장 할 수 있었다. 물론 그거까지 하더라도 너무 기능이 적긴 했다. 하지만 이번 프로젝트를 하면서 서버에 이미지파일을 보내야 할 때는 formdata를 사용해야 함을 알 수 있었다. base64로 인코딩하여 보내려 했지만, 서버에서 저장할 수 있는 문자열의 길이가 제한이있고, 그걸 따로 설정하려면 피곤하기 때문에 백엔드 분께서 이미지파일을 위한 s3서버를 열어주셨고 자동으로 백엔드에서 전송하도록 설정해주셔서 편하게 할 수 있었다. ..

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