본문 바로가기

전체 글42

윈도우 powershell 파워쉘에서 npm 실행 안 될 때. 윈도우 파워쉘에서 node, npm의 버전 확인하려고 하는데 안 됨. powershell 을 우클릭해서 관리자 권한으로 실행! 아래 명령어 입력 후 엔터.Set-ExecutionPolicy RemoteSigned -Scope CurrentUser 뭐 물어보면 Y 입력 후 엔터. 후에 node -v, npm -v 입력하면 정상적으로 표시됨! 2026. 6. 1.
프론트엔드개발 & UI,UX 디자인 공부 시작! 다사다난했던 2026년 상반기를 보내고 정신을 차려보니.나는 다시 취준생이 되어있고, 웹퍼블리셔 구인광고는 바닥이다.없다 그냥. 그리하여 나는.. UIUX 디자인과 더불어, 펀코딩님의 블로그 글을 읽고 프론트엔드개발을 배워보기로 했다.https://contents.premium.naver.com/codetree/funcoding/contents/251228222829815th '퍼블리셔 꼬리표' 떼고 프론트엔드 개발자로: AI 시대, React/Vue를 가장 효율적으로 배우는 3가지AI는 더 이상 먼 미래의 이야기가 아닙니다. ChatGPT에게 "이 디자인대로 HTML/CSS 코드를 짜줘"라고 하면 꽤 그럴듯한 결과물을 내놓고, v0.dev 같은 도구는 텍스트만으로 복잡한 UI 컴포넌트를 뚝딱 만cont.. 2026. 5. 12.
VS Code가 네트워크 드라이브(사내 파일서버 경로)에서 파일을 열지 못할 때 내 컴퓨터에 있는 HTML이 아닌,사내 파일서버 경로에 있는 HTML을 VS코드로 열려고 하면 매번 아래와 같은 에러창이 뜬다. GPT에게 방법을 물어보니 개발 시에 로컬로 복사 후 편집하라는데.. (그걸 누가 모르냐..)급하게 코드를 확인해야 할 때, 언제 로컬로 옮기고 있습니까?암튼. 다시 제안받은 방법은 통했다.VS코드 바로가기 아이콘을 우클릭↓속성↓대상 항목에 아래와 같이 추가↓"C:\Users\\AppData\Local\Programs\Microsoft VS Code\Code.exe" --no-sandbox --no-sandbox 앞에 공백은 필수! 경로 전체는 큰따옴표로 감싸기.경로에 옵션을 추가하고 사내 파일서버에 있는 HTML을 VS코드에서 열려고 다시 시도! 하니아래와 같은 알럿이 떴다... 2025. 10. 20.
chrome inspect 사용해서 핸드폰 화면 데스크탑에 띄우기(디버깅 목적) 나의 경우,PC에서 확인하는 모바일 화면과 핸드폰에서 확인하는 화면이 다를 때 디버깅을 하기 위해 사용하는 편이다. 1. 핸드폰 설정에서 개발자옵션 → USB 디버깅 활성화 2. PC 크롬에서 ' chrome://inspect/#devices ' 열기. 3. 휴대폰 크롬에서 디버깅할 페이지 접속. 4. PC 화면에서 Remote Target 영역에 휴대폰에서 열어 놓은 페이지 리스트 확인 5. inspect 버튼 클릭! 내가 핸드폰으로 보고 있는 크롬 화면을 데스크탑에서 확인 할 수 있음. 개발자 도구로 찍어서 코드 확인 가능! 2025. 9. 3.
회사에서 사용하는 class 네이밍 방식이 궁금하다. 다니는 회사에서 사용하는 클래스 네이밍 방식이 있는데_업계에서는 이런 방식을 뭐라고 하는지 궁금하여 찾아봤다. 보통 아래와 같이 마크업 하고 있다. (data 말고도 post, board, bullet 등등 사용) 타이틀영역   타이틀영역 .. 2025. 6. 20.
ir 기법을 위한 CSS 코드 일단 IR기법은 웹접근성을 위해 필요함다이어그램, 표, 그래프 등이 이미지로 되어있을 때 설명하기 위함임.대체 텍스트를 숨기는 것! (스크린리더로만 읽히도록, 화면에는 안 보임) display: block; position: absolute; overflow: hidden; visibility: hidden; margin: -1px; padding: 0; width: 1px; height: 1px; line-height: 1px; font-size: 1px; border: 0; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); pointer-events: none; 보통 내가 작업하는 프로젝트에는 .. 2025. 6. 20.
scroll 이벤트 (jQuery 사용) 요소 일부가 보이면 토글클래스 [스크롤 이벤트 (jQuery코드임)] ● s-animation 클래스를 가진 요소가 뷰포트에 들어왔을 때 show 클래스를 토글 (요소가 스크롤로 화면 중간쯤에 들어오면 show 클래스 부여 / CSS 에서 show 클래스로 애니효과) ▷ 요소 선택 const $sAnimations = $('.s-animation'); ▷ 함수 작성function scrollAnimation() { const triggerPoint = (window.innerHeight) / 1; $sAnimations.each(function(index, section) { const sectionTop = section.getBoundingClientRect().top - $(section).height() / 2; .. 2025. 6. 20.
메일 코딩 table HTML 일부 안되는거 겁나 많은 메일 코딩. 일단 모든 내용들을 감싸는 body 코드 부터. body태그 바로 밑에서 시작하는 table 태그 메일 코딩은 아웃룩이 문제가 아니라 지메일이 문제다. 2025. 6. 20.
gulp 한 줄 한 줄 해석 1년 전에 자동화 툴로 사용했던 gulp 세팅값이다. 당시에 프로젝트가 끝나고 시간적 여유가 있어서, gulp 코드의 한 줄 한 줄에 대한 역할을 찾아서 정리해 놨었다. 지금 여기서 더 업그레이드되었을 수 있다. 최신 문법이 생겼을 수도 있고. 암튼 일단 잃어버릴까 봐 블로그에 기록!const gulp = require("gulp"); // gulp 기본 모듈. 파일을 읽고 변환.const scss = require("gulp-sass")(require("sass")); // gulp-sass는 gulp와 함께 사용 가능한 scss 컴파일러. require("sass")를 통해 Dart Sass 컴파일러 사용 (Dart Sass는 Sass의 최신 기능과 사양을 가장 먼저 지원. 오류 메시지 지원)cons.. 2025. 6. 20.

티스토리툴바