프론트엔드 (9) 썸네일형 리스트형 웹 개발자가 알아두면 좋은 SPA, MPA 당신이 웹 퍼블리셔, 프론트엔드 개발자가 아니더라도 웹 개발 분야에 있다면 SPA (Single Page Application) 혹은 MPA (Multi Page Application)에 대해서 들어본 적이 있을 거다. 처음 들어본다고? 괜찮다. SPA, MPA가 무엇인지 소개할 예정이다. 들어가기 전에 앞서 선행학습으로, 지겨운 방법론 두 가지를 짚고 넘어가고자 한다. 2계층 구조 (2 Tier Architecture Structure) 과거 대부분의 웹사이트는 2계층 구조로 개발되어있다. 2계층 구조란, 화면이 보여지는 클라이언트(Client)와 데이터베이스(DB)가 물리적으로 분리되어 있는 것을 뜻하며, 클라이언트에는 UI (User Interface)와 비즈니스 로직Business Logic이 함.. 시맨틱 웹 (Semantic Web), 시맨틱 태그 (Semantic Tag) 대부분의 인터넷 사용자는 원하는 정보를 취득하기 위해 구글Google이나 네이버Naver 같은 검색사이트를 이용한다. “나는 검색된다. 고로 존재한다”는 말이 있을 정도로 웹사이트는 검색엔진에의 노출이 매우 중요하다. 당연한 것이 검색엔진에 노출되지 않는 웹사이트에는 접속하는 이도 없기 때문이다. 검색엔진은 이 시대의 가장 강력한 권력 중의 하나라고 말할 수도 있겠다. SEO(검색엔진 최적화: Search Engine Optimization)같은 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데, 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다. 검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의.. CSS 작성 시 유의사항 CSS를 작성하기 시작하면, 본격적으로 웹페이지를 만들기 시작하는 웹 퍼블리셔의 첫 걸음을 뗐다고 볼 수 있다. CSS에 대한 사용법과 노하우 등을 소개하기 전에 CSS 작성 시 지켜야할 가이드라인이 있는데 그 부분을 먼저 소개한다. HTML과 마찬가지로 룰을 정해두고 지키는 것이 좋으며, 내가 작성한 CSS를 남들이 봤을 때도 알아보기 쉽도록 작성하는게 가장 좋다. SMACSS, BEM, OOCSS처럼 CSS를 작성하는 방법론이 있는데 이 부분은 다음에 다뤄보도록 하겠다. 1. 문법 (Syntax) /* Bad CSS */ .selector, .selector-secondary, .selector[type=text] { padding:15px; margin:0px 0px 15px; background-.. 프론트엔드 개발, 뭐하는 직종이야? "프론트엔드(Front-End) 개발이란, 웹이나 앱을 사용하는 유저가 눈으로 보는 모든 화면의 요소들을 개발한다." 프론트엔드 개발의 사전적 수행 직무는, 백엔드(Back-End) API (Application Programming Interface)에서 가져온 데이터의 출력, 입력을 통한 비지니스 로직 구성과 유저가 사용하는 유저 인터페이스를 개발한다. 실무에서 경험한 수행 직무는, 백엔드 개발자가 건네주는 API 문서 혹은 API 정보를 공유 받아 서버에서 제공해주는 데이터를 가져와서 화면에 나타나게 해주는 것이 기본이며, 서비스를 사용하는 흐름에 따라 데이터를 가공하거나 선별하여 해당 단계에서 필요한 데이터만 유저가 볼 수 있도록 한다. 1. 프론트엔드 개발자가 되려면? 프론트엔드 개발자를 목표로.. HTML 작성 시 유의사항 HTML은 진입 장벽이 낮아 배우기 쉬운 언어다. 하지만 컨텐츠 구조 설계, 그리고 웹 표준과 웹 접근성을 고려하여 HTML 코드를 작성하면 결코 쉽지 않다. 입문자는 표준 규격을 지키는 코딩 방식을 길러야 한다. 최근 Angular, React, Vue를 필두로 프론트 프레임워크를 사용하는 것이 트렌드가 되고 있는데, 경험자는 웹 표준과 웹 접근성을 잘 지키면서 사용하고 있는지 돌아볼 필요가 있다. '변하지 않는 것에 주목하라'는 말이 있다. 처음부터 HTML 코드를 작성하든, 템플릿이나 프레임워크를 사용하여 HTML 코드를 작성하든 잊지말야아 할 것은 표준 규격을 지키는 것이다. 1. 문법 (Syntax) Hello, world! - doctype을 포함해 모든 태그는 대문자로 사용하지 않는다. - .. [번역] 2019년, 프론트엔드 개발자는 여전히 좋은 선택일까? IT 분야에서 진로를 고민하고 있는가? IT 분야는 진로를 선택할 수 있는 많은 방법들이 있다. 정말 흥미로운 것은 프로그래밍과 웹 개발 환경은 끊임없이 발전하고 있다는 것이다! 지난 몇 년 동안 프론트엔드 개발 커리어를 시작하려는 열풍은 엄청났다. 하지만 프론트엔드를 배울 것인지, 아니면 머신 러닝, 풀 스택 등 다른 IT 관련 직업을 배울 것인지 고민된다면, 이 글이 그 고민을 해결하는데 도움을 줄 것이다. 프론트엔드 개발로 경력을 시작한다면 IT 분야로 일하길 원하는 모든 사람들에게 일반적인 선택인 프론트엔드를 배워야 할 몇 가지 이유가 있다. HTML5와 CSS3를 배우는 것은 너무 당연하기 때문에 언급하지 않겠다. 이보다 더 멀리 있는 것을 고려해볼 필요가 있다. 프론트엔드 개발자는 JavaSc.. [웹 퍼블리셔 성장기 2편] 웹디자이너가 되기 위해 학원으로 웹 퍼블리셔에 대한 내용을 쓰겠다면서 갑자기 웹 디자이너라니? 나는 원래 디자이너가 되고 싶었다. 영상이나 포스터, 현수막 같은 것들을 만들 때 제법 재미를 느꼈고 완성되었을 때 그 뿌듯함과 사람들의 '잘 만들었다!'라는 칭찬이 나를 기분 좋게 했었기 때문이다. 하지만 디자인이라는 분야는 내게 생소했다. 그나마 내가 해볼 수 있겠다는 생각이 든 건 웹 디자이너였다. 그래서 'UX/UI 기반 웹디자인 실무'라는 교육 과정을 수료하기로 결정했고 곧바로 학원에 등록했다. 학원의 교육 과정은 4개월 동안의 일정으로 구성되어 있었는데, 처음 두 달 동안 일러스트와 포토샵을 다룰 수 있도록 툴의 기본기와 패키지 디자인, 웹 디자인에 대해 가르쳐주었고, 한 달 동안 HTML, CSS, 자바스크립트와 jQuery(제이.. CSS (Cascading Style Sheets) 란? 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 'CSS'이다.HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성 형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다. 이전 1 2 다음
