본문 바로가기

전체 글393

Github Actions 자동화 설정한 것 취소하기 Github 해당 리포지토리로 이동하여 settings 클릭  좌측 사이드 패널에서  Actions - General 클릭 우측 패널에서 Actions permissions 중 Disable actions 클릭 후 save 클릭  또는 자동화를 하기 위해 생성한 스크립트인 .yaml 파일을 리포지토리에서 삭제해도 된다. Programing/Git 2025. 1. 14.
[2025-01-09] jQuery를 더 이상 사용하지 않는 이유 jQuery란?jQuery는 javascript의 여러 문제점을 보완하기 위해 2006년 등장한 경량 자바스크립트 라이브러리이다.당시의 javascript 만으로는 DOM을 조작한다거나, 이벤트를 처리한다거나, AJAX 요청을 한다거나, 자바스크립트로 애니메이션을 구현한다든지의 기능을 사용하기가 무척 까다로웠다.또한 당시에는 IE와 여러가지 브라우저가 난립하던 시대였는데 브라우저마다 위의 것들의 동작 방식이 전부 달라 크로스브라우징이 매우 어렵던 시기였기도 하다.아래에서 자세히 설명하겠지만 자바스크립트만으로 작성하면 매우 길어지는 코드를 제이쿼리는 달러사인 하나로만 압축시켜 혁신적인 코딩을 할 수 있게 해주는 편리한 라이브러리였다.하지만 최근에는 제이쿼리의 사용이 거의 없다고 보면 되고, 심지어 모던 웹.. Programing/TIL 2025. 1. 9.
Mac OS 기본 사용법 Window 운영 체재와 Mac 운영 체재를 번갈아 가며 사용하는 사용자는 사용할 때마다 혼란을 겪는다.비슷하면서도 완전히 다른 사용법 때문인데, 이를 위해서 오늘은 기본적인 사용법에 대해서 간단하게 정리해두겠다.혼란을 겪을 때마다 훑어 보듯 찾아보는 글이 되었으면 한다.  키보드기본 단축키기능맥윈도우복사cmd + cctrl + c붙여넣기cmd + vctrl + v잘라내기cmd + xctrl + x실행취소cmd + zctrl + z전체선택cmd + actrl + a찾기cmd + fctrl + f커서 앞 글자 지우기delete (backspace커서 뒷 글자 지우기fn + deletedelete새 탭 열기cmd + tctrl + t창 닫기cmd + wctrl + w강제종료option + cmd + escc.. IT/Computer 2025. 1. 9.
[2025-01-07] restart 짧은 인생이었지만 참 많은 일을 겪었던 것 같다. 단 한 순간도 무탈한 적이 없었던 것 같다.무탈했을 때는 무탈한 줄 모르고 넘겼을 수도 있지만 지금 내 생각은 그렇다. 2024년은 새로운 기점이 되는 해였다. 대학 졸업 후 단 하루도 쉬지 않고 일만 하며 앞을 보고 달려왔고, 10여 년을 그렇게 일하다 보니 우연찮게 3년 넘게 다니던 마지막 직장에서 계약 종료로 나에게도 쉴 수 있는 시간이 주어진 것이다. 내가 선택한 것은 부트캠프였다.내가 할 수 있는 일, 잘 할 수 있는 일, 하고 싶은 일을 정리 해보니 교집합에 있는 것이 개발자였다.개발자에도 종류가 무척이나 많지만, 한참을 고민하다 선택한 것이 프론트엔드 개발자였다. 2024년에는 몸을 버려가며 밤새도록 공부했다. 그렇게 공부는 9월 정도 끝났지.. diary 2025. 1. 7.
Pages Routing : 기본 세팅 (+쿼리 스트링, 동적 라우팅, 404) 페이지 라우터든 앱 라우터든 Next.js에서 프로젝트를 생성하고 나면 Next.js에서 기본적으로 작성해 놓은 페이지가 보이게 된다. 이것들을 먼저 제거해주는 것부터 시작해서 페이지 라우터 방식에서는 프로젝트 초기 세팅을 어떻게 하는지 살펴보겠다.index.tsx 내용 제거dev 명령어로 개발 서버를 실행시켜 보면 이러한 페이지가 나온다. 내가 만든 페이지가 아니므로 index.tsx 파일에서 제거해주겠다. 아래 사진에서는 import문을 지우지 않았는데 import문과 inter까지 전부 지워주면 된다.그러면 이렇게 된다.global.css 제거배경에 깔린 이상한 줄무늬가 맘에 들지 않는다. 이런 전역 스타일을 제거해준다.그러면 이렇게 된다.새로운 라우트(페이지) 만들기페이지 라우터 방식에서는 기본적.. Programing/Next.js 2024. 8. 28.
Next.js의 구 라우팅 방법, Pages Router Pages Router란?지금 Next.js에 입문하는 사람은 App Router 방식으로 라우팅을 처리하도록 배웠을 것이다. 그게 가장 최신버전의 방식이다.그러나 넥스트 13 버전 이전까지는 페이지 라우터 방식이 라우트를 만드는 방식이었다. 페이지 라우터 방식은 파일을 기반으로 라우트를 만드는 가장 직관적인 방식이다. 넥스트 13 버전부터 도입된 앱 라우터 방식은 디렉토리 기반으로 라우트를 만든다는 것과 큰 차이가 있다고 보면 된다.지금은 넥스트 15버전까지 나왔기 때문에 13버전 이전까지 메인으로 사용된 라우팅 방식이라고 설명하면 굉장히 레거시하고 오래된 방식이고 쓰면 안 될 것 같이 보이지만, 그렇진 않다. 넥스트의 버전업이 너무 빨라서 13, 14, 15까지 너무 많이 버전이 올라간 것처럼 보이지.. Programing/Next.js 2024. 8. 27.
Node.js로 구축한 백엔드 서버를 Supabase에 연결시키기 Supabase는 본 블로그에서 여러번 다룬 적이 있다.그러나 이런 방식은 혼자서 풀 스택 앱을 구축하는 방법이 아니라 현업 환경에서 이미 구축된 백엔드 서버와 연결하는 방식이니 실제 프로덕션 레벨에서의 작업을 이해하기 좋은 내용인 것 같다.Supabase 회원가입Supabase는 이제 웹 개발자라면 백엔드 개발자의 도움 없이도 서버를 구성할 수 있기 때문에 정말 많이 사용하는 것 같다.supabase에서 이메일로 회원가입도 가능하고, 무료 사용자에게는 프로젝트 2개를 만들 수 있게 해주고 사용량도 학습용으로는 충분하니 만들어보면 좋을 것 같다.다만 무료사용자는 일주일 이상 API 요청이 없으면 프로젝트가 pause 상태가 되고, 해제하는데 수십여 분이 걸리는 작업이므로 포트폴리오 같이 멈추면 안 되는 .. Programing/Server 2024. 8. 27.
개발자도구만으로 유튜브 자동자막 txt 파일로 스크래핑하기 여러 이유로 유튜브에서 몇 시간짜리 영상을 검토해야 하는 일이 올 수 있다.그런데 몇 십분이면 그걸 다 보고 있겠지만 십 수 시간이 되는 경우 영상을 다 보고 있는 것도 고통스럽지 않겠는가. Whisper AI나 vrew 같은 툴을 써서 보다 정확한 자막을 추출해낼 수 있지만, 복잡하고 또 돈이 들기 때문에그 정도는 아니고 대강 정도만 파악이 필요한 경우 웹 브라우저의 개발자 도구만으로도 자막과 타임스탬프를 추출할 수 있다. 단 유튜브에서 자동자막을 생성해준 경우만 가능하다.웬만하면 자동자막이 잘 생성이 되지만, 여러 언어가 섞여 있거나 음질이 좋지 않은 경우에는 자동자막이 생성되지 않는 것 같다.그런데 우리나라 영상에서는 그런 경우를 잘 못 봤고 인도인 유튜브에서 그런 현상이 많았던 것 같다. 유튜브 .. Programing/JavaScript 2024. 8. 26.
2024-08-25 비전공자 웹 개발 학습방법 추천 본인은 비전공자이며 30대가 넘는 나이에 웹 개발에 입문하였다. 시중에 널려있는 온라인 부트캠프에서 반년 간 학습을 하였는데, 과거로 돌아간다면 조금 더 효율적인 학습을 할 수 있었을텐데 하는 아쉬움은 어떤 일을 마무리하는 단계에서 매번 가지는 아쉬움인 것 같다.그런 의미에서 혹시나 비전공자로 웹 개발자에 입문하고자 하시는 분이 있다면 나의 조언이 어느정도 참고하실 만한 가치가 있길 바라본다. 시작하기 전고려해볼 점흥미가 있는가시작하기 전에 일단 나에게 먼저 이쪽 분야의 흥미가 있는지 확인을 해 보는 게 좋을 것 같다. 여러 가지 방법으로 알 수 있겠지만 일단 웹 개발이라고 한다면 자바스크립트 MDN 문서나 모던 자바스크립트 튜토리얼 등을 일주일간 하루에 네 시간씩 공부해보면서 이 내용이 흥미로운지 아니.. Programing/TIL 2024. 8. 25.
Next.js를 사용하는 이유 (자유도의 관점, CSR vs pre-rendering) 지난 번 포스팅에서 Next.js를 사용하는 이유에 대해서 간단하게 작성해보았었다. API 라우트 구축이 가능해서 풀스택 애플리케이션을 만들 수 있고... 프레임워크의 성격을 가지고 있어서 별도로 스타일링을 해주거나 라우팅을 하기에 더 빠르고 수월하다는 점... 등등 네 다섯 가지 예시를 들었던 것 같다. 그런데 사실 개념을 정리한 정도의 요약글이었고, 구체적인 개념들을 살펴보진 않았었다. 따라서 이번 글에서는 Next.js를 사용하는 그 이유에 대해서 심도있게 다뤄보고자 한다.만약 이 글을 보고도 공감이 안 된다면 쓰지 않아도 된다. 마치 Next.js의 영업사원을 자처하는 것 같지만 리액트 단독으로 앱을 개발한다고 해서 문제가 되는 것은 아니다. 다만 Next.js의 이점을 누리지 못할 뿐.리액트 공.. Programing/Next.js 2024. 8. 25.

티스토리툴바