퍼블리셔, 프론트엔드개발을 시작하다
•Descargar como PPTX, PDF•
42 recomendaciones•12,943 vistas
2016 년 하드코딩하느사람들 세미나 발표자료 입니다.
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Similar a 퍼블리셔, 프론트엔드개발을 시작하다
Similar a 퍼블리셔, 프론트엔드개발을 시작하다 (20)
Más de 정석 양
퍼블리셔, 프론트엔드개발을 시작하다
- 2. 프론트엔드개발이란 단어가 너무 길어 발표자료를 짜임새 있게 만들기 어려워서 이하 프론트개발로 줄이겠습니다.
- 3. 발표를 준비한 이유
- 4. 2016년 하코사의 많은 신규 회원은...
- 6. HTML, CSS, JavaScript를 사용하면 프론트개발자가 아닌가요?
- 7. 내가 퍼블리셔인지 프론트개발자인지 아직도 헷갈려... 사실 같은거 아닌가!?
- 8. 3년의 고민 끝에 내린 결론 퍼블리셔 ≠ 프론트엔드개발자
- 9. 그냥 두 개의 직업을 가지면 안 되는 건가요? 아리스토텔레스의 직업 1. 철학자 2. 수학자 3. 천문학자 4. 신학자 5. 생물학자 6. 기상분석가 7. ...
- 10. 발표자 소개 - 빼로 퍼블리셔 프론트엔드개발자 강사 작가 고민 말고 여러 직업을 갖는 걸로~!
- 11. 과연 무엇이 다른걸까?
- 13. 내가 생각했던 프론트개발 (~2013) HTML, CSS, JavaScript를 이용한 Markup + CSS Styling + Light한 UI개발 ∥ 전통적인 퍼블리싱과 일치 (그냥 같은 의미라고 생각했음)
- 14. 3년 전 어느 날 있었던 일 나는 백앤드만 할 줄 알고 프론트개발을 잘 못해 자네가 해줬으면 좋겠어 그럼요~ 그건 퍼블리셔인 제가 할 일 인걸요
- 15. 3년 전 어느 날 있었던 일 왜 아직도 데이터가 안 붙은거야! 네가 프론트개발을 한다며! 그걸 제가 어찌 압니끄아아아 저는 UI개발만 하면 되는 줄 알았즈어어어
- 16. 생각이 바뀐 후의 프론트개발 (~2015) 퍼블리싱 HTML마크업 CSS스타일링 UI개발 JavaScript를 이용한 이벤트 핸들링 데이터바인딩 JavaScript를 이용한 템플릿 작업 퍼블리싱은 프론트개발의 일부이며 프론트개발이 가장 넓은 범주의 단어라고 생각
- 17. 그 후로 2년간... 이야~ 이거 백엔드랑 프론트가 나뉘니까 굉장히 효율적인걸~! 제 결과물이 마음에 드시나요?
- 18. 그런데 기분이 이상하네... 이렇게 작업하니 좋은 건 알겠는데 사람을 채용하려니 막상 전부 다 하는 사람은 아예 없네...
- 19. 개발자 면접제가 백엔드도 하고 프론트개발도 합니다. 둘 다 잘 해요.
- 20. 채용된 후... 프론트개발 할 줄 안다며!? 왜 퍼블리싱을 못 하는거야? 제가 말한 프론트개발은 그 프론트개발이 아닌데... 하아... 엄마보고 싶다...
- 21. 그 후 알게된 것은 이 단어를 사용하는 주체는 퍼블리셔가 아니라는 것이었다.
- 22. 개발자에게 프론트개발이란? 직접 만들기 보다는 누군가가 잘 만들어 놓은 것을 가져가 그대로 사용하는 것 ex) bootstrap이 인기 있는 이유 웹에서는 퍼블리싱이 이와 같음 즉 화면을 조합하듯이 배치한 후 이벤트핸들링을 통하여 데이터를 입/출력한다.
- 23. 개발자에게 프론트개발이란? 가장 중요한 것은 데이터기반사고를 한다는 것
- 24. 현재 생각하는 프론트개발(2016~) 퍼블리싱 HTML마크업 CSS스타일링 UI개발 슬라이더 등의 비데이터 UI개발 데이터바인딩 템플릿 작업 이 둘은 사용하는 언어만 비슷할 뿐 전혀 다른 직업이며 지향하는 가치도 다르다 UI개발 데이터 입력을 위한 이벤트 핸들링 퍼블리셔 프론트개발자
- 26. 전통적인 웹개발(Ajax이전) 페이지내 태그에 직접 데이터바인딩 하는 형식으로 작업 <h1><%=headerTitle%></h1> ※특징 1. 한 번 로딩하면 새로고침 하지 않는 이상 다시 불러올 수 없음 2. 데이터를 알 수 없기 때문에 백엔드 개발자가 작업해야 함
- 27. 현대의 웹 개발 ※특징 1. Ajax를 이용해 몇 번이고 데이터를 가져올 수 있음 2. 갱신된 데이터를 적용하기 위해 화면을 변경해야 함 3. JavaScript를 이용해서 화면을 변경함 4. 백엔드와 프론트개발의 완벽한 분업이 가능해짐 ※ 일반적인 회사의 프로세스 1. 그냥 JavaScript라는 언어로 프론트 개발을 하면 되는구나... 2. 한 페이지에서 이 화면 저 화면을 띄우다 보니 코드가 복잡해짐 3. 일이 많아져서 급하게 JavaScript 프론트개발자를 채용하려고 함 (중요! ☆☆☆ JavaScript 고수를 찾는게 아님, 업무를 분담할 사람을 찾음)
- 28. 명심해야 할 것! 1. 프론트개발은 JavaScript 고수만 할 수 있는 것이 아니다. JavaScript 고수도 있는 것 뿐이다. 2. 경험에 의한 설계가 중요하다. 무조건 많이 다양하게 해보자. 삽질이 피와 살이 된다. 3. 생각보다 사용하는 문법이 많지 않다. 겁먹지 말자!
- 29. 그럼 도대체 우리가 공부해야하는 프론트개발이란 무엇일까?
- 30. 프론트엔드개발의 요소와 중요도 템플릿(제일 중요 킹왕짱 중요 ☆ ☆ ☆ ☆ ☆ 이것 때문에 프론트개발자 채용함) 데이터바인딩 (이건 백엔드가 해도 되고 그게 더 나은 경우도 있음...) Ajax (이것도 백엔드 설정 따라야 해서 혼자서는 못함, 한 번 정하면 잘 안 바뀜)
- 31. 오늘의 주제, 템플릿 (몇 개는 남겨둬야 다음에 또 발표할 게 있으니까... ☞☜)
- 32. 템플릿 스킬의 중요성
- 33. 전통적인 템플릿의 한계 PHP/ASP/JSP 등으로 다음과 같이 개발 (줄이 모자라 type=text 생략) <% if 데이터가 있다면 for 루프를 돈다 %> <li><input name=“name-<%=i%>” value=“<%=value%>”></li> <% else if 데이터가 없다면 %> <li><input name=“name-0” value=“”></li> <% end if %> 추가 버튼을 클릭했을 때 추가될 JavaScript를 작성 var tag, length; length = $(‘ul>li’).size(); tag = ‘<li><input name=“name-’+length+’” value=“”></li>’; $(‘ul’).append(‘tag’);
- 34. 전통적인 템플릿의 한계 1. 간단한 UI라도 폼이 존재한다면 3벌을 만듦 2. 형태에 따라 2벌로 작성하는 경우도 많음 3. 코드가 기하급수적으로 늘어 유지보수 어려움
- 35. JavaScript 템플릿을 사용한다면? function load(data) { var tag, length; data = data || ‘’; length = $(‘ul>li’).size(); tag = ‘<li><input name=“name-’+length+’” value=“’+data+’”></li>’; $(‘ul’).append(‘tag’); } 데이터가 있을 경우 load(data); 데이터가 없을 경우 load(); 추가할 경우 load();
- 36. 대량의 태그를 추가하는 법 String 변수 사용법 Array 변수 사용법
- 37. 대량의 태그를 추가하는 법 jQuery Templete Github: https://github.com/BorisMoore/jquery-tmpl
- 38. 대량의 태그를 추가하는 법 URL : https://angularjs.org
- 39. 템플릿 공부 순서 1. 아무 것도 없는 화면에서 body 내의 태그 전체를 JavaScript로 호출한다. 2. 현재 있는 화면을 Ajax를 호출하여 새로운 데이터로 화면을 다시 그린다. 3. 특정 이벤트 발생시 그 화면을 지우고 완전히 다른 화면을 그린다. 4. 두 화면은 일부 같은 화면을 공유한다. 해당 템플릿을 함수로 분리한다. 5. 공유하는 화면은 데이터가 있을 때도 있고 없을 때도 있다. 템플릿 설계 기본
- 40. 템플릿 공부 순서 1. 아무 것도 없는 화면에서 body 내의 태그 전체를 JavaScript로 호출한다. 2. 현재 있는 화면을 Ajax를 호출하여 새로운 데이터로 화면을 다시 그린다. 템플릿 설계 기본 1. 화면 그림 (DB에서 1번 데이터를 가져옴) 2. DB에서 2번 데이터를 호출해서 새 화면을 그림 (새로고침 하면 안됨)
- 41. 템플릿 공부 순서 3. 특정 이벤트 발생시 그 화면을 지우고 완전히 다른 화면을 그린다. 템플릿 설계 기본 1이나 2로 그린 화면 3. 1,2와 관계없는 전혀 다른 화면이 나옴 (다시 1이나 2로 복귀가 능 해야 함)
- 42. 템플릿 공부 순서 4. 두 화면은 일부 같은 화면을 공유한다. 해당 템플릿을 함수로 분리한다. 5. 공유하는 화면은 데이터가 있을 때도 있고 없을 때도 있다. 템플릿 설계 기본 데이터 있음 데이터 없음
- 43. 템플릿 공부 순서 1. 현재 화면을 그린 데이터 보관하는 프론트DB를 만들어 현재 화면이 모두 지워지더라도 프론트DB의 데이터만으로 완벽하게 다시 그릴 수 있게 한다. 2. 이벤트가 발생하는 순간 필요한 모든 데이터를 수집하는 것이 아니라 데이터 변환 이벤트 발생시 항상 프론트DB가 업데이트 되어 프론트 DB는 가장 마지막에 업데이트된 최신 정보가 항상 존재해야 한다. 3. 이렇게 관리될 경우 화면을 다시 그릴 때 데이터를 수집할 필요가 없으며, DOM 손상에 따른 데이터 유실도 걱정할 필요가 없다. 템플릿 설계 심화 – 데이터 기반 사고
- 44. 템플릿 공부 순서 1. 현재 화면을 그린 데이터 보관하는 프론트DB를 만들어 현재 화면이 모두 지워지더라도 프론트DB의 데이터만으로 완벽하게 다시 그릴 수 있게 한다. 템플릿 설계 심화 – 데이터 기반 사고 var frontDB = { sn1 : 10431, sn2 : 532, searchKeyword : ‘하코사’ }; DOM이 사라졌다고 데이터까지 손실되면 안됨! 해당 데이터로 다시 호출 load(frontDB);
- 45. 템플릿 공부 순서 2. 이벤트가 발생하는 순간 필요한 모든 데이터를 수집하는 것이 아니라 데이터 변환 이벤트 발생시 항상 프론트DB가 업데이트 되어 프론트 DB는 가장 마지막에 업데이트된 최신 정보가 항상 존재해야 한다. 템플릿 설계 심화 – 데이터 기반 사고 FrontDB
- 46. 템플릿 공부 순서 3. 이렇게 관리될 경우 화면을 다시 그릴 때 데이터를 수집할 필요가 없으며, DOM 손상에 따른 데이터 유실도 걱정할 필요가 없다. 템플릿 설계 심화 – 데이터 기반 사고 var data; data = { title : 데이터수집, city : 데이터수집, hobby : 데이터수집, OOOO : 데이터수집, ....... }; load(data); 이벤트 발생시 데이터 수집 프론트DB관리시 load(frontDB); 항상 최신 데이터가 있음
- 48. 그럼 퍼블리셔는 어쩌죠?
- 49. 모든 혼란은 JavaScript 때문
- 50. 같은 언어를 사용한다고 같은 직업이라고 볼 순 없다
- 51. JavaScript를 사용하는 직업 퍼블리셔 : UI 개발 프론트/백앤드 개발자 : 데이터 바인딩, Node.js 스크립터(전직 플래셔) : 인터랙티브 개발(Canvas)
- 52. 퍼블리셔와 프론트개발자가 추구하는 직업적 가치는 같을 수 없다
- 53. 퍼블리셔가 하는 일의 본질은 무엇일까?
- 54. 컨텐츠
- 55. 글, 이미지, 비디오, 오디오, 인터랙티브, 모션 등의 컨텐츠
- 56. 컨텐츠를 언제, 어디서, 누구나 즐기도록 웹 표준 마크업, 웹 접근성 준수, UI 개발, 이미지 최적화 등등...
- 57. 이런 상황은 어떨까요? 이 비디오 파일을 mp4, ogg, webm으로 인코딩하세요.
- 58. 퍼블리셔는 브라우저 플랫폼 기반의 컨텐츠 전문가가 되어야 한다
- 59. 퍼블리셔가 프론트개발을 함께 한다면 정말 멋진 결과물이 나올 것이라고 확신합니다. (물론 그게 쉽진 않아요...☞☜)
- 60. 감사합니다.