본문 바로가기

What Get's You Here, Won't Get You There

SW8

CSR, SSR, SSG Why? 이 글은 웹 어플리케이션에서 렌더링이 무엇인지, 그리고 왜 웹 개발자가 렌더링을 이해해야 하는지에 이어서 Client Side Rendering, Server Side Rendering, Static Site Generation과 같은 대표적인 웹 렌더링 전략이 각각 어떤 문제를 해결할 수 있는지 이해하는 것을 목적으로 합니다. 렌더링은 뭘까? 웹에서의 렌더링이란, 개발자가 작성한 코드를 웹 브라우저를 통해 사용자가 상호작용 할 수 있는 인터페이스로 표현하는 과정입니다. 이해를 돕자면, 건축 설계도면이 코드, 건축물이 렌더링 결과 레시피가 코드, 완성된 음식이 렌더링 결과입니다. 이처럼 건축 설계 도면, 레시피 그 자체가 최종 사용자에게 주는 가치가 거의 없는 것처럼, 개발자가 작성한 코드 그 .. 2023. 9. 27.

만들면서 배우는 React (Vanilla JS로 React 기능 구현) 개요 안녕하세요. 본 글에서는 가장 먼저 JavaScript와 JavaScript 기반 라이브러리 및 프레임워크의 등장 배경에 대해 소개하고 JavaScript 기반 라이브러리인 React의 핵심 기능을 Vanilla JS로 구현하며, 웹 프론트엔드 학습을 시작하는 분들이 앞으로 사용할 라이브러리 및 프레임워크를 더 잘 이해하고 사용할 수 있게 되는 것을 목적으로 합니다. 또한 본 글은 2022.09.27에 고려대 기반 블록체인 학회 '블록체인 밸리'의 프론트엔드 세션 강의자료로 활용되었습니다. 웹 프론트엔드 영역에서 JavaScript가 해결하는 문제 JavaScript가 개발되기 전, 초기 웹 브라우저에서는 오직 정적인 웹페이지만을 서비스할 수 있었습니다. 유저가 할 수 있는 일은 정적인 웹 페이지에.. 2022. 9. 27.

웹 접근성을 고려하며 HTML 요소 숨기기 접근성 '네이버 접근성'에서 인용한 정보 접근성의 정의는 다음과 같다. 정보 접근성은 모든 사용자가 특정 환경이나 신체적 장애에 상관없이 웹 사이트나 애플리케이션에서 제공하는 모든 정보에 동등하게 접근하고 이용할 수 있도록 보장해 주는 것입니다. - 네이버 접근성 HTML5에서 정의된 표준 HTML element를 적절히 활용하고, element attribute에 알맞은 aria 관련 속성을 삽입하면 웹 접근성을 상당부분 확보할 수 있지만, 그럼에도 불구하고 사용자에게 추가적인 정보제공이 필요한 경우가 있다. 또는 디자인을 변경하지 않으면서 접근성을 확보해야 하는 경우도 있을 것이다. 실제 예시 아래 코드는 '네이버 뉴스'의 메인 콘텐츠 영역의 코드이다. h3 element의 텍스트가 '콘텐츠'라고 기.. 2022. 7. 27.

Javascript 자료형 (원시 값) Javascript는 느슨한 타입(loosely typed) 동적 언어이다. C나 Java와 같은 프로그래밍 언어와 다르게, 변수가 특정 자료형과 연결되지 않으며, 한 변수에 여러 자료형의 값으로 할당 및 재할당이 가능하다. 자료형은 크게 윈시 값과 객체로 나뉘며, 이번 글에서는 Javascript로 프로그래밍할 때 가장 기본이 되는 자료형인 원시 값에 대해 알아본다. 원시 값(Primitive Value) 원시 값은 Javascript로 프로그래밍을 할 때 가장 기본이 되는 자료형으로, 한 번 할당된 값은 불변하다는 특징이 있으며, Boolean, Null, Undefined, Number, Bigint, String, Symbol 총 7개의 자료형이 있다. Boolean Boolean은 논리 요소를 .. 2022. 7. 16.

CSS 기본 선택자 아래 예시는 HTML p element의 글자색을 red로 설정하라는 CSS 문법이다. 이처럼 CSS에서는 선택자를 설정하고, 선언문을 통해 속성과 속성값을 선언함으로써 특정 HTML element에 스타일을 적용할 수 있다. p { color: red; } // 선택자 { 속성: 속성값; } 선택자를 설정하는 것은 곧, 많은 HTML element 중에서 어떤 element에 스타일을 적용할지 결정하는 것이다. 선택자는 한 HTML 문서의 전체 element를 선택하는 전체 선택자부터, 특정 ID를 속성값으로 가진 element만을 선택하는 ID 선택자까지, 스타일을 적용하고자 하는 조건에 따라 추상적으로 선택하는 방법과 구체적으로 선택하는 방법이 그 정도에 따라 다양하게 존재한다. 또, '버튼이 클릭.. 2022. 7. 6.

CSS Box Model과 box-sizing 문서의 레이아웃을 계산할 때 브라우저의 렌더링 엔진은 CSS Box Model에 따라 각각의 HTML element를 box 형태로 표현하며, CSS를 통해 각 element의 box 크기, 위치, 속성을 설정할 수 있다. CSS Box Model CSS Box Model은 크게 네 가지 영역으로 구분되고, 안쪽부터 Content Padding Border Margin 영역이 있다. Content 영역은 content edge가 감싼 영역으로 텍스트, 이미지 등 실제 content가 위치하는 영역이디. Padding 영역은 padding edge가 감싼 영역으로 border 영역과 content 영역 사이에 위치한 안쪽 여백이다. Border 영역은 border edge가 감싼 영역으로 box의 테두리다.. 2022. 7. 4.

README에 이미지 업로드하기(+Markdown 문법 참고 사이트) Github repository에 업로드 할 README 파일을 작성하다가 이미지를 삽입하고 싶은 니즈가 생겼다. 검색해보니 Markdown 문서에 url을 입력할 수 있다는 특징을 활용해 약간의 편법으로 Github README에 이미지를 추가할 수 있었다. Github README에 이미지를 추가하는 방법은 아래와 같다. 1. Repository의 'Issues' 탭을 연다. 2. New issue를 누르고, README에 삽입하고 싶은 이미지를 드래그 & 드롭 한다. 3. 아래 첫 번째 사진처럼 Uploading일 때 잠시 대기하고 4. 아래 링크처럼 변경되면, 그대로 복사해서 작성하고 있는 README 파일에 붙여넣는다. 위 절차대로 진행하면 아래와 같이 Github README에 이미지가 삽입된.. 2022. 6. 16.

파이썬 웹 스크래핑 - 학교 공지사항 알림봇 만들기 프로젝트를 시작한 이유 본 프로젝트는 사범대의 졸업 요구 조건인 '인적성 검사', '응급처치 교육'을 신청하기 위해 3년 동안 공지사항 페이지를 반복적으로 들락거리며 '공지사항' 페이지는 꼴도 보기 싫은 한 사범대생에 의해 시작되었다.. 또한 이 글은 한 프로젝트를 1차적으로 마무리하며 배웠던 점을 돌아보기 위함과 동시에, 혹시 나와 같은 고충과 불만을 겪고 있는 사람이 해결책을 찾는 데 조금이나마 도움이 되었으면 하는 바람으로 작성하게 되었다. 전술했듯, 필자는 사범대학에 소속되어 있다. 사범대생은 교원자격증을 취득하기 위해, 졸업 전 2회의 응급처치 교육과 2회의 인적성 검사를 수행해야 하는데, 이를 신청하는 과정은 보통 불편한 일이 아니다. 1년 약 8회의 교육이 있고, 교육 전 교직팀 웹사이트 '.. 2022. 1. 17.

이전 1 다음

티스토리툴바