성연커밋 : )

깃 커밋 이전에, ESLint 검사를 미리 하고, 커밋이 될 수 있도록 husky를 이용하여 ESLint를 자동화하자 husky가 뭔데? git hook을 쉽게 제어하도록 도와주는 매니저 도구이다 git hook이란? Git Hooks 는 Git과 관련한 어떤 이벤트가 발생했을 때 특정 스크립트를 실행할 수 있도록 하는 기능이다. 크게 client hook과 server hook으로 나뉘는데 client hook은 commit, Merge가 발생하거나 push가 발생하기 전 client에서 실행하는 hook 반면 server hook은 Git repository로 push가 발생했을 때 server에서 실행하는 hook이다. husky, lint-staged를 dev로 설치해주자 yarn add -D h..

ESLint를 설정하는데 Must use import to load ES Module와 같은 에러가 떠서 ESLint가 실행되지 않았다. 그 이유는 .eslintrc.json의 파일에서 "parser"의 값이 처음에 babel-eslint였다. 하지만 babel-eslint는 es6을 지원을 해주지 않기 때문에, ES6으로 작업하고 있기 때문에 ESLint설정이 되지 않았다. 그래서 필요한 파일을 설치하자 yarn add @babel/eslint-parser 해당 파일 설치 이후, ... "parser": "@babel/eslint-parser", ... 으로 parser키의 값을 바꿔주도록한다. 그래도 나는 import 에러가 뜨는 문제가 있었는데, 이 이유는 ... "plugins": ["react"..

ESLint란? ES + Lint를 합친것 ES = Ecma Script ES는 표준 자바스크립트를 뜻한다. Lint = 에러가 있는 코드에 표시를 해줌을 뜻한다. 즉, ESLint는 표준 자바스크립트에서 에러가 있는 코드에 표시를 해준다! 협업할 때 특히 유용한 ESLint이다. Prettier란? 코드 정리 규칙을 설정해놓을 수 있는 플러그인으로, 정해놓은 규칙에 맞게 자동으로 정렬해서 가독성을 높이고 코드 스타일을 통일할 수 있다. 즉, Prettier는 코딩 스타일을 잡아준다! 그렇다면 ESLint와 Prettier을 이용하여 프로젝트 세팅을 해보자 원래 ESLint 를 사용하려면 프로젝트에 직접 설치해야 하지만, CRA의 경우 기본적으로 ESLint 세팅이 다 되어 있는 장점이 있다. 그래서, ..

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

ServerSide렌더링 서버사이드렌더링이란? 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미한다. client쪽이 아닌, server쪽에서 작동하여, api같은 경우 모두 준비가 된 이후에 프론트 화면이 보여진다. 사용 이유? 검색 엔진 최적화 빠른 페이지 렌더링 (빈HTML이 아닌, 서버에서 미리 그려서 브라우저로 보내준다) pageProps _app.js 파일에서 Component와 pageProps를 주는 것을 볼 수 있었다. 이것은 getServerSideProps 함수 내에서 객체를 props로 받기 위해 pageProps를 스프레드연산자를 이용하여 사용해준 이유이다. ...pageProps

redirects 유저를 리다이렉트도 시키며, URL이 변한다. next.config.js 파일에서 async redirects() { return [ { source: "/old-blog/:path*", // 사이트주소를 입력하면 destination: "/new-sexy-blog/:path*", // 여기로 도착지가 변경된다. permanent: false, }, ]; }, rewrites 리다이렉트는 시키지만, URL은 변하지 않는다. async rewrites() { return [ { source: "/api/movies", destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`, }, ]; }, /api/movi..

다음 개발을 위해 next.js 노마드코더 강의를 들었다. 지원서 사이트를 하면서 next.js를 사용해보았지만, 공부를 하지 않고 감으로 때려 맞추고, 그때 그때 구글링을 통해 공부를 하였지만, next의 기초를 모른다는 생각이 들었다. Next프로젝트는 yarn create next-app을 통해 next프로젝트를 생성할 수 있다. 만약에 typescript를 쓰고 싶다면? 뒤에 --typescript를 추가하여 작성해준다. yarn create next-app --typescript 프로젝트가 생성이 되면, 위와 같은 파일 구조가 나온다. pages의 폴더 내에 있는 파일들이 next.js를 실행했을 때의 url이 된다. 개발을 하면서 기본이 되는 index.js의 파일이 url의 기본주소가 되며,..

멋쟁이사자처럼 중앙에서 지원서는 구글폼으로 받는다고 이야기가 나왔지만, 우리는 우리가 직접 사이트를 만들어서 그 사이트에서 받으면 어떨까? 라는 생각이 있었다. 그래서 운영진들과 함께 프론트, 백엔드를 나누어 지원서 사이트를 제작하였다. 나는 회사도 다니고, 프론트와 백 스터디도 진행을 하였지만, 개발에 대해서도 욕심이 있기때문에 프론트 개발을 참여하였다. 사실 난 next.js도 모르고 typescript도 잘 모른다. react로 한 첫 프로젝트인데, 이것을 실제로 배포까지하고 운영을 해야한다니 많이 떨렸고 걱정이었지만, 아무것도 모른다고 참여를 안하면 언제 내가 개발을 시작하나 싶었다. 모르는것은 물어봐가면서 해결해야지 라는 마음으로 개발에 참여하였다. 초기세팅은 같이 하는 현직 웹 개발자분께서 해..

스코프 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로 출력이 되며, 함수 ..

DATA-prerendering - next 9.3버전 이전에 getInitialProps만으로 데이터 패치를 전부 해결했지만, 그 이후부터는 getStaticPtops, **getStatiicPath**(Static Generation) / **getServerSideProps** 로 분화되어있음 getInitialProps - 기본적으로 **데이터 요구사항이 없는 경우 페이지가 정적인지 자동으로 확인** - getInitialProps나 getServerSideProps를 사용하지 않는다면 페이지를 정적HTML로 사전에 렌더링하여 자동으로 최적화 > 자동 정적 최적화 : getInitialProps가 없으면 페이지를 정적 HTML으로 사전렌더링해서 정적최적화를 함 SSR계산이 없기 때문에 사용자에게 ..