본문 바로가기
안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요.

전체 아티클76

다른 사람들도 쉽게 알 수 있게 노드 버전을 세팅해보세요 목차· nvm 설치로 노드 버전 관리 간소화하기· .nvmrc로 프로젝트 노드 버전 관리하기· windows 환경에서 .nvmrc 세팅 시 주의할 점항상 사이드 프로젝트에 중간 합류를 하게 되면 개발 환경 세팅으로 인해 골머리를 앓는 경우가 있는데요, 이때 개발자의 글로벌 노드 버젼과 프로젝트 자체의 노드 버젼이 달라서 프로젝트가 실행되지 않는 경우가 있는데 프로젝트를 생성한 사람에게 노드 버젼을 물어보는 경우가 생겨요. 프로젝트에서 버전 문제가 발생하여 실행을 못한다거나, 일부 라이브러리를 사용하지 못했던 경험이 있으시지 않으신가요? 예전 리액트 프로젝트를 처음 접했을 때, 시니어 개발자 분이 .nvmrc 파일을 계속 생성하시는 것을 보고 "저 파일은 대체 뭘까.." 라는 생각을 했었는데, 실제로 여러.. 2025. 3. 16.
브라우저 또는 다른 탭에서 동일한 데이터로 동기화하기 사용자가 탭을 전환하거나 페이지 가시성이 변경된 경우, 동일한 세션의 사용자가 있다고 가정을 해보아요.사용자가 A와 B의 브라우저 또는 탭을 동시에 켜놓았을 때 A의 브라우저 서비스의 데이터를 업데이트 할 경우, B로 접근할 때 새로고침을 하지 않는 이상 동기화된 데이터를 얻을 수 없어요. 이 경우, 만약 사용자가 데이터를 혼동하여 기존 B 데이터를 이용하여 전체 데이터를 수정하고 업데이트 하는 경우에는 잘못된 데이터 동기화 현상이 발생하게 됩니다. 이러한 상황을 방지하고자 사용자가 탭을 전환하거나 페이지 가시성이 변경된 후 다시 페이지로 돌아왔을 때 최신화된 데이터를 확인하고 싶거나, 혹은 서로 다른 브라우저에서 동일한 데이터를 동기화해서 확인하고 싶을 때 아래와 같은 윈도우 이벤트를 사용하여 동기화 .. 2025. 3. 8.
우리도 IT 컨퍼런스 한번 열어보자! 목차· 우아콘처럼 멋진 컨퍼런스를 만들어보고싶어!· 디프만에서는 어떤 인사이트들을 제공해줄 수 있을까?· 공통 트랙을 만들어서 아이디어에 대한 길잡이를 제공해주면 어떨까?· 너무 멋진 분들을 초청해버린 썰· 온라인 컨퍼런스 홀을 위한 게더 그라운드 만들기· 모두가 같은 이해 관계 속에서 진행하기 위한 디프콘 가이드 만들기· 디프콘 행사의 본격적인 시작· 디프콘을 마치며  · 과연 성공적이었을까?우아콘처럼 멋진 컨퍼런스를 만들어보고싶어!디프만이라는 IT 커뮤니티 및 연합 동아리에서 두 차례 프론트엔드 개발자로 활동을 하고, 이번년도에는 커뮤니티를 리드하게 되었어요. 리드를 진행하면서 가장 먼저 해보고 싶었던 이벤트는 "디프만 구성원 모두를 위한 컨퍼런스를 열어보는 것" 이었어요. 사실 학생 때 얕은 지식을.. 2025. 2. 10.
HTML에 meta 속성 중 http-equiv은 무엇을 의미할까요? 최근 Remix를 학습하면서, 그리고 레이어 서비스에서 동적 오픈그래프 태그를 대응하면서, HTML의 메타 태그에 대해 조금씩 알아보는 시간을 가졌다. 보통 많이 사용하는 title, viewport 등 많이 사용하는 요소들만 확인을 하다보니 익숙치 않는 몇몇 이름들이 보였는데, 그 중 http-equiv의 refresh 속성에 대해 알아보면서 http-equiv 속성에는 무엇들이 있는지 다루어보려고 합니다. http-equiv 란?먼저, HTML의 meta 태그는 문서의 부가적인 정보를 제공하는 태그입니다.meta 태그의 http-equiv 속성은 HTTP 헤더에 정보 또는 값을 제공하는 content 속성입니다.주로 사용하는 용도는 HTML 문서에서 사용할 문서의 종류나 페이지 이동(새로 고침) 등에.. 2024. 10. 19.
브라우저 렌더링 파이프라인 브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정을 브라우저 렌더링 파이프라인이라고 합니다.이 과정은 크게 5가지로 분류가 됩니다.1. DOM 트리 생성브라우저가 HTML 파일을 받으면, 이 파일을 바이트 단위로 읽기 시작합니다.브라우저의 HTML 파서는 이 바이트들을 문자로 변환하고, 이 문자들을 다시 HTML 토큰으로 변환합니다.이 HTML 토큰들은 각각의 태그와 그 안에 포함된 텍스트, 속성 등을 의미합니다. HTML 토큰이 생성되면 브라우저는 이를 기반으로 DOM 트리를 생성합니다 2. CSSOM 트리동시에 브라우저는 CSS 파일도 파싱을 진행합니다. CSS 파일 역시 바이트로 전송되므로, 브라우저는 이를 문자로 변환한 뒤 CSS 규칙으로 나눕니다. 각 CSS 규칙은 선택자인 셀렉터와, 선.. 2024. 10. 4.
CKEditor에서 커스텀 버튼 및 기능 추가하는 방법 목적· 배경· 커스텀 버튼 및 기능 추가하기배경본래 에디터 프로덕트를 개발을 했던 적은 있지만, 파일 업로드를 초기부터 개발을 한 적은 없기 때문에 기록을 위해 포스팅을 진행합니다. 백오피스 개발을 진행하던 도중 CKEditor에서 본문 파일 업로드 기능을 만들어야했습니다. CKEditor에서는 쉽게 파일 업로드 기능을 구현하기 위해서는 프리미엄 플랜을 사용해야하는데, 굳이 프리미엄을 사용하지 않고 그 외에 기능들은 자체 기능으로 구현이 되어있었기 때문에 파일 업로드 기능 또한 직접 구현을 해야했습니다. 이때 프리미엄 플랜을 사용하지 않고 구현을 할 수도 있는데, 이를 위해 커스텀 플러그인과 버튼을 구성하여 에디터에 추가하는 과정을 진행해야합니다. CKEditor에서 제시하는 업로드에 대한 방식은 아래와.. 2024. 9. 23.

티스토리툴바