◼ FrontEnd/Web & HTML, CSS

[CSS] CSS-in-JS의 Styled-Components 사용법 및 문법 정리

CSS-in-JS란? 자바스크립트 파일 안에서 CSS를 작성할 수 있는 방법이다. 자바스크립트의 상태 값을 공유하여 동적으로 스타일링을 하기 위해 등장한 패러다임이다. 인라일 스타일 이용 or 클래스 명으로 조건부 스타일링 props.[props 속성 이름]} import styled from "styled-components"; const Father = styled.div` display: flex; `; const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; `; function App() { return ( ); } export default App; 이 문법을 활용하면 중복..

[Web] PWA(프로그래시브 웹 앱)이란 무엇일까?

이번 5월달에 SWYG(스위그)에서 진행하는 스위디(SWYDY) 스터디에 참여하여 PWA에 대해 처음 학습하게 되었습니다. 이번 포스트는 스위디 스터디 1주차 때 배웠던 내용을 바탕으로 작성하였습니다. PWA란 무엇인가? PWA란 Progressive Web Application의 줄임말로, 모바일에서 앱 스토어를 통해 설치하는 네이티브 앱처럼 사용할 수 있는 웹 어플리케이션을 말합니다. 쉽게 말하자면, 웹 어플리케이션을 Mobile App화(化)한 것이라 할 수 있겠습니다. 그렇지만 PWA는 일반 웹 앱처럼 기본적으로 HTML, CSS, JavaScript와 같은 웹 기술을 통해 만들어집니다. 2015년 Google Chrome의 엔지니어 알렉스 러셀(Alex Russel)은 '점진적(progressi..

[Web] CSR과 SSR이란 무엇일까?

SSR과 CSR이란? SSR과 CSR이란 개념은 웹의 UI를 생성하는 렌더링 과정이 어디에서 일어나는 지에 따라 그 차이가 있습니다. 이 두 개념을 잘 이해하기 위해선 웹 브라우저가 어떻게 동작하는지, 웹 사이트가 어떤 과정을 통해 우리 눈 앞에 나타나게 되는지를 미리 알고 있어야 합니다. 이에 대한 내용은 제가 예전에 작성해 둔 포스트를 아래 링크로 달아드리니, 부디 참고해주시기 바랍니다. 주소창에 naver.com을 치면 일어나는 일을 쉽게 이해해보자 (이 포스트는 velog 플랫폼에 포스팅했던 게시글을 그대로 가져온 것입니다. 감사하게도, 당시 이 게시글이 velog 월간 트렌딩 1위에 올랐습니다. 읽어주신 모든 분께 이 자릴 빌어 진심으로 감사의 sylagape1231.tistory.com 웹에서..

[NodeJS] Node JS & NPM 소개 및 설치

Node JS란? Node JS란 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(실행 환경)이다. 실행 환경 : 특정 프로그램을 실행하기 위해서 필요한 환경 JavaScript 실행 환경 : JavaScript를 실행할 수 있도록 해주는 환경 (JavaScript 엔진 + 파일 읽고 쓰는 기능 + 입출력 기능 등등) Node JS란 (V8 엔진으로 빌드된) 단순한 문자의 나열인 JavaScript 코드를 해석하고 실행할 수 있도록 제공된 환경이다. Node JS 탄생 배경 웹 브라우저는 대표적인 JavaScript의 실행환경이다. 애초에 JavaScript 언어는 브라우저에서 간단한 스크립트를 실행하기 위해 탄생한 언어이다. 그렇기 때문에, JavaScript는 브라우저..

CSS 레이아웃 - Position과 Block 정리

CSS 레이아웃의의 중요한 개념인 Position과 Block에 대해 정리해보고자 한다. 참고로 말로 풀어서 글처럼 작성하지 않고, 항목별로 개념을 분류하여 정리하였다. CSS - Display 속성 : Block과 Inline CSS의 display 속성은 화면에 여러 요소들을 어떻게 배치할 지 결정한다. 웹페이지의 레이아웃(layout)을 결정한다고 해도 무방하다. div { display: block; } ✨ Block VS Inline Block block 태그 옆엔 다른 요소가 올 수 없다. block은 높이(height)와 너비(width)를 가진다. block은 Box이고, 여백과 관련된 3가지 중요한 특징을 가진다.(inline도 가지고 있는 특징이다. 상하 margin만 제외하고) : m..

Semantic Tag (시멘틱 태그) 를 사용하여 웹 개발을 해야하는 이유

HTML 요소는 Semantic 요소와 Non Semantic 요소로 구분할 수 있다. 여거서 Semantic 요소란 의미가 부여된 요소를 의미한다. 웹 개발자가 웹 사이트를 구축할 때 각 요소가 가지는 '의미'를 HTML 태그에 직접 부여하여 코드를 작성하는 것이 중요하다. 하나의 예시를 통해 그 이유를 간단히 짚어보자. 웹페이지에 이미지를 불러오는 2가지 방법으로 ' 태그를 사용하는 방법'과 ' 태그에 background-image 속성을 추가하는 방법'이 있다. (다른 방법도 있겠지만 여기선 이 두 가지만을 고려하기로 한다.) 여기서 태그는 그 이름에 '이미지'라는 의미가 담겨 있는 Semantic Tag이다. 이런 Semantic Tag를 이용하여 코드를 작성하면 태그 이름만으로 이 요소가 어떤 ..

개발자 도구란 무엇인가?

개발자 도구 (DevTool) 란? 개발자 도구란 개발자들이 홈페이지를 수정하고 발생한 문제의 원인을 쉽게 파악하기 위해 브라우저에서 제공하는 도구이다. 윈도우나 맥에서 F12를 클릭하면 열 수 있으며, 웹 개발자들은 보통 개발자 도구를 열어놓고 작업을 하는 경우가 굉장히 많기 때문에, 웹 개발자가 개발자 도구의 사용법을 잘 아는 것은 중요하다. 개발자 도구에는 여러 개의 패널이 존재한다. 이 각 패널의 기능을 잘 숙지하여 적절한 상황에 알맞은 패널을 활용하도록 하자. 이번엔 가장 많이 쓰는 패널 4개의 기능에 대해 정리를 해보고자 한다. Elements 패널 HTML과 CSS 코드를 분석하고 실시간으로 이를 수정할 수 있는 패널이다. 사이트의 구조를 파악하는 데 용이하다. (CSS 코드를 확인할 수 있..

주소창에 naver.com을 치면 일어나는 일을 쉽게 이해해보자

(이 포스트는 velog 플랫폼에 포스팅했던 게시글을 그대로 가져온 것입니다. 감사하게도, 당시 이 게시글이 velog 월간 트렌딩 1위에 올랐습니다. 읽어주신 모든 분께 이 자릴 빌어 진심으로 감사의 말씀 올립니다.) 🖌 서론 스터디에서 발표를 준비하며, 기술 면접의 단골 질문인 웹 브라우저의 동작 원리에 대해 처음으로 공부하게 되었다. 그리고 이 주제가 왜 단골 질문으로 꼽히는지 이해할 수 있었다. 이 주제는 깊이 들어가기 시작하면 정말 끝없이 들어갈 수 있는 내용인 것 같아 보였다. 그렇기에 면접관이 면접자의 역량을 파악하는 데 이만한 질문이 없겠구나 싶은 생각이 들었다. 만일 CS 지식이 부족하다면, 이 주제를 처음 공부할 때 아마 내용이 많이 낯설고 어렵지 않을까 싶다. (사실 내 이야기다.) ..