블로그 이사🏡 했습니다. 👉🏻 둘러보기
본문 바로가기
  • 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.
프로그래머스 소수 찾기 자바스크립트 문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/42839 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이를 위해 생각한 것 순서가 상관 있으며, 숫자 문자열의 각 원소로 만들 수 있는 모든 수를 구한다. -> 순열 구한 순열을 모두 배열에 추가한 뒤, Set 자료구조로 중복을 제거한다. 중복을 제거하고 남은 모든 수에 대해 소수 판별 알고리즘을 적용한다. 사용한 자료구조 / 알고리즘 집합 자료구조 / 소수 판별 / 순열 / 재귀 풀이 코드 const getPermutations .. 2022. 7. 18.
프로그래머스 모의고사 자바스크립트 문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/42840 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이를 위해 생각한 것 수포자1, 2, 3의 패턴을 미리 저장하고, 수포자 i의 답 배열의 길이가 answers의 길이보다 작은 동안, 수포자 i의 답 배열에 각 수포자 i에 대한 pattern원소를 추가한다. 정답 배열의 길이 동안 정답 배열의 인덱스와 동일한 인덱스의 수포자 i 답 배열 원소가 서로 같은지 비교한다. 같으면 cnt++ 수포자 i의 정답 수와 현재 최대 정답수를 .. 2022. 7. 18.
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.

티스토리툴바