sooleeandtomas

2020년 코로나가 창궐하던 여름, 나는 html과 css밖에 모르던 햇병아리였다. 코로나로 인해 국내의 모든 수영장이 문을 닫았기 때문에 수영복 매출은 바닥을 기었다. 이 매출 빵꾸를 메꾸기 위해 회사에서는 대대적으로 성대한 온라인 이벤트를 열었다. 일주일간 UP to 90% 빅 세일을 진행한 것이다. 나에게 주어진 임무는 이벤트 페이지를 제작하고, "월, 화, 수, 목, 금, 토, 일 매일 새로운 수영복 썸네일을 이벤트 페이지에 걸어야 한다." 이다. 이를 위해서는 아래와 같은 썸네일 100개 이상을 일일히 포토샵으로 만들어야 했다. 잠시 포토샵 작업에 대해 설명을 하자면, 포토샵은 이미지를 보정할 때는 정말 좋은 툴이지만, 저런 썸네일을 만드는 경우, 제목과 서브타이틀, 가격 등의 정보를 일일히 수..

firebase에서 복합쿼리 사용하는 법 1. 색인 탭에서 -> 색인 만들기 클릭 3. 컬렉션 id, 필드 입력, 쿼리범위 : 컬렉션 4. 복합쿼리를 생성하는데 좀 시간이 오래 걸린다고 합니다. 1시간정도? 댓글 불러오기 댓글의 데이터 형태는 아래와 같습니다. 각 post_id 가 [ { }, { }, { } ] post_id에 해당하는 댓글 리스트를 가져오는 것입니다. [ 13kngsfOSNO:[{ centents: "", id: "", insert_dt: "", post_id: "", user_id: "", user_name: "", user_profile: "", },{ centents: "", id: "", insert_dt: "", post_id: "", user_id: "", user_name..

CSS의 box-model 에서 블록요소의 영역을 차지하는 CSS속성은? CSS의 block이란? CSS에 포함되는 모든 요소의 외장은 박스입니다. 이 박스를 이해하는 것은 CSS을 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 합니다. CSS 박스엔 두가지가 있습니다. 블록 박스 block : 1. 상위 콘테이너에서 사용 가능한 공간을 채웁니다. 2. 새 줄로 행갈이합니다. 3. width, height 값이 존중됩니다. 4. 패딩과 여백, 테두리로 인해 다른 요소들이 박스로부터 밀려납니다. 예) header, footer, p, li, table, div, h1, address, article, aside, ol, video, table, form 인라인 박스 inline..

Progressive enhancement과 graceful degradation의 차이점은? 두가지는 웹페이지를 다양한 브라우저와 버전에서 사용될 수 있도록 한다는 공통점이 있습니다. Graceful degration : 최신형 브라우저에 맞게 설계를 한 후, 한단계식 구형 브라우저에 맞춰가는 것을 의미합니다. 프로그램 구동에 문제가 생겨도 프로그램이 정지하지 않고 성능을 낮추면서 프로그램 구동을 지속하도록 설계합니다. graceful degration 장점: 1. 오래된 제품을 새로 개발하기에 시간이 부족하고 방법이나 영향도 모르는 경우 유용합니다. 2. progressive보다 빠르게 작성할 수 있습니다. 3. 스크립트에 의존적인 지도서비스, 이메일 클라이언트 등은 이방식을 사용해야 합니다. gra..

Q1. 컴퓨팅에서 이벤트란? 자바스크립트의 이벤트를 알아보기 전에, 컴퓨팅의 이벤트를 알아보도록 하겠습니다. 컴퓨팅에서 이벤트란 프로그램에 의해 감지되고 처리될 수 있는 동작이나 사건을 말합니다. 대체로 이벤트는 프로그램 동작 과정과 함께 동시에 처리되도록 되어 있습니다. 즉 프로그램은 이벤트를 처리하기 위한 하나 이상의 전용 공간(또는 핸들러)를 가지게 되는데, 보통의 경우 '이벤트 루프'라고 불리는 곳에서 이를 처리하게 됩니다. Q2. 자바스크립트에서 이벤트란? 자바스크립트는 단일 스레드 언어입니다. 보통의 컴퓨터에서의 이벤트는 멀티플레이로 진행되지만, 자바스크립트에서는 불가능합니다. 자바스크립트에서 비동기 혹은 동시성의 활동이 실행된다면, 이는 외부의 엔진을 빌려 사용하고 있는 것입니다. 자바스크립..

Q1. 자바스크립트 this에 대해서 설명해보세요. A1. 자바스크립트의 this는 함수가 어떻게 실행되느냐에 따라 카멜레온 같이 자기 자신을 바꿉니다. 1. 일반 함수 실행 방식 : 암시적 1) strict mode가 아닌경우 - 전역 오브젝트를 this로 가르킵니다. (window) 2) strict mode인 경우 - 전역 오브젝트를 this로 가르키지 않습니다. function Person() { // Person() 생성자는 `this`를 자신의 인스턴스로 정의. this.age = 0; setInterval(function growUp() { // 비엄격 모드에서, growUp() 함수는 `this`를 // 전역 객체로 정의하고, 이는 Person() 생성자에 // 정의된 `this`와 다름...