웹개발 3

URL 링크 클립보드에 복사하기 기능 만드는 법 | 리액트 링크 복사하기

리액트에서 URL 링크를 클립보드에 복사하는 기능을 구현해 보았다. 현재 페이지의 웹사이트 주소를 복사하고 다른 앱이나 브라우저에서 붙여넣기할 수 있도록 만든 기능이다. 이 기능을 만드는 방법은 여러가지이다. 하지만 이 블로그에서 만드는 방법을 핵심만 요약하면, 아래와 같다. 1. 현재 페이지의 url 주소를 라는 html 태그에 담아둔다. 2. document.execCommand 기능으로 url 주소를 복사한다. 3. 복사하는 내용이 담긴 태그가 사용자에게 보이지 않도록 처리한다. 자세한 방법과 코드는 아래에 설명되어 있다. 1. 준비 과정: 어떤 버튼을 누르면 링크 복사하기 메뉴가 떠야하는지 파악한다. 이 스크린샷은 인스타그램 예시 사진이다. 1번이라고 쓰여져있는 상단 우측 버튼을 누르면, 화면 하..

개발 | 코딩 2021.02.26

모바일 반응형 HTML CSS 웹 브라우저 테스트, 개발자 도구, 단축키

1. 크롬, 사파리 개발자 툴 사용하기 크롬 개발자 툴 창 여는 단축키 맥: ⌘ + ⌥ + J , 커맨드 + 옵션 + J 키를 누른다. 윈도우: Ctrl + Shift + J , 컨트롤 + 쉬프트 + J 키를 누른다. 혹은 브라우저에서 마우스 오른쪽 클릭: 검사 요소 혹은 inspect 메뉴를 클릭한다. 단축키를 누르면 오른쪽에 사진과 같은 창이 뜹니다. 각 탭을 선택해서 원하는 정보를 찾으면 됩니다. 크롬의 다양한 단축키는 이 링크에서 확인할 수 있습니다. 사파리 브라우저 개발자 툴 창 여는 단축키 1. 맥: ⌘ + ⌥ + I , 커맨드 + 옵션 + I 키를 누른다. (사파리는 애플 환경에서만 설치되는 브라우저이므로 윈도우 단축키는 없다.) 2. 상단 메뉴 중에 Develop / 개발 버튼을 클릭해서 ..

개발 | 코딩 2021.01.23

프론트엔드 웹개발 | 면접 기본 (1) AJAX 기초 (유다시티 강의자료)

*Udacity 온라인 무료 강의를 듣고 번역 및 요약했습니다. 1. GET Request 란 무엇인가 클라이언트 (브라우저) -> 인터넷 (통신): 중간자 -> 서버 (데이터를 보관하는 곳) 클라이언트는 서버에게 '내가 누구인지'와 '내가 무엇을 원하는지' 정보가 담긴 GET request 요청을 보낸다. 인터넷이 이 요청을 서버에게 전달해준다. 서버는 클라이언트가 보내는 요청 메시지가 valid 유효하면, response 응답을 다시 보낸다. 2. 비동기와 동기의 차이점: Asynchronous, Synchronous 만약 브라우저가 이 get request 를 synchronous 하게 보낸다면, 서버로부터 응답을 받을 때까지 다른 작업을 수행하지 못하고 계속 기다려야 한다. 하지만 비동기로 요청한..

개발 | 코딩 2021.01.04