본문 바로가기

분류 전체보기

 (7)
CORS 에러 해결 방법 ES6+를 사용해서 javascript 과제를 하던 중 아래와 같은 에러가 콘솔 창에 떴습니다. ​ 흠.. 열심히 구글링해서 원인을 찾아보니 서버에 올리지 않은 로컬의 HTML 파일을 크롬을 통해 Ajax 테스트를 하는 경우 발생한다고 합니다. ​ ​ 해결 방법을 찾아보니 크롬 창 속성에 --disable-web-security --user-data-dir을 추가하면 된다는데, 웹 보안을 해제하는 옵션을 추가하는 거라.. 조금 찝찝하더라고요. ​ 그래서 옵션을 추가하는 방법이 아닌, 크롬 확장 앱을 사용해서 에러를 해결하는 방법을 소개해드릴까 합니다! 오늘 소개해드릴 확장 앱은 'Web Server'입니다. ​ ​ 1. 설치 경로​ 아래 경로로 들어가서 확장 앱을 다운로드합니다. Web Server fo..
hot-loader 설치 에러 해결 방법 인프런에서 리액트 관련 강의를 듣던 중 아래와 같은 에러가 콘솔 창에 떴습니다. 강의 하단에 있는 안내 문구를 확인해보니 링크를 참고하라고 하더라고요. 하지만.. 적용해도 에러가 나더라고요. 그래서 Unknown plugin "react-hot-loader/babel"을 해결할 수 있는 아주 쉬운 방법을 소개해드릴까 합니다! 1. react-hot-loader 설치 터미널에 npm install react-hot-loader 입력해줍니다. 2. babelrc 폴더 생성 root 폴더에 .babelrc 폴더 생성 후 아래 내용을 복붙해줍니다. { "presets": ["es2015", "react"], "plugins": ["react-hot-loader/babel"] } 3. Hot export 해줍니다..
[코뿔소] 13장. 웹 브라우저의 자바스크립트 * 자바스크립트 완벽 가이드 13장 내용을 발취하였습니다 13.3.4 클라이언트 측 자바스크립트 실행 순서 1. 웹 브라우저는 Document 객체를 생성하고 웹 페이지 분석을 시작하는데, HTML 요소와 그 안의 텍스트 내용을 분석해서 Element 객체와 Text 노드를 웹 페이지에 추가한다. 이 때, document.readyState 속성값은 "loading"이다 2. HTML 분석기가 async나 defer 속성이 없는 요소와 만나면, 문서에 추가하고 내장 스크립트건 외부 파일이건 구분 없이 실행한다. 이런 스크립트는 동기 모드로 실행된다. 그래서 스크립트를 다운로드(가능하다면) 하고 실행하는 동안 HTML 분석기는 멈춘다. 이런 스크립트에서는 입력 대기열에 텍스트를 넣기 위해 document...
[iOS&Safari]핸드폰 내 브라우저 검사하기 PC 환경과 Simulator 상에는 이슈가 없었지만, iOS 모바일에서만 요소가 깨지는 이슈가 있었습니다. 핸드폰 내에서만 이슈가 발생했기 때문에 모바일 환경에서 요소 검사를 진행해야 되었습니다. 저와 비슷하게 모바일 환경에서만 요소가 깨지는 분들을 위해 사파리를 사용해서 핸드폰 내 브라우저 요소 검사하는 방법을 공유드리고자 합니다 : ) 1. PC Safari 기본 설정하기 PC 상단에서 Safari → 환경설정을 클릭합니다. 고급 → '메뉴 막대에서 개발자용 메뉴 보기' 앞에 있는 체크박스를 클릭합니다. 개발자용 → [자신의 아이폰] 선택 → '개발자용으로 사용' 클릭합니다. 2. 모바일 환경 기본 설정하기 노트북과 핸드폰을 연결하고 알럿이 뜨면 '신뢰하기'를 클릭합니다. 3. PC로 모바일 브라우..
순차적 말줄임 1. 업무 중 독특한 말줄임을 요청받은 경험이 있어서, 어떻게 구현하였는지에 대한 경험담을 적어보고자 합니다. 1. 요청받은 말줄임 디자이너님으로부터 위 캡처 기준으로 아래와 같이 요청받았습니다. 디폴트: 파란색, 빨간색, 초록색 영역이 순서대로 노출되며, 파란색 영역은 말줄임 없이 노출입니다. case1(빨간색 영역이 길어질 경우): 빨간색 영역 말줄임 추가, 초록색 영역은 말줄임 없이 전체 노출 case 2(초록색 영역이 길어질 경우): 빨간색 영역 미노출, 초록색 영역 말줄임 추가 2. 말줄임 구현하기 가. 스펙 & 사용 가능 속성 확인하기 스펙: IE10+/ Android 5.0+ 스펙이 비교적 높았기 때문에 float: left와 display: flex 조합을 사용하기로 했습니다. 나. 파란색 영역..
translate3d(0,0,0)이란 뭘까? 이번에는 transform: translate3d(0, 0, 0) 속성에 대해 알아보고, 언제 사용하면 좋을지 살펴보고자 합니다. 1. transform: translate3d(0, 0, 0) 접하게 된 배경 CSS를 활용한 애니메이션 작업을 진행하던 도중, 아이폰 환경에서 스와이프로 인한 화면 전환이 이루어졌을 경우 툴팁 애니메이션에 일명 flickering 현상이 발생했습니다. Flickering 현상의 원인을 찾고 해결방안을 찾던 도중 다수의 stackoverflow 답변들이 transform: translate3d(0, 0, 0) 사용 권장을 했고, 적용하기 전 해당 속성에 대해 알아보기로 했습니다. 2. transform: translate3d(0, 0, 0) 이란? - transform: tr..
깃북 작성의 기본 '리소스를 어떻게 하면 보기 좋게 정리할 수 있을까?'라는 고민을 하던 중 깃북이라는 npm 라이브러리를 알게 되었습니다. 여기에서 말씀드릴 내용은 깃북을 설치하고 초기 셋팅까지 만들어보는 것 입니다. 1. Gitbook 설치하기 1. Gitbook cli를 글로벌로 설치합니다. npm install gitbook-cli -g gitbook --version 2. 깃북 저장소를 clone 합니다. git clone https://github.com/(여기에 주소 입력) 2. 로컬 환경에서 gitbook 웹 서버를 띄워 브라우저 확인 1. Gitbook 저장소로 이동 cd (gitbook 설치 폴더) 2. Gitbook 실행하기 gitbook serve 3. 배포하기 1. 불필요한 요소 삭제 gitbook..

티스토리툴바