◼ FrontEnd

[ReactJS] React로 요소에 클래스 추가 및 제거하기 (부제 : React에서 직접 DOM을 조작하지 않도록 하자)

🚨 문제 상황 인스타그램을 클론 코딩하는 과정에서 바닐라 JS로 DOM 요소에 접근한 후 클래스를 추가하고 제거하는 데 classList의 add, remove 메소드를 활용하였다. 그러나 이 코드를 React로 변환하는 과정에서도 classList를 그대로 사용하였더니 정상적으로 동작하지 않는 문제가 발생했다. 그래서 console.log()를 통해 React에서도 classList 함수가 제대로 동작하는 지 한 번 실험해보았는데, 클래스가 제대로 제거되고 추가됨을 확인할 수 있었다. 하지만 제대로 동작하는 코드와 달리 화면에 보이는 결과는 그렇지 않았다. (대상이 되는 클래스가 opacity: 0.6 스타일 속성이 부여된 클래스라, 결과를 화면에서 바로 확인할 수 있는 상황이었다.) // SyLogi..

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 지식이 부족하다면, 이 주제를 처음 공부할 때 아마 내용이 많이 낯설고 어렵지 않을까 싶다. (사실 내 이야기다.) ..