전체 글
IT 및 일상을 공유합니다.
집에서 홈서버 구축해보자 - 1
개요 웹 개발자로 회사업무와 개인 프로젝트를 진행하면서 여러 호스팅 업체의 서버와 아마존 프리티어, 구글 클라우드, 네이버 클라우드 ... 등등 사용하면서 무료버전을 다 사용하면.. 내돈 써서 해야되고... (당연하지만..) github io 나 netlify등 뭔가 무료로 배포할수 있지만..!! 나만의 서버의 배포를 하고싶단 생각을 했습니다.🤔 홈서버 구축을 위해서는 다양하게 공부 해야되는 것과 홈서버다 보니 우리집 네트워크 보안도 신경 써야합니다. 그럼에도 불구하고.. 공부하며, 자신의 학습과 개인 작업물들을 배포하고 관리하기위해🥳 집에서 홈서버 구축을 진행해보도록 하겠습니다. 하드웨어 집에서 홈서버를 구축하는데 어떠한 장비가 필요하냐? (나도 잘모르지만.. 적당한거?)😐 게이밍용이나 영상작업용 같은..
[Node.js] Express 환경 설정 및 로그 설정하기(winston,morgan)
환경변수 config 설정 애플리케이션이 실행될 때 특정 값을 넘길수 있는 변수 설정을 하기 위해 ※env 폴더안에 개발, 배포 파일을 만들어줍니다. PORT = 5000 //서버 포트 LOG_LEVEL = silly //winston(로그기록) 레벨 단위 MYSQL_HOST = localhost // mysql DB HOST MYSQL_USER = root // mysql USER MYSQL_PASSWORD = admin // mysql password MYSQL_DATABASE = testDB // mysql dataBase 위 내용은 각자 설정에 따라 다릅니다 본인의 설정에 맞게 적어줍니다. env 환경변수 설정이 완료되었다면, config 폴더에 index.js 파일을 만들어줍니다. ES6 기준으..
[Node.js] Express 시작하기
1. Express 설치법 express-generator express --force --view pug npm install express -save 의 명령어로 express가 설치되어있다는 전제로 위의 명령어를 입력하면 express 프로젝트 기본 형식을 만들어줍니다. (폴더 만들고 셋팅하기 귀찮으니... 위에 명령어로 한 번에 만들어주자) 2. Express 폴더 구조 위에 이미지처럼 폴더 구성하여 진행할 예정입니다. ├─api /*Rest API 관련 폴더*/ │ └─routes /*라우터 폴더*/ │ └─middleware /*미들웨어 폴더*/ ├─config /*env 관련 및 설정 폴더*/ ├─controller /*DB모델에 대한 컨트롤러 폴더 (ex 회원가입..)*/ ├─env /*e..
[Nuxt] 카카오 로그인 Nuxt 설정 및 카카오 정보 발급 - ②(END)
Nuxt 카카오 로그인 설정 및 카카오 정보 발급 Nuxt 프로젝트를 하나 만들어주자. npx create-nuxt-app create-nuxt-app v3.4.0 ✨ Generating Nuxt.js project in test # 프로젝트명 입력 ? Project name: (test) # 프로그래밍 언어 선택 ? Programming language: (Use arrow keys) > JavaScript TypeScript # 패키지 매니저 선택 ? Package manager: (Use arrow keys) > Yarn Npm # UI 프레임워크 선택 ? UI framework: (Use arrow keys) > None Ant Design Vue Bootstrap Vue Buefy Bulma C..
[Nuxt] 카카오 로그인 OAuth 신청 및 설정 - ①
Nuxt + express로 카카오로그인 자료가 많이 없어 개발하면서 내용 정리한다. ※ 추후에 다시 설명하지만 현재 설명하는 방식은 Nuxt에서 전부 처리하고 서버로 필요한 정보를 보내는 방식이다. 1. 인가코드를 받기 2. Nuxt에서 인가코드로 엑세스토큰 받기 3. 엑세스 토큰으로 유저정보 조회하기 4. 조회된 유저정보에서 필요한 정보 (ex 닉네임,이메일,id... 등) 서버로 보내어 저장하기 카카오 로그인 OAuth 신청 카카오 개발자 계정과 애플리케이션 등록이 필요하다. https://developers.kakao.com 에 접속하여 계정과 애플리케이션을 생성해보자. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구..
50번 이상 탈락 후, 취업 이야기 (feat.FrondEnd Dev)
후.. 드디어 백수 탈출이다. 6개월 가까이 프론트엔드 개발자 취업준비에 대해서 느꼈던 점들을 정리해보고자 한다. 서류... 서류합격이 뭐냐..? 지난 6개월동안 NodeJS 백엔드 파트부분부터 시작하여 React, Vue, Next, Nuxt 다양하게 경험해보려고 노력했던것같다. C# WPF 위주로 마냥 껍데기만 만들었던 그때와 다르게 웹 분야를 공부하면 할 수록 지식적으로 많이 부족하다 느꼈다. 그래서 많이 찾아봤다. 그래야 취업이든 뭐든 할수있을꺼같았다. ReactJS 프론트 바탕으로 NodeJS 서버또한 간단하게 구현하여 프로젝트를 만들었다. 초반에는 열정으로 밤도새고, 하루에 약 14시간씩 공부하며 지냈던거같다. 진짜 잠만잤다 공부했다 했었다... 이전 경력이 있다는 이유로, 공부법이라던가 기초..
젠킨스(Jenkins) 설치
🥳젠킨스(Jenkins) 설치 방법 로컬 환경안에 jenkins를 설치하는것보다. docker container를 사용하는것이 관리하기 편할 것이라고 생각됨. docker-compose 를 사용하며 , image는 jenkins/jenkins:lts 를 사용 docker-compose 내용 구성 로컬환경 적당한 곳에 mkdir jenkins 폴더 생성 cd jenkins -> code . (비주얼코드실행) docker-compose.yml 파일생성 version: '3' services: jenkins: image: jenkins/jenkins:lts container_name: jenkins_cicd restart: always volumes: - /var/run/docker.sock:/var/run/..
Docker Desktop for mac 설치방법
Docker Desktop for mac 설치하기 일반적으로 로컬 환경에서 docker를 편리하게 설치하고 실행하기위해 사용한다. 1. 다운로드 및 설치 Docker Desktop - Docker DockerCon 2022 Don’t miss it – register now for May 10th! DockerCon is a free, immersive online experience complete with product demos, breakout learning tracks, panel discussions, hacks & tips, deep dive technical sessions from Docker experts, the dev www.docker.com dmg 파일을 다운로드하여 실행합니다..
React 시작하기
React란? 웹 프레임워크로, 자바스크립트 라이브러리의 하나로써 사용자 인터페이스를 만들기 위해 사용된다. 즉 현재 많이 활용되고있는 웹.앱의 View를 개발할 수 있도록 하는 라이브러리이다. React의 특징? 1. Data Flow 2. Component 기반 구조 3. Virtual Dom 4. Props and State 5. JSX - Data Flow React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다. 단방향은 이처럼 관리하기 쉬운 특징뿐만 아니라 버추얼 돔(Virtual DOM)과 궁합이 잘 맞다. 뷰를 통째로 바꾸어주는 역할을 하기 때문에 단방향 데이터 방식은 DOM을 갱신할 때 큰 장점이 있다. - Component 구조 React는 UI(View)를 여러 ..
[일상] 코로나 확진
후... 일단 너무아팠다. 2월27일... 주말에 같이있던 분이 코로나 확진이 나왔다고한다.. 백신 3차까지맞았는데;;; 나는 괜찮겠지?? 편의점에서 신속키트를 구매하여 사용해봤다. 다행이 음성이 나와서,, 마음편히 고기르 ㄹ..... 엥?? 다급한전화가왔다 여자친구도 확진? " 후....그러면 나도 확진이겠다.." 여자친구랑 같이 이겨내리라! 3월1일 PCR 검사 코가 너무아팠다. 맛있는거 왕창! 너무 간만에.. 뭔가 간있고 빨갛고 맛있는거 먹었다.(다이어트중!!!..!!!) 3월2일 확진 ㅋ...ㅋ.. 3월 4일 한 2,3,4일 까지 아팠다. 그래도 약을 한끼마다 8개씩 쳐묵쳐묵! 금방괜찮아져서 다행!! 3월7일 24시까지 자가격리다. 나름그래도 공부하다보면 시간빨리간다. 언넝... 나가고싶다..
Vue.js 시작하기
Vue.js가 무엇?? 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다. 짧게 말해서, 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크이다. vue 라는 프레임워크를 선택한 이유는 여타 다른 프론트엔드 프레임워크보다 배우기 쉽다는 장점때문이다. (차근차근 쉬운것부터 쭉 나아가자) 일단 공식 홈페이지를 보면 http://https://v3.ko.vuejs.org/ Vue.js v3.ko.vuejs.org Vue CLI 란 Vue CLI는 Vue 프로젝트를 빠르게 구성하고, 빌드, 디플로이 할 수 있게 도와주는 도구입니다. CLI는 Command Line Interface의 약자로 터미널에 명령어를 입력하여 컴퓨터와 상호 작용하는 방식을 의미합니다. 설치방법을통해 설치법을 진행하면된다. # ..
[일상] 다이어트 (02.07~02.24) 17일차
2월 03일 건강검진... 이야.. 끝났다. 일단 이전 회사 다녔을때부터 몸이 조금씩 안좋아지는건 느꼈지만 주짓수나 식단을 조금 줄여보면서 유지했다고 생각했다. 결론은 아니였고, 너무많이먹었고, 큰일났고, 그래도 이제 회사 퇴사해서 다행이다. 이제 공부도하고 몸관리하자 현재 몸무게: 115KG 운동많이 물많이 탄수화물 최소로, 단백질 적당, 지방 많이? 키토제닉 식단으로 가자 2월 24일 일단 최대한 꾸준히 운동가려고 노력했다... (진짜??) 식단 최소한으로 줄였다 1주일정도 NO 탄수화물 (진짜 힘들었음) 좀 익숙해지고 키토제닉 식단으로 야채와 고기, 지방 위주의 음식으로 먹었다. (느끼..) 부작용으로 머리 아프기도했고, 몸에 힘도없었다. (이걸 이겨내야해!) 이기자!!! 현재 몸무게: 104KG ..