jeong_ga

홈페이지의 형태는 네비게이션 부분이 왼쪽에 고정되어 있고 네비게이션의 코드는 화면 사이즈에 따라 width:auto; or 20vw, max-width:270px과 같은 코드였다. 모바일과 pc에선 270px로 고정 & 모바일과 pc사이에선 반응형으로 사이즈가 변화됨 모바일에선 해당 네비게이션 부분을 버튼으로 on/off 해야 하기 때문에 position을 사용했고, 따라서 pc에서 봤을 때에도 컨텐츠 영역이 네비케이션 영역 뒤로 숨어들음. 이거 작성하다 생각난 건데.. 그냥 포지션 기능을 모바일형에만 주면 됐었음. margin-left으로 하니 사이즈를 지정하는 것이 애매해짐! margin에게 width, max-width를 적용할 수 없었음. 그래서!! 네비게이션과 컨텐츠 영역의 부모에게 :after..

grid grid-container const WrapMain = styled.main` display: grid; gap: 24px; width: 100%; height: auto; ${({ theme }) => theme.media.widePc} { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(367px, auto) minmax(131px, auto) minmax(241px, auto) minmax(444px, auto) minmax(526px, auto) minmax(500px, auto) minmax(524px, auto); } div, section { background-color: ${({ theme }) => theme.co..

대메뉴 {item.subName} ); } export default NavInnerSub; onClick 이벤트가 발생하면 style이 변하는 기능 onClick 이벤트가 발생하면 아이콘이 ˃ -> ˅ 로 변하며 숨겨졌던 navSub가 보이도록 하는 기능 + transition ul의 높이를 0에서 auto로 설정할 때에는 transition이 적용되지 않아 라이브러리를 통해 해결하였음. (이전 게시글 참고) import { useState } from "react"; import styled from "styled-components"; import AnimateHeight from "react-animate-height"; import NavPartList from "./NavPartList"; c..

Navigation 부분 작성 중 발견한 문제로 css에서는 높이값이 지정되지 않았을 때 (height:auto) transition을 적용시킬 수 없다. 하지만 나는 navigation 부분은 list의 개수가 다르고, max-height:100vw 와 같은 코드를 적용시킬 수 없기 때문에 높이를 지정할 수 없었음! 이를 해결하기 위해서는 js로 style을 적용시켜야 하지만!! react는 이미 라이브러리가 만들어져 있다 😉 react-animate-height - how to use [react-animate-height Lightweight React component for animating height using CSS transitions.. Latest version: 3.0.4, last..

remote: Permission to 오류 해결 과정 새로운 프로젝트를 위해 새로운 Gmail 아이디 및 git 아이디를 만들어 git을 push하는 과정에서 오류가 생겼다. 블로그를 보고 해봤지만 안 되길래 다른 방법 강구해봄! (mac의 경우는 키체인에 입력된 기존 git 이름을 수정하는 방식이었음) remote: Permission to jeonga96/admin.git denied to 199jeonga. fatal: unable to access 'https://github.com/jeonga96/admin.git/': The requested URL returned error: 403진행하다 키체인 수정이 아닌 삭제를 했더니 아래와 같은 오류 메세지를 확인! 나는 기존 아이디가..

네트워크관리사 2급 자격증 공부 유튜브에 있는 햄릿슈TV 강의를 보며 정리한 내용 윈도우서버 icqa 실습용 에뮬레이터 실행!! TCP/IP서버 네트워크 환경에 와 같이 IP주소와 서브넷마스크를 추가하시오. IP Address : 10101100.00010000.10010110.01110011 subnet Mask : 22bit 추가설정사항 default gateway : 192.168.100.254 DNS servers : 200.100.100.200 추가 Gateway : 192.168.100.253 보조 DNS Servers : 201.100.100.201 IP Address : 10101100.00010000.10010110.01110011 를 10진수로 변경할 때는 가장 오른쪽 숫자부터 1,2,..

네트워크관리사 2급 자격증 공부 유튜브에 있는 햄릿슈TV 강의를 보며 정리한 내용 라우터 케이블 만들기 재료 RJ-45컨넥터 : 랜선에서 PC나 공유기에 꽂는 플라스틱 재질의 부품 피복탈피기 : UTP 케이블의 피복을 벗겨주는 도구 && 시험장에 가지고 가야 함 UTP케이블 : 흔히 보는 LAN선의 케이블 선 랜툴 : UTP 케이블에서 RJ-45 컨넥터를 고정하는 도구 && 시험장에 가지고 가야 함 케이블 테스터기 : UTP케이블 제작 후 정상적으로 케이블을 만들었는지 확인하는 기기 케이블 제작 순서 UTP 케이블을 피복탈피기로 벗김 (손톱 길이 정도) && 넣어서 돌리면 됨 꼬여있는 선을 풀어서 다이렉트 케이블에 맞게 선 색을 배열 고르지 않은 선을 랜툴이나 니퍼로 잘라 선을 가지런히 정리해준다. RJ..

리액트 onClick 이벤트 아래 gif와 같이 버튼을 클릭하면 더 많은 리스트가 화면에 표시되도록 하는 기능 구현 기능구현 코드 import React, { useEffect, useState } from 'react' import axios from 'axios' import Button from '../form/LoadMoreButton' import SubListItem from './SubListItem' function SubListItemArea({ jsonDataLink }: IProps) { const plusButton: number = 9 const dataAddress = `./data/${jsonDataLink}` const [dataList, setDataList] = useSt..

로컬 파일에 있는 파일 레파지토리와 연결하기 create-react-app으로 생성한 폴더를 git repository와 연결하여 업로드 깃허브에 레파지토리를 생성 로컬에 프로젝트 생성 (create-react-app을 통해 프로젝트 생성) 프로젝트 폴더로 이동 cra로 생성한 프로젝트는 git이 이미 존재하므로 .git을 삭제 rm -r .git rm -rf .git git 환경 생성 git init 레파지토리를 remote로 등록 git remote add origin [레파지토리 주소] git add . git commit -m "커밋내용 입력" git push --set-upstream origin main 📍 git push 오류 ! [rejected] main -> main (fetch fir..

react 개발환경 구축 create-react-app을 사용하여 react 개발환경 구축 react는 개발 프레임워크가 아닌 라이브러리이기 때문에 필요한 기술이나 기능을 설치하여 사용해야 한다. (webpack, babel 등) 하지만 create-react-app을 사용하여 환경을 구축하면 따로 설치할 필요없이 필요한 기능들을 바로 사용할 수 있다. node.js 설치 create-react-app을 사용하기에 앞서 node.js(node, npm, npx)가 설치되어 있어야 한다. node.js 설치하기 LTS는 안정적인 지원을, Current는 신기술 지원을 약속함. node.js를 설치하면 npm(node pakage manager)가 자동으로 설치되므로 따로 설치할 필요가 없다. npx는 no..

네트워크관리사 2급 자격증 공부 유튜브에 있는 햄릿슈TV 강의를 보며 정리한 내용 라우터 기본 정리 - 설정 en (enable) : 사용자 모드에서 관리자 모드로 전환 conf t(configure terminal) : 관리자 모드에서 전역설정 모드로 전환 interface (곳) : 문제에 제시된 (곳)으로 이동 ip add (ip) (서브넷 마스크) : ip/서브넷 마스크 설정 ip add 192.168.0.102 255.255.255.0 secondary : 두번째 ip/서브넷 마스크 설정 bandwidth (대역폭) : 대역폭을 (대역폭)으로 설정 clock rate (클럭숫자) : 클럭속도 설정 & k는 1000단위 description (주석이름) : 주석 설정 & 주석 이름 그대로 입력, ..