본문 바로가기

전체 글353

Network - 네트워크 관리사 2급 필기 정리 요즘 네트워크 관리사 자격증을 따기 위해 기초부터 다시 공부하는 중이다. 네트워크는 정처기 공부를 하던 시절 무작정 외워서 그런지 실무랑 이론이 따로 놀았는데 기초부터 다시 공부하니 이해가 더 잘 가게 되는 것 같다. 공부하는 중이라 두서없이 기억나는데로 핵심만 정리해보았다. Network - 네트워크 관리사 2급 필기 요약 OSI 7 Layer & TCP/IP 4 Layer 네트워크 프로토콜은 실무적으로는 4계층(TCP/IP), 논리적으로 7계층(OSI 7 Layers)으로 나뉘어 진다. 응용 - 응용 표현 - 응용 세션 - 응용 전송 - 전송 네트워크 - 네트워크 데이터링크 - 네트워크 인터페이스 물리 - 네트워크 인터페이스 OSI 7 Layer 7계층을 비교가능하고 깔끔하게 정리해보았다. Layer.. 2023. 5. 21.
Network - 네트워크 관리사 2급 필기 / NOS 정리 Window 이벤트 뷰어 윈도우는 시스템을 감시하다가 비정상적이거나 따로 기록해야할 만한 상황(이벤트)가 발생하면 여러 종류의 로그들에 기록한다. 예를 들어 서비스 기동 실패, 장치의 설치, 응용 프로그램 오류 등 보안 / 응용프로그램 / setup / 시스템 의 4가지 항목으로 구성되어 있다. PowerShell 특징 기존 DOS 명령어 사용가능 스크립트는 콘솔에서 대화형으로 사용 스크립트는 텍스트로 구성 대소문자 구분 X 윈도우 명령어 wbadmin.msc : 백업하는 명령어 diskmgmt.msc : 디스크 관리 hdwwiz.cpl: 하드웨어 추가 마법사 fsmgmt.msc: 파일시스템 공유 폴더 GUI net user : 네트워크 접속 사용자 net share : 공유상태 확인 net sessio.. 2023. 5. 16.
Next.js - SVG 사용해서 컬러, 사이즈 변경하기 (Feat.svrg) Next.js 로 프로젝트를 하면서 컴포넌트에서 svg 아이콘을 사용하려고 하니 컬러변경이 되지 않았다. 알고보니 컴포넌트는 svg 형식을 지원하지 않는다고 한다. 그래서 svgr 이라는 툴을 사용하여 리액트 컴포넌트를 svg 파일로 사용할 수 있도록 만드려고 한다. Next.js - SVG 사용해서 컬러, 사이즈 변경하기 (Feat.svrg) 1. svgr 설치하자 npm 명령어를 사용해 인스톨해주자 npm install @svgr/webpack 2. next.config.js 에 아래 설정을 심어주자 // next.config.js const nextConfig = { // 웹팩을 통해 svg 파일을 리액트 컴포넌트로 변환하는 설정이다 webpack : (config) => { config.modul.. 2023. 5. 14.
React(95) 리스트 더보기 기능 구현 오늘은 리스트 더보기 기능을 구현해보자 맨 처음에 아이템이 다섯 개만 보이는 리스트가 있다. [더보기] 버튼을 누르면 그 다음 5개를 더 불려오고 마지막 리스트가 나올 때까지 다섯 개씩 불려온다. 다 불러오게 되면 [접기] 버튼이 나오고 맨 처음 5개만 보이는 초기상태로 돌아가게 된다. 이것을 구현하기 위해서는 두가지 방법이 있다. 1. 더보기를 누를때마다 getList api 를 호출하여 부분적으로 받아오는 방법이 있고, 2. 처음에 getList api 를 호출하여 한꺼번에 받아온 배열을 프론트에서 보여주는 방법이다. 각각에 맞는 방법이 있겠지만, 나는 1번을 더 선호한다. 처음에 한꺼번에 전체 배열을 불러온다면 메모리를 그만큼 차지하게 되고, 만약 몇 만 건있는 데이터 배열이라면 과부하가 걸릴 수 .. 2023. 4. 25.
Next.js - Styled-components 적용전 렌더링 되는 이슈 요즘 한창 Next.js 프로젝트를 만드는 중이다. Styled-components 가 첫 렌더에만 적용이 되고 새로고침을 한 후에는 적용이 안되는 이슈가 있었다. 열심히 구글링을 해본 결과, Next.js가 SSR로 동작하기 때문에 style 적용되기 전에 렌더링이 되어서 이슈가 발생한 것을 알게 되었다. 그렇기 때문에 서버로 요청이 들어오면 가장 먼저 실행하게 만들어야 한다. 해결책을 찾던 새발자는 _app.tsx 와 _document.tsx 라는 서버 파일의 존재를 알게 되는데... Next.js - Styled-components 적용전 렌더링 되는 이슈 우리는 빨간 박스에 있는 부분에서 밑작업을 할 것이다. 위치를 잘 알아 놓자. 1. 일단 pages 폴더 안에 _app.tsx 를 _documn.. 2023. 4. 16.
CSS - display 속성 inline / block / inline-block 이란 display: inline inline 속성은 텍스트 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다. 대표적인 태그는 이 있다. (텍스트 크기만큼만 공간을 계산하니 레이아웃 관련 속성은 적용이 안된다.) width / height 적용 불가 margin / padding-top / bottom 적용 불가 line-height 적용 불가 , , , , , , , , , , display: block block 속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용된다. 대표적인 태그는 가 있다. width, height, margin 등 layout 관련 속성 지정가능 , , - , , , , , , , display: inline-block inline-block 속성은 inline .. 2023. 4. 13.
반응형

티스토리툴바