분류 전체보기 76

[웹/API] View Transition API

View Transitions API 여러 DOM 상태 간에 애니메이션 전환을 쉽게 생성하는 동시에 DOM 콘텐츠를 단일 단계로 업데이트할 수 있는 메커니즘 제공 모바일 앱을 사용하면서 화면 이동 전환이나 요소 애니메이션(슬라이드, 페이드 인-아웃 효과, 확대 등)을 흔히 볼 수있다. 이러한 애니메이션은 만들 수 있으나 그게 마냥 쉬운 것만은 아니다. SPA에서 이 같은 상태 간 전환에 CSS와 JS로 다음 과정을 수행한다. 이전 콘텐츠를 보여주면서 새 콘텐츠를 렌더링 → 애니메이션 발생 하며 전환 → 전환 완료 후 이전 콘텐츠 제거 위 과정에서 DOM에 이전 콘텐츠와 새 콘텐츠가 모두 표시되어 발생하는 문제가 있을 수 있는데, 이러한 DOM 변경 및 전환 애니메이션을 쉽게 처리하고자 등장한게 View ..

TIL/웹+앱 2023.03.25

[서버] XShell을 이용한 EC2 접속

1. XShell 무료판 설치 https://www.netsarang.com/ko/free-for-home-school/ 무료 라이선스 - NetSarang Website 무료 라이선스 무료 사용자의 최고의 선택 ㈜넷사랑컴퓨터는 강력한 SSH와 SFTP/FTP 클라이언트 프로그램을 지난 10년간 무료로 배포해온 것에 대해 자부심을 느낍니다. 저희 무료 라이선스는 단지 www.netsarang.com 정보 입력하면 메일로 다운로드 링크 설치 파일을 통해 설치 2. 파일 > 새로 만들기 3. 연결 메뉴 - 일반 탭 이름 : 임의의 이름 세팅 프로토콜 : SSH 호스트 : 도메인 주소(ex. mysite.com) 포트번호 : 22 4. 연결 > 사용자 인증 메뉴 Password 체크 해제 Public Key ..

TIL/인프라 2023.03.16

[인프라/웹서버] HTTPS 설정을 위한 SSL 인증서 설치

1. Certbot 저장소 설정 및 설치 sudo apt-get update sudo apt-get install software-properties-common sudo add-apt-repository universe sudo add-apt-repository ppa:certbot/certbot sudo apt-get update sudo apt-get install certbot python3-certbot-nginx 2. SSL 인증서 획득 sudo certbot --nginx -d mysite.com - mysite.com 은 인증서를 적용할 도메인을 적어주면 된다. 3. 인증서 자동 갱신 sudo certbot renew --dry-run

TIL/인프라 2023.03.15

[웹/Vue.js/WebRTC] OpenVidu 설치부터 테스트까지

⚠️이 내용은 2021년도 프로젝트를 진행하며 작성했던 문서로 최신 버전과 다를 수 있습니다. 목차 0. 환경설정 1. 배포 1.1. 권장 설치 1.2. OpenVidu-Server Custom Dockerizing 1.3. 실행 2. Nginx 및 방화벽 설정 3. 실행 후 통신 확인 0. 환경 설정 본 문서는 환경 설정의 설치에 대해 깊게 다루지 않습니다. AWS EC2 Java Version : open-jdk-11 (openvidu 2.20.0 버전 사용 시 jdk 11 필요) maven : 3.6.3 docker docker-compose 도메인 구성 : HTTPS 를 사용하여 배포. Let's Encrypt를 사용하여 SSL 인증서 생성 서버 포트 구성 (공식문서 권장) ufw allow : ..

TIL/웹+앱 2023.03.15

[회사일상] 회사툰#5. 그들의 매드맥스

본격 심심할때만 찾아 오는 회사 일상썰툰 「 개미는 뚠뚠 」 오늘도 뚠뚠.. 열심히 일을.. 하아... 어쩌다보니 내 블로그를 사내 팀원분들이 모두 알게 되면서 회사툰은 언제 올라오냐, 빨리 그려라 하는 응원이 있었으나... 심심하지 않던 나는 소재도 딱히 없었고 차일피일 미루던 차에 최근 재밌는 일이 있어 그려보았다. 이번편도 그러하듯 동기들과의 일화다. 레츠고 누구보다 카러플에 진심인 사람 우리야 우리~ 클럽 만들어서 이벤트있으면 공지도 하고 쏘메에 멘티까지 컨텐츠를 아주 알차게 즐기고 있다. 신규 캐릭터와 아이템카, 펫 구매는 필수라구 ☆⌒(*^-゜)v 이 툰을 보고 있는 당신. 동기들과 아이스브레이킹이 필요하다? 회사 사람들과 즐거운 취미, 색다른 점심시간을 보내고 싶다? 그렇담 모바일 게임을 추..

[해결] MSSQL/mybatis Incorrect syntax near '@P5'.

IDE : Intellij Framework : Spring Boot Build : Gradle DB : MSSQL JDBC : mybatis Error : Incorrect syntax near '@P5'. Solve : 위 에러 문구를 구글에 검색했을 때, Stack Overflow와 다른 블로그에서 여러 해결방안을 내왔다. 일단 나의 문제는 매퍼의 SQL INSERT 쿼리문에서 컬럼 사이 ',' 를 쓰지 않아 생긴 문제였다. '@P5' 라는 키워드가 내 쿼리엔 없는데 대체 무슨일이지? 데이터를 잘못 받았나 싶었다. 이 뜻은 파라미터(P) 중 5 번째를 의미한다. 다른 사람들은 '@P0' 에서 오류가 나던데 그 경우는 괄호가 빠져 있다거나, 한글인코딩, `SQLServer20xxDialect` 등 의..

TIL/에러 2022.12.09

[회사일상] 회사툰#4. 그 동기들의 화목함이란(feat.소형견 싸움)

본격 심심할때만 찾아 오는 회사 일상썰툰 「 개미는 뚠뚠 」 오늘도 뚠뚠.. 열심히 일을.. 하아... 현생에 치여 주말이면 죽은 사람처럼 자는 바람에 많은 사건이 있었음에도 그리지 못했던 회사툰.. 하지만 이것만큼은 그리고 싶어서 올린다. 1화에서 다뤘던 신입동기 양프로와의 사건을 다뤄본다. 레츠고 +) 그때의 메신저 상황 이게 어떻게 회사 사람이냐 의문이 든다면 나도 동의한다. 거의 뭐 3년이상 알고지낸 친구느낌 ^ㅅ^ 서로가 첫 회사고 첫 입사동기, 같은 또래다보니 허울없이 편하고 친한사이가 된 게 아닐까

[회사일상] 회사툰#3. IT개발자의 창 분할 유형

본격 심심할때만 찾아 오는 회사 일상썰툰 「 개미는 뚠뚠 」 오늘도 뚠뚠.. 열심히 일을.. 하아... 평소와 다름없던 날, 시니어 분께 코드 질문을 했다가 떠 있는 창들을 보고 화들짝 놀라시더랬지. 문득 다른 개발자들은 창 분할을 어떻게 쓰고 있는지 궁금해서 이번에 개발자들의 창 분할에 대해 고찰해보았다. 레츠고 플러그인이나 테마 색상에 대해서도 다뤄보고 싶지만, 그건 다음에 알아보도록 한다. IDE는 제보받은 인텔리제이와 STS 를 바탕으로 했다. 실상 여기서 DB 도구 사이드탭도 열지 않았음 탭을 하나만 띄워놓기도 한다. 디렉토리는 따로 탭을 떼서 다른 모니터에 띄워놓기도 한다. (대부분의 개발자는 듀얼모니터 이상 사용.) 프론트딴을 따로 나누지 않는 (우리)회사의 경우, JSP를 같은 프레임워크에..

[맛집추천] 노량진 두끼 마라탕

윤프로의 오늘의 맛집 추천 오늘은 이프로님과 함께 노량진 두끼 를 가기로 했다 처음엔 이번주 금요일에 가기로 했지만 월요일 내가 연차를 쓴다고 하니, 그렇담 월요일에 노량진으로 가겠다며 노량진에 두끼 가자고 퇴근 한 이프로님이 와주셨다..!! 그 친절에 감격을 받은 나.. 가만히 있을 수 없지.. 사실 부끄러워서 빠르게 펼쳤다 닫음 회사 메신저를 보니 월요일이긴 해도 꽤나 일이 많았던 것 같은데 알 유.. 오케이? ㅋㅋㅋㅋ이런 저런 이야기를 하며 두끼에 도착 오늘의 두끼, 주된 목적은 바로바로바로~~ 이번 10월까지만 한다는 마라탕을 먹기 위해~~~~ 가격은 성인 기준 9,900원! 두끼 노량진점은 4인석 존과 2인석 존이 나뉘어있었다. 2인석 존에서 혼밥도 괜찮을 듯 우리는 2명이었지만 4인석으로 향했..