본문 바로가기

전체 글

 (404)
[React] 리액트 라우터 사용하기(React-Router-Dom) 리액트에서의 페이지 이동을 위한 라우터(Router) 기존에는 SPA(Single Page Application) 방식을 이용해서 새로운 페이지를 로드하는 방식이 아닌, 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가져오는데 라우트를 활용해 신규 페이지를 불러오지 않은 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링을 해줄 수 있다. 라우팅이란? : 사용자가 요청한 URL에 따라서 해당 URL에 맞는 페이지를 보여주는 것으로 하나의 페이지 내에서 url에 따라 렌더링 진행 리액트 라우터(React Router)란? : 사용자가 입력한 주소를 감지하는 역할 : 여러 환경에서 동작할 수 있도록 동작할 수 있도록 라우터 컴포넌트 제공 : BrowserRouter / HashRo..
[GitHub] GitHub 디렉터리 화살표시 (폴더 접근 불가) 해결 깃허브 폴더 접근 불가 해결하기 위와 같이 깃허브에 업로드가 되기는 했지만 클릭이 안되며 접근이 불가능한 경우가 존재하는데, 이는 해당 폴더에 .git 폴더가 생겨서 발생하는 문제이다. 이는 최상위 폴더에 이미 .git 폴더가 있음에도 해당 폴더를 push 하는 과정에서 .git 파일이 생겼기에 나타나는 에러이기 때문에 해당 폴더들의 .git 파일들을 제거해주면 문제가 해결된다. [해결 방법] 1. git 파일 제거 rm -rf .git : .git 파일을 제거하고자 하는 폴더에 접근해 $ rm -rf .git 명령어를 통해 해당 파일을 제거 2. 스테이지 파일 제거 git rm --cached . -rf : $git rm --cached . -rf 명령어를 통해 스테이지의 파일 제거 3. git add..
[미니 프로젝트 회고] Servlet JSP를 활용한 프로젝트(편마카세) 미니 프로젝트 회고 - JSP, Servlet을 이용한 웹페이지 제작 - 프로젝트 명 : 편마카세 프로젝트 진행 기간 : 23.10.10 ~ 23.10.19 (약 9일) - 주어진 기간은 9일이지만, 화면 구성 / HTML / CSS 는 미리 만들어서 진행 프로젝트 인원 : 총 4명 내가 맡은 역할 : 게시글 등록/수정/디테일 페이지, 카카오톡 소셜 로그인 깃허브 : https://github.com/Yummsters/pyeonmakase 코드 분석 1. 게시판 등록 및 수정 * 게시판 등록 및 수정은 UI 및 기본적인 기능은 유사하며, 수정 시 기존 게시글에 대한 정보 가져오는 부분만 다름 [체크박스 및 내용 입력 필수 스크립트] - 게시글의 모든 내용을 필수로 입력해야 하야 했기 때문에 스크립트를 통..
[React] 테이블 / TableStrap reactstrap에서 table을 만드는 Table 기존 html의 table과 css 적인 부분을 제외하고는 크게 다르지 않은데, 밖을 감싸고 있는 을 제외하고는 html의 태그를 그대로 가지고 와서 사용한다 [TableStrap.js] import {Table} from 'reactstrap'; function TableStrap(){ return( EXAMPLE # Frist Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ) } export default TableStrap; - 테이블에 어떠한 설정을 할 때에는 에서 기본적으로 설정하며, 그 외에는 html/css 와 동일하게 처리 s..
[React] 버튼을 눌러 다른 내용 보여주는 TabsStrap 탭 메뉴를 만들 수 있는 TabsStrap [TabsStrap.js] import {useState} from 'react'; import {TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col} from 'reactstrap'; import classnames from 'classnames'; function TabsStrap(){ const [activeTab, setActiveTab] = useState('1'); return( // (1) setActiveTab('1')}>Tab1 setActiveTab('2')}>Tab2 // (2) Tab 1 Contents "국내 통신망 제일 많이 쓰는 구..
[React] 페이지 이동바 / PaginationStrap 페이지를 넘길 때 사용하는 PaginationStrap 보여줘야 하는 목록 및 페이지가 많을 때 목록을 무한정 보이게 하는 것이 아닌 페이지를 설정해 넘길 수 있도록 사용하는 경우가 많은데, 이 때 페이지를 넘길 수 있는 페이지 이동바를 만들 때 사용하는 것이 PaginationStrap이다 [PaginaitionStrap.js] import { Pagination, PaginationItem, PaginationLink } from "reactstrap"; function PaginationStrap(){ return( // (1) // (3) // (2) 1 2 3 4 5 // (2) ) } export default PaginationStrap; (1) Pagination의 size 설정 : siz..
[React] 네비게이션 바 / Nav, NavBar 웹 페이지의 메뉴, 네비게이션바로 많이 사용하는 Nav, Navbar Strap [NavBar.js] import { useState } from "react"; import{ Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; function NavbarStrap1(){ const [open, setOpen] = useState(false); const toggle = () =>{ setOpen(!open); } return( // (1) kosta // (2) 네이버 다음 Opt..
[React] 페이지 위에 레이어를 까는 모달 / ModalStrap 팝업, 다이얼로그로 불리는 모달창 ModalStrap [ModalStrap.js] import { useState } from 'react'; import {Button, Modal, ModalHeader, ModalBody, ModalFooter} from 'reactstrap'; function ModalStrap(){ const [open, setOpen] = useState(false); return( setOpen(true)}> 모달 {/* open이 true가 되면 열리는 모달창이고 모달창이 열리면 다시 false로 변경함 */} setOpen(!open)}> setOpen(!open)}> "국내 통신망 제일 많이 쓰는 구글, 사용료는 '0원'" 구글 등 해외 플랫폼 사업자가 망 사용료를 내도..

티스토리툴바