반응형

전체 글 67

CSS - position ( static, relative, absolute, fixed )

position - static 별도로 position : static 이라고 정의해주지 않아도 된다. HTML 원래 있어야 하는 기본 위치에 배치된다. static 일 경우 top left bottm right 속성값은 무시된다. See the Pen Untitled by code_gray (@code_gray) on CodePen. 위의 코드 내용을 보면 1번 3번에는 명시적으로 posiotion : static 을 해주었고 2번 4번에는 하지 않았다. 4번에는 top 과 left를 주었지만 static 이라 반영되지 않는다. position - relative 원래 위치를 기준으로 상대적으로 배치한다. ( 원래의 위치는 static 일때의 위치 ) tom bottom left right 속성 사용 ..

Develop/CSS 2022.03.30

npm 설치 시 SELF_SIGNED_CERT_IN_CHAIN 에러 해결 방법

npm install 을 하다보면 아래와 같은 에러가 발생 할 때가 있다. npm ERR! code SELF_SIGNED_CERT_IN_CHAIN npm ERR! errno SELF_SIGNED_CERT_IN_CHAIN npm ERR! request to https://registry.npmjs.org/@babel/parser/-/parser-7.17.3.tgz failed, reason: self signed certificate in certificate chain 회사 내부 인터넷망 때문에 생기는 에러 같은데 아래 명령어를 입력하면 잘 설치 된다 npm config set strict-ssl false -g

Develop/MAC 2022.03.28

CSS - 선택자 ( selector )

CSS 선택자 css는 선택자와 선언으로 이루어진다. 예를 들면 p 태그의 글자색을 빨간색으로 한다 라는 css 를 작성하면 p { color : red } 이런 식이다. 여기서 p는 선택자이고 나머지는 선언이다. 선택자는 여러가지가 존재하는데 우선 기본적인 것만 정리한다. 1. 전체선택자 전체 선택자는 HTML 내부의 모든 요소에 css를 적용한다. * { color : red } 2. 태그선택자 태그 선택자는 HTML 내부의 내가 정의한 태그만 css를 적용한다. p { color : red } div { color : red } 3. 클래스선택자 클래스 선택자는 HTML 내부의 내가 정의한 클래스만 css를 적용한다. 클래스 명은 자신이 임의로 정한다. .container { color : red ..

Develop/CSS 2022.03.27

React JS - react-router-dom version 6 와 gh-pages

React JS - react-router-dom version 6 와 gh-pages 노마드코더님 강의를 보면서 리액트를 공부하고 있는데 리액트 라우터 버전6이 새로나와서 거기에 맞게 작성하다보니 에러가 났다. react-router-dom version 6를 쓰면 아래와 같은 에러가 발생 할 때가 있는데 Uncaught Error: useRoutes() may be used only in the context of a component. 이럴 경우 Router 로 Routes 를 감싸면 해결된다. 그리고 gh-pages 에서 제대로 인식하기 위해서는 path 에 process.env.PUBLIC_URL을 붙여주어야 한다. 왜 그런지는 모르겠다.. 공식문서상 그렇다니까.. 그렇게 해야지.. import..

Develop/React JS 2022.03.20

React JS - react props

React JS props 리액트는 컴포넌트 끼리 값을 보낼 때 props를 사용한다. 컴포넌트를 단순히 설명하면 함수 하나라고 할 수 있다. //Test component function Test(props){ return( {props.title} ) } //App component function App() { return ( ) } export default App; App 컴포넌트에서 Test 라는 컴포넌트를 가져다가 쓸 경우 html의 속성처럼 정의 할 수 있는데 이것을 props 라고 한다. App 에서 를 가져다 쓰는 부분은 onClilck 같은 html 속성은 사용 할 수 없다. 오직 사용자 정의 값이 들어간다. 나중에 컴포넌트를 파일별로 나누어도 App()에 나눈 컴포넌트만 import..

Develop/React JS 2022.03.19

JavaScript - fetch , async / await 사용법

fetch 보통 비동기 통신은 AJAX를 많이 사용 했는데 fetch 라는 자바스크립트 본연의 함수를 사용 할 수도 있다. fetch 는 아래와 같이 사용한다. fetch(url, options) 첫번째 인자는 url을 받고, 두번째 인자는 옵션을 받는다. (선택) 이 옵션에는 method, header 같은 세부 설정을 할 수 있다. ( 옵션 인자가 없으면 기본 GET 이다. ) //옵션이 없는 경우 fetch("www.xxx.com") .then(response => response.json()) .catch(error => console.log(error); //옵션이 있는 경우 fetch("www.xxx.com" , { method : "POST", header : { "Content-Type" ..

Develop/JavaScript 2022.03.16
반응형