코딩연습장

오늘 팀 프로젝트 인원 중 한명이 나갔다. 그것도 리액트가 나갔다. 세명이서 해야할 스코프라 사실 이번주안에 제일 적게잡은 api조차 완성하지 못할 가능성이 크다. 나갈수있는 확률이 있으면 진작좀 말해주지 스코프는 스코프대로 다 늘려놓고... 책임감이 없는 사람이다. "그깟 팀플젝 별거있나?" 라고 생각할 수도 있지만, 적어도 나에게는 정말 중요한 프로젝트이다. 이걸 일단 성공적으로 마무리해야 내 포트폴리오에 하나가 추가되는것인데, 그 사람은 단지 변심때문에 팀프로젝트를 책임감없이 떠났다. 민폐다. 그래도 나는 주어진 스코프를 완성해야한다. 지금 주어진 api를 완성하려는데는 아마 조금 걸릴 것 같다. 일단 view에 관한 디자인도 디자이너분께서 주지않았고, 타입스크립트를 공부하느라 아직 익숙치도 않은데..

타입스크립트를 조금 공부하고 실전프로젝트 view 뼈대 만들기를 시작했다. 디자인이 도착하려면 조금 걸릴것 같아 일단 어느정도 뼈대만 만들어놓고, 디자인이 도착하면 css를 수정하는 방향으로 하려고한다. 타입스크립트를 맛보기만 공부하고 view를 만드려다보니 너무 어렵다. 아직 redux, toolkit 서버와 통신도 하지않았고, view도 완성하지 못했는데 벌써부터 이러면 어쩔까 싶다. 나중에는 검색기능도 굉장히 복잡해질텐데... 그땐 진짜 개고생할것 같다. 열심히해봐야지 뭐 별 수 있겠나 끝

브라우저마다 기본적인 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컴포넌..

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