블로그 이사🏡 했습니다. 👉🏻 둘러보기
본문 바로가기
  • What Get's You Here, Won't Get You There

전체 글90

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.
프로그래머스 피로도 자바스크립트 문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/87946 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이를 위해 생각한 것 각 던전을 원소로 순열을 만든 뒤, 순열을 탐색하는 방법으로 답을 도출할 수 있다. 본 문제에서는 던전 입장 순서가 중요하다. 즉 첫 번째 던전을 먼저 방문할 것인지, n번째 던전을 먼저 방문할 것인지에 따라 다른 결과가 도출된다. 한 번 던전에 입장하면 피로도가 차감되기 때문이다. 이는 순열의 특성과 일치한다. n개의 던전으로 도출할 수 있는 순열을 만든다.. 2022. 7. 21.

티스토리툴바