Web Standard

HTML, CSS, JS 에 대한 강좌는 아닙니다.React의 대한 기본 개념을 알고 있는 상태에서 실제 서비스를 어떻게 구현하는지 알아보는 예제입니다. 모든 코드는 https://github.com/yunyong/react-tutorial-webtoon 에서 확인하실 수 있습니다.tutorial_01 ~ 06까지 브랜치로 나뉘어져 있으니, 각 강좌에 맞는 코드를 쉽게 찾으실 수 있습니다.CSS 관련 코딩은 포스트에서 제외되었습니다. Github 코드를 참고 해주시기 바랍니다. 우선, create-react-app으로 새로운 프로젝트를 생성합니다. $ create-react-app react-tutorial-webtoon 완료되었으면 $ cd react-tutorial-webtoon $ npm start..

Redux를 배우는 것은 쉽지 않다. 가파른 러닝 커브를 지닌 복잡한 툴이다. 하지만 이런 러닝커브를 극복하고 Redux를 사용했을때 과연 어떤 점이 편해지는 걸까? 단순히 React의 상태state를 관리해주는 도구일 뿐인걸까, 아니면 그 이상의 무언가가 있는걸까? Redux의 진짜 강점을 알아보자. Redux로 무엇을 할 수 있을까?(현재) React는 상태 관리(state management) 측면에서 부족하다. Redux는 그것을 보완해주기 위해 탄생한 도구이다. 우선, 상태 관리가 무엇을 의미하는지 짚고 넘어가자. 상태state가 무슨 의미인지 이해하기 어렵다면, 단순히 데이터data라고 생각하면 쉽다. 이 상태는 수시로 변경되며, 이 내용을 바탕으로 UI에 표현될 내용을 결정한다. 일반적으로 ..

이 글은 Don’t Use The Placeholder Attribute 를 번역, 핵심 내용만 짧게 요약한 글입니다.자세한 부가 내용을 알고 싶으신 분들은 원문을 읽어보시길 추천드립니다. 들어가면서 : placeholder 속성은 많은 이슈가 있다. 왜 이것을 사용하면 안되는지 알아보자. HTML5 사양의 일부로 도입된 placeholder 는 input에 아무 값이 없을때 입력을 돕기 위한 간단한 힌트(단어 또는 짧은 문장)를 나타낸다. 힌트는 예제이거나 간략한 설명이 될 수 있다. 겉으로 보기에는 직접적인 도움이 되지만, 많은 문제점을 야기할 수 있다. 다행히 필자는 이 속성을 그만 사용할 수 있다고 확신한다. 문제점들 1. 번역 크롬과 같은 자동 번역 기능이 있는 브라우저에서 번역 요청시 속성을 ..

참고 : Learning Javascript 자바스크립트에서는 일반적인 방법 외에도, 함수를 어디서 어떻게 호출했느냐와 관계없이 this가 무엇인지 지정할 수 있다. callcall 메서드는 모든 함수에서 사용할 수 있으며, this를 특정 값으로 지정할 수 있다. 함수를 호출하면서 call을 사용하고 this로 사용할 객체를 넘기면 해당 함수가 주어진 객체의 메서드인 것처럼 사용할 수 있다. call의 첫 번째 매개변수는 this로 사용할 값이고, 매개변수가 더 있으면 그 매개변수는 호출하는 함수로 전달된다. applyapply는 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같다. call은 일반적인 함수와 마찬가지로 매개변수를 직접 받지만, apply는 매개변수를 배열로 받는다. app..

원본 : https://makeawebsitehub.com/jquery-mega-cheat-sheet/ MakeaWebsiteHub.com 에서 jQuery cheat sheet을 공개했습니다. (번역)크리에이티브와 웹 개발자가 업무 또는 다른 곳에 시간을 더 투자할 수 있도록 jQuery 치트 시트를 만들었습니다. 동료 혹은 이 치트 시트가 유용하다고 생각하는 모든 사람들에게 자유롭게 공유하세요. 고해상도 PDF 다운로드

출처 : https://makeawebsitehub.com/css3-mega-cheat-sheet/ MakeaWebsiteHub.com 에서 CSS3 cheat sheet을 공개했습니다. (번역)CSS3의 주요 기능을 편리하게 인쇄가능한 카드로 표현했습니다.우리는 인쇄 가능한 CSS3 Cheat Sheet를 제공합니다. W3C에서 제공하는 CSS3의 모든 속성, 선택자, 사용할 수 있는 값의 목록입니다. 최대한 W3C 스펙의 섹션(모듈)과 밀접하게 연결시켜 각 속성들을 표현하기 위해 노력했습니다. 고해상도 PDF 다운로드 HTML5 Cheat Sheet MakeAWebsiteHub

출처 : https://makeawebsitehub.com/the-html-5-mega-cheat-sheet/ MakeaWebsiteHub.com 에서 html5 cheat sheet을 공개했습니다. - HTML5에서 새롭게 추가된 태그 - 지원이 중단된 오래된 태그 - HTML4 & 5 에서 지원되는 속성 - 각 브라우저 지원여부 - 이벤트 핸들러 - 캔버스Canvas 관련 자료 를 시각화 해서 한눈에 볼 수 있습니다. 프린트용(A4용지) PDF 다운로드도 제공하네요. HTML5 Cheat Sheet Cheat Sheet via Make a Website Hub

이 포스트는 A practical approach to web development. 를 한글로 번역한 글입니다. 웹 개발에 대한 실용적인 접근 방식 이 짧은 포인트 기사를 읽어보세요. 어떻게 웹개발에 접근할지 알려줍니다. 그러니까 당신은 이 분야에 대한 지식이 없는 초보자군요.문제 없습니다. 이 글은 어떻게 내가 웹개발을 시작할 수 있지? 라는 의문을 다 날려주니까요. 웹개발을 시작할때 도움될 수 있는 실전 단계와 쉽게 이해할 수 있는 언어로 작성되었습니다. 왜 썼냐고요?저도 웹 개발자인게 주된 이유이고, 이 개발자 커뮤니티에 발을 들여놓고 싶지만 멘토가 필요한, 모든 의욕넘치는 웹 개발자를 도울 용의가 있기 때문입니다. 저도 신입일때 많은 실수를 저질렀고, 제가 했던 실수를 다른 사람들이 하지 않길 ..

예제React js 로 예제를 만들어 보았습니다. 소스 코드는 제 깃헙의 https://github.com/yunyong/tui-editor-react-example 여기에서,데모 페이지는 여기 에서 확인하실 수 있습니다. NHN엔터에서 오픈소스로 공개한 에디터가 나왔네요. 이름은 TOAST UI Editor. 2018년 1월 15일 깃허브에 공개 되었습니다.마크다운(Markdown)과 위지윅(WYSIWYG) 기능을 포함한 형태라고 합니다. 엄청나네요.. 특히 엑셀 복붙이랑 그래프 표현은 정말 대단한 것 같습니다. 게시판 만들때 어떤 에디터를 쓰지.. 하는 고민을 덜어줄 것 같습니다. API 문서와 데모 예제 또한 정리가 잘 되어 있습니다. 깃헙을 포함한 모든 페이지가 영어로 되어있는걸 보니 세계시장을 ..

이 포스트는 Learn CSS Grid in 5 Minute 를 한글로 번역한 글입니다. CSS 그리드 5분만에 배우기 (Learn CSS Grid in 5 Minutes) 웹 레이아웃의 미래를 위한 퀵 튜토리얼 그리드 레이아웃은 웹사이트 디자인의 주요한 요소이고, CSS 그리드 모듈은 그것을 구현해줄 수 있는 가장 강력하고 쉬운 툴이다. 개인적으로, 부트스트랩같은 것들보다 훨씬 좋다. (그 이유는 여기) 또한 최근 이 모듈은 주요 브라우저(Safari, Chrome, Firefox, Edge)에서 기본적으로 지원하기때문에, 머지않아 모든 프론트엔드 개발자들은 이 기술을 배워야 한다고 생각한다. 이 글에서, 가능한 빠르게 CSS 그리드의 아주 기본적인 부분만 알아볼 것이다. 기초를 이해하는데 있어서 신경..