본문 바로가기

Road to Web Developer

 (31)
웹 퍼블리셔로 입문하기 위해 도움이 되는 사이트 3선 1. W3Schools : https://www.w3schools.com/ 2015년 10월, [NCS 기반]디지털(UI/UX를 활용한 모바일 웹) 디자인 실무과정 이라는 교육 프로그램을 이수하면서 가장 처음 들었던 사이트다. 오래 전부터 존재했던 사이트고 웹 퍼블리싱을 하는 사람들이라면 모르는 사람이 없을 정도로 유명한 사이트다. 영어로 되어 있어 보기가 어렵다는 단점이 있지만 영어와 함께 공부를 할 수 있으니 일석이조다. 사이트 자체에 내장된 에디터로 예제를 실행할 수 있어 내 마음대로 코드 내용을 바꿔볼 수 있다. 2. PoiemaWeb : https://poiemaweb.com/ 웹 프로그래밍 튜토리얼 | PoiemaWeb Front-end Development Tutorial poiemaweb...
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-..
HTML 작성 시 유의사항 HTML은 진입 장벽이 낮아 배우기 쉬운 언어다. 하지만 컨텐츠 구조 설계, 그리고 웹 표준과 웹 접근성을 고려하여 HTML 코드를 작성하면 결코 쉽지 않다. 입문자는 표준 규격을 지키는 코딩 방식을 길러야 한다. 최근 Angular, React, Vue를 필두로 프론트 프레임워크를 사용하는 것이 트렌드가 되고 있는데, 경험자는 웹 표준과 웹 접근성을 잘 지키면서 사용하고 있는지 돌아볼 필요가 있다. '변하지 않는 것에 주목하라'는 말이 있다. 처음부터 HTML 코드를 작성하든, 템플릿이나 프레임워크를 사용하여 HTML 코드를 작성하든 잊지말야아 할 것은 표준 규격을 지키는 것이다. 1. 문법 (Syntax) Hello, world! - doctype을 포함해 모든 태그는 대문자로 사용하지 않는다. - ..
동기와 비동기의 개념 1. 동기 방식(Synchronous)요청이 들어온 순서에 맞게 하나씩 처리하는 방식이다. 순서에 맞춰 진행되는 장점이 있지만, 여러 가지 요청을 동시에 처리할 수 없다. 위 그림의 (a)처럼 커피 주문을 받고 나올 때까지 기다리는 것이 동기 방식의 예시라고 할 수 있다. 2. 비동기 방식 (Asynchronous)하나의 요청에 따른 응답을 즉시 처리하지 않아도, 그 대기 시간동안 또 다른 요청에 대해 처리 가능한 방식이다. 여러 개의 요청을 동시에 처리할 수 있는 장점이 있지만 동기 방식보다 속도가 떨어질 수도 있다. 위 그림의 (b)처럼 점원 한명이 커피 주문을 받고 다른 점원이 커피를 건네주는 것이 비동기 방식의 예시다. 동기와 비동기의 차이는 어떤 요청이나 혹은 그와 관련된 작업을 처리하고자 하는..
HTTP Status Code 1. HTTP Status Code (상태 코드) 클라이언트가 서버에 HTTP 요청을 보냈을 때 정상적으로 처리되었는지 아니면 에러가 발생했는지 알려주는 것이다. 클래스의 정의만 지킨다면 RFC2616에서 정의된 상태 코드를 변경하거나, 서버 독자의 상태 코드를 만들 수 있다. HTTP 상태 코드는 60종류 이상이 있지만, 그 중에서 대표적으로 사용되는 상태 코드를 살펴본다. 2. 응답 상태 코드 2.1 2xx: 성공(Success)2xx 응답은 클라이언트의 요청이 정상적으로 처리되었음을 나타낸다. ① 200 OK클라이언트가 보낸 요청을 서버가 정상 처리하였음을 나타낸다. 응답할 때 상태 코드와 함께 되돌아 오는 정보는 메소드에 따라 다르다. ② 204 No Content이 응답은 서버가 요청을 받아서 ..
URI / URL / URN 1. URI (Uniform Resource Identifier)통합 자원 식별자로, 네트워크에 있는 자원을 나타내는 유일한 주소이다. 네트워크에서 요구되는 기본 조건으로써 프로토콜에 항상 붙어 다닌다. 2. URL (Uniform Resource Locator)통합 자원 지시자로, 네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약이다. 리소스가 정확히 어디에 있고 어떻게 접근할 수 있는지 분명하게 알려준다. 3. URN (Uniform Resource Name) 통합 자원 이름으로 URN은 콘텐츠를 이루는 한 리소스에 대해, 그 리소스의 위치에 영향 받지 않는 유일무이한 이름 역할을 한다. 리소스의 이름을 변하지 않게 유지하는 한, 여러 종류의 프로토콜로 접근해도 문제없다.
SOLID 원칙 객체지향 디자인 원리들을 사용하면 좀 더 유지보수하기 쉽고, 유연하고, 확장이 쉬운 소프트웨어를 만들 수 있다. 이 원리들은 그 크기를 대비해 보면 패턴보다 훨씬 작지만, 표준화 작업에서부터 아키텍처 설계에 이르기까지 다양하게 적용되는 원칙이다. ① Single Responsibility Principle : 단일 책임의 원칙(SRP) 한 클래스에 하나의 책임만 가진다. 여기서 책임이란 '기능' 정도로 생각하면 된다. 설계를 잘한 프로그램은 기본적으로 새로운 요구사항과 프로그램 변경에 영향을 적게 받는다. 즉, 응집도는 높지만 결합도는 낮은 프로그램이다. 만약 한 클래스가 갖는 책임이 많아지면 클래스 내부의 함수끼리 결합도가 높아져서 유지보수가 어려워질 수 있다. 그래서 책임을 분산시킬 필요가 있다. ②..
OOP(Object-Oriented Programming)이란? 1. OOP?객체지향 프로그래밍(Object-Oriented Programming)의 줄임말로, 프로그램을 어떻게 설계해야 하는지에 대한 일종의 개념이자 방법론이다. 프로그램을 단순히 데이터와 처리 방법으로 나누는 것이 아니라 수많은 '객체'라는 기본 단위로 나누고 이 객체들의 상호작용으로 서술하는 방식이다. 2. OOP의 특성① 추상화(Abstraction)공통의 속성이나 기능을 묶어 이름을 붙이는 것으로, 사물들의 공통된 특징을 파악해 인식의 대상으로 삼는 행위를 말한다. 각 개체의 구체적인 개념보다 추상적인 개념에 의존해야 설계를 유연하게 변경할 수 있다. 강아지, 고양이의 공통된 특징은 '동물'이라는 집합으로 다룬다. '강아지나 고양이 고유의 울음소리(구체적인 개념)'이 아니라 '울음소리(추상적인..

티스토리툴바