성연커밋 : )

@font-face는 사용자 컴퓨터에 폰트가 설치되어있지 않아도, 서버에서 내려받아서 사용할 수 있는 방법이다. @font-face{ font-family:"폰트이름"; src:local("폰트이름1"), local("폰트이름2"), url("폰트주소") format("폰트포맷"); } font는 보통 global.css에서 적용한다. 해당 프로젝트에서는 src/styles/global.css에 있다. @font-face { font-family: 'Maplestory'; src: url('../../public/fonts/MaplestoryLight.otf') format('otf'); font-weight: normal; font-style: normal; font-display: swap; } @f..

Index Signature란? 인덱스 시그니는 { [Key:T] : U } 형식으로 객체가 여러 Key를 가질 수 있으며, Key와 매핑되는 Value를 가지는 경우 사용한다. 이게 무슨 말일까? 간단히말해서, 인덱스 시그니처는 객체가 {Key, Value} 형식이며 Key와 Value의 타입을 정확하게 명시해야 하는 경우 사용할 수 있다! import React from "react"; import { useParams } from "react-router"; interface RouteParams { coinId: string; } const Coin = () => { const { coinId } = useParams(); // const { coinId } = useParams(); // 비구조..

styled-components는 전역스타일을 지정해 줄 수 있다. 컴포넌트 레벨 스타일링 React와 styled-components로 웹 개발을 하다보면 대부분의 경우 컴포넌트 레벨에서 스타일을 하게 된다. 각각 컴포넌트에서 스타일을 개별적으로 주면? - 시간이 많이 걸리는 불편함 - 같은 코드를 쳐야할 수도 있다! 그래서 같은 스타일 코드는 전역으로 줘버리자~~ Styled Components는 createGlobalStyle() 함수를 제공한다. GlobalStyle사용하는 이유는? - 규모가 큰 웹 개발 할 때에, 개별 컴포넌트가 아닌, 모든 컴포넌트에 동일한 스타일을 적용하는 편이 유리할 수 있다. // src/App.tsx import Router from "./Router"; import ..

3. 타입스크립트 TypeScript JavaScript기반 프로그래밍 언어 다르지만, 다르지 않다! JS 기반 + 기능 살짝 추가 작동 전, Type을 확인한다. const plus = (a,b) => a+b; 위의 코드는 자바스크립트 코드이다. plus(2, "hi") // 2hi 우리는 위와 같이 plus함수는 숫자를 더해주는 함수로, 잘못된 정보인 것을 알고싶다! 그래서~~ 타입스크립트로 타입을 먼저 지정해주자! const plus = (a**:number**, b**:number**) => a+b; 위 코드는 자바스크립트와는 약간 다르다! plus함수인데, 숫자가 들어가야한다는 것을 명시해준 것이다. 즉, 그래서 우리는 앞으로 plus의 파라미터로는 숫자를 받아야한다! plus(2, "hi") ..

타입스크립트를 사용하고 싶은데, 이미 리액트 프로젝트가 있다면? yarn add typescript @types/node @types/react @types/react-dom @types/jest 의 코드를 이용하여 타입스크립트를 추가하자 타입스크립트에선 .js파일이 아닌 .ts파일이므로 리액트에서 사용할 수 있도록 .tsx로 확장자를 변경해주자 styled-components역시 typescript에서 호환할 수 있도록 yarn add -D @types/styled-components를 해주자! 즉, 순서는 다음과 같다 1. 타입스크립트 yarn add 해주기 2. 타입스크립트 확장자 변경 3. js에서 사용하던 라이브러리 타입스크립트와 호환할 수 있도록 설치해주기 (styled-components 등..

스타일 컴포넌트에 대해 배워보자~ 리액트 파일을 먼저 만들어주느 yarn create react-app . (현재폴더에할거면 .) 폴더명은 소문자만 쓸 것 대문자는 에러가 뜬다.. 필요없는 파일 제거 및 코드 수정 index.js와 App.js를 제외한 모든 파일을 지워준다. // src/index.js import React from "react"; import App from "./App"; import { createRoot } from "react-dom/client"; const root = createRoot(document.getElementById("root")); root.render(); // src/App.js function App() { return Hello!; } export ..

스토리북이란? Storybook은 컴포넌트 단위의 UI 개발 환경을 지원하는 도구 실제 웹 애플리케이션의 환경과 별개로 컴포넌트 단위의 UI 개발 진행이 가능하다. 내부 개발자들을 위해 문서화하기 위해서 사용할 수 있고, 외부 공개용 디자인 시스템을 위한 플랫폼이다. 구성단위 스토리(Story)이며 하나의 UI컴포넌트는 보통 하나 이상의 story를 가진다. 각 스토리는 해당 UI컴포넌트가 어떻게 사용될 수 있는지 보여주는 하나의 예시이다. 장점 ui컴포넌트가 각각 독립적으로 어떻게 실제로 렌더링되는지 직접 시각적으로 테스트하면서 개발을 진행할 수 있다. 다른사람의 코드를 이해하는데 드는 노력을 줄일 수 있음 자연스럽게 컴포넌트단위 생각하면서 개발 진행 가능 문서화를 통해 컴포넌트의 사용성과 코드의 가독..

서류평가를 할 때, 운영진이 아는 지원자는 평가에서 제외를 하자는 생각을 가지고 있었다. 하지만, 운영진중에서도 지원자를 많이 아는 사람, 적게 아는 사람이 있어 이름을 가려 블라인드로 평가를 진행하기로 했다. 그래서, 지원서 리스트 페이지를 담당하던 내가 이름가리고, 보이는 버튼을 추가하여야했다. props로 이름을 받아와서, 이름을 가리고 받는 방법은 선택하였다. 처음, 이름을 가릴 때 나는 기본 이름 3자인 사람들만 생각하여 조건문으로 한글자만보이고, 두글자는 *처리를 하였다. 하지만 이것은 문제점이 있었다. 만약 외자인 사람, 네글자 이상인 사람들이 지원을 하면 이름 수에 상관없이 3글자로 보이는 것이었다. 이름을 예측할 수 없어서 좋은 방법일 수 있겠지만, 이건 좋은 코드가 아니라고 생각했다. ..

스코프 JavaScript에서 scope(스코프)란 변수의 유효범위 라고 할 수 있다. 자바스크립트에서 스코프란 작성된 코드를 둘러싼 환경으로, 어떤 변수들에 접근할 수 있는지를 정의한다. 스코프는 크게 전역스코프와 지역스코프로 나뉠 수 있다. 전역스코프 ? 함수 안에 포함되지 않은 곳에 정의하는 것으로 코드 어디에서든지 참조할 수 있다. 지역스코프 ? 함수 내에 정의된 것으로 정의된 함수 내에서만 참조할 수 있다. var는 전역 스코프, let과 const는 지역 스코프이다. var num = 1; function a() { var num = 2; console.log(num); } a() // 2 console.log(num) // 1 위의 코드를 보면 a함수에서는 num이 2로 출력이 되며, 함수 ..

Babel이란? JAVASCRIPT(자바스크립트)의 컴파일러 => javascript로 결과물을 만들어주는 컴파일러 노드 환경 구축 yarn init -y 바벨관련 패키지 설치 yarn add @babel/core @babel/cli @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals @babel/preset-react @babel/core은 바벨을 이용하기 위한 필수 패키지입니다. @babel/cli는 명령줄에서 바벨을 사용하기위해 설치합니다. @babel/plugin 관련해서 arrow-functions, template-literals 플러그인을 설치했습니다. plugin들을 간편하게 묶음으로 제공하는 p..