CSS로 브라우저 성능을 최적화 시킬 수 있는 방법에 적어볼건데, animation 최적화 와 미디어쿼리 최적화에 대해서 알아보려한다. 먼저 animation 최적화에 대해서 알아보자. animation 최적화는 왜 해야하는 걸까? 애니메이션은 브라우저에서 많은 리소스를 사용하므로 최적화가 필요하다. 특히, 복잡한 애니메이션이나 많은 엘리먼트를 애니메이션으로 처리하면 브라우저 성능에 부정적인 영향을 미칠 수 있다. 따라서, 애니메이션을 최적화하여 브라우저의 성능을 향상시키는 것이 좋다. 그러면 animation 최적화 하는 방법은? 애니메이션을 최적화하는 방법에는 여러 가지가 있다. 첫째로, animation 사용 시에 CSS로 최적화하는 방법이 있다. 먼저 GPU 를 활용해볼건데, GPU(Graphic..

preload 란 무엇이며, 언제 쓰는 속성이고, 왜 써야하는건가? preload는 브라우저가 페이지 로딩 전에 리소스를 미리 다운로드할 수 있도록 해주는 HTML 속성이다. 이를 사용하여 브라우저가 페이지 로딩 전에 폰트, 이미지, 스타일시트, 스크립트 등 다양한 리소스들을 미리 다운로드 해서 페이지 로딩 속도를 개선 할 수 있다. 이번 글에서는 폰트를 preload 하는 방법에 대해서 끄적여볼거다. 폰트에는 로컬 폰트와 웹 폰트가 있다. 로컬 폰트는 이미 로컬에 설치돼있기 때문에, preload 속성이 필요없지만, 웹 폰트의 경우, 원격으로 가져오며, 아무래도 폰트 파일이 크기가 크다보니 폰트 파일을 다운로드하는 동안 페이지 로딩이 지연되는 경우가 생긴다. 이를 해결하기 위해, preload 속성을 ..

최근 몇 년 동안 브라우저 간 호환성 테스트는 브라우저들의 업데이트 이후, 사용자가 뒤처지지 않도록 하는 데 도움이 되므로 많은 주목을 받았다. 기술 발전이 기하급수적으로 증가하여 업그레이드와 변경도 빨라졌다. 따라서, 크로스 브라우징에도 개발자들의 많은 관심이 쏟아졌다. 크로스 브라우징 (Cross-browser) 이란? 크로스 브라우징이란, 서로 다른 브라우저에서 웹사이트나 애플리케이션이 동일한 방식으로 동작할 수 있도록 보장해 주는 것이다. 서로 다른 브라우저마다 자체적으로 지원하는 기술이나 표준이 다른데다가, 브라우저마다 버전별로 지원하는 기술이나 표준이 다르기 때문에, 동일한 방식으로 동작하지 않을 가능성이 높다. 왜 크로스 브라우징이 필요한가? 크로스 브라우징이 필요한 이유는 크게 두 가지가 ..

구글링을 해보니..... 이렇게 관리자 권한으로 CMD를 실행한 뒤 해당포트를 사용하는 프로그램을 알아보고 taskKill 명령어로 프로그램을 죽이는 것도 방법이지만 intellij의 Debugger 포트번호를 바꾸는 것도 방법이라고 한다. port 번호를 1031로 바꾸니 디버그가 정상 작동 됨.

회사에서 이번에 SSO 연동을 하게 됨. AES256 암호화 알고리즘을 이용하기로 함. 간만에 java 만지게 됐다. AES256 암호화 방식 AES256은 256비트(32바이트)의 대칭키를 사용한다. 이 대칭키는 암호화와 복호화에 모두 사용됨. AES256은 블록 암호화 방식 중 하나로, 16바이트 크기의 블록 단위로 암호화를 수행한다. 입력된 평문은 블록 단위로 분할되어 각 블록마다 암호화가 수행된다. * AES256 알고리즘은 구글링 하면 나옴 일단 임의로 토큰값을 받음 컨트롤러 하나 만들어줌 // 컨트롤러를 만든다. @Controller public class SSOController { //로그를 찍기 위해 logger 생성 private static final Logger logger = Lo..

Git Bash 란? Git bash는 윈도우 운영체제에서 git 명령어를 실행할 수 있도록 제공되는 터미널 에뮬레이터이다. 윈도우에서도 리눅스나 맥에서처럼 git 명령어를 사용할 수 있어 편리하고, vim이나 nano와 같은 텍스트 에디터를 사용하여 편집할 수 있다. vim ( vi )는 명령 모드와 편집 모드로 나뉘어 있으며, 명령 모드에서는 텍스트 파일을 편집하기 위한 다양한 명령어를 입력할 수 있고, 편집 모드에서는 실제로 텍스트를 입력하거나 편집할 수 있다. Git bash 오른쪽 클릭해서 “관리자 권한으로 실행”을 클릭한다. Git bash를 관리자 권한으로 실행해야 하는 이유는 파일 시스템 권한 때문인데, Git bash를 실행하면 기본적으로 현재 사용자의 홈 디렉터리로 이동한다. 그러나 윈..

reduce 함수는 배열의 각 요소에 대해 주어진 함수를 실행하고, 하나의 결과값을 반환한다. 이 함수는 배열에서 숫자의 합이나 평균 등을 계산할 때 유용하게 사용된다. 누적해서 callback function을 각 요소마다 갈겨서, 결과 값을 반환해내는 식으로 반복하는거다. reduce 함수는 다음과 같은 구문을 사용한다. // 기본 구문 형식 array.reduce(function(total, currentValue, currentIndex, arr), initialValue) // 초기값인 initValue를 지정하지 않을 때. let result = arr.reduce(callback); // 선택적으로 초기 값(initValue)도 지정할 수 있다. let result = arr.reduce(c..

일하다가 몇번씩 당황스러운 경우가 있었는데, .gitignore가 에러가 나서 ignore 처리를 한 파일이 changes에 등장 할 때 이다. git의 캐시 문제로 인해 생기는 것인데, 아래 명령어로 캐시 내용을 전부 밀어버린 후에, add All해서 커밋하면 된다. git rm -r --cached . git add . git commit -m "fixed untracked files" # 참고한 스택 오버플로우