천천히, 꾸준히

😺 Study/Web

렌더링이란? - 웹 애플리케이션에 데이터를 표시하는 행위 개발자도구로 렌더링 성능 확인하는 방법 (간단히 정리하자면...) 1. F12(개발자도구)를 들어간다. 2. 상단 메뉴 중 >>(화살표)를 클릭, Performance(성능)을 클릭한다. 3. ⏺ 녹화버튼 또는 🔄 새로고침 버튼을 클릭한다. 4. 초당 프레임 수 및 하단의 CPU 사용량 분포 확인 5. 오래 걸리는 렌더링 영역 확인 후 개선하기 css 선택자의 개수를 줄임으로써 변화를 살펴보았다. 선택자의 개수는 최대 3개까지가 적당하다. (참고로 스타일엔진은 선택자를 오른쪽부터 왼쪽으로 읽는다) 참고 - https://ordinary-code.tistory.com/58 [프론트앤드]페이지 렌더링 성능 확인하는 방법 (웹 페이지 속도 확인하기) 렌..

2023. 2. 15.

😺 Study/JavaScript, jQuery

'버튼' 클릭 > 알림창 나타남 '닫기' 클릭 > 알림창 사라짐 알림창임 닫기 버튼 function close(){ document.getElementById('alert-box').style.display = 'none'; } btn()은 실행이 되는데, close()는 반응이 없었다. 혹시나 해서 함수 이름을 바꿨더니 제대로 실행됨; 알림창임 닫기 버튼 자바스크립트에서 close는 window.close(), self.close()...등에서 특정 개체에서만 적용되는 메소드이다. 단순히 결과를 반환하는 독립적인 함수가 아닌 window와 self라는 특정 개체에서 반응한다는 의미로 이해된다. 나는 일단 함수 이름을 단순히 close라고 지었더니, 무반응에 에러도 안 떠서 난감; 함수와 메소드의 차이를..

2022. 12. 9.

😺 Study/JavaScript, jQuery

*원페이지에서 메뉴를 클릭하면 해당 영역으로 스크롤되어 이동하는 코드 - a링크의 hash를 이용하여 이동 - hash는 페이지의 내부 링크를 목적으로 사용 (id를 지정하지 않는 경우, 클릭시 페이지의 최상단으로 이동) //클릭할 메뉴 메뉴1 메뉴2 메뉴3 메뉴4 //이동할 영역 메뉴1 메뉴2 메뉴3 메뉴4 //메뉴 클릭시 해당 영역으로 이동하는 jQuery $(function () { $('li > a').click(function (){ $('html, body').animate({scrollTop: $(this.hash).offset.top}, 300); }); }); >> 메뉴를 클릭하면 html, body의 scrollTop(스크롤바의 수직 위치값)이 $(this.hash) -> (클릭한 해당..

2021. 12. 22.

😺 Study/JavaScript, jQuery

HTML width와 height 속성을 통해 생성할 도형의 크기를 설정 Welcome to JS_Drawing Zone :) 방향키로 도형을 움직여보세요! JavaScript 변수 설정 // canvas에 그림을 그리려면 먼저 context를 가져와야 함 // context에 대한 참조는 getContext() 메서드에 context 이름을 넘김 // 좌표는 canvas 요소 왼쪽 위에서 시작하며, 이 지점을 (0, 0)으로 간주 // x는 오른쪽, y는 아래쪽으로 픽셀 단위로 증가 let canvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); // canvas 가로 및 세로의 반값 > 150 let x = canva..

2021. 8. 17.

😺 Study/JavaScript, jQuery

- 회사에서 JS, React 관련 과제가 주어졌다. 아직 맨땅에 헤딩이지만, 좋은 레퍼런스가 많아서 무사히 완료(?) 온라인 스터디에서 배운 내용과 연관성이 있어서 정리할 겸 기록 각 작업순서와 관련된 상세 포스팅을 따로 게시할 예정이다. 진행된 작업순서: NodeJS > React > Babel > Webpack > Material-ui > qrcode NodeJs 브라우저 외부에서 JS를 실행 할 수 있는 환경 (=런타임 환경) $ npm init -y React 가상돔을 이용하여 돔의 변화 처리 → 실제돔에 변화를 일으키지 않고 변화를 가상돔에 기록한 후 그리는 방식 Create React App은 새 React 싱글 페이지 어플리케이션을 만들기에 적합 React를 사용할 때는 생산성을 높이기 위..

2021. 8. 9.

😺 Study/CSS, SCSS

보통 border를 주면 해당 콘텐츠의 바깥에 생성되지만, inner border를 주기 위해 box-shadow를 사용할 수 있다는 걸 알게 됐다. box-shadow: 0 0 0 3px inset; -> 왼쪽, 위쪽, 번짐, 굵기 * inset: 내부 안 쪽에 넣는다는 의미

2021. 5. 13.

😺 Study

*Ajax : javascript를 이용해서 비동기식으로 서버와 통신하는 방식 *비동기식 여러가지 일이 동시적으로 발생 / 서버와 통신하는 동안 다른 작업을 할 수 있음 -> 서버와 통신이 끝났을 때, 등록되어 있던 이벤트 핸들러가 호출, 프로그래머가 구현한 로직 실행됨 -> 해당 로직은 서버에서 전송한 데이터를 갖고, 웹페이지에 javascript로 동적으로 구현 $.ajax(settings) >> jQuery를 이용한 ajax통신의 가장 기본적인 API -> settings=인자, object(객체) *주요속성: - data >> 서버에 전송할 데이터 (key/value형식) - dataType >> 서버가 리턴하는 데이터 타입(xml, json, script, html) 데이터 형식에 따라서 jQu..

2021. 4. 26.

😺 Study/HTML

[부스트코스 edwith] 웹 UI 개발 IR 기법 / 요소 숨김 처리를 활용한 프로모션 페이지 만들기 이번 강의에서는 프로모션 페이지를 마크업과 IR기법을 통해 접근성에 준수하는 방법까지 배울 수 있었다. 먼저, IR이란? Image Replacement 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것 태그의 alt 속성값에 들어갈 대체 텍스트가 너무 길거나, css에서 background 속성으로 들어간 의미가 있는 이미지의 경우 마크업으로 대체 텍스트를 대신한다. 대체 텍스트는! 의미 전달이 되도록 시멘틱 마크업 하기 화면에서는 보이지 않도록 css로 숨기기 / 하지만 스크린 리더가 읽을 수 있어야 함 이러한 요소 숨김 처리에는 안 좋은 예(BAD)부터 좋은 예(BEST)까지 3가..

2021. 3. 9.

😺 Study/CSS, SCSS

background 속성에 image를 넣었는데, F5를 아무리 눌러봐도 이미지가 나오지 않았다. 이유가 뭘까? 이미지를 넣는 경로는 2가지가 있다. - 절대경로 다른 서버에 있는 이미지를 불러오는 경로 a {background: url("http://image.co.kr");} - 상대경로 상대적으로 변경이 가능한 경로 폴더구조에서 현재 파일을 기준으로 상위 또는 하위 폴더 경로를 찾아서 url을 작성하는 방법이다. a {background: url(../images/main.png) no-repeat;} 작성했던 코드는 footer {background: url("images/이미지.jpg") center no-repeat;} 보통 하는 실수로 이미지 영역의 크기를 지정해주지 않는 것이 있는데, 이미..

2021. 2. 14.

😺 Study/HTML

온라인 스터디를 만들고 참여하면서 최소 하루에 2개 이상씩 수강목표를 세웠다! 어제는 진도가 빠른 스터디원의 프로젝트를 함께 도와주기도..! 이미 다 아는 것 같으면서도 강의를 들어보면 지나치던 것들이 속속 보인다. 개념이 이미 빠삭한 사람은 각 카테고리의 퀴즈만 풀어보며 복습해봐도 도움이 될 듯하다.

2021. 1. 20.