林's

요즘은, pc보다 모바일을 더 많이 사용하는 시대죠. 사진이나 동영상의 경우 스마트폰을 길게 누르면 나타나는 contextmenu 창을 통해 손 쉽게 이미지나 영상을 다운로드 할 수 있습니다. 저작권이 있는 이미지라면, 이는 상당히 골치아픈 문제가 될 수 있습니다. 사용자와 창작자 둘을 보호하기 위한 취지로 개발된 소스이나, 요즘 스마트폰은 해상도도 좋아서, 스크린샷을 찍어버리면 사실 답이 없습니다.. ㅎㅎ 그래도 개발해야한다면 어쩔 수 없겠죠.. 안드로이드와 PC, 그리고 IOS 계열의 경우 크로스 브라우징을 생각한 적용법을 알아봅시다. 1. 과거에는 어떻게 했을까? 단순히, contextmenu 이벤트를 캐치해서 기본동작을 막아버리는 방법을 사용했습니다. 1). PC/Android class Imag..

SPA가 대략 어떤 방법론인지 알고, SPA의 클라이언트 사이드랜더링이 무엇인지 먼저 알고 오셨으면 좋겠습니다! 서버사이드 렌더링 html을 서버에서 사용자에게 완성해서 보내준다. 홈 주제1 주제2 홈 안녕친구들~ 장점 응답이 오면, 바로 그릴 수 있다. 페이지마다 고유한 URL을 갖기 때문에 검색어 최적화 문제가 없다. 쉽게 말해서, 구글 검색봇이 내 사이트를 잘 읽어가서 검색 결과에 올려준다는 말! 단점 헤더나 푸터같이 동일하게 보여지는 부분을, 요청할 때마다 같이 받아오니 낭비가 발생한다. 잘 생각해보자, 우리가 jsp를 사용하던 시절, include 폴더에 헤더랑 푸터를 넣어두고 index.jsp 에서 붙여다 썼던 시절을!! AJAX 의 등장 Asynchronous JavaScript and XM..

자바스크립트 ES6 부터 추가된 const, let의 특징을 알아보고 var와의 차이점을 비교해본 글입니다. PDF를 다운로드 하여 보시는 걸 추천드립니다. ^^

프론트앤드 개발자라면 한 번쯤은 들어봤을 법한 기능인 emmet, emmet을 사용하면 귀찮게 태그를 일일이 입력할 필요가 없다. 예를들어 div 태그 밑에 ul을 만들고 ul 밑에 li를 3개 만들고 싶다면, div>ul>li*3 을 치고 tab 키를 눌러주면 다음과같이 짠 하고 만들어주는 게 emmet이다. vscode를 사용해서 react를 개발할 때, script 태그 안에서 돔 엘리먼트를 만들 때가 많은데, 이 때 emmet이 작동하지 않을 수 있다. 이를 해결하려면 settings.json 파일에서 emmet에 리액트 환경을 추가해주면 된다. 우선 settings.json 파일을 열려면, (단축키: Ctrl + ', 쉼표' ) File -> Preferences -> Settings -> Ex..

저와 같은 문제로 긴 시간을 허비하시질 않길 바라며 글을 씁니다. ㅎ 프론트앤드 개발을 하다보면, 코드의 품질향상을 위해 팀원끼리 코드 스타일을 통합시켜주는 Linter 를 자주 사용합니다. 이 때 주로 사용하는 툴이 ESLint 이고 ES는 ECMA Script(자바스크립트)의 약자이며, Lint는 지푸라기라는 뜻인데. 코드에 이상이 있을 경우 지푸라기처럼 표시를 해준다고 하여 붙여진 이름이라고 합니다. 그래서 팀원간에 세미콜론 규칙을 정해야하는데. ESLint를 사용할 경우 rules 속성 안에 semi : ["never", "error"] 로 세미콜론을 붙이지 않고, 이 규칙을 어겼을 시, 에러를 출력하도록 명시할 수 있습니다. 그런데 이 규칙을 붙였음에도 불구하고 VSCode 같은 IDE에서 저장..