애플리케이션에 기능을 더할 때마다 또는 유지/보수할 때마다 빌드 및 배포하는 작업들이 불편하게 느껴지지 않았나요? 그렇다면 Github actions를 사용해보세요! Github Action이란? 이벤트 발생에 따라 자동으로 빌드 및 배포하는 스크립트를 실행시켜줄 수 있습니다. 그 말 즉은 push 또는 pull request 이벤트가 있을때마다 Github actions이 build와 deploy를 하고 s3 배포까지 시켜줄 수 있다는 것이죠! Github actions 정복하기 Github 공식문서 https://docs.github.com/en/actions 참고블로그 https://ji5485.github.io/post/2021-06-06/build-ci-cd-pipeline-using-githu..
TypeScript! 도대체 무엇이길래 요즘 취업시장 자격요건에서 심심찮게 발견할 수 있는걸까요? 또한 수많은 개발자들에게 인기를 받고있는 TypeScript! 아래의 표가 그 인기를 잘 보여줍니다. 도대체 어떤 이유로 이렇게 인기가 많은 걸까요? Javascript는 원래 웹브라우저에서 사용되기 위한 스크립트언어였습니다. ES5의 시작으로 JavaScript의 가장 큰 장점이자 단점은 과도한 유연성에 있습니다. 사용될 때 타입이 정해지는 동적타입속성으로 인해 많은 오류가 발생될 수 밖에 없었는데요! 그때 타입을 지정해주는 TypeScript가 등장하게 됩니다. 타입을 지정하게 된다면 어떤 일이 벌어질까요? 아래와 같은 기능을 만들었을 때, 기존 JavaScript라면 xy 라는 값이 나왔을 것입니다. ..
앞으로, 개발에 대해 깊이있게 공부하기 위해 하나둘씩 정리해나갈 예정입니다. 이제는 어떻게서든 해결하는 개발자가 아니라, 문제를 근본부터 파헤쳐 해결하는 개발자가 되고자 합니다. 유저의 행동흐름에 따라서 동적으로 화면을 보여주기 위해 사용되는 프론트엔드 라이브러리/프레임워크들이 있습니다. 바로 React / Vue / Angular! 그 중 React를 가장 첫번째로 선택해서 공부했던 이유는 당시 채용시장에서 React를 요구하는 회사가 많았었고, 3개 중 가장 인기있는 도구였기 때문였습니다. 하지만, 앞으로 좋은 프론트엔드가 되기위해서는 도구를 가려서는 안되는 법! 이 3가지를 잘 정리해두어서, 상황에 맞추어 도구를 사용하는 개발자가 될 것 입니다! 유저와의 상호작용이 활발하지 않은 홈페이지를 만든다면..
Netlify 배포 과정 중 아래와 같이 빨~~갛게 도배된 창을 만날 수 있습니다.... 😫 Treating warnings as errors because process.env.CI = true. 라는 오류인데, sites에 들어가서 상단에 아래의 버튼을 누르고, 왼쪽메뉴에서 아래의 버튼을 누르고, Edit settings를 눌러서 Build command를 아래와 같이 수정해주면 됩니다! 다시 deploy를 하면 이렇게 아름답게 배포가된 것을 확인할 수 있습니다! Bravo! 🦄 더 확인해야할 것! 프로젝트 json 파일에 hompage 설정을 했나요? netlify에서 준 url로 꼭! 설정을 해주셔야 합니다. json 파일이 깃헙 레포지토리 root에 위치하고 있나요?
파이어베이스 링크 https://console.firebase.google.com/ 로그인 - Google 계정 하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인 accounts.google.com 호스팅할 프로젝트를 클릭합니다. 왼쪽 메뉴에 hosting 탭을 누릅니다. 시작하기 클릭! 명령에 따라 Firebase CLI를 설치합니다. 저는 npm 말고 yarn을 사용하므로 아래와 같이 설치한 다음, 다음을 누릅니다. $ yarn add global firebase-tools 아래와 같이 입력합니다. $ yarn firebase login 빨간박스이 보이시면 y를 입력하고 enter 그 다음 주황박스처럼 링크가 보이시면, ctrl+링크를 클릭하시고 계정에 액세스 하시면 됩니다. 그..
파파고 번역 저처럼 분명 영포자 있을거라 생각해요 :-) ㅋㅋㅋ 개발문서를 읽을 때마다 파파고 도움을 많이 받았는데요! google 번역보다 더 한국어스럽게? 번역해줘서 애용하고있답니다 아래 사진처럼 핀으로 고정하면 편하게 사용할 수 있어요! Dark Reader 부엉이들 소환! 밤에 컴퓨터를 볼때마다 눈부셔서 화면 밝기를 낮춰본 경험 있다?! 그럼 이 Dark Reader을 사용해보시길 바래요~ 아래처럼 웹페이지를 다크모드로 변경시켜준답니다 :-) 완전 애정하는 익스텐션이랍니다! 💗 단축키로 라이트모드/다크모드를 조정할 수 있으니, 꼭 꼭 설정해주세요 참고로 저는 Ctrl+L로 모드를 조정한답니다 :-) JSON Viewer 설마 아직까지도 아래사진처럼 밋밋한 JSON파일을 보고계..
이번엔 제가 사용하고 있는 익스텐션을 소개할까 해요! VSC(Visual Studio code)의 확장프로그램을 소개합니다! 이름이 같은 익스텐션도 있으니 꼭 개발자 이름을 확인하여 설치해야해요! VSC Community Material Theme VSC 테마를 위한 익스텐션인데요! 가독성을 위해 많은 분들이 사용하고 있어요! 설정법은 이미 인터넷에 많이 나와있으므로, 생략할게요! Sublime Material Theme 제가 현재 사용하고 있는 테마인데요! Dark와 Light 모드 중 Dark를 사용하고 있어요! Material Icon Theme 말 그대로 아이콘 테마인데요! 아래의 사진처럼 다양한 아이콘을 얻을 수 있답니다. 이 밖에 폴더 아이콘도 있으니 천천히 둘러보세요 :-)..
3-10 DB설치 확인 몽고 DB는 그래픽인터페이스(GUI)를 제공하지 않습니다. GUI가 없어도 컴퓨터에서 실행되는 프로그램들은 무척 많습니다! 따라서, 몽고 DB가 잘 설치되었는지 확인을 하려면? 1. 웹에 localhost:27017을 입력하기 위와 같은 문구가 나온다면, 설치가 잘 된 것입니다. 2. robo 3T DB 내부를 살펴보기 위한 프로그램입니다. 설치하기 https://robomongo.org/download Robomongo Robo 3T: the hobbyist GUI Robo 3T 1.4 brings support for MongoDB 4.2, and a mongo shell upgrade from 4.0 to 4.2, with the ability to manually speci..
제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리입니다. 출처 : www.samsungsds.com/kr/insights/jQuery.html 제이쿼리를 사용하면 안되는 이유에 대해 주변에 많은 이야기를 들었었고, 물론 이 후에 개인적으로 사용할 일은 없겠으나, 클론강의를 들으면서 제이쿼리를 접하게 되었다! 자바스크립트를 잘 사용하지 못하는 저에게는 완전 신기했어요! 😆 스크립트없이, 내가 원하는 기능을 구현하는 라이버리를 잘 찾아서 적용하기만 하면 끝이라니.....!! 물론 용량 문제...는... 큼큼 그래도 나름 적용기를 올리고자 합니다!! 일단, 제이쿼리 cdn이 필요합니다! npm insall을 이용해도 되지만.. cdn이라는 정말 좋은 소..
