SLASH 기술 블로그

시리즈 글 치고는 꽤 오랜만에 2번째 이야기로 돌아온 것 같다. 첫번째 글은 왜 이 시리즈를 시작하게 되었는지에 대해서 썼고 이번 글부터 어떤식으로 Next JS 프로젝트를 시작하는지 이야기 해보려고한다! 프로젝트 시작하기 일단 어디에 next 프로젝트를 만들지 정해보자. 나는 Desktop에 start-next 폴더를 만들어서 시작할 예정이다. cd Desktop mkdir start-next 그 다음 아래와 같이 npm init을 통해 기초 package.json 파일을 생성 한 후, 필요한 모듈을 다음과 같이 설치해주자. npm init -y npm install --save react react-dom next 그 다음, 아래와 같이 package.json 파일을 수정해주면 세팅 완료이다! { "..

이번에는 Next JS로 웹사이트 만들기에 대해서 시리즈 형태로 글을 써보려고한다. 해보고 괜찮다고 판단되면 계속 해볼 예정이다. SPA의 큰 문제 React로 개발을 하다 보면 하나의 큰 문제와 직면하게된다. 그것은 바로 검색엔진 최적화이다. 각 브라우저 마다 검색엔진이 존재 하는데, 검색엔진은 검색 결과를 보여주기 위해 자료를 수집하고 내부적으로 순위를 매기는 작업을 한다. 검색 결과 상위에 노출이 되려면 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 개발 해야한다. 하지만 React로 개발을 하게 되면 자연스럽게 SPA (Single Page Application)으로 개발을 하게 된다. 이렇게 되면 개발중인 웹 페이지에 메타 태그들을 다이나믹하게 변경 하기 어려워진다. 검색엔진..

목표 이전 글에서 Atomic Design 패턴에 대해서 알아보았다. 이번에는 Atomic Design 패턴을 통해 직접 간단한 페이지 하나를 만들 예정이다. 사용한 기술 정리 [x] React.js [x] Styled-Components 시작하기 우선 시작하기에 앞서 이번 글에서는 어떤 페이지를 만들것인지 캡쳐 화면을 보고 가보자! 저번 글에서 예시로 보여줬던 화면과 비슷한 디자인으로 이미지와 같은 페이지를 만들어 볼 것이다. 조금 다른 것은 Pages단계를 보여주기 위해서 텍스트를 입력하고 SEARCH 버튼을 누르면 Content영역에 해당 텍스트가 보여지는 기능을 추가해볼 것이다. 완성된 페이지를 같이 만들어보자. Atomic 하게 구조 나누기 Atomic Design Pattern에서 가장 중요하..

Atomic Design이란 Atomic Design이란 디자인 요소들을 나눠서 파악하고 이들의 조합을 통해 또 다른 디자인을 구성하는 방식을 말한다. 이러한 방식은 컴포넌트 단위로 개발하는 React프로젝트와 잘 어울리는데 어떻게 구성하는 디자인 패턴인지 같이 알아보자. 디자인 요소들을 나눠서 파악하고 이들의 조합을 통해 또 다른 디자인을 구성한다는 말은 화학시간에 배웠던 원자 구조와 연관이 있다. 모든 물체는 원자로 구성되어 있다. 이러한 원자들이 결합하여 분자를 형성하고 차례대로 더 복잡한 유기체로 결합하여 하나의 물질을 구성하게 된다. 이 관점으로 하나의 페이지도 마찬가지로 여러가지 작은 컴포넌트들이 존재하고 컴포넌트들끼리 결합하여 하나의 페이지를 구성하게 된다는 것이 Atomic Design이 ..