프로그래밍 공부하기

웹서비스는 반응속도가 매우 중요하다. 이전에 읽은 책에 의하면 0.1초는 사용자가 기능이 바로 반응했다고 느끼는 시간, 1초는 불필요하게 오래 기다리지 않았다고 느끼는 시간. 10초면 사용자가 집중력을 잃는 최대 시간이라고 한다. PageSpeed Insights 모든 기기에서 웹페이지 속도를 개선해 보세요. PageSpeed Insights 서버에서 페이지 분석 중 developers.google.com 내가 만든 사이트가 얼마나 빠르고 효율적인지 측정해주는 구글의 서비스가 있다. 바로 PageSpeed Insights이다. 위의 링크로 들어가서 측정을 원하는 사이트를 입력하면 점수와 함께 반응속도 및 개선할 부분을 알 수 있다. 특히 측정 결과에서 어떻게 하면 반응속도를 줄일 수 있는지 추천해주는 항..

1. Lottie란 화면에서 복잡하고 화려한 애니메이션을 표현해야할 때 css 와 JavaScript만으로는 너무 어려울 때가 있다. 이러한 때 gif파일을 사용해야겠다는 생각이 들 것이다. 이 때 gif 뿐만 아니라 Lottie라는 선택지도 존재한다. Lottie란 gif처럼 애니메이션을 표현하는 방법으로, .json파일 형식으로 되어있다. gif에 비해 Lottie의 장점은 다음과 같다. gif보다 훨씬 용량이 작다. 확대/축소해도 이미지가 깨지지 않는다. 2. Lottie 파일 얻기 Free Lottie Animation Files, Tools & Plugins - LottieFiles The world’s largest online platform for the world’s smallest an..

1. SVG란 웹사이트에서 이미지를 표현하는 방법은 흔히 알려진 jpg, png 등의 이미지 파일형식 뿐만 아니라 svg라는 형식이 존재한다. svg는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일형식이다. 즉, 기존 이미지 형식은 픽셀로 이미지를 표현했다면, svg는 벡터(수학적 계산)을 통해 이미지를 표현한다. 예를 들어 svg는 위 코드처럼 도형으로 이미지를 표현한다. 코드를 자세히 보면 빨간색 rect, 초록색 circle, 흰색 text 태그로 구성되어있다. 이 코드를 저장한 후 웹에서 보면 오른쪽 그림과 같은 이미지가 보여진다. svg에서 더 자유롭고 복잡한 도형을 그리기 위해선 path 태그를 사용한다. d 속성 값들을 자세히 살펴보자 d 속성에서 가장 먼저 보이는 값은 M8 48이..

프로젝트에서 모달창을 구현해야하는 일이 생겼다. 라이브러리를 이용해도 좋지만 직접 구현하는 것이 더 학습에 도움이 될 것 같아서 모달만들기 글 를 참고하여 직접 구현을 해보았고 만족스러운 결과가 나왔다. 1. 구조 모달창의 구조는 DImmer, OuterContainer, InnerContainer, Icon으로 구성된다. 각 요소의 역할은 다음과 같다. Dimmer 화면을 0.3투명도의 검은 화면 Div로 채운다. 다른 컴포넌트들보다 위에 위치 한다.(z-index) OuterContainer InnerContainer를 감싸고 있다. position을 fixed로 주어 스크롤을 내려도 위치를 유지시킨다. Dimmer보다도 더 위에 위치한다. InnerContainer Dimmer위에 떠있는 하얀 Di..

TJ 미디어의 노래 번호를 검색하고 노래를 선택하여 나만의 리스트를 관리하는 프로젝트에 참가하게 되었다. 메인페이지 구현을 담당하였는데, 팀원들이 노래방 답게 화려한 효과들을 원해서 메인페이지에 미러볼 같은 애니메이션을 넣어보자는 생각을 갖게되었다. 1. 화면 위에 무작위의 원 생성하기 처음부터 미러볼 애니메이션을 넣기는 어려워서 2가지 종류의 원을 랜덤한 위치에 생성하는 애니메이션을 먼저 작성해보기로 하였다. 1) 원 디자인 .circle-green{ position: absolute; pointer-events: none; background-image: linear-gradient(to right, #2ef27466 0%, #54d88066 100%); } .circle-pink{ position:..

Redux란 데이터를 한 곳에서 관리할 수 있게 도와주는 JavaScript Library이다. 보통 React와 Redux를 함께 사용하지만 사실 Vanilla JavaScript에서도 Redux를 사용할 수 있다는 의미이다. 그렇다면 왜 Redux가 필요할까? Redux의 장점 과거 프로젝트 보편적으로 사용되던 개발 디자인 패턴 중 하나는 MVC 패턴이다. 프로젝트를 모델-뷰-컨트롤러로 나누어 UI영역과 데이터 처리영역을 분리하여 개발하였다. 그런데 모델과 뷰가 많아질 수록 데이터의 흐름이 뒤엉켜 예측하기 어려운 코드를 발생시키는 단점이 있다. 하나의 데이터를 여러 뷰가 공유하고 있는 경우, 뷰1에서 이벤트가 발생하였을 때 이를 뷰2, 뷰3...에 알려주어야하는 로직이 필요하다. 또한 모델1의 데이터..

HTML태그는 태그들이 중첩되어있는 구조이다. 의 child로 가 있고 의 child에 가 있고 의 child로 .... 가 반복된다. 이러한 태그의 중첩구조에서 하나의 태그에서 이벤트가 발생했을 때 해당 이벤트가 child로 혹은 parent로 전파되는 현상이 이벤트 버블링과 이벤트 캡쳐이다. 1. 이벤트 버블링 See the Pen Bubbling by ImHyeLim1209 (@imhyelim1209) on CodePen. 위의 코드는 container > content > inner 로 div가 중첩되어있으며 각 div를 클릭 시 각자의 id가 alert되는 이벤트가 걸려있다. 이 때 사용자가 inner를 클릭하면 이벤트가 inner의 parent인 content, content의 containe..

태그 안의 내용에 접근하는 사용하는 속성은 innerHTML, innerText, textContent가 있다. See the Pen Load innerText/textContent by ImHyeLim1209 (@imhyelim1209) on CodePen. 1. innerHTML innerHTML은 태그를 포함한 내용이다. 태그를 포함한 내용을 가져오거나 아래와 같이 태그가 포함된 내용으로 바꿀 때 사용한다. textContent에 비해 느리고 보안 위협이 있다. $0.innerHTML = 'link' 2. innerText 렌더링된 텍스트를 보여준다. 즉, 태그가 제외된 문자열만 보여준다. 태그는 인식되며, 숨겨진 요소(display:none)는 보여주지 않는다. 잘 사용하지 않는 속성이다. 3. ..

1. CDN이란 CDN(Content Delivery Network)이란 콘텐츠를 효율적으로 전달하기 위해 분산된 서버에 데이터를 저장해 사용자에게 전달하는 시스템이다. 예를 들어 집에서 유튜브 영상을 시청한다 생각해보자. 미국 본사에 있는 서버에서 동영상 데이터를 가져오는 것보다는 우리나라에 서버에서 영상 데이터를 가져오는 것이 더 빠르다. 이렇듯 같은 데이터를 가진 서버를 여러 장소에 분산시키고 데이터 요청이 왔을 때 요청 위치로부터 가장 가까운 서버에서 데이터를 전송해주는 것이다. 이를 통해 데이터를 효율적으로 제공할 수 있으며 한꺼번에 많은 사용자가 몰림으로 인한 병목현상도 방지할 수 있다. 2. Javascript Library와 CDN 프로그래밍에서 Library란 이미 구현된 코드모음이다. ..

1. DocumentFragment DocumentFragment 인터페이스는 부모가 없는 아주 작고 경량화된 document 객체이다. DocumentFragment에 문서 구조의 일부를 저장하여 사용한다. document와 다른 점은 활성화된 문서 트리 구조의 일부가 아니기 때문에 DocumentFragment를 변경해도 문서에는 영향을 미치지 않으며 성능에도 영향이 없다. template 태그의 HTMLTemplateElement.content 속성에도 DocumentFragment가 포함되어 있다. 2. DocumentFragment 속성과 메소드 DocumentFragment는 부모인 Node와 ParentNode의 속성과 메소드를 상속받고있다. 따라서 children, querySelector..