리액트4 [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. 다양한 색상의 버튼 오늘도 어김없이 본격적인 작업 이전에 괜찮은 사이트를 하나 추천하려한다. 컬러와 과련된 사이트이다. 바로 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. 이전 1 다음
