코딩 프로그래밍/Javascript 자바스크립트47 github page blog 배포 빌드 자동화 Github Action github을 이용해서 포스팅하는 경우 빌드하는 과정이 한번 필요해요. PC에서 해도 되기는 하는데 다른 PC에서 하는 경우 조금 불편한 경우가 있어요. 그런 경우 Github Action을 통해서 자동화가 가능합니다. 이미 github page 블로그가 있다고 가정합니다. 토큰 생성 자동 배포하는 과정에서 사용할 토큰이 있어야 합니다. 여러개 만들 수도 있고요. 깃헙 설정에서 개발자 설정 메뉴로 들어가세요. Settings 메뉴에서 Developer settings에 있는 Personal access tokens 메뉴로 들어가세요. 링크로 접속해도 됩니다. Generate new token를 눌러서 생성 링크로 바로 접속하세요. 만료 기간을 선택하고 repo 부분을 모두 선택하고 생성하세요. 생성한 토.. 2022. 9. 18. github pages 블로그 시작하기 github을 활용하여 블로그를 구성하는 것은 독립적으로 원하는 디자인을 적용하면서도 빠른 블로그를 서버 비용 없이 사용할 수 있다는 장점이 있어요. 다만 알아야 하는 내용들이 많다고 느껴질 있는데 그만큼 알아두면 정말 많이 써먹을 수 있는 부분이 많아요. 개발자들이 많이 사용하는 서비스지만 개발자들만 이렇게 좋은 것을 이용하고 있었나 하는 생각이 들 정도로 유용한 부분이 많아요. github을 이용해서 블로그를 만들 수 있는 방법이 많은데 그중에서 더 쉽게 느껴지는 gatsby를 이용한 블로그 만들기를 해보겠습니다. gatsby 설치 오늘은 일단 PC에 설치하는 과정으로 진행하겠습니다. 나중에서 본인 PC에 아무것도 설치하지 않아도 가능한 방법으로 해보겠습니다. 그래도 명령어에 익숙한 개발자 지망생 또.. 2022. 9. 18. 자바스크립트 OS 명령어 실행하기 node.js 에서 OS 명령어를 실행해야 하는 경우가 있어요 OS가 윈도우인지 리눅스인지 다른 명령어를 실행해야 하는 경우도 있어요 간단한 샘플을 이용해서 OS를 인식하여 그에 맞는 명령어를 실행하는 방법입니다 const execSync = require('child_process').execSync; function get_cpu_id() { if (process.platform === "win32") { return execSync('wmic csproduct get UUID /format:list').toString(); } else { return execSync('/usr/bin/cat /proc/cpuinfo | grep "model name" | head -1').toString(); } .. 2021. 10. 23. 스크롤바 보이지 않게 하는 CSS, 스크롤바 안 보이게 하는 CSS 전부 안보이게 하는 방법 body { overflow: hidden; } 한 쪽 스크롤바 만 안보이게 하는 방법 body { overflow-y: hidden; overflow-x: hidden; } 2021. 1. 28. React JSX 문법 사용해보기 지금까지 리액트 연습하면서 JSX 문법을 사용하지 않고 했었는데요 JSX 문법으로 편리하게 사용 해 볼 수 있어요 바벨 babel 이 필요합니다 JSX 문법을 사용하는 스크립트를 작성하는 부분에서는 type에 text/babel 이라고 써줘야 합니다 이렇게 하면 JSX 없이 할때보다 간결하게 할 수 있어요 사실 create-react-app 으로 생성하면 이런 설정들이 처음부터 다 되어있는 상태로 시작 할 수 있는데 기본을 연습해보기 위해서 해봤어요 2020. 11. 9. React state 변수와 버튼에 기능 넣기 지난 글에서 리액트를 연습하기 위해 환경 구성했었는데요 tolovefeels.tistory.com/96 nodejs 없이 react 문법 연습하기 react로 뭔가 만들어보려면 초기 세팅하는 것들이 많은데요 문법만 기초부터 연습해보려면 nodejs 설치 없이도 할 수 있어요 Visual Studio Code 만 설치되어 있으면 할 수 있습니다 기본 html 에서 react tolovefeels.tistory.com 그 코드에서 변수와 함수에 대해서 알아봤어요 다른 곳에서 받는 값이 아니라 그 안에서 변하는 값은 state 변수로 관리해야 합니다 그래서 버튼을 눌렀을 때 render 부분의 좋아요 부분이 좋아요 눌림이라고 바꾸고 싶고 변하는 부분이니 state 변수로 관리해야 합니다 constructor .. 2020. 11. 8. nodejs 없이 react 문법 연습하기 react로 뭔가 만들어보려면 초기 세팅하는 것들이 많은데요 문법만 기초부터 연습해보려면 nodejs 설치 없이도 할 수 있어요 Visual Studio Code 만 설치되어 있으면 할 수 있습니다 기본 html 에서 react 스크립트를 불러와보세요 공식 문서에서 확인 해 볼 수 있어요 reactjs.org/docs/cdn-links.html 이렇게 2개 라인을 head 태그에 붙여 넣어서 기본 틀을 만들어요 이제 script 태그 안에 React 문법을 사용할 수 있어요 리액트로 만든 컴포넌트가 보여지는 위치입니다 React.createElement 이용하여 태그를 만들고 render를 이용하여 표시합니다 2020. 11. 6. Visual Studio Code 자체 웹서버 html 코드 테스트 html 페이지 만으로 테스트하고 싶은 경우가 있어요 nodejs나 python flask를 이용해서 서버를 만들어서 할 수도 있지만 화면만 담당하는 사람에게는 필요 없는 경우도 있어요 또는 아주 간단한 페이지를 만들어서 테스트하려는 경우에도 유용하게 쓸 수 있습니다 사실 파일을 그냥 크롬에서 열어도 되는 경우가 많은데요 가끔 웹서버 환경에서 동작해야 잘 작동하는 경우도 있어서 한 번만 이렇게 설치해두면 좋아요 Visual Studio Code 에서 확장 프로그램 설치 화면으로 오세요 왼쪽에서 확장프로그램 아이콘이 있어요 live server 라고 검색해서 설치하세요 웹서버에서 보고 싶은 파일을 오른 클릭해보세요 그럼 Open with Live Server 메뉴를 누르면 웹서버가 실행됩니다 하단에 포트 .. 2020. 11. 5. 이전 1 2 3 4 5 6 다음 반응형
