윤프로 | 코드가 개발새발해

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

콘솔에서 실행했을 떄는 문제가 없었는데 서버에서 실행하니 매퍼쪽에서 자꾸 에러를 던졌다. 문자열을 비교하는 동적쿼리 조건문 에서 문제가 발생했는데, 'N' 이라는 문자열에 대해 .toString() 을 해주지 않아 발생한 것이다. .toString() 해주니 잘 돌아갔다!

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 ..

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

⚠️이 내용은 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 : ..

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` 등 의..

DOM 문서 객체 모델, HTML 문서 객체 구조 문서(웹 페이지)의 구조화된 표현을 제공. nodes(elements)와 objects(prpoerty, method, event)로 표현하며 tree 구조를 가짐 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. ⇒ API(web or XML page) = DOM + JS(scripting language) 프로그래밍 언어와 독립적으로 디자인 되었음. → DOM 의 구현은 어떠한 언어에서도 가능. 표준 W3C(World Wide Web Consortium) DOM Core DOM - 모든 문서 유형에 대한 표준 모델 XML DOM - XML 문서의 표..

이번 블로그 꾸미기는 게시글 댓글이나 방명록의 글을 메신저 말풍선처럼 대화하는 모습으로 꾸미기 입니다. 여기서 포인트는 블로그 주인장의 답글만 방향이 다르도록 하는거에요! 자 그럼 함께 바꿔봅시다 템플릿은 지난번에 이어 [ Odyssey ] 를 사용하겠습니다. 스킨 편집 > 'html 편집' 으로 들어가주세요. 그 다음은 CSS 탭을 클릭 댓글 태그의 CSS를 바꿔야 하니 댓글을 담당하는 태그와 그 태그의 class 명을 알아야해요! 이전 포스팅에서 알려드린 팁을 활용해서 새창으로 블로그를 하나 띄워주시고 F12 - 개발자모드 > 요소 선택 > 댓글 부분을 누르면 댓글의 CSS 클래스명을 알 수 있답니다 (づ￣ 3￣)づ 다른 템플릿을 사용중이신 분이라면 댓글의 클래스명을 이 방법으로 찾아주시면 되겠습니당..

티스토리 블로그가 이렇게 커스텀이 자유로운지 몰랐다 ⊙.☉ 프론트엔드 개발자의 디자인 본능이 아주 드릉드릉 하구만 그래 일단, 기본 템플릿은 [ Odyssey ] 를 사용했습니다. HTML 기본 틀을 그대로 사용할거고 CSS를 위주로 바꿔서 수정할 예정이에요. 1. 헤더 고정 기존 헤더는 스크롤을 내리면 보이지 않는데요. 저는 헤더가 항상 화면 상단에 박혀있으면 좋겠거든요. 그래야 언제든 메인으로 바로 가거나, 검색을 할 수 있을테니까 자, 그럼 스킨 편집 > 'html 편집' 으로 들어가줍시다. 그 다음은 CSS 탭을 클릭 여기서 검색(Ctrl + F)으로 '.header' 를 검색해주세요. 기존에 header 의 position 이 relative 인걸 fixed로 바꿔서 짱박아줄거에요. 주석처리한 ..