티스토리

◆ Slow, But Steady ◆

검색하기

블로그 홈

◆ Slow, But Steady ◆

sylagape1231.tistory.com/m

Slow, But Steady Wins The Race 😎

구독자: 2

방명록 방문하기

주요 글 목록

[TypeScript] 에러 해결 모음 (간단한 에러들) 1. 블록 범위 변수를 다시 선언할 수 없습니다타입스크립트 실습 도중 TS 파일을 JS로 변환했더니 블록 범위 변수 'a'을(를) 다시 선언할 수 없습니다라는 문구와 함께 오류가 발생하였습니다. 분명 변수를 다시 선언한 적이 없는데 왜 이런 오류가 나는지 검색해보니 원인은 다음과 같았습니다. 자바스크립트에선 JS 파일 각각이 하나의 모듈로 인식되므로, 서로 다른 JS 파일에 동일한 이름의 변수를 선언할 수 있습니다. 그러나 타입스크입트는 모든 TS 파일을 하나의 모듈로 보기 때문에 비록 다른 파일이라 하더라도 동일한 변수의 이름을 선언할 수 없다고 합니다. 이를 해결하는 방법은 파일 끝에 export {};코드를 추가하여 해당 파일을 독립된 모듈로 인식하도록 하거나, tsconfig.json 파일에"m.. 공감수 0 댓글수 0 2024. 9. 19.
[JavaScript] 자바스크립트는 일급 함수를 지원하는 언어이다 MDN Web Docs에서 자바스크립트 언어에 대한 소개를 보면 첫 문장은 다음과 같다.JavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다.우선 인터프리터, just-in-time 컴파일 언어는 나중에 살펴보기로 하고, 이번 포스트에서는 이 '일급 함수'라는 개념에 집중하고자 한다. 자바스크립트는 일급 함수를 지원하는 언어인데, 이게 무슨 말일까? 일급 함수란 무엇을 뜻하는 용어일까? 일급 함수란?먼저, MDN Web Docs에서 일급 함수에 대한 설명을 참고하면 다음과 같다.프로그래밍 언어는 해당 언어의 함수들이 다른 변수처럼 다루어질 때 일급 함수를 가진다고 합니다. 예를 들어, 일급 함수를 가진 언어에서 함수는 다른 함수들.. 공감수 3 댓글수 0 2024. 9. 3.
[JavaScript] forEach문에서 return이나 break를 쓰면 안된다 중간고사가 끝나고 여유가 생겨 오랜만에 코딩테스트 연습을 위해 프로그래머스에서 '올바른 괄호'라는 문제를 풀고 있었는데, 작성한 코드의 로직이 틀린 곳이 없음에도 특정 케이스가 계속 통과하지 않는 문제가 발생했습니다. 그래서 테스트케이스를 직접 작성해보고 코드도 디버깅해보며 오랜시간 전전긍긍하다 결국 문제점을 발견하고 해결했습니다. 이 문제점은 그동안 제가 전혀 몰랐던 내용이었기에, 이렇게 기록으로 남겨둡니다. 결론부터 말하면 자바스크립트의 배열을 순회하는 forEach문에서는 return문이나 break문을 작성해도 코드가 반복을 중단하지 않습니다. 그리고 forEach문 안에서 return문을 만나도 forEach문을 감싸고 있는 함수를 벗어나지 않습니다. 예시코드를 살펴보면 다음과 같습니다. fun.. 공감수 6 댓글수 3 2023. 10. 27.
[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; 이 문법을 활용하면 중복.. 공감수 2 댓글수 0 2023. 9. 16.
[React] 카카오맵 API를 통해 지도를 화면에 띄우기 (에러 해결법) 멋쟁이 사자처럼에서 진행하는 중앙 해커톤을 준비하면서 카카오맵 API를 통해 지도를 화면에 그리는 기능을 구현하게 되었습니다. 카카오에서 제공한 공식문서가 워낙 깔끔하게 잘 정리되어있어 빠르게 지도를 화면에 구현할 수 있었지만, 도중 몇몇 문제를 마주하여 고민했던 부분 역시 있었는데, 이 포스트에선 이러한 문제를 어떻게 해결했는지를 정리하여 비슷한 어려움을 겪고 있는 다른 개발자 분들에게 도움을 드리고자 합니다. (참고로 저는 Web API를 사용하여 구현했습니다.) 로컬 환경에서 테스트할 수 있도록 사이트 도매인 등록하기 로컬 환경에서 카카오맵 API가 올바르게 동작하는 지 확인하기 위해선 로컬 주소를 사이트 도매인으로 등록해주면 됩니다. 저는 처음에 공식문서에서 '웹 서버를 실행시키라'는 언급이 있어.. 공감수 2 댓글수 0 2023. 8. 12.
[Web] PWA(프로그래시브 웹 앱)이란 무엇일까? 이번 5월달에 SWYG(스위그)에서 진행하는 스위디(SWYDY) 스터디에 참여하여 PWA에 대해 처음 학습하게 되었습니다. 이번 포스트는 스위디 스터디 1주차 때 배웠던 내용을 바탕으로 작성하였습니다. PWA란 무엇인가? PWA란 Progressive Web Application의 줄임말로, 모바일에서 앱 스토어를 통해 설치하는 네이티브 앱처럼 사용할 수 있는 웹 어플리케이션을 말합니다. 쉽게 말하자면, 웹 어플리케이션을 Mobile App화(化)한 것이라 할 수 있겠습니다. 그렇지만 PWA는 일반 웹 앱처럼 기본적으로 HTML, CSS, JavaScript와 같은 웹 기술을 통해 만들어집니다. 2015년 Google Chrome의 엔지니어 알렉스 러셀(Alex Russel)은 '점진적(progressi.. 공감수 11 댓글수 2 2023. 5. 12.
[Web] CSR과 SSR이란 무엇일까? SSR과 CSR이란? SSR과 CSR이란 개념은 웹의 UI를 생성하는 렌더링 과정이 어디에서 일어나는 지에 따라 그 차이가 있습니다. 이 두 개념을 잘 이해하기 위해선 웹 브라우저가 어떻게 동작하는지, 웹 사이트가 어떤 과정을 통해 우리 눈 앞에 나타나게 되는지를 미리 알고 있어야 합니다. 이에 대한 내용은 제가 예전에 작성해 둔 포스트를 아래 링크로 달아드리니, 부디 참고해주시기 바랍니다. 주소창에 naver.com을 치면 일어나는 일을 쉽게 이해해보자 (이 포스트는 velog 플랫폼에 포스팅했던 게시글을 그대로 가져온 것입니다. 감사하게도, 당시 이 게시글이 velog 월간 트렌딩 1위에 올랐습니다. 읽어주신 모든 분께 이 자릴 빌어 진심으로 감사의 sylagape1231.tistory.com 웹에서.. 공감수 4 댓글수 0 2023. 5. 3.
[ReactJS] 관심사의 분리와 Custom Hook 관심사의 분리 각각의 관심사에 따라 코드를 분리하는 기법 코드가 하나의 관심사만 신경쓰도록 분리하는 것 관심사의 분리의 특징 특정한 변화에 대응하기 위해 읽고 이해하고 수정해야 하는 코드의 단위를 줄일 수 있어 유지 보수에 용이해진다. 하나의 코드가 하나의 기능을 담담하기에 여러 역할이 혼재된 코드보다 단위별로 재사용하기 쉬워진다. 코드의 기능 테스트 또한 쉬워진다. 관심사의 분리가 잘 된 소프트웨어는 낮은 결합도와 높은 응집도란 특징이 나타난다. 낮은 결합도 (Loose Coupling) : 코드가 얽혀있지 않고 관심사에 따라 독립적으로 잘 분리되어 있다. 높은 응집도 (High Cohesive) : 동일한 목적(관심사)를 가진 코드끼리 잘 모여있다. KISS 원칙 Keep It Simple, Stup.. 공감수 0 댓글수 0 2023. 2. 21.
[ReactJS] Dynamic Routing & Query String Dynamic Routing (동적 라우팅) 정적 Routing Routing을 설정하는 가장 기본적인 방식은 정적 Routing이다. 정적 라우팅은 Router 컴포넌트에서 미리 프로젝트에 사용할 경로들과 보여줄 컴포넌트들을 모두 정의해두는 방식이다. import React from 'react'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; const Router = () => { return ( ) } export default Router; 하지만 복잡하고 규모가 큰 애플리케이션에서는 경로를 미리 설정하는 Routing 방식만으론 처리하기 힘든 작업이 존재할 수 있다. (Route를 유연하게 정의할 수 없으므로) 동적 라우팅 .. 공감수 1 댓글수 0 2023. 1. 24.
[ReactJS] Component의 분리와 재사용 (관심사의 분리) 컴포넌트 분리 관심사의 분리 관심사의 분리란 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리하는 것을 말한다. 프로그램을 구별된 '개개의 관심사를 해결하는 부분'으로 분리하는 디자인 원칙이다. 컴포넌트 별로 관심사를 분리하면 확장성과 재사용성을 높일 수 있다. 컴포넌트를 분리하는 이유 React에서 컴포넌트는 다양한 역할을 한다. 어떤 컴포넌트는 UI를 표현하고자 하고, 또 어떤 컴포넌트는 동작하는 로직을 담을 수 있다. 위의 두 역할을 모두 담는 컴포넌트 또한 존재하고, 하나도 담지 않는 컴포넌트도 존재할 수 있다. 이처럼 컴포넌트는 재사용할 수 있는 최소 UI 단위임에도 불구하고, 웹의 복잡도와 해당 컴포넌트에서 수행하려고 하는 역할에 따라 얼마든지 복잡해질 수 있다. 따라서 '관심사의 분리'.. 공감수 1 댓글수 0 2023. 1. 24.
[ReactJS] 상수 데이터 & Mock Data + fetch 매소드 상수 데이터란? 변하지 않는 데이터 React에서 데이터는 UI이다. 시간이 흐름에 따라 변하는 변수 데이터로 UI를 만들 땐 백엔드 서버에서 데이터를 받아와야 한다. 반면 변하지 않는 상수 데이터로 UI를 만들 땐 백엔드 서버에서 데이터를 받아올 필요가 없다. 상수 데이터 활용하기 /* App.js */ import React from "react"; const MENU_LIST = [ { id: 1, menuName: "New Repository" }, { id: 2, menuName: "Import Repository" }, { id: 3, menuName: "New Gist" }, { id: 4, menuName: "New Organization" }, { id: 5, menuName: "New .. 공감수 0 댓글수 0 2023. 1. 24.
[ReactJS] Side Effect와 useEffect Side Effect란? Side Effect란 부작용이다. 부작용 === 부수효과 부수효과 : 주요한 효과에 따라서 발생하는 부수적인 효과 부작용이란 용어 자체는 부정적인 의미를 내포하지 않는다. 단지 부수적으로 발생하는 효과를 의미하는 단어이다. 프로그래밍에서 Side Effect (부작용) 란? 코드가 의도한 주된 효과 외에 추가적으로 발생하는 부수 효과 특히 프로그램을 구성하는 가장 작은 단위인 함수에서 자주 사용되는 용어 함수의 본질적인 역할 (주된 효과) Input을 받아서 Output을 산출하는 것 Input => Output 함수의 부작용 (Side Effect) Input을 받아서 Output을 산출하는 것 외의 모든 행위 함수에서 함수 외부의 값을 읽어오는 행위 함수에서 함수 외부의 값.. 공감수 0 댓글수 0 2023. 1. 24.
[ReactJS] Hook & State & Props Hook이란? Hook은 클래스 컴포넌트에서만 사용할 수 있었던 상태 관리와 라이프 사이클 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해주는 함수를 의미한다. 미리 만들어 둔 함수를 가져와서 사용을 해 주는 것이기 때문에 Hook이라는 이름을 사용한다. Hook의 모음을 Hooks라 한다. Hook의 등장 배경 기존엔 클래스 컴포넌트만을 사용하여 컴포넌트를 생성하였는데, 함수 컴포넌트의 장점으로 인해 이를 사용하고자 하는 니즈가 점점 많아지게 되었다. 함수 컴포넌트의 장점 : 선언하기 편리함, 직관적, 메모리 자원을 덜 사용함 이로 인해 클래스 컴포넌트에서만 가능했던 기능을 함수 컴포넌트에서도 사용하고자 Hook이 등장하였다. Hook의 특징 함수 컴포넌트에서만 사용 가능하다. Hook의 이름.. 공감수 1 댓글수 0 2023. 1. 24.
[ReactJS] SPA & Routing SPA & Routing SPA (Single Page Application) 의 개념 SPA는 페이지가 하나인 웹 어플리케이션을 의미한다. 여기서 페이지란 html 파일을 뜻하기 때문에, SPA는 웹 사이트 전체에 HTML 파일이 하나인 웹 어플리케이션이다. MPA와 달리, SPA는 html이 하나 뿐이므로 여러 페이지(UI)를 하나의 페이지에서 보여주기 위해 Routing 기능이 필요하다. Routing의 개념 SPA에서 경로에 따라 다른 페이지를 브라우저 화면에 보여주는 것을 Routing이라 한다. React 자체에는 Routing 기능이 없기 때문에, React-Router이라는 라이브러리를 설치해 사용해야 한다. React-Router 설치 명령어 : npm install react-route.. 공감수 1 댓글수 0 2023. 1. 22.
[ReactJS] JSX와 컴포넌트 (Component) JSX JSX는 JavaScript의 문법을 확장한 React만의 문법으로, JavaScript 내에서 HTML 마크업을 사용할 수 있도록 한 것이다. 마크업과 자바스크립트 로직이 서로 연결되어 있다고 판단하여 이를 한 번에 작성할 수 있는 방법을 고민한 결과 생겨난 문법이다. JavaScript 내에서 마크업을 작성할 수 있고, JS 로직도 함께 작성할 수 있다. JavaScript 정식 문법은 아니기 때문에 브라우저에서 이를 해석할 수 없다. 따라서 Babel 변역기로 이를 React.createElement() 함수로 변환하는 과정이 반드시 필요하다. JSX의 특징 JSX는 자바스크립트의 값이다. 특정한 변수에 이 값을 담을 수 있고, 함수의 인자로 전달하거나 함수의 리턴값으로 사용할 수 있다. f.. 공감수 1 댓글수 0 2023. 1. 22.
[ReactJS] React의 특징과 Virtual DOM React의 대표적인 특징 2가지 선언형 (Declarative Programming) 리엑트는 선언형 프로그래밍 언어이다. 절차적 vs 선언적 절차적(명령형) 프로그래밍 원하는 결과를 만들기 위한 절차(How)에 중점을 두는 프로그래밍 방식 자바스크립트에서 직접 DOM을 조작하는 방식 모든 과정을 일일이 기술해야 하므로 생산성이 저하될 수 있다. 선언적 프로그래밍 원하는 결과가 무엇(What)인지 선언하는 형태로 프로그래밍 하는 방식 자바스크립트에서 DOM 조작은 React에 위임 컴퓨터는 절차적으로 동작하기에 결국 모든 명령을 다 절차적으로 해주어야 하지만, 개발을 하는 개발자는 (최대한 절차적인 부분은 감추가나 위임하고) 선언적인 부분에만 집중하게 하는 방식이 선언적인 프로그래밍 방식이다. 컴포넌트.. 공감수 1 댓글수 0 2023. 1. 22.
[ReactJS] React JS 소개 및 설치 React JS의 개념과 탄생 배경 React 탄생 배경 웹 애플리캐이션이 등장함에 따라 웹 개발의 복잡성이 증가하게 되었다. 웹 애플리케이션 : 웹 브라우저를 통해 응용 소프트웨어의 기능을 이용할 수 있도록 만든 웹 서비스 이에 따라 DOM을 직접 조작하는 (Vanila JS, jQuery를 이용하는) 기존의 개발 방법으로는 한계가 생겼다. 이러한 상황에서 자연스럽게 프론트엔드 개발의 생산성 향상과 난이도 하향을 위한 여러 라이브러리 및 프레임워크가 탄생하였다. 이 중 현재 제일 많이 사용되는 것은, React, Angular, Vue이다. React JS란? React JS (혹은 React)는 UI를 구축하고 어플리케이션이 interactive하도록 만들어주는 프레임워크 (Framework) 이자 .. 공감수 1 댓글수 0 2023. 1. 22.
[NodeJS] Node JS & NPM 소개 및 설치 Node JS란? Node JS란 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(실행 환경)이다. 실행 환경 : 특정 프로그램을 실행하기 위해서 필요한 환경 JavaScript 실행 환경 : JavaScript를 실행할 수 있도록 해주는 환경 (JavaScript 엔진 + 파일 읽고 쓰는 기능 + 입출력 기능 등등) Node JS란 (V8 엔진으로 빌드된) 단순한 문자의 나열인 JavaScript 코드를 해석하고 실행할 수 있도록 제공된 환경이다. Node JS 탄생 배경 웹 브라우저는 대표적인 JavaScript의 실행환경이다. 애초에 JavaScript 언어는 브라우저에서 간단한 스크립트를 실행하기 위해 탄생한 언어이다. 그렇기 때문에, JavaScript는 브라우저.. 공감수 1 댓글수 0 2023. 1. 22.
[ReactJS] 개발 도중 마주했던 오류 모음 (2022년 11-12월) React 라이브러리를 이용하여 웹 개발을 하던 도중 마주했던 여러 에러들을 자잘한 것부터 규모가 컸던 것까지 모두 깃허브에 md문서로 정리해두었다. 혹시 비슷한 에러를 또 마주하게 되면 여기에 와서 Ctri+F를 통해 검색해서 찾아보자. DOM에 직접 접근하여 classList 메소드를 통해 클래스를 추가하고 제거했더니 정상적으로 동작하지 않는다. React에서 특정 요소에 이벤트를 연결하고, event 객체를 매개변수로 받아 활용하는 코드를 작성했는데, event is deprecated 에러가 발생했다. setState를 통해 상태값을 변경하니 원하는 값이 하나씩 밀린 채 변경되는 바람에, 상태값을 활용한 로직이 내 의도대로 동작하지 않는다. (Router를 활용한) React 프로젝트를 초기 세팅.. 공감수 1 댓글수 0 2023. 1. 20.
[ReactJS] 백에서 GET method를 통해 받아온 데이터를 구조 분해 할당할 때 값이 읽혀지지 않는 문제 - Uncaught TypeError: Cannot read properties of undefined (reading '0') 🚨 문제 상황 팀 프로젝트 중 백엔드 서버에 필요한 데이터를 요청하여 받은 후, 이 정보를 가공해서 화면에 렌더링해주는 작업이 여러 번 있었다. 이 때 자주 골치를 아프게 했던 에러가 하나 있어 포스트로 남긴다. const ReservationPage = () => { const [lectureData, setLectureData] = useState({}); // 백에서 상품 디테일 데이터 수신 useEffect(() => { fetch(`/data/reservationData.json`, { method: 'GET', }) .then(response => response.json()) .then(data => { setLectureData(data); }); }, []); if (lectureData.. 공감수 1 댓글수 0 2022. 12. 9.
[ReactJS] setState의 비동기 처리로 인한 버그 해결하기 🚨 문제 상황 setState를 통해 상태값을 변경하니 원하는 값이 하나씩 밀린 채 변경되는 바람에 나의 의도대로 코드가 동작하지 않는다. function handleBtnActivateById(event) { setIdValue(event.target.value); console.log(idValue); isIdVaild = idValue.indexOf('@') !== -1 ? true : false; handleBtnActivate(event); } 위의 사진처럼, 입력창에 입력된 값이 (콘솔창에서) 한 글자씩 덜 출력되는 것을 확인할 수 있다. 💡 문제 해결 및 과정 구글링의 통해 알아보니, setState의 Batch Update라는 비동기적 특성으로 인해 이런 문제가 생기는 것임을 알 수 있었다.. 공감수 3 댓글수 0 2022. 11. 4.
[ReactJS] React에서 이벤트 리스너를 연결하고, event 객체를 활용할 때 주의해야 할 점 🚨 문제 상황 React에서 특정 요소에 이벤트를 연결하고, event 객체를 매개변수로 받아 활용하기 위해 위와 같은 코드를 작성하였다. 하지만 'event is deprecated'라는 이해할 수 없는 에러가 발생하였고 코드 역시 실행되지 않았다. 💡 문제 해결 및 과정 바닐라 JS에서 특정 요소에 이벤트를 연결해주려면 우선 해당 요소에 해당하는 DOM 객체를 DOM 트리에서 찾아야 한다. 그러고 난 후, 이 객체에 원하는 이벤트를 addEventListener 함수를 통해 연결해주면 된다. 혹은 인라인 방식으로 특정 요소에 해당하는 HTML 태그에 이벤트 속성을 바로 부여해주는 방법도 있다. React에서 특정 요소에 이벤트를 연결해주려면 바닐라 JS에서의 인라인 방식처럼 JSX로 변환된 코드의 태.. 공감수 1 댓글수 0 2022. 11. 4.
[ReactJS] React로 요소에 클래스 추가 및 제거하기 (부제 : React에서 직접 DOM을 조작하지 않도록 하자) 🚨 문제 상황 인스타그램을 클론 코딩하는 과정에서 바닐라 JS로 DOM 요소에 접근한 후 클래스를 추가하고 제거하는 데 classList의 add, remove 메소드를 활용하였다. 그러나 이 코드를 React로 변환하는 과정에서도 classList를 그대로 사용하였더니 정상적으로 동작하지 않는 문제가 발생했다. 그래서 console.log()를 통해 React에서도 classList 함수가 제대로 동작하는 지 한 번 실험해보았는데, 클래스가 제대로 제거되고 추가됨을 확인할 수 있었다. 하지만 제대로 동작하는 코드와 달리 화면에 보이는 결과는 그렇지 않았다. (대상이 되는 클래스가 opacity: 0.6 스타일 속성이 부여된 클래스라, 결과를 화면에서 바로 확인할 수 있는 상황이었다.) // SyLogi.. 공감수 5 댓글수 0 2022. 11. 4.
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.. 공감수 1 댓글수 0 2022. 10. 23.
Semantic Tag (시멘틱 태그) 를 사용하여 웹 개발을 해야하는 이유 HTML 요소는 Semantic 요소와 Non Semantic 요소로 구분할 수 있다. 여거서 Semantic 요소란 의미가 부여된 요소를 의미한다. 웹 개발자가 웹 사이트를 구축할 때 각 요소가 가지는 '의미'를 HTML 태그에 직접 부여하여 코드를 작성하는 것이 중요하다. 하나의 예시를 통해 그 이유를 간단히 짚어보자. 웹페이지에 이미지를 불러오는 2가지 방법으로 ' 태그를 사용하는 방법'과 ' 태그에 background-image 속성을 추가하는 방법'이 있다. (다른 방법도 있겠지만 여기선 이 두 가지만을 고려하기로 한다.) 여기서 태그는 그 이름에 '이미지'라는 의미가 담겨 있는 Semantic Tag이다. 이런 Semantic Tag를 이용하여 코드를 작성하면 태그 이름만으로 이 요소가 어떤 .. 공감수 1 댓글수 0 2022. 10. 23.
개발자 도구란 무엇인가? 개발자 도구 (DevTool) 란? 개발자 도구란 개발자들이 홈페이지를 수정하고 발생한 문제의 원인을 쉽게 파악하기 위해 브라우저에서 제공하는 도구이다. 윈도우나 맥에서 F12를 클릭하면 열 수 있으며, 웹 개발자들은 보통 개발자 도구를 열어놓고 작업을 하는 경우가 굉장히 많기 때문에, 웹 개발자가 개발자 도구의 사용법을 잘 아는 것은 중요하다. 개발자 도구에는 여러 개의 패널이 존재한다. 이 각 패널의 기능을 잘 숙지하여 적절한 상황에 알맞은 패널을 활용하도록 하자. 이번엔 가장 많이 쓰는 패널 4개의 기능에 대해 정리를 해보고자 한다. Elements 패널 HTML과 CSS 코드를 분석하고 실시간으로 이를 수정할 수 있는 패널이다. 사이트의 구조를 파악하는 데 용이하다. (CSS 코드를 확인할 수 있.. 공감수 3 댓글수 0 2022. 10. 23.
주소창에 naver.com을 치면 일어나는 일을 쉽게 이해해보자 (이 포스트는 velog 플랫폼에 포스팅했던 게시글을 그대로 가져온 것입니다. 감사하게도, 당시 이 게시글이 velog 월간 트렌딩 1위에 올랐습니다. 읽어주신 모든 분께 이 자릴 빌어 진심으로 감사의 말씀 올립니다.) 🖌 서론 스터디에서 발표를 준비하며, 기술 면접의 단골 질문인 웹 브라우저의 동작 원리에 대해 처음으로 공부하게 되었다. 그리고 이 주제가 왜 단골 질문으로 꼽히는지 이해할 수 있었다. 이 주제는 깊이 들어가기 시작하면 정말 끝없이 들어갈 수 있는 내용인 것 같아 보였다. 그렇기에 면접관이 면접자의 역량을 파악하는 데 이만한 질문이 없겠구나 싶은 생각이 들었다. 만일 CS 지식이 부족하다면, 이 주제를 처음 공부할 때 아마 내용이 많이 낯설고 어렵지 않을까 싶다. (사실 내 이야기다.) .. 공감수 3 댓글수 0 2022. 9. 14.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.