Dev

개발

1. Git hooks Git hooks란 git과 관련한 어떤 이벤트가 발생했을 때 특정 스크립트를 실행할 수 있도록 하는 기능이다. 크게 클라이언트 훅과 서버 훅으로 나눌 수 있다. 클라이언트 훅은 commit, merge 혹은 push 전후로 클라이언트에서 실행하는 hook이다. 서버 훅은 Git repository로 push 할 때 서버에서 실행되는 훅이다. hook에 대한 설명은 여기서 볼 수 있다. https://git-scm.com/docs/githooks hook을 직접 설정하기 위해 프로젝트 폴더의 .git/hooks 폴더에 hook들의 sample 파일이 있다. sample확장자를 없애고 파일 내용을 수정하여 hook을 사용할 수 있다. 2. Husky .git 폴더는 버전 관리 대상이..

2023. 7. 25.

개발/프로젝트

최근에 인스타그램의 광고를 보고 챌린지를 살펴봤는데 재밌어 보이기도 하고 Next.js, GraphQL도 공부하면 좋을 것 같아 신청하게 되었다. 상세 일정 10월 14일(금) ~ 11월 4일(목) (21일) 11월 3일 (목) 자정까지 최종 결과물 제출 스택 Next.js Typescript GraphQL Apollo SCSS Next.js는 필수이고, GraphQL, Apollo는 아예 처음 써봐서 급하게 공부했다.. 타입스크립트와 SCSS는 최근에 공부를 시작해서 사용했다. GraphQL 이란 더보기 Graphql은 라이브러리나 데이터베이스가 아니라 API를 위한 쿼리 언어. 타입 시스템을 사용하여 쿼리를 실행하는 서버사이드 런타임. 필요한 정보들만 선택하여 받아올 수 있다. Overfetching..

2022. 11. 3.

개발/React

import React from 'react'; import { Switch, Route, Redirect } from 'react-router-dom'; import SignUp from '@pages/SignUp'; import LogIn from '@pages/LogIn'; const App = () => { return ( ); }; export default App; export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom' Switch와 Redirect를 react-router-d..

2022. 3. 3.

개발/CSS

예전에는 레이아웃을 만들기 위해 position, float, table을 이용했다. 이것들로는 박스 안의 아이템들을 수직으로 가운데 정렬하는 것, 아이템들의 사이즈에 상관없이 동일한 간격, 사이즈로 박스 안에 배치하는 것, 박스를 동일한 높이로 두는 것 등을 하는데 제약사항이 있었다. Flexbox로 위의 것들을 손쉽게 할 수 있다. 중요한 것! 첫 번쨰 Flexbox는 container에 적용할 수 있는 속성 값, item들에 적용할 수 있는 속성 값이 존재한다. Container display flex-direction flex-wrap flex-flow justify-content align-items align-content Item order flex-grow flex-shrink flex a..

2021. 12. 3.

개발/React

최근 리액트 강의를 듣는데 강의에서 redux, redux-promise 모듈을 사용했다. 사용하라 해서 사용했는데, 사용하다 보니 dispatch에 then을 사용했다. 그래서 원래는 then을 쓰지 못할 거라 생각이 들어 어떻게 then을 쓸 수 있는지, redux-promise 미들웨어를 언제 활용하는지도 알아보았다. dispatch(registerUser(data)).then((response) => { if (response.payload.success) { props.history.push('/login'); } else { alert('Register Failed!'); } }); 회원가입을 하는 코드이다. registerUser 함수가 액션 생성자인데 코드는 아래와 같다. export fu..

2021. 9. 30.