프로젝트 생성 2. eslint, prettier 라이브러리 설치(vscode extension 설치와 settings.json 설정은 필수) 3. eslint 설정 예시 (.eslintrc) 3. prettier 설정 예시 (.prettierrc)
짜구's WIKI
Studying Front-end
Studying Front-end
프로젝트 생성 2. eslint, prettier 라이브러리 설치(vscode extension 설치와 settings.json 설정은 필수) 3. eslint 설정 예시 (.eslintrc) 3. prettier 설정 예시 (.prettierrc)
프로젝트를 빌드시키는 과정에서 eslint 에러가 발생했습니다. 이번 프로젝트에 처음으로 typescript를 적용해서 대비를 못했었네욥. 그럼 에러를 없애보도록 하겠습니다~_~ 라이브러리 설치 2. eslint 설정파일 수정 구글링을 통해 수정한 부분만 올려놨습니다. 이렇게 하고 빌드를 하면 성공!
인프런 [C#, Unity] 관련 강의에서 미로찾기 게임을 구현하기 위해 DFS, BFS알고리즘을 배웠다. 정리해놓지 않으면 금방 까먹을 거 같아서 내가 이해한 식으로 정리하고 코드 기록하기! BFS는 너비우선탐색 알고리즘으로 그래프의 모든 정점들을 한번씩 방문하면서 탐색을 하게 된다. BFS는 예약시스템 (FIFO)을 생각하면 이해하기 쉽다. 한 정점의 간선으로 연결된 정점을 모두 Queue에 넣어서 대기시킨다. 그리고 가장 오래된 예약을 Dequeue해서 […]
인프런 [C#, Unity] 관련 강의에서 미로찾기 게임을 구현하기 위해 DFS, BFS알고리즘을 배웠다. 정리해놓지 않으면 금방 까먹을 거 같아서 내가 이해한 식으로 정리하고 코드 기록하기! DFS는 깊이우선탐색 알고리즘으로 그래프의 모든 정점들을 한번씩 방문하면서 탐색을 하게 된다. DFS는 한 정점의 간선으로 이동하게 되면 목적지까지 탐색을 마친 후, 다시 돌아가 다음 정점을 탐색하는 특징이 있다. 재귀함수, Stack 을 […]
디자인이 나오지 않은 상태에서 개발을 진행중이라…(ㅎㅎ…) 툴팁은 라이브러리로 구현해놓기로 했습니다. 라이브러리는 가장 사용법이 간단하고 쉬운 react-tooltip 라이브러리 선택! 라이브러리 설치 2. ReactTooltip 컴포넌트 적용 hover 효과를 더할 요소에 ReactTooltip에 전달한 id와 똑같은 값을 data-for에 설정하면 됩니다. 그리고 children으로 tooltip에 띄울 내용 혹은 컴포넌트를 전달하면 끝입니다. effect, place, type은 부가적인 요소로 설정하지 않을 경우 default 값이 […]
토큰 만료기간을 사용자에게 알려주기 위해 타이머가 필요했다. useTimer를 할까했는데 아예 컴포넌트로 만든 예시가 많아서 참고해 구현했다. 일단 필요한 기능은 5분 제한과 재시작이고, 코드는 다음과 같다. 사용예시 (렌더링) isActiveTimer값은 토큰 요청을 할 때는 false로 했다가, 서버의 응답(토큰값)을 받게 되면 true로 바꾼다.
print 기능을 이용하게 되어 정리할 겸 기록~ 컴포넌트 전체코드 주의할 점 : react는 spa이기 때문에 document.body의 innerHTML을 변경해놓게 되면 새로고침을 해야한다. 하지만 새로고침을 하면 state는 초기값으로 돌아가게 되는데 이를 원치 않을 경우, 현재창이 아닌 새창에서 열기를 하면 된다. 그럼 현재의 돔트리에는 아무 수정이 없기 때문에 괜찮음!
프로젝트를 배포하면서 linux 명령어 중 mv를 자주 활용하게 되었다. mv는 기본적으론 파일이나 디렉토리를 이동하는 명령어인데 동일한 디렉토리 내에서 이동할 경우 이름을 변경할 수 있다. 사용법 beforeFile의 파일 이름을 afterFile로 바꾼다. befireDir의 디렉토리 이름을 afterDir로 바꾼다 file 파일을 toDir 디렉토리 하위로 이동한다 file file2를 적어도 모두 같이 이동시킬 수 있다 dir 디렉토리를 toDir 디렉토리 하위로 이동한다
리액트 앱 배포를 맡게 되었다. 윈도우 환경에서 개발하기 때문에 cli를 다룰 일이 드물어 긴장되고 재밌는 일이다. ‘ㅅ’ㅎㅎ( git, npm 제외 ) 다음에도 까먹지 않고 바로바로 하기 위해 정리를 해놔야겠다. 만약 remote 서버에 연결할 필요가 없다면 1~2단계를 건너뛰어도 된다! putty 서버 연결 2. 로그인 (서버 계정정보를 입력하면 된다) 3. SSH KEY 생성 git에 연결할 ssh key를 […]
새로운 React 프로젝트를 시작하면서 상태관리 라이브러리를 고르는데, 팀원중에 React를 아예 처음 접하시는 분이 계시고, 프로젝트 기간은 짧아서 그나마 러닝커브가 낮은 Recoil을 사용해보기로 했다. (그렇지만 결국 다시 Redux로 돌아가게 되었다. 이건 뒤에…) 일단 Redux 대신 Recoil을 선택했던 이유는 페이스북에서 React 비동기 처리를 위래 만들었던 라이브러리로 훨씬 리액트스러움 (hooks) 보일러플레이트가 많지 않음(Redux는 한 처리를 위래 type > […]