호박너구리 블로그

대부분의 페이지에는 Header, 메뉴바, Footer 등이 들어갑니다. 하지만 모든 페이지에 일일이 헤더, 메뉴바, 푸터를 작성하기에는 번거롭습니다. 컴포넌트로 만들더라도 매번 세 개의 컴포넌트를 넣는 것은 깔끔하지 않죠. 그래서 보통 필요한 컴포넌트를 묶어서 Layout으로 만들어 사용합니다! 오늘은 한 번 React로 Layout 컴포넌트를 만들어보겠습니다. 1. Layout 컴포넌트 생성하기 우선, 원하는 디렉토리에 Layout 컴포넌트를 생성합니다. 저는 components 폴더 안에 Layout이라는 폴더와 파일을 생성했습니다. (개인적으로 타입스크립트를 선호해서 tsx파일로 만들었는데, jsx를 사용해도 무방합니다) // components/Layout/Layout.tsx const Layo..

개발 2021. 5. 10. 18:30

이전 글에서 NextJS에서 React 컴포넌트를 추가하여 페이지로 확인하는 법을 살펴보았습니다. 이번 글에서는 React 컴포넌트 스타일링에 대해서 다룰 것인데요, 그저 css 스타일 속성 주는 것이 왜 주제가 될만한 내용인지 아마 이해하기 어려우실 수도 있습니다. 사실 맞습니다! js (혹은 ts) 파일 내부에서 스타일링을 할 수도 있으니까요. 그러나 NextJS에서 별도의 css(혹은 sass, scss) 파일로 컴포넌트 레벨 스타일링을 한다면, 이 부분을 알아두셔야 할 수도 있습니다. 왜냐하면, NextJS는 [name].module.css 형식의 CSSModule 방식을 지원하기 때문입니다. * 전역으로 스타일링을 하고 싶다면 해당 css파일을 pages/_app.tsx 에서 import 하면 ..

개발 2021. 5. 9. 18:30

이전 글에서, 설치된 NextJS 프로젝트에 Typescript를 추가했었습니다. 그리고 이번에는 본격적으로 React 컴포넌트를 추가하여 페이지와 내부 컴포넌트를 만들어서 index 홈페이지를 구성하려고 합니다. 1. 컴포넌트 디렉토리 생성 우선 컴포넌트 디렉토리 구조는 사람마다, 프로젝트마다, 회사마다 다릅니다. 어떤 곳은 atomic 디자인을 추구하며 디렉토리를 여러 단계로 구분하고, 어떤 곳은 components라는 한 폴더 안에 두기도 하죠. (컴포넌트 디렉토리 구조에 대해서는 나중에 구체적으로 다뤄볼게요!) 우선은 대부분의 프로젝트가 components라는 폴더를 갖고있으니 만들어보겠습니다. (선택) Container 디렉토리 생성 그리고 저는 page와 1:1 대응하는 컴포넌트를 contai..

개발 2021. 5. 8. 18:30

이전 글에서 NextJS 프로젝트를 생성하고 구조를 간단히 살펴보았습니다. 이번에는 생성한 NextJS에 typescript를 설치하려고 하는데요, 바로 패키지를 다운로드해도 되지만 NextJS 공식 문서에서는 조금 다른 방식을 소개합니다. 1. tsconfig.json 파일 생성 바로 프로젝트 루트에 tsconfig.json이라는 파일을 만드는 방법입니다. 명령어를 통해서 해도 되고, 직접 파일을 생성해도 됩니다. 명령어를 쓴다면 다음과 같겠죠 touch tsconfig.json NextJS는 자동적으로 디폴트 값으로 해당 파일을 설정해줍니다. 2. next 실행하기 그리고 next를 실행하면 되는데요, 명령어 npm run dev나 yarn dev로 실행하시면 됩니다. npm run dev 그럼 아마..

개발 2021. 5. 7. 18:30

보통 프론트엔드 프로젝트를 개발할 때에 모든 HTML태그에 대해 CSS 초기값을 설정하는 경우가 많습니다. 왜냐하면 디폴트 CSS가 희망하는 디자인과 다르거나, px, rem, em과 같은 단위를 잘 활용하기 위해서죠! 오늘은 유용한 CSS 초기값에 대해 다루어보겠습니다 0. 초기값 설정이 필요한 이유 아마 왜 초기값 설정이 필요한지 이해하지 못하셨을 수도 있습니다. 한 번 코드로 살펴볼게요 This is h1 This is h3 This is h5 This is p tag This is button This is a tag 그럼 다음과 같은 화면을 볼 수 있습니다. 우선 저는 패딩이나 마진을 주지 않았는데도 각 태그 간격이 주어져 있습니다. 그리고 태그별로 굵기나 크기도 정해져있죠. 버튼 역시 모양이 ..

개발 2021. 5. 7. 08:21

React는 Vue와 Angular와 많이 비교되지만, 그래도 프레임워크가 아닌 라이브러리입니다. 그러다보니 React만으로는 아쉬운 점이 많기도 하는데요, 그래서 적지 않은 분들이 프레임워크를 함께 사용합니다. React 프레임워크 중에서는 GatsbyJS와 NextJS가 가장 유명합니다. 저는 그 중에서 NextJS를 통해 프로젝트를 시작해보았습니다! (TODO: 두 개의 차이는 나중에 다른 글로 올려볼게요!) 1. NextJS 프로젝트 생성하기 우선 처음 프로젝트를 시작할 때에는 다음과 같은 명령어를 통해 시작하시면 됩니다. cpx create-next-app 실행하면 app 이름을 적으라고 나오고, 엔터를 치면 완료되었다고 터미널에 표시가 됩니다. 그러면 이제 프로젝트 설정은 끝이 납니다! 매우 ..

개발 2021. 5. 5. 15:24

회사에서 개발 블로그를 운영중인데, 그 곳에 글을 써두었으니 참고하시면 좋을 것 같습니다 :) https://engineering.codeit.team/2020/06/03/%eb%aa%a8%eb%b0%94%ec%9d%bc-%eb%a9%94%eb%89%b4%ec%97%90-%ec%95%a0%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98%ec%9d%84-%eb%84%a3%ec%96%b4-%ec%9c%a0%ec%a0%80%ec%97%90%ea%b2%8c-%ec%8b%a0%ec%84%a0%ed%95%9c/ 모바일 메뉴에 애니메이션을 넣어 유저에게 신선한 재미를! | Codeit Engineering Blog 모바일 메뉴에 애니메이션을 넣어 유저에게 신선한 재미를! Posted On 2020-0..

개발 2020. 6. 3. 16:22

1. Git 개념 깃 설치 1) 맥 : brew설치 후, brew install git으로 설치 2) 윈도우 : 깃 홈페이지에서 다운로드 깃 개본 개념 1) 레포지토리 (repository) : 프로젝트 디렉토리 내에 .git 이라는 디렉토리가 만들어지는데, 그곳이 레포지토리 커밋이 저장되는 곳 2) 커밋 : 프로젝트 디렉토리의 특정 모습을 하나의 버전으로 남기는 행위 및 결과물 리포지토리 만들기 1) 폴더를 만든 후 그 안에서 git init 실행 (안에 .git 생김) 커밋하기 전에 : 깃에게 commit한 사람을 알려주기 1) git config user.name "이름" 2) git config user.email "이메일" 커밋하기 1) 커밋할 파일 지정 git add "파일이름" (git ad..

개발 2020. 5. 6. 09:08