React8 [Nextjs] 0. 내가 Nextjs를 도입한 이유 안녕하세요? 개발자 옵티머스입니다. 오랜만에 인사드리네요 ㅎㅎ 최근에 제가 개발하고 있는 서비스가 한 가지 난관에 봉착했습니다. 바로 SEO와 관련된 문제입니다. SEO는 검색엔진최적화의 약자로 구글이나 네이버와 같은 검색 엔진이 제가 만든 서비스에서 생성되는 콘텐츠를 얼마나 잘 노출하는 지를 결정할 수 있는 매우 중요한 부분입니다. 제가 아무리 서비스를 잘 만들어도 사람들이 검색해도 나오지 않으면 아무 소용이 없겠죠? 이처럼 SEO는 서비스 운영에 있어서 굉장히 중요한 역할을 차지합니다. 하지만 제가 만든 서비스는 SEO가 잘 적용이 되지 않는다는 문제를 갖고 있었습니다. (아래는 제가 가 개발하고 있는 서비스입니다. 이렇게라도 노출해야지 ㅎ) SEO가 안 되는 이유 제가 만든 서비스에 SEO가 잘 적.. 2023. 11. 13. React 작업 환경 설정 오늘은 리액트 라이브러리를 시행하기 위한 도구들을 설치해보도록 하겠다. Node.js Windows 의 경우엔, https://nodejs.org/ko/에서 좌측에 나타나는 LTS 버전을 설치한다. macOS / Linux 의 경우엔, nvm 이라는 도구를 사용하여 Node.js 를 설치하면 된다. $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash $ nvm install --lts Yarn 자바스크립트 세계에서 개발자는 패키지를 공유하고 이를 조립하여 프로젝트를 빌드하는 도구로 패키지 매니저를 사용한다. 전 세계적으로 가장 인기 있는 자바스크립트 패키지 매니저는 npm이다. 이것은 엄청난 양의 패키지.. 2020. 4. 22. React란 무엇인가? 오늘은 본격적으로 리액트를 학습하기 전에 리액트가 어떻게 만들어졌으며 무엇인지 알아보도록 하겠다. 일단, 프론트엔드 라이브러리 없이 웹사이트를 만들 수도 있다. 그리고 단순히 정적인 페이지를 만드는 것이라면 오히려 라이브러리의 사용이 더 불필요할 수도 있다. 왜냐하면 javascript를 익히지 않고도 html과 css만으로 구현이 가능하기 때문이다. 하지만 요즘 우리가 접하는 많은 사이트들은 정적인 웹 페이지가 아니라 동적인 웹 애플리케이션이다. 사용자의 동작에 반응하며 상태를 관리해줘야 한다. 게다가 다양한 UI와 서비스를 웹에서 제공하게 된다면 그 많은 요소들을 직접 관리하고 정리하는 것은 효율이 떨어진다. 이러한 효율성의 문제를 해결하기 위해 등장한 것이 프론트엔드 라이브러리이다. 대표적으로 An.. 2020. 4. 22. outline과 full width 버튼 오늘 만들 버튼은 아래와 같다. 기존에 우리가 작성했던 Button.js와 Button.scss 그리고 App.js 파일을 vscode에서 열어준다. 오늘 작성할 내용에 이전에 작업했던 코드와 크게 다르지는 않다. classNames() 함수의 파라미터에 다음과 같이 {outline, fullwidth}를 추가해준다. 기존에 방식과 달리 { }를 사용한 이유는 outline과 fullwidth로 받아올 값이 Boolean값이기 때문이다. 우리는 이 Boolean값을 이용하여 버튼의 윤곽과 폭을 설정하도록 하겠다. Button.js 파일에 아래와 같이 작성해주면 된다. import React from 'react'; import classNames from 'classnames'; import './But.. 2020. 3. 27. 다양한 색상의 버튼 오늘도 어김없이 본격적인 작업 이전에 괜찮은 사이트를 하나 추천하려한다. 컬러와 과련된 사이트이다. 바로 open color라는 사이트이다. 밝기별로 색깔들을 나열해 보여준다. https://yeun.github.io/open-color/ Open Color Color scheme for UI design yeun.github.io 우리가 오늘 최종적으로 만들 버튼의 이미지는 아래와 같다. 자! 그럼 본격적으로 코딩을 시작해보자. 일단 예전에 작업했던 Button.js와 Button.scss에서 추가로 작성을 해주면 된다. $blue: #228be6;// 주석; $gray: #495057; $pink: #f06595; .Button{ display: inline-flex; color: white; fon.. 2020. 3. 27. 다양한 Button 만들기 저번 시간에는 파란색 버튼 1가지를 만들어보았다. 오늘은 더 나아가 다양한 색과 크기의 버튼을 만들어볼까한다. 본격적으로 코딩을 하기 이전에 새롭게 라이브러리를 설치해야한다. 기존의 작업을 좀 더 수월히 하기 위해서이다. 터미널을 열고 다음과 같이 입력을 해주면 된다. >yarn add classnames 이 라이브러리는 다양한 옵션으로 class의 이름을 조합하여 사용할 수 있도록 도와준다. 다음 그림을 보면 좀 더 이해하기 쉬우리라 본다. classNames('foo', 'bar'); // => 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames({ 'foo-bar': true }); // => 'foo-bar' classNa.. 2020. 3. 25. Button 컴포넌트 꾸며보기 오늘 우리가 만들어 볼 버튼은 아래와 같다. 어떻게 하면 아래와 같은 버튼을 만들 수 있을까? src 폴더 안에 Button.js와 Button.scss 파일을 추가해준다. Button.js 파일에는 아래와 같이 작업을 해준다. import React from 'react'; import './Button.scss'; function Button({children}){ return( {children}); } export default Button; Button.scss에는 아래와 같이 작업을 해준다. $blue: #228be6;// scss에서 변수를 정의할 경우 $를 사용한다 .Button{ display: inline-flex; color: white; font-weight: bold; outlin.. 2020. 3. 25. SASS 1. SASS란 무엇인가? syntactically awesome stylesheets의 약자로 웹 디자인을 하기 위한 언어로 사용된다. CSS의 가독성과 유지보수를 편리하게 다룰 수 있다는 장점을 가지고 있다. SASS에 대해 자세히 알고자 한다면 아래의 주소를 방문하는 것을 추천하다. https://sass-guidelin.es/ko/ Sass Guidelines — Korean translation 분별 있고, 유지∙확장 가능한 Sass 작성을 위한 주관적인 스타일가이드. sass-guidelin.es 2. 확장자 SASS를 이용할 경우에 2가지의 확장자를 사용할 수 있다. 첫 번째는. sass/이다. 처음에 SASS가 등장하였을 때, 주로 사용하였다. 다음 SASS의 예시 코드이다. nav ul .. 2020. 3. 24. 이전 1 다음
