분류 전체보기 (61) 썸네일형 리스트형 젠킨스를 활용한 리액트 CI/CD 자동 배포 구축기 저번에 리액트 프로젝트를 진행하면서 CI/CD 구축의 중요성을 다시금 체감하게 되었다.매번 운영 시마다 로컬에서 배포용 폴더를 만들고, 서버에 직접 올리는 작업을 반복하다 보니 시간도 많이 들고, 무엇보다도 생산적이지 않았다. 그래서 이번 프로젝트에서는 dev 브랜치에 push 하면 자동으로 서버에 배포되는 환경을 구축해보고자 했다.그리고 그 역할을 해줄 도구로 젠킨스(Jenkins)를 사용했다.1. GitHub Webhook 설정Webhook이란, 특정 이벤트가 발생했을 때 서버에 HTTP POST로 알려주는 방식이다. 즉, GitHub에서 특정 브랜치에 push가 발생하면 젠킨스가 이를 감지하여 빌드를 실행하도록 연결하는 것이다. 2. 젠킨스 설정소스 코드 관리깃 레포지토리 URL과 인증 정보 입력빌.. JPA 양방향 연관관계에서 StackOverflowError 발생한 이유와 해결 Team(팀) 테이블과 Department(부서) 테이블을 양방향 연관관계로 맺고, 이를 조회하거나 디버깅하려고 할 때 다음과 같은 에러가 발생했다.Method threw 'java.lang.StackOverflowError' exception. Cannot evaluate com.example.Team.toString()원인JPA에서 Team ↔ Department 관계를 @OneToMany, @ManyToOne으로 양방향으로 설정하면 다음과 같은 문제가 발생할 수 있다.Team → Department : @ManyToOneDepartment → List : @OneToMany이때 toString()을 호출하면 Team 안의 Department를 출력하고,Department는 다시 Team 리스트를 출.. 🎓 [고3 졸업 전시회] 오즈의 마법사 게임 개발 프로젝트 회고 2019년 6월, 고등학교 졸업 전시회를 준비하면서 친구와 함께 2인 팀을 꾸려 게임 개발 프로젝트를 진행하게 되었다.우리의 전시 주제는 "오즈의 마법사"를 기반으로 한 인터랙티브 미니게임이었다. 기획 의도스토리는 원작을 기반으로 하되, **"게임적 해석"**을 더해 다음과 같이 구성했다:주인공 오즈가 모험을 하며사자, 깡통 로봇, 허수아비를 차례로 만나고각 캐릭터의 상징적인 요소를 미니게임 클리어를 통해 얻는 구조 캐릭터 게임 캐릭터로 얻는 아이템사자용기깡통사랑할 수 있는 마음 (심장)허수아비지혜 (뇌)즉, 단순한 진행형 스토리가 아닌, 사용자의 행동(게임 성공)으로 다음 단계가 해금되도록 구성한 선형+도전형 스토리텔링 구조라고 볼 수 있다. 구현 기능 요약Unity를 활용한 2D / 3D 미니게임 .. JPA - DB 테이블 자동 생성과 양방향 연관관계 설정 기본 구조 설명JPA에서는 DB 테이블을 애플리케이션이 실행될 때 자동으로 생성해주는 기능이 있다. 예를 들어, User와 Team 두 엔티티가 있다고 가정하자.User: 사용자Team: 팀관계는 다음과 같다:하나의 팀(Team)에는 여러 명의 유저(User)가 속할 수 있다.한 유저는 하나의 팀에만 속할 수 있다.즉, JPA의 연관관계로 표현하면 다음과 같다:// User.java@ManyToOneprivate Team team;// Team.java@OneToMany(mappedBy = "team")private List users;application.yml 설정자동 테이블 생성을 위해 application.yml에 아래와 같이 설정을 추가한다.spring: jpa: generate-ddl:.. Nginx를 활용해 리액트 프로젝트 배포하기 (멀티 포트 설정) 이번엔 AWS EC2(Linux) 환경에서 Nginx를 사용해 리액트 앱을 배포해봤다. 이미 하나의 서비스가 운영 중인 상태에서, 추가로 하나 더 올리는 작업이 필요했다.즉, 같은 Nginx 안에서 여러 포트를 이용해 리액트 앱을 각각 운영하는 형태다.1. Nginx 기본 구조 확인EC2 인스턴스에서는 Nginx가 기본적으로 /etc/nginx 경로에 설치되어 있다. 설정 파일은 대부분 이 디렉토리 내에서 관리된다.보통 Nginx의 설정은 nginx.conf 파일에서 이뤄지는데, 여러 서비스를 관리해야 하니 설정을 외부 파일로 분리해서 include 시키는 방식을 사용했다. 유지보수하기에도 좋다.2. 설정 디렉토리 만들기cd /etc/nginxmkdir sites-enabledcd sites-enable.. Jenkins를 이용한 서버 배포 MSA구조를 도입하게 되면서, 여러 서버들을 간편하고 쉽게 배포하기 위해 이번엔 AWS의 code pipeline 대신 jenkins의 빌드를 사용해 배포했다. 배포하고 싶은 api 서버는 - gradle - spring boot 로 구성되어있다. 즉 boot 프로젝트의 jar 파일을 ec2 리눅스 서버에다가 풀어 실행하려 한다. 1. Jenkins 관리 2. 플러그인 관리 - Github - Github Branch Source - Gradle Plugin - GitHub Integration Plugin 를 설치해주었다. 이제 서버를 배포하기 위한 새로운 아이템을 만들어 보도록 하겠다. 왼쪽 하단에 위치한 새로운 item으로 들어간다. 지정해주고 싶은 서버의 이름을 입력하고, FreeStyle pro.. jQuery로 특정 주차 날짜 가져오기 (FullCalendar 기반) 가끔 이런 경우가 있죠. 예를 들어서, 1주차, 3주차, 4주차, 5주차의 날짜만 뽑아오고 싶을 때가 있다.그럴 땐 $(".fc-week") 기준으로 DOM을 파고들어가면 된다.(이 예제는 FullCalendar에서 .fc-week DOM 구조를 기준으로 한 설명)핵심 개념.fc-week : 한 주 단위의 row.fc-bg td.fc-day : 요일별 날짜 셀.fc-other-month : 현재 달이 아닌 날짜 셀data-date : 날짜 정보가 담긴 속성구현 코드// 가져오고 싶은 주차const wkArr = [1, 3, 4, 5];const dates = [];for (let j = 0; j 동작 방식 설명wkArr 배열을 반복하며 주차(index)를 선택한다.각 주차 내에서 td.fc-day를 7번.. mybatis configuration location 설정 - mybatis sql을 작성하다가, 에 vo로 받아오기 위해, 설정을 해주지 않는 이상 우리는 vo가 있는 위치를 일일이 표기하기 어려워 찾아보았다. mybatis-config 설정파일을 해주기 위해서는, sessionFactory.setConfigLocation(resolver.getResource("mybatis config 경로 " ));를 추가해주면 된다. @Bean(name="sqlSessionFactory") public SqlSessionFactory sqlSessionFactory(@Qualifier("testServiceDataSource") DataSource dataSource) throws Exception { final SqlSessionFactoryBean sessionFac.. 이전 1 ··· 3 4 5 6 7 8 다음
