IT 일기장

어떤 언어든 메모리 체크는 필수 불가결이다.브라우저 단에서 메모리 확인은 어떻게 하는지 궁금했었는데전 회사에서 다니면서 수행했던 프로젝트의 감리 기관에서 수석님이 알려주셨던 lighthouse그리고 내가 발견해서 써본 힙 스냅샷이다. 사용법 사용법은 쉽다. 1. 먼저 크롬 브라우저를 키고 내가 작업하고 있는 곳에 개발자 도구를 열고 메모리 탭을 연다. 그러면 힙 스냅샷이라는게 보인다.2. 내가 원하는 해당 페이지에서 javascript 객체 및 관련 dom 노드의 메모리 분포가 궁금하다면 하단에 스냅샷 촬영을 누르면 된다. 그러면 이 페이지에서 할당된 메모리의 크기를 알 수 있다. 활용 사례 1. 처음에 탭이 있었을때 메모리는 35.8MB2. 탭을 닫은 후에 메모리는 32.1MB3. 그리..

개발 환경 Spring Boot 3.2JDK 17TOMCAT 10 (내장 톰캣)Maven 시작 계기 스타트업에서 프로젝트를 진행하면서 초기 단계에서 만들었던 공통으로 쓰고자 했던 방법이다.사실 Spring MVC 패턴으로 개발하는게 가장 쉽고 효율적이나,React처럼 Component와 SPA 개념을 활용하여 UI로 기초 설계를 해놓은 임원진 분들의 시작으로 인해진행하게 되었다. 기초 설계 기초 설계는 다음과 같이 구성하고 정의했다. 1. 공통으로 사용할 함수명은 selectListApi 로 정의2. 매개변수는 url, params, successCallBack, errorCallBack으로 구성3. 데이터 타입은 json과 post 방식으로 고정 ** url은 컨트롤러 주소** params는 json..

프로젝트 진행 중에 이사님이 만드신 탭 UI가 있다.그 탭 마다 닫기(X) 버튼이 존재하고, 누르면 탭이 닫히고 컨텐츠가 사라지는 형식이다.보자마자 딱 떠오른게 "모두 닫기", "현재 탭 제외하고 닫기" 가 떠올랐는데 모두 닫기부터 구현해봤다. 모두 닫기 화면을 보여주는 형식2가지 정도 생각해볼 수 있었는데.. 하나는 탭에서 오른쪽 클릭을 눌렀을 때, 다른 하나는 버튼 형식으로 화면에 보여주는 형태다.개인적으로 나는 오른쪽 클릭을 많이 쓰기 때문에 오른쪽 클릭을 눌렀을 때로 구현했다. ( 다른 사람들의 의견은 후자의 방법을 선택 ) 나만 편하면 되는 것이 아닌 UI를 이용하는 사람들의 의견이 더 중요하기에 고려할 필요가 있다. 간단한 탭 예제를 만들어 기록용으로 남겨놔야지..    See the Pen..

CSS나 디자인도 접해볼 겸 간단한 디지털 시계를 만들어봤다 네이버 홈페이지에 보이는 디지털 시계에서 착안한건데, 색 감각부터 익혀봐야 될거같다.. 색에 효과 입혀봤는데 단색보다 좀 더 괜찮아 보이긴하네 아휴 어렵다 See the Pen digital Time by bbongsu (@bbongsu) on CodePen.

See the Pen Untitled by bbongsu (@bbongsu) on CodePen. 프린트 버튼 누르면 인쇄창 불러올 수 있다. 홈페이지 필수요소라 해도 과언이 아니다

텍스트나 그림 등을 천천히 나타나는 효과를 가진 함수다 이미지로 하면 홈페이지가 제법 있어보인다(?) 해당 효과를 주고싶은 요소에 display:none; 속성을 줘서 안보이게 하고.. fadeIn() 함수를 사용해서 글씨를 서서히 나타나게 할 수 있다. fadeIn()에 숫자가 기입돼있는데 이건 몇 초 안에 다 보이게 해줄거냐 라는 의미다. 여기서 준 1000은 1초다 See the Pen Fade In Effect by bbongsu (@bbongsu) on CodePen.

간단하게 메인 페이지 포트폴리오 하나 만들려는 과정에서 뭐가 좋을까.. 찾아보다가 글자가 하나씩 나타나는 타이핑 효과가 있어서 이걸 적용시켜볼까 했다. 코드는 다음과 같다 See the Pen Untitled by bbongsu (@bbongsu) on CodePen. 이런식으로 가능한데 글자 옆에 커서 효과를 첨가 해주면.. 키보드로 타이핑한것 처럼 효과를 줄 수 있다