강의 듣다가 문득 유용한 방법들을 모아둬야겠다고 생각... (발견할 때마다 추가)
프론트엔드 웹 개발 입문자를 위한 잡다한 팁
1. 프론트엔드 개발 입문자를 위한 공부법 (프로젝트)
입문의 범위
- 서버와의 통신은 배제하고 자바스크립트의 기초 문법을 익힙니다.
- 그래서 자연어로 된 요구사항을 컴퓨터 언어로 표현하는 방법을 이해합니다.
- 기획과 디자인이 어떻게 코드를 만나 동적으로 변화하는지 이해합니다.
- 사용자의 동작을 어떤식으로 컴퓨터가 이해할 수 있는 값으로 변경하는지 이해합니다.
"백엔드와 함께 데이터를 다루고 데이터를 화면으로 보여주는 업무가 가장 주된 업무입니다. 그러니 앞으로는 데이터를 표기하고 사용자의 입력을 관리하고 UI를 관리하는 업무들을 배우시게 될 거에요. "
프론트엔드 개발의 고전 중의 고전 Todo List 입니다.
https://todomvc.com/
"정말로 잊지말아야 할 것은 이러한 커리큘럼이 단순히 요구사항만 구현해서 자바스크립트의 문법을 익히는데서 끝나야 되는게 아니라 서비스의 완성도를 얼마만큼 올리느냐가 진짜 중요합니다. 그러니 꼭 주위에 공개하거나 남에게 제공해주거나 팔아보려고 해보거나 홍보 해보시길 바랍니다. 계속 강조하지만
프론트엔드의 가치는 서비스의 가치로 결정되며 코드의 스킬이나 퀄리티로 결정되지 않습니다. 코드의 퀄리티나 좋은 설계 역시 서비스가 가치가 높아져 대형 서비스로 잘 만들 수 있기 위한 수단 일 뿐입니다."
출처 - teo의 프론트엔드 - 2021 웹 프론트엔드 공부법 - 입문자편 <커리큘럼>
(누가 쓴 내용이지? 했는데 오늘도 한 수 배우네..)
2. JS Bin
- JS Bin은 무료 온라인 HTML, CSS 및 Javascript 편집기
- 라이브 출력이 있으므로 수행중인 작업을 볼 수 있다.
JSBin을 활용한 Code Playground 서비스 구축하기 (깨진 링크가 많다)
“Linux + Apache + MySQL + PHP + WordPress” 원클릭 설치형 서비스 (간단한 서비스 구축)
실시간 코드 Playground 오픈소스 및 서비스 활용
- jsFiddle https://jsfiddle.net
- codepen https://codepen.io
- codesandbox https://codesandbox.io/
- SOLOLEARN https://code.sololearn.com
- Plunker https://plnkr.co
3. 크롬 개발자 도구 디자인 모드(Design mode)
구글 크롬에는 현재 웹페이지를 위지웍 에디터처럼 직접 수정할 수 있는 모드가 존재합니다.
모질라 파이어폭스와 마이크로소프트 신형 엣지도 동일한 기능을 지원합니다.
크롬 개발자 도구를 연후 "console" 탭을 선택해 콘솔 창을 엽니다.
콘솔창 커맨드 입력 난에 다음 커멘드를 입력합니다.
document.designMode = "on" 을 입력한 후 엔터()를 누릅니다.
"on" 표시가 나오면 디자인 모드가 활성화 된 것입니다.
출처 - https://blogpack.tistory.com/805
4. 프론트엔드 개발자를 위한 10가지 보안 관련 팁
웹 애플리케이션 보호를 위해 할 수 있는 10가지 쉬운 작업들
브라우징에서 저장하는 기능들은 요즘 웹어플리케이션을 만들때 매우 중요하다.
그리고 당연히 사용하는 유저들은 개인정보가 안전하게 저장되는 것을 원할 것이다.
그리고 이 데이터는 back-end에 저장되지만, 데이터 보안에 대한 책임은 client사이드에도 역시 책임이 있다.
악의적인 사용자들이 할 수 있는 UI 공격은 매우 많지만
이 블로그에서 기술한 권고를 잘 따른다면 방어 가능성을 크게 높여줄 수 있다.
5. 브라우저 개발자도구 콘솔창 활용
(~ing)
