본문 바로가기

전체 글

(127)

innerHTML ? innerText ? 삐--- textContent를 지향하자 코딩을 하면서 더 좋은 코딩을 하고 싶은 것에 대한 욕심이 생긴다.. 이 글도 그 과정 중 하나... 바로 본론으로 가보자ㅏㅏㅏ 우선, 한눈에 보기 편하게 textContent, innerText, innerHTML 을 비교 해보자! 프로퍼티 innerHTML innerText textContent 값 HTML parsed text rendered Text raw text 성능 나쁨 보통 좋음 보안 - - 취약 innerHTML innerHTML 프로퍼티의 값은 text/html으로 파싱한 결과. 그래서 상대적으로 파싱이 느리다. (사실 큰 차이는 아님) 하지만 더 큰 문제는, innerHTML가 대표적인 XSS(Cross-Site Scripting) 공격에 취약한 사례로 언급된다는 점!! HTML5에서..

스와이프에 모션 있는거 예시 (수민님 코드) 보호되어 있는 글입니다.

파라미터를 사용 해보자 fV, sV로 파라미터를 빼주고 sumF함수에 값을 입력해서 함수 실행! 이게 꼬이면 어려우니까 더 연습해 .. 함수는 함수의 인자로 전달 가능 function cal(func, num) { return func(num); } function increase(num) { return num+1; } function decrease(num) { return num-1; } console.log(cal(increase, 5)); 함수는 함수의 리턴값으로 리턴이 가능 function cal(myT) { var funcs = { 'plus' : function(left, right) { return left + right; }, 'minus' : function(left, right) { return left ..

좌우로 흔드는 모션 기준점 변경 좌우로 살짝 흔들면서 보여줄 때 기준점 변경! transform-origin: bottom center;

이것만 알아도 React 기본 마스터 !! //App.js import React from 'react'; 는 리액트를 불러온다. 어디서? 리액트 프로젝트를 만들 때 node_modules 디렉토리도 함께 생성이 되는데 그 안에 react 모듈이 설치 돼! 그래서 그 react를 불러오는거지!! 근데 원래 모듈을 불러와서 사용하는 건 사실 브라우저에서는 없던 기능! 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 Node.js에서 지원하는 기능!! 이러한 기능을 브라우저에서도 사용하려고 번들러 ( ex: 웹펙, Parcel, browserify ... )를 사용함 함수에서 undefined를 렌더링 하면 오류 나온다! // 이렇게 하면 오류나온다! function App() { const name = undefined; return..

브라우저가 지원하지 않아서 ES6를 안쓴다? 핑계 노노해! 바벨(BABEL) ES6는 이제 충분히 써도 될만한 시기라고 생각한다. "나는 front developer가 아니기도 하고 브라우저가 모두 지원하지도 않기에 ES6는 아직 못쓴다" 라고 생각하고 있다면 이 글을 통해 생각을 바꿀 수 있길 바란다. 어차피 쓰는 거 ES6뿐 아니라 ES8까지 사용하는 것을 권장한다. IE11 이하 버전들은 ES6나 이후에 대한 고려가 거의 없지만 엣지(MS Edge)를 포함한 모든 모던 브라우저들은 네이티브로 ES8(ECMAScript2017)의 대부분의 스펙을 지원한다.(실용적인 사용에 있어서는 100%라고 봐도 된다) 모던 브라우저들은 이렇게 열심히 스펙을 따라가 주고 있다. 프로젝트의 지원 대상 브라우저가 IE11 이하 버전을 포함하고 있다면 그때는 우리의 무기 바벨을 사용할 때이다. ..

Github 사용하기, remote, clone, push, pull 안녕하세요. 이번 시간에는 지난 번의 commit을 바탕으로 Github를 사용해보겠습니다! 우선 깃허브를 사용하려면 회원가입부터 해야합니다. 링크 Sign up이 회원가입이고, Sign in이 로그인입니다. 무료 계정을 만드시면 됩니다. 깃허브 저장소는 전부 공개입니다. 남들이 여러분의 코드를 볼 수 있다는 뜻이죠. 만약 남들이 보는 것이 싫다면 돈을 내고 개인 저장소를 구매할 수 있습니다. 회원가입하시고 로그인하면 다음과 같은 화면이 뜹니다. 깃허브 저장소를 생성할 건데요. +버튼을 누르고 New repository를 누르거나 메인 화면에 있는 Start a project를 누르면 됩니다. 여기에 Repository name만 적어주고, Create repository 버튼을 눌러 생성합니다. Des..

Git 저장소 생성(init), 최초로 commit하기 안녕하세요. 이번 시간에는 진행중인 프로젝트에 git 저장소를 생성하고, 최초로 commit을 해보겠습니다. 깃 명령어를 사용하는 방법은 여러가지가 있지만 저는 주로 명령프롬프트(CMD)를 사용합니다. 따로 설치할 필요가 없으니까요. 아니면 통합 개발 환경(IDE)에 내장되어 있는 터미널을 사용하거나, Git을 설치할 때 딸려오는 Git Bash나 Git GUI를 사용하는 것도 괜찮습니다. 하지만 무엇을 사용하든 명령어는 같으니 너무 걱정하지 마세요. 이제 프로젝트를 하나 만들어보겠습니다. 아무 곳에나(쉽게 하려면 C:\) gitExample 폴더를 만들고, gitExample 폴더에 git.html과 git.css를 만듭니다. 내용은 다음과 같이 하겠습니다. git.html 깃 연습 깃의 사용 방법에 ..

목록 더보기

티스토리툴바