분류 전체보기

[HTML, CSS] 스킵메뉴

https://www.wah.or.kr:444/ 요런데 가서 보면 웹 접근성에 관한 지침을 볼 수 있다. 우리는 웹사이트를 만들 때 이러한 지침을 따라야 한다! 가장 먼저 스킵메뉴를 만드는 법을 알아보겠다. 스킵메뉴란 tab 을 이용해서 마우스가 아닌 키보드로 화면을 제어하고 메뉴버튼을 누를 수 있게 하는 기능이다. naver, daum 등 대표적인 사이트는 모두 적용이 되어있다. 이런식으로 내가 만들어둔 class 의 이름을 href 로 연결하여 스킵 메뉴바를 만들어 준다. css 부분은 이런식으로 코딩해 준다. /* a 링크 초기화 */ a {color : #222; text-decoration: none;} a:hover {color : #390;} /* 스킵 내비게이션 */ #skip {} #sk..

[JavaScript] 정규표현식 (Regular Expression)

정규표현식이란? 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식! 자바스크립트의 경우 내장되어있으므로 편하게 사용할 수 있음 패턴 만들기 var pattern = /a/; var pattern = new RegExp('a'); RegExp 객체의 사용 - exec() 예를 들어서 url 과 같은 정보를 추출하고 싶을 때, test 하고 싶을 때, 필요한 정보를 치환하고 싶을 때 사용 console.log(pattern.exec('abcdef')); //["a"] /a./ 의 경우 a를 포함하여 한문자까지 나타낸다고 볼 수 있음! var pattern = /a./; console.log(pattern.exec('abcde')); // ["ab"] - test() : 우리가 찾는 정보가 있는지 ..

[Redux] 노드 리액트 Redux 기본 구조 만들기!

- Setting up Redux! $ npm i redux react-redux redux-promise redux-thunk --save 여기서 redux-promise, redux-thunk 는 간단히 말하면 redux 를 잘 쓸 수 있도록 도와주는 역할이다. Redux 는 store 안에서 모든 state 를 관리하게 되는데 Dispatch 할 때, action 은 객체 형식이어야 함 ,, 그런데 언제나 객체 형식으로 받는게 아니라 promise, function 형태로 받을 때가 있음 그렇기 때문에 redux-promise, redux-thunk 를 middleware로 받는 이유는 위와 같은 원인 때문에 에러없이 진행하기 위해서는 필수적으로 설치해야 함! * redux extension - 다..

[Concurrently] 서버와 클라이언트 동시에 실행시키기!

서버 - node.js 클라이언트 - react 환경에서 진행하구있다. 여태까지는 서버 따로 클라이언트 따로 npm start 를 해주었었는데 concurrently 라이브러리를 이용하면 한번에 시작시킬 수 있다고 한다! 1. 설치하기 $ npm install concurrently --save 2. root 디렉토리의 package.json 의 scripts 부분에 dev 라는 새로운 부분을 추가하였다. concurrently 를 사용하고 싶다면 아래 이미지와 같이 앞에 명시해주고 뒤에 순차적으로 실행시키고 싶은 명령어를 쓰면 된당! 3. 실행화면

[Proxy] Proxy Server란?

프록시 서버를 설치하게 되면 위 그림과 같이 유저와 인터넷 사이에 위치하게 되는데, 하는 역할은 1. 유저의 아이피를 Proxy Server에서 임의로 바꿔버릴 수 있음 그래서 인터넷에서는 접근하는 사람의 아이피를 모름. 2. 보내는 데이터도 임의로 바꿀 수 있음. 이 외에 1. 방화벽 기능 2. 웹 필터 기능 3. 캐쉬 데이터, 공유 데이터 제공 기능 - 사용하는 이유는? 1. 회사나 집에서 인터넷 사용 제어 가능 2. 캐쉬를 이용해서 더 빠른 인터넷 이용을 제공 3. 더 나은 보안 제공 4. 이용 제한된 사이트 접근 가능

[node.js/react] server와 client간의 port가 달라 연결이 안될 때

Server - Client 간 다른 포트를 가지고 있으면 아무런 설정 없이 Request 를 보낼 수 없음. -> Cors(cross-origin resource sharing) 이라는 정책때문인데! (보안) 이를 해결하려면 여러 방법이 있지만 서버와 클라이언트 둘다 만족시키면서 유연하게 할 수 있는 것이 바로 Proxy! https://create-react-app.dev/docs/proxying-api-requests-in-development Create React App · Set up a modern web app by running one command. > Note: this feature is available with `react-scripts@0.2.3` and higher. crea..