아 그거 뭐였지

Q. 드래그앤드랍 만들어주세요. 드래그앤드랍? 라이브러리 써서 하면 금방 뚝딱아닌가 라고 자만했던 과거의 나에게 엄벌을 내려주고싶다. 개발할때 자만은 죄악이다. 언제나 겸손하도록 하자. 앵귤러만 사용하다가 리액트로 사용하려다보니 막히는 부분이 많았다. 하지만 덕분에 공부가 많이돼서 재밌었다. 야무지게 다운로드 부터 먼저 해주도록 하자 # yarn yarn add react-beautiful-dnd # npm npm install react-beautiful-dnd --save 공식문서를 보면 드래그 앤 드랍을 작동시키기 위해선 크게 DragDropContext와 Droppable, Draggable이 있는데 DragDropContext는 드래그 앤 드랍을 사용하기위한 영역을 지정해주는것이고 Droppab..

가끔씩 만들어진 배열을 출력하는것이아니라 동적으로 변하는 정수값만큼 반복해서 Element를 보여줘야할때가있다. 그럴때 사용하면 유용하다. 바로 코드로 알아보자. 반복해서 보여주고하 하는 html 태그에 ng-container로 감싸고 [].constructor(변수명) 으로 입력하면 끝이다. //html 반복하자 반복하자

Q. 장소, 상황에 구애받지않고 폰트를 적용 시켜 주세요. 인터넷이 되지않는곳에서 웹페이지를 로드할때나, 폰트가 설치되지 않았을때 폰트를 다운받아서 원하는 위치에 폴더에 넣어주면 사용이 가능하다. 바로 사용법을 알아보자. 렌더링하는 최상위 html에서 font-face를 사용하여 폰트경로와 이름을 지정해준다. //index.html body{ @font-face{ src: url("/assets/fonts/NotoSansKR-Medium.otf"); font-family: "Noto"; } } 최상위 css파일에서 font-face에서 가져온 이름으로 font-famlit를 사용하여 폰트를 적용시켜준다. //styles.css //원하는곳에만 사용하고싶을때 styles.css{ body,input,but..

Q. 로그인 완료되면 메인페이지로 이동해주세요 리액트로 로그인 기능 구현하던중 로그인이 완료되면 메인 페이지로 페이지로 이동하고싶었다. 검색해보니 useHistory를 사용하면 된다해서 사용했다가 이제는 useNavigate로 바뀌었다고 해서 적용해보았다. 사용하기전에 react-router-dom 을 설치하여야 한다. npm i react-router-dom //타입스크립트 사용한다면 밑에도 설치 npm i @types/react-router-dom 사용방법은 useHistory보다 간단해졌다. useNavigate('경로') 이렇게 경로만 적어주면 된다. 바로 코드로 알아보자. import { useNavigate } from "react-router-dom"; // useNavigate를 사용하기위..

prettier를 설치해서 사용하던도중 컴파일 오류는 아닌데 굉장히 거슬리게 빨간줄이 그어져있었다. 문제가 뭔가 하고보니 `cr` 을 삭제하라고한다. cr을 삭제하는 방법을 모르니 저 오류가 안뜨게 해보자. 프로젝트의 최상위 폴더에 .eslintrc.js에서 rules에 아래내용을 적어주면된다. 'prettier/prettier': [ 'error', { 'endOfLine': 'auto', } ] 전체 코드는 아래와 같다. module.exports = { parser: '@typescript-eslint/parser', parserOptions: { project: 'tsconfig.json', tsconfigRootDir : __dirname, sourceType: 'module', }, plugi..

로그인 기능을 구현하던도중 아이디와 패스워드를 받아야 하였고, input태그가 중복이 되어 재사용성을 위해 input 태그를 Styled-Component로 따로 빼서 작업을 하였다. 재사용성을 위해 분리한것까지는 좋았지만, 타입정의와 props를 처리하는데 있어 삽질을 했다. onChange 이벤트로 입력값을 받아오려했지만 받아오지못하고 타입 오류가 났었다. 타입정의를 안해주어서 생긴 문제였는데 바로 코드로 확인해보자. //Input Component import React from "react"; import styled from "styled-components"; type InputProps = { width: number; fontSize: number; onChange?: (e: any) =>..

컴포넌트 재사용성을 위해 Styled-Component를 사용해보기로 하였다. 사용하기에앞서 설치를 먼저 해주도록하자. 본인은 타입스크립트로 개발하였기에 두번째 명령어로 설치하였다. //타입스크립트 안쓸경우 npm install styled-components //타입스크립트를 사용할경우 npm install @types/styled-components 사용하고자 하는 컴포넌트에서 import를 한다음 원하는 html element(div나 span등등,,,)를 지정하여 사용하면 된다. 문법은 styled.element`css속성` 이다. 코드로 확인해보자. //Button.tsx import styled from "styled-components"; // 타입정의 type ButtonType = { w..

Q. localhost:3000/auth/login 해당 url처럼 auth뒤에 login으로 가게 해주세요. Angular에서는 중첩라우팅을하고싶으면 RouterModule.forRoot에 걸린 컴포넌트에서 RouterModule.forChild를 하면 중첩 라우팅이 가능한데 리액트에서는 어떻게 하는지 궁금해서 찾아보았다. 리액트는 최상단 파일에서 BrowserRouter로 컴포넌트들을 감싸고 중첩라우팅을 할 주소 뒤에 *를 붙여서 해당 주소로 시작하면 무조건적으로 원하는 컴포넌트로 접속이 될수있도록 라우팅을 시켜버리는것같다. 여기서 주의할점은 BrowserRouter는 최상단 파일에서 한번만 사용하고 자식 파일들은 Routes만 사용해야한다는점이다. 바로 코드로 확인해보자. 먼저 최상단 파일에서 라우..