PINKYETI

안녕하세요. React 에서 CSS Style을 컴포넌트로 구현해서 사용하는 법을 알아보겠습니다. CSS 를 컴포넌트로 사용할 경우, 스타일을 하나의 파일에서 관리할 수 있는 장점과 최상담 컴포넌트에서 import 하여 하위 컴포넌트로 상속시킬 수 있는 장점이 있습니다. CSS 컴포넌트를 생성하기 위해서는 "styled-components" 라이브러리를 활용해야 하는데요, 먼저 아래 명령어를 통해 라이브러리를 설치해줍니다. >> npm install styled-components 설치 후, package.json 파일에서 설치 확인을 해줍니다. 1. CSS Style Component 생성 설치한 styled-components 라이브러리를 활용해 CSS 컴포넌트를 생성해보겠습니다. 해당 라이브러리를 ..

안녕하세요. 오늘은 VSCode를 활용하여 React Project 를 생성해보겠습니다. 먼저 프로젝트 생성을 위한 개발 환경 세팅을 진행할텐데요, 사용할 IDE는 VSCode 입니다. 그리고 Node.js 를 설치해줍니다. React 에서 사용되는 언어는 JavaScript 인데 웹 브라우저 외의 동작을 지원하는 엔진입니다. Node.js 는 아래 사이트에서 설치해주도록 할게요. (개발 목적에 맞는 버전 확인하셔서 설치하시면 됩니다.) - Node.js Download https://nodejs.org/ko/download 1. Node.js 설치 및 확인 Node.js 설치 마법사를 진행하셨다면 엔진이 설치되었는지, npm(Node Package Manager)이 설치되었는지 확인해줍니다. npm 이..

안녕하세요. 핑크예티입니다. 최근 웹개발 프로젝트를 진행하며, Front-end 개발을 맡게 되었는데요, 잘 모르는 영역이라 쉽지 않더라고요. 반응형 웹페이지 구현을 시작하다가 메뉴바 구현부터 막혀서 고생을 좀 했습니다. 최근 웹페이지에서 흔하게 볼 수 있는 형태의 2단 메뉴바 구성은 구글링을 통해서도 찾아보기 힘들더라고요. 그래서 제가 작성했던 방법을 공유하고자 펜을 들게 되었습니다. 성격 급하신 분들은, 전체 코드 & 메뉴바 예시부터 보고가세요. - 메뉴바 예시 HTML 삽입 미리보기할 수 없는 소스 - 전체 코드 - 메뉴바 템플릿은 BootStrap 예시를 참고하여 작성 - BootStrap/jQuery HTML 연동은 cdn으로 연결 - .sub-menu Class를 선언하여 Sub Menu St..

안녕하세요. 핑크예티입니다. 오늘은 Front-end 를 처음 접하시는 분들께 활용하기 유용한 라이브러리인 "BootStrap" 을 소개하려 합니다. 부트스트랩은 간단히 말씀드리면, Front-end 개발에 유용한 CSS class 및 JavaScript 함수들을 내장해놓은 라이브러리 입니다. 따라서, 이 라이브러리를 HTML에 연동하여 Style을 처음부터 구현하지 않고 import 하여 가져다 쓸 수 있는데요. 어떻게 사용하는지 알아보도록 하겠습니다. 1. BootStrap 다운로드 먼저 부트스트랩을 사용하기 위해서는 다운로드를 받아줍니다. 아래 링크 통해 다운로드를 진행해주세요. (사이트 내에 부트스트랩 Example 도 있으니 참고하세요.) https://getbootstrap.com/ Boots..