목록# Dev Note/[Frontend] (6)

PINKYETI

[React] react-router-dom 사용하여 컴포넌트 렌더링하기 (Route/Link Component)

안녕하세요. 오늘은 react-router-dom 라이브러리를 사용하여 React Component를 렌더링 해보겠습니다. 먼저 라우팅을 하기전에 Route 와 Link 컴포넌트의 차이를 간단히 알아보고 넘어가도록 하겠습니다. #1. Link Component - 사용자가 클릭할 수 있는 링크를 생성해주는 컴포넌트 - Link Component 를 클릭하여 지정된 경로로 이동 - 일반적으로 페이지 간 이동을 위한 기능 구현에 사용 됨. #2. Route Component - 특정 경로에 대한 렌더링 규칙을 정의하는데 사용됨. - 사용자가 특정 경로에 접속하였을 때 특정 컴포넌트를 렌더링 - 컴포넌트의 동적 렌더링이 가능하기 때문에, 메인 컨텐츠 관리에 사용 됨. 그럼 두 컴포넌트의 특징을 고려하여, 네비..
# Dev Note/[Frontend] 2024. 1. 24. 22:10
[React] Component 라이브러리 활용하여 반응형 메뉴바(NavBar) 만들기 (Ant-Design)

안녕하세요. 오늘은 Ant-Design 이라하는 React Component 라이브러리를 활용하여 페이지를 만들어보도록 하겠습니다. HTTP 디자인에서 BootStrap 이라는 라이브러리를 활용하여 디자인 하듯이 Ant-Design(antd) 라이브러리를 활용하면 쉽게 리액트 디자인을 할 수 있습니다. 먼저 해당 라이브러리 활용을 위해 아래 명령어를 통해 설치해줍니다. >> npm install antd 라이브러리 설치 후, package.json 에서 설치 확인을 해줍니다. 1. antd 라이브러리 공식 홈페이지 참조antd 에서 제공하는 컴포넌트를 확인하기 위해 공식 홈페이지를 참고해줍니다. 기본적인 Button, Table 등부터 Menu, Dropdown 등의 컴포넌트도 활용할 수 있고 별도 ic..
# Dev Note/[Frontend] 2023. 9. 8. 20:54
[React] 컴포넌트로 CSS Style 적용하기 (styled-components)

안녕하세요. React 에서 CSS Style을 컴포넌트로 구현해서 사용하는 법을 알아보겠습니다. CSS 를 컴포넌트로 사용할 경우, 스타일을 하나의 파일에서 관리할 수 있는 장점과 최상담 컴포넌트에서 import 하여 하위 컴포넌트로 상속시킬 수 있는 장점이 있습니다. CSS 컴포넌트를 생성하기 위해서는 "styled-components" 라이브러리를 활용해야 하는데요, 먼저 아래 명령어를 통해 라이브러리를 설치해줍니다. >> npm install styled-components 설치 후, package.json 파일에서 설치 확인을 해줍니다. 1. CSS Style Component 생성 설치한 styled-components 라이브러리를 활용해 CSS 컴포넌트를 생성해보겠습니다. 해당 라이브러리를 ..
# Dev Note/[Frontend] 2023. 9. 8. 20:31
[React] 개발 환경 세팅 - Project 생성 및 구동하기 (+VSCode)

안녕하세요. 오늘은 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 이..
# Dev Note/[Frontend] 2023. 8. 23. 01:08
[JavaScript] 반응형 웹 페이지 슬라이드 2단 메뉴바 만들기 (+HTML/CSS, 드롭다운 x)

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

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