본문 바로가기

전체 글72

netlify에서 react소스 배포해보기 + 커스텀 도메인 연결 가비아에서 세일하는 도메인을 1년에 550원에 샀다 유후~~ 새로 산 도메인에 react 프로젝트를 배포해보려고 한다. 이것저것 알아보는 중에 지인으로부터 좋은 곳을 추천받았다. 바로 netlify였다. 이번 포스팅에서는 Netlify로 React앱을 배포, 그리고 github와도 연동하고 구입한 커스텀 도메인과 https 연동까지 해보도록 하겠다. 목차 Netlify 회원가입 Github 저장소 프로젝트 연동 Deploy settings 사이트 배포 완성 커스텀 도메인 연결 1. Netlify 회원가입 netlify 홈페이지로 접속해 회원가입을 진행하자 www.netlify.com Netlify: Develop & deploy the best web experiences in record time A .. 2021. 7. 23.
토이 프로젝트 [1] - 도메인 구입하기 목표는 장황한 토이프로젝트의 첫 시작점 뭔가 순서가 이상하긴 하지마 도메인부터 구입하기로 했다.. 먼저 가비아로 가봤다. 가비아에서는 오늘의 도메인이라고 할인을 하고 있었다. ( 나이스.. ) 엄청 저렴하게 판매중... ( 단 1년만 저 가격이더라.. ) 아기의 태명이 룰루라서 뭔가 연관되게 도메인 주소를 정하고 싶었다. 아 역시 뭔가 있어보이는거는 비싸구나.. 라고 생각해서 조금 다르게 검색 해봤다. 그렇게 해서 정한 도메인 주소: lululife.shop 이다. ㅋㅋㅋ 할인가라서 1년에 500원에 이용할 수 있었다. 바로 냉큼 결제해버림.. ㅋㅋ 부가세 포함으로 550원에 구매할 수 있었다. 이 구매한 도메인을 front 소스가 있는 netlify에다가 연결을 해야한다고 한다. 이 부분도 차차 진행해.. 2021. 7. 22.
토이 프로젝트 시작!! 오늘부터 토이프로젝트를 시작 하기로 마음 먹었다. 왜냐 공부를 너무 안했기도 하고 곧 태어날 우리 룰루를 위해서 일상을 기록할 수 있는 작은 사이트를 만들어 보기로 했다. 앞으로의 로드맵은 이렇다. 1. 도메인 구입 2. front 구성 react로 구성해볼 생각이다. 3. backend 구성 spring boot로 진행할 것이다. ( rest api ) 작심3일일 되지 않게 노력을 해야지... 혼자 프론트 백 둘다 구성하는거라 언제 완성될지는 모르지만 꾸준히 해나가야 겠다... 지인에게 정보들 들어들어 대충 서버를 어케 구성할지는 정했다. front 쪽 소스는 netlify로 연결하고 ( 참고 : https://goddino.tistory.com/190 ) back 쪽 소스는 heroku로 할 생각이다.. 2021. 7. 22.
객체 지향 설계의 5가지 원칙 ( SOLID ) SOLID 란?? 클린코드로 유명한 로버트 마틴이 좋은 객체 지향 설계의 5가지 원칙을 정리한 것이다. SRP ( single responsibility principle ) 단일 책임원칙 OCP ( Open/closed principle ) 개방-폐쇄 원칙 LSP ( Liskov substitution principle ) 리스코프 치환 원칙 ISP ( Interface segregation principle ) 인터페이스 분리 원칙 DIP ( Dependency inversion principle ) 의존관계 역전 원칙 SRP 단일 책임 원칙 한 클래스는 하나의 책임만 가진다. 하나의 책임이라는 것은 모호하다. 클 수 있고, 작을 수 있다. 문맥과 상황에 따라 다르다. 중요한 기준은 변경이다. 변경이.. 2021. 7. 22.
Docker, docker compose를 이용한 Spring boot, Mysql 배포 환경 구성해보기 docker와 docker compose에 대한 공부를 하면서 까먹지 않게 블로그로 기록합니다. 이번 포스팅에서는 Spring boot로 만든 프로젝트를 Mysql과 연동하고, docker-compose로 작성해 배포하는 과정을 기록해보도록 하겠습니다. 목차 Spring boot Application 생성 docker-compose.yml 작성 소스 빌드 후 실행 1. Spring boot Application 생성 ( test용 이므로 간단한 rest controller만 만듦 ) https://start.spring.io/ 를 사용해 스프링 프로젝트 생성 - spring web - mysql driver - spring data jpa - lombok ( lombok을 사용하기 위해 플러그인을 설치 .. 2021. 6. 28.
Trello 대안 오픈소스 프로젝트 관리 도구 정리 RestyaPlatform 깃 : https://github.com/RestyaPlatform/board version : 현재 2020.08.27 마지막 release 됨 ( v0.6.9 ) demo 사용 : https://restya.com/board/demo 필수 소프트웨어 : nginx, php-fpm (mbstring 포함), PostgreSQL, ElasticSearch, Grunt 대략적인 기능 : 메일 보내기, ical 연동, Trello 데이터 연동 등등... wekan 홈페이지 : https://wekan.github.io/ 깃 : https://github.com/wekan/wekan version : 현재 2021.06.14 마지막 release ( v.5.35 ) weak revi.. 2021. 6. 25.
Nginx React Springboot 연동 목차 Spring boot ( gradle )로 Rest api 생성 React 설치 React proxy 설정 및 api 호출 React build 파일로 nginx 연동 1. Spring boot 로 Rest api 생성 https://start.spring.io/ 를 사용해 스프링 프로젝트 생성 OS Window port 8080 1-1. 의존성 설정 1-2. HelloController.java 작성 ( 간단한 Rest Controller를 작성합니다. ) 작업 후 테스트 결과 잘 작동되는 모습입니다. 2. React 설치 react는 vm을 이용해 설치 하였습니다. 테스트 환경 OS Ubuntu18.04 node v14.17.1 npm 6.14.13 2-1. 아래 명령어를 통해 최신 버전의 no.. 2021. 6. 23.
javascript, jquery 툴팁 ( tooltip ) 보여주기 캘린더 프로젝트 개선 중 캘린더 제목에 대해 이름이 너무 길 경우 ... 으로 뒷 이름이 잘리는 현상이 있었다. 마우스로 드래그 해서 저 칸을 넓혀서 봐도 되지만 구글이나 네이버 캘린더 경우 마우스 호버 시 캘린더 이름이 툴팁으로 나오게끔 처리가 되어있었으므로 나도 한번 적용해 보자 했다. 구현 방법은 간단하다 태그 속성에 title, data-tootip 속성을 집어넣어 주고 스크립트단에서 실행시켜주기만 하면 끝이다. [ html ] [ javascript ] 생각보다 간단한 모습~~ 실제 소스에도 적용시켜 확인해본 모습 크롬, IE 둘 다 잘 나온다. 2021. 5. 31.
우분투 18.04 도커 설치 우분투 18.04 도커 설치 Community Edition (CE) : 개발자나 작은 팀들에게 이상적인 버전이며 무료로 사용할 수 있습니다. roseline124.github.io/kuberdocker/2019/07/17/docker-study02.html 유혹하는 개발하기 Python, Django, 데이터 분석, 알고리즘 등 매일 공부한 내용을 기록합니다. roseline124.github.io subicura.com/2017/01/19/docker-guide-for-beginners-2.html 초보를 위한 도커 안내서 - 설치하고 컨테이너 실행하기 초보를 위한 도커 안내서 2번째 글입니다. 도커의 기본적인 내용을 이야기 했던 첫번째 글에 이어 실제로 도커를 설치하고 컨테이너를 실행하면서 도커 명.. 2021. 5. 12.
jqery url형식 문자열 링크 자동 생성 ( autolink.js ) 회사에서 캘린더 관련 작업 중 url 형식으로 분문이 들어오면 자동 태그 걸 수 있도록 기능 개발 요청이 있었다. 기존 소스에서 autolink.js 를 사용하고 있었는데 걸리는 부분이 있고 안걸리는 부분이 있어서 정규식 및 몇몇 부분만 수정해주니 잘 되었다. autolink.js 사용법은 이분 블로그에 잘 나와있으니 참고하시면 될 것 같다. https://infotake.tistory.com/93 [Javascript] 자바스크립트 게시물 링크 자동 생성하기 - autolink.js 안녕하세요 촌놈입니다 ^^ 오늘은 게시물에서 링크부분만 자동으로 A 태그를 삽입해 주는 라이브러리 소개 하고자합니다! 최근에 고객으로 부터 요즘 게시판에는 게시물내에 링크가 있으면 자 infotake.tistory.com .. 2021. 5. 10.

티스토리툴바