zuryeong의 개발 블로그

1. SVG란

스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다.

2. SVG  vs  PNG

3. SVG 태그

<svg width="가로영역" height="세로영역">
	SVG그래픽
    ...
</svg>

SVG는 컨테이너로 묶음을 의미한다. 내부에 그래픽을 담기 위한 그릇과 같은 태그다. 

4. 모양 요소의 종류

SVG에는 개발자가 사용할 수 있는 몇 가지 요소가 미리 지정되어 있다.

   1) 사각형 : <rect>

   2) 원 : <circle>

<svg
  version="1.1"
  baseProfile="full"
  width="300"
  height="200"
  xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

   3) 타원 : <ellipse>

   4) 선 : <line>

   5) 다각선 : <polyline>

   6) 다각형 : <polygon>

   7) 패스 : <path>

5. 장점

   1) 웹사이트 로딩 속도가 빠르다
SVG는 XML코드이기 때문에 파일의 크기가 작다. 사용 사례에 따라서 SVG는 60%에서 80%정도의 대역폭을 절감한다고 한다. SVG는 HTML파일에 작성이 될 수 있기때문에 외부 이미지를 가져오기 위해서 HTTP request를 할 필요가 없다.

   2) 어떤 크기에서든 재활용이 가능 (Future Proof) 
SVG는 크기에 따라 이미지가 왜곡되거나 품질이 떨어져 보이지 않는다. 그렇기 때문에 하드웨어 해상도가 높은 디바이스에서도 품질 저하없이 볼 수 있다.

   3) SEO 친화적이다
XML코드에는 키워드, 설명, 링크 등이 포함될 수 있다. 그래서 해당 콘텐츠를 검색 엔진에서 더 쉽게 인실할 수 있도록 할 수 있다.

   4) 개발 효율 증대 효과
디자이너가 Figma, Sketch 등에서 디자인한 작업물들을 SVG로 내보내거나, 직접 개발자가 SVG로 다운받을 수도 있어 번거로운 작업을 줄일 수 있다.

5) CSS로 디자인 수정이 가능하다
개발자는 SVG파일을 코드로 직접 변경할 수 있기때문에 디자이너에게 재요청 및 기다릴 필요가 없어지고 디자이너는 이미지를 수정할 필요가 없다.

6. 단점

   1) 너무 복잡한 SVG는 비효율적일 수 있다
많은 모양, 색상, 그라디언트를 포함하여서 파일 크기가 JPG나 PNG 보다 커지는 경우가 종종 있기 때문에 단점이 될 수 있다.

   2) 최적화
다양한 편집툴에서 내보내진 SVG 파일에는 중복되고 쓸모없는 정보가 많이 포함되어 있다. 예를 들어, 편집기의 메타 데이터, 주석, 숨겨진 요소가 있다. 최적화 되지 않은 경우에는 PNG보다 파일 크기가 커질 수 있기때문에 최적화를 할 수 있는 도구의 도움을 받는 것이 좋을 수 있다.

1. 정보 시스템 : 데이터를 수집, 조직, 저장하고 정보를 생성, 분배

   1) 데이터 : 수집된 사실이나 값     

       처리 : 데이터 해석. 데이터 사이의 관계를 통해 의미와 유용한 정보를 찾음

       정보 : 수집된 데이터의 유용한 해석이나 데이터 상호관계. 지식으로 만들어진 것

   2) 정보가 유용성을 갖기 위한 2가지 조건 : 정확성, 현재성

2. 데이터처리 시스템

   1) 형태에 따른 분류

      -1 정형 데이터 : 미리 정해진 구조가 있음. (사무정보)

      -2 반정형 데이터 : 내용 안에 구조에 대한 설명이 있음 (JSON, XML)

      -3 비정형 데이터 : 정해진 구조 없음 (SNS)

   2) 특성에 따른 분류

      -1 범주형 데이터 : 종류를 나타내는 값

         (a) 명목형 데이터 : 서열 없음 (성별, 혈액형, 학과명, 거주지)

         (b) 순서형 데이터 ; 서열 있음 (학년, 학점, 회원등급)

      -2 수치형 데이터 : 크기 비교와 연산이 가능한 값

         (a) 이산형 데이터 : 개수를 세어봐야 함 (고객수, 반매량, 합격자수)

         (b) 연속형 데이터 : 측정을 해봐야 함 (키, 몸무게, 온도, 점수)

   3) 데이터 처리 단위 : 트랜잭션 (하나의 단위로 처리되어야 하는 분리될 수 없는 그룹)

   4) 데이터가 조직되고 접근되는 방법에 따른 분류

      -1 일괄 저리

         (a) 시스템 중심

         (b) 장 : 높은 시스템 성능과 낮은 비용처리

         (c) 단 : 응답시간 길고 사전 준비 작업 요구

         (d) 순차 접근 방법

      -2 온라인 처리

         (a) 실시간 처리

         (b) 장 : 빠른 응답시간, 사전 준비작업 불필요

         (c) 단 : 낮은 시스템 성능과 높은 처리 비용, 원격 터미널들과 계쏙적인 통신 유지, 통신 제어기가 필요

         (d) 은행, 항공기 예약 시스템 등

      -3 분산 처리

         (a) 분산처리 목표 : 투명성 확보

         (b) 위치 투명성 : 액세스 하려는 DB의 실제 위치 알 필요 없이 DB의 논리적인 명칭만으로 액세스 가능

         (c) 중복 투명성 : 동일 데이터가 여러 곳에 중복되어 있더라도 사용자는 하나의 데이터만 존재하는 것처럼 사용

         (d) 단편화 투명성 : 하나의 릴레이션을 더 작은 조작으로 나누고 각 조각을 별개의 릴레이션으로 처리

            - 릴레이션의 단편화 방법 - 수평적 단편화 : 투플(행)단위로 분해

                                                     - 수직적 단편화 : 속성(열)단위로 분해

                                                     - 혼합적 단편화

                                   단편화 수행 조건 - 완전성 : 한 조각에는 속해야 함

                                                                  회복성 : 원래로 회복 가능

                                                                  분리성 : 중복되지 않게 분리

         (e) 병행 투명성 : 다수의 트랜잭션들이 동시에 실행되더라도 그 트랜잭션의 결과는 영향을 받지 않음

         (f) 장애 투명성 : 컴퓨터 장애에도 불구하고 트랜잭션을 정확하게 처리함

         (g) 장: 지역문제에 대한 파악과 신속한 조치, 자료의 공유성 향상, 새로운 응용에 대한 모듈식 구축 용이, 장애에 대한

                   신뢰성 및 가용성 증대, 시스템 운영에 영향을 주지 않고 노드의 폐쇄 및 확장 가능, 상이한 하드웨어 사용 가능

         (h) 단: DBMS가 수행할 기능이 복잡, 데이터베이스 설계가 어려움, 소프트웨어 개발 비용과 처리비용이 증가, 잠재적

                    오류 증가, 보안의 어려움

3. 데이터베이스의 정의

   1) 통합된 데이터 : 최소의 통제된 중복

   2) 저장된 데이터 : 컴퓨터가 접근 가능한 저장 매체에 저장

   3) 운영 데이터 : 고유 기능을 수행하기 위해 필요한 데이터

   4) 공용 데이터 : 공동으로 소유, 유지, 이용하는 데이터

4. 데이터베이스틔 특성

   1) 실시간 접근성

   2) 계속적인 변화 : 갱신, 삽입, 삭제 -> 정확성 유지

   3) 동시 공용

   4) 내용에 의한 참조

   5) 지속성

   6) 상호관련성

5. 데이터베이스의 개념적 구성 요소

   1) 개체 : 업무가 다루는 사물(대상) , □

   2) 관계 : 업무가 다루는 사물(대상)들 사이에 존재하는 연관, ◇

   3) 속성 : 각 사물(대상)이 가지고 있는 상세한 특성, ○

6. 데이터베이스의 구조

   1) 논리적 구조

      -1 사용자의 관점에서 본 데이터의 개념적 구조

      -2 데이터의 논리적 배치

      -3 논리적 레코드

   2) 물리적 구조

      -1 저장 관점에서 본 데이터의 물리적 배치

      -2 저장장치에 저장된 데이터의 실제 구조

      -3 추가 정보 포함 : 인덱스, 포인터체인, 오버플로우 등

      -4 물리적 레코드

7. 3단계 데이터베이스

   1) 외부 스키마

      -1 개인 사용자나 응용 프로그래머가 접근하는 데이터베이스를 정의한 것

      -2 external schema, subschema, view

   2) 개념 스키마

      -1 범 기관적 입장에서 데이터베이스를 정의한 것

      -2 외부 스키마를 모아서 논리적으로 하나로 만든 것

      -3 conceptual schema, logical schema, schema

   3) 내부 독립성

      -1 저장 장치 입장에서 DB 전체가 저장되는 방법을 명세한 것

      -2 internal schema, physical schema

8. 데이터 독립성

   1) 논리적 데이터 독립성

      -1 데이터베이스의 논리적 구조를 변경시키더라도 기존 응용 프로그램들에 아무런 영향을 주지 않는 것을 말함

      -2 개념 시키마가 변경되더라도 어플리케이션에 영향을 덜 받게 하자

      -3 views : 가상 테이블

                       저장 장치 내에 물리적으로 전재하지 않지만, 사용자에게는 있는 것처럼 간주됨

   2) 물리적 데이터 독립성

      -1 데이터베이스의 물리적 구조를 변경시키더라도 기존 응용 프로그램이나 데이터베이스의 논리적 구조에 아무런

          영향을 주지 않는 것을 말함

      -2 내부스키마가 변경되더라도 프로그램에 영향 주지 않게 하자

1. EMP 테이블의 SAL에 UPDATE가 발생하면 로그를 저장하는 EMP_UP_SAL_LOG 테이블과 트리거를 작성하시오. SAL에 UPDATE가 발생하면 트리거에 의해 EMP_UP_SAL_LOG 테이블 에 UPDATE가 발생한 날짜, SAL가 변경 된 사원의 이름, 변경 전 SAL의 값, 변경 후SAL의 값, 증감율 ((변경 후 SAL-변경 전 SAL) / 변경 전 SAL) 값을 저장한다. 2개 이상의UPDATE 문을 수행하여 EMP_UP_SAL_LOG의 내용을 보이시오.

create table emp_up_sal_log (
    updateat date,
    ename varchar(10),
    old_sal decimal(7,2),
    new_sal decimal(7,2),
    rate decimal(5,2)
);


delimiter $$

create trigger trg_emp_sal_update
after update on emp
for each row
begin
    if new.sal <> old.sal then
        insert into emp_up_sal_log (
            updateat,
            ename,
            old_sal,
            new_sal,
            rate
        ) values (
            sysdate(),
            new.ename,
            old.sal,
            new.sal,
            (new.sal - old.sal) / old.sal
        );
    end if;
end $$

delimiter ;

select *
from emp;


update emp set sal = sal + 500 where ename = 'SMITH';
update emp set sal = sal + 1000 where ename = 'ALLEN';


select * 
from emp_up_sal_log;

2. 커서를 사용하여 EMP 테이블에서 늦게 입사한 순서대로 5명의 사원 이름(ENAME)을 출 력하는 emp_DateRank 프로시저를 작성하고 호출한 결과를 작성하시오.

select *
from emp;

delimiter $$

create procedure emp_daterank()
begin
    declare done int default false;
    declare emp_name varchar(10);
    declare cur cursor for 
        select ename
        from emp
        order by hiredate desc
        limit 5;
    declare continue handler for not found set done = true;
    
    open cur;
    
    emp_loop: loop
        fetch cur into emp_name;
        if done then
            leave emp_loop;
        end if;
        select emp_name;
    end loop;
    
    close cur;
    
end $$

delimiter ;

call emp_daterank();

1. display

1-1 block

1-2 inline

1-3 inline-block

1-4 none

2. position에 대해 설명하라

2-1 static

2-2 relative

2-3 fixed

2-4 absolute

3. float가 어떻게 작동하는가

4. flexbox나 grid 스펙을 사용해본적이 있나

4-1 flexbox를 사용하는 이유가 무엇인가

4-2 grid를 사용하는 이유가 무엇인가

5. 이미지 태그를 스타일로 대처하는 법

6. 반응형 웹의 3요소

7. css selector가 어떠한 원리로 동작하나

8. 반응형 웹과 적응형 웹에 대해 설명하라

9. px, em에 대해 설명하라

9-1 절대단위

9-2 상대단위

9-3 px

9-4 em

9-5 ex

9-6 %

9-7 pt

10. cs 적용 우선순위

11. css-in-js에 대해서 설명하라

12. css 전처리기(css preprocessors)를 사용해본적 있는가

12-1 사용해봤다면 장점과 단점

13. padding과 margin의 차이가 무엇인가

13-1 dadding에 대하여

13-2 margin에 대하여

1. DOCTYPE

1-1 DOCTYPE에 대해 설명하시오

1-2 meta 태그에 대해 알고있는가

1-3 meta 태그의 요소에 대해서 아는대로 말하라

2. 웹 표준 및 웹 접근성

2-1 웹 표준이란

2-2 HTML5에서 추가된 내용이 있는가

2-3 웹 접근성이란

2-4 웹 접근성에 맞는 마크업 예시 몇가지 말해보라

2-5 시멘틱 태그란 무엇인가. 왜 사용하는가

2-6 텍스트 관련 태그

2-7 SEO란 무엇인가

2-8 button 태그의 default type은 무엇인가

2-9 section 태그와 article 태그의 차이점

2-10 크로스 브라우징이란 무엇인가

3. 그 외

3-1 이미지 크기가 클 경우 렌더링 속도가 느려질텐데 이를 개선하기 위한 방법

3-2 UI란 무엇인지 설명하라

4. SVG

4-1 SVG란 무엇인가

4-2 SVG 장단점

4-3 SVG내부 도형에 대해 아는게 있는가

1. EMP 테이블에서 EMPNO를 입력받아 입력된 사원의 COMM과, COMM이 NULL이면 ‘해 당 없음’, 600 미만이면 ‘GOOD’, 600이상 1200미만이면 ‘GREAT’, 1200이상이면 ‘PERFECT’를 출력하는 Stored Procedure를 작성하고 프로시저를 호출한 결과를 작성하 시오.

     (조건1) 프로시저 이름은 R_COMM으로 한다.

     (조건2) 입력받는 매개변수 이름은 r_empno, 데이터 형식은 INT로 한다.

     (조건3) COMM 정도(해당 없음, GOOD, GREAT, PERFECT)의 컬럼명은 commGrade로 설정 한다.

     (조건4) EMPNO가 각각 7369, 7521, 7654일 때의 프로시저를 호출한 결과를 출력한다.

결과 출력은 아래의 예시를 참조한다

delimiter $$

create procedure r_comm(in r_empno int)
begin
    declare commgrade varchar(10);
    declare comm_value decimal(10, 2);

    select comm into comm_value from emp where empno = r_empno;

    select case
        when comm_value is null then '해당 없음'
        when comm_value < 600 then 'good'
        when comm_value >= 600 and comm_value < 1200 then 'great'
        when comm_value >= 1200 then 'perfect'
        else 'unknown'
    end into commgrade;

    select comm_value as comm, commgrade as commgrade;
end $$

delimiter ;

call r_comm(7369);
call r_comm(7521);
call r_comm(7654);

2. WHILE문을 사용하여 입력 받은 값까지 짝수의 개수를 출력하는 Stored Procedure를 작 성하고 프로시저를 호출한 결과를 작성하시오.

     (조건1) 프로시저 이름은 C_PROC으로 한다.

     (조건2) 입력받는 매개변수 이름은 num, 데이터 형식은 INT로 한다.

     (조건3) 출력결과의 컬럼명은 evenNumCount로 설정한다.

     (조건4) 입력 값은 임의로 설정하여 프로시저를 호출한 결과를 출력한다.

결과 출력은 아래의 예시를 참조한다. 결과 출력은 아래의 예시를 참조한다.

delimiter $$

create procedure c_proc(in num int)
begin
    declare counter int default 1;
    declare evennumcount int default 0;
    
    while counter <= num do
        if counter % 2 = 0 then
            set evennumcount = evennumcount + 1;
        end if;
        
        set counter = counter + 1;
    end while;

    select evennumcount as evenNumCount;
end $$

delimiter ;

call c_proc(11);

3. 출생연도, 월, 일을 입력받아 현재 날짜를 기준으로 ‘만 나이’를 구하는 Stored Function 을 작성하고, 함수를 호출한 결과를 작성하시오.

     (조건1) 함수의 이름은 getAgeFun로 설정한다.

     (조건2) 입력받는 매개변수의 이름은 birdate, 데이터 형식은 date로 설정한다.

     (조건3) 현재 날짜를 반환하는 curdate() 함수를 이용한다.

     (조건4) 출력 결과는 아래와 같이 출력한다.

delimiter $$

create function getAgeFun(birdate date)
returns int
deterministic
begin
    declare age int;
    declare cur_date date;

    set cur_date = curdate();
    set age = year(cur_date) - year(birdate);

    if month(cur_date) < month(birdate) or (month(cur_date) = month(birdate) and day(cur_date) < day(birdate)) then
        set age = age - 1;
    end if;

    return age;
end $$

delimiter ;

select getagefun('2022-01-01');

1. 조인을 이용하여 커미션(COMM)이 NULL이 아닌 사원의 사원번호(EMPNO), 이름 (ENAME), 부서명(DNAME)을 출력하라.

select e1.empno, e1.ename, dname
from emp e1
join dept on dept.deptno = e1.deptno
where e1.comm is not null;

2. 조인을 이용하여 회사의 평균 급여보다 많이 받는 사원의 상관인 사람의 사원 번호 (EMPNO), 상관의 이름(ENAME), 상관의 부서명(DNAME)을 출력하라. (단, 상관이 없는 최고 직급은 출력하지 않는다.)

select distinct e2.empno, e2.ename, dname
from emp e1
join emp e2 
on e1.mgr = e2.empno
join dept 
on e2.deptno = dept.deptno
where e1.sal > (select avg(sal) from emp);

3. 1번으로 만들어진 테이블 데이터와 2번으로 만들어진 테이블 데이터를 묶어 하나의 테이 블 결과로 출력하라. (단, 결합된 테이블 데이터가 중복될 경우 중복을 허용하지 않는다.)

select distinct empno, ename, dname
from (
    select e1.empno, e1.ename, dname
    from emp e1
    join dept 
    on dept.deptno = e1.deptno
    where e1.comm is not null
    union
    select e2.empno, e2.ename, dname
    from emp e1
    join emp e2 
    on e1.mgr = e2.empno
    join dept 
    on e2.deptno = dept.deptno
    where e1.sal > (select avg(sal) from emp)
) combined_results;

4. [Players] 테이블을 생성하고 테이블의 구조를 첨부하시오

        조건 1) pid는 기본키이다 조건

                 2) pnum은 유일한 값을 가져야 한다 조건

                 3) pname은 null 값을 허용하지 않는다 

drop table players;
create table players (
    pid int primary key,
    pnum varchar(20) unique,
    pname varchar(20) not null,
    psport int,
    tnum int
);

1. 1981년 1월 1일부터 1983년 2월 1일까지 입사한 사원 중 이름에 ‘C'가 들어가거나 이름 두 번째 알파벳이 ’A'로 시작하는 사원의 이름(ENAME), 직책(JOB), 급여(SAL), 입사일 (HIREDATE)을 급여가 낮은 순으로 출력하는 SQL 문을 작성하고 결과를 보이시오. (단, 급여 가 같은 경우, 이름의 알파벳 순서로 출력한다.)

SELECT ENAME, JOB, SAL, HIREDATE
FROM emp
WHERE (ENAME LIKE '%C%' OR SUBSTRING(ENAME, 2, 1) = 'A')
  AND HIREDATE BETWEEN '1981-01-01' AND '1983-02-01'
ORDER BY SAL ASC, ENAME ASC;

2. 직책이 ANALYST인 사원 중 급여가 3000 이상인 사원의 이름(ENAME), 직책(JOB), 급여 (SAL), 입사일(HIREDATE)을 출력하는 SQL문을 작성하고 결과를 보이시오. (이때, 입사일은 다음의 형식에 맞춰 문자열로 변환한 값을 출력한다. ex) '2023-09-21'의 경우 ‘23 September 21th Thu‘로 변환)

SELECT 
    ENAME, 
    JOB, 
    SAL, 
    DATE_FORMAT(HIREDATE, '%y %M %D %a') AS HIREDATE
FROM emp
WHERE JOB = 'ANALYST'
  AND SAL >= 3000;

1. 파이썬에서 Module(모듈) 이란?

   1) 파이썬 코드로 이루어진 파일(.py)

   2) 함수나 변수, 클래스 등의 코드가 들어가 있다

   3) 파일로 이루어진 모듈은 다른 파이썬 파일, 그리고 다른 실행환경에서 import해 사용할 수 있다

2. 모듈, 패키지, 라이브러리, 프레임워크

   1) 하나의 독립적인 모듈로 제공되기도 하지만, 다른 모듈과 함꼐 하나의 모음빚으로 제공되기도 한다.

       모음집의 크기와 용도에 따라 패키지, 라이브러리, 프레임워크 등 다양한 이름으로 불린다

   2) 패키지

      -1 하위 모듈을 모아놓은 디렉토리(폴더)

      -2 __init__.py 모듈을 포함한다

      -3 __init__.py 모듈은 해당 패키지가 사용될 때 필요한 기본 설정이 되어 있고, 자동 실행된다

   3) 라이브러리

      -1 모듈, 패키지 등 재사용이 가능한 코드의 모음집을 통칭해 부르는 이름

      -2 여러개의 패키지로 이루어진 모음집

   4) 프레임워크

      -1 라이브러리보다 포괄적인 개념

      -2 라이브러리가 도구 모음집만 제공하는 반면, 프레임워크는 라이브러리와 함께 라이브러리를 쉽게 적용할 수 있는

          툴과 아키텍처를 함께 제공한다.

​

3. 파이썬 패키지 관리자, pip

   1) 파이썬에서 사용되는 모든 모듈, 패키지, 라이브러리, 프레임워크 등은 일반적으로 pip이라는 파이썬 패키지 관리자를

       이용해 설치하고 관리한다.

1. 프로그래밍

1-1 프로그래밍이란 뭐라고 생각하는가

1-2 컴파일러는 뭐고 인터프리터는 뭔가

2. 자바스크립트

2-1 자바스크립트의 특징은 무엇인가

3. 변수

3-1 변수란 무엇인가

3-2 식별자란 무엇인가

3-3 변수를 선언한다는 것은 어떤 것을 의미하는가

3-4 var 키워드는 무엇인가

3-5 호이스팅이 무엇인가

3-6 var 키워드의 문제점은 무엇인가

3-7 let 키워드는 var 키워드와 어떤 점이 다른가

3-8 TDZ

3-8 const 키워드는 어떤 특징이 있는가

3-9 식별자 네이밍 규칙은 어떤 것들이 있는가

3-10 리터럴이 무엇인가

4. 데이터 타입

4-1 데이터 타입의 종류는 어떤 것들이 있는가

4-2 심벌 타입은 무엇인가

4-3 데이터 타입은 왜 필요한가

4-4 정적 타이핑이 무엇인가

4-5 동적 타이핑이 무엇인가

5. 타입 변환과 단축 평가

5-1 명시적 타입 변환이 무엇인가

5-2 명시적 타입 변환 함수를 예를 들어볼 수 있는가

5-3 암묵적 타입 변환이 무엇인가

5-4 truthy / falsy한 값이 무엇인가

6. 배열

6-1 자바스크립트의 배열은 자료구조의 배열과 같나

6-2 배열의 메서드는 어떤 종류가 있는가

6-3 고차 함수에 대해서 아는가

6-4 forEach 메서드와 map매서드의 차이점에 대해 알고있는가

7. 객체 리터럴

7-1 자바스크립트에서 객체란 무엇일까

7-2 함수와 메서드의 차이점에 대해 알고있는가

7-3 자바스크립트에서 객체를 생성하는 방법은 어떤 것들이 있나

8. 원시 값과 객체 비교

8-1 동적 타이핑을 지원하는 자바스크립트에서 데이터의 타입을 크게 2개로 나누는 이유가 있을까

8-2 값에 의한 전달이 뭔가

8-3 참조에 의한 전달이 뭔가

9. 함수

9-1 자바스크립트에서 함수를 정의하는 방법은 몇가지가 있나

9-2 함수 선언문과 함수 표현식은 어떤 차이가 있나

9-3 즉시 실행 함수(IIFE)에 대해 알고있나. 알고있따면 아는 내용에 대해 말해라

10. 스코프

10-1 스코프가 무엇인가

10-2 스코프에는 어떤 종류가 있는가

10-3 렉시컬 스코프를 아는가? 안다면 렉시컬 스코프는 무엇을 의미하는가

10-4 전역 변수로 변수를 선언하면 생기는 문제점은 무엇이 있을까

11. 생성자 함수에 의한 객체 생성

11-1 생성자 함수가 무엇인가

11-2 객체 리터럴로 만들 떄와는 무슨 차이가 있는가. 왜 생성자 함수를 사용하나

11-3 생성자 함수가 객체(인스턴스)를 생성하는 과정에 대해 간략하게 설명해줄 수 있나

12. 함수와 일급 객체

12-1 일급 객체가 뭔가

12-2 자바스크립트에서 함수가 일급 객체라면, 일급 객체로 뭘 할 수 있는가

12-2-1 함수형 프로그래밍이 무엇인가

12-2-2 순수 함수가 무엇인가. 일반 함수와 어떤 차이가 있는가

13. map과 set, lookup table

14. 프로토타입

14-1 객체지향 프로그래밍은 무엇을 의미하는가

14-2 객체지향 프로그래밍의 특징에 대해 말해볼 수 있는가

14-3 자바스크립트는 객체지향 프로그래밍 언어인가

14-4 프로토타입이 무엇인가

15. strict mode

15-1 strict mode가 무엇인가

15-2 strict mode를 통해 무엇을 예방할 수 있는가

16. 빌트인 객체

16-1 빌트인 객체가 무엇인가. 종류는 어떤게 있는가

16-2 래퍼 객체에 대해 알고있는가

17. this 

17-1 this가 무엇인가

17-2 this 바인딩이란 무엇인가

17-3 this는 동적으로 바인딩이 된다고 하는데 바인딩되는 객체가 어떻게 다른가

18. 실행 컨텍스트

18-1 실행 컨텍스트에 대해 말해보라

19. 클로저

19-1 클로저에 대해 아는가

19-2 클로저를 사용하면 뭐가 좋은가

19-3 클로저를 어떻게 생성하는가

20. 클래스

20-1 자바스크립트에서 클래스가 생기기 전에는 어떤 방식으로 객체지향 패턴을 구현했나

20-2 생성자 함수와 클래스는 어떤 차이가 있는가

20-3 클래스 정의

20-4 클래스의 상속

21. 스프레드 문법

21-1 spread 문법이 무엇인가

21-2 어떤 상황에서 사용할 수 있는가

22. 구조 분해 할당

22-1 구조 분해 할당이 무엇인가

22-2 구조 분해 할당은 크게 어떤 종류가 있는가

23. 브라우저 렌더링 과정

23-1 브라우저의 렌더링 과정에 대해 설명하라

23-2 브라우저의 렌더링 과정에 자바스크립트는 어떻게 동작하는가

23-3 <script></script> 태그를 <body></body> 태그 밑에 둬야하는 이유가 있을까

24. DOM

24-1 DOM이 무엇인가

24-2 DOM을 구성하는건 뭐가 있나

25. 이벤트

25-1 마우스 이벤트 타입에 뭐가 있나. click말고 클릭을 대체할 수 있는 이벤트가 있나

25-2 그 외에 알고 있는 대표적인 이벤트가 있는가

25-3 이벤트 핸들러를 등록하는 방식에는 어떤 것들이 있나

25-4 이벤트 전파(propagation)에 대해 알고있는가

25-5 이벤트 위임(delegation)에 대해 알고있는가

25-6 e.preventDefault에 대해 알고 있는가

25-7 e.stopPropagation

26. 타이머

26-1 호출 스케줄링이 무엇인가

26-2 타이머 함수에는 어떤 것들이 있나

26-3 이벤트가 과도하게 호출되어 성능에 문제를 일으킬 경우에 할 수 있는 어떤 일을 통해 해결할 수 있나

26-4 디바운스에대해 알고 있는가

26-5 쓰로틀에 대해 알고 있는가

27. 비동기 프로그래밍

27-1 동기와 비동기의 차이점에 대해 설명하라

27-2 이벤트 루프와 태스크 큐에대해 알고 있는가

27-3 마이크로태스크 큐에대해 알고 있는가

27-4 태스크 큐와 마이크로태스크 큐중 어떤 것이 먼저 실행되었나

28. Ajax

28-1 Ajax가 무엇인가. 어떤 것을 담당하고 있는가

28-2 Ajax를 사용하면 기존 방식과 어떤 차이가 있는가

28-3 JSON이 뭔가

28-4 JSON이 제공하는 정적 프로토타입 베서드에 대해 몇가지 말해봐라

28-5 Ajax로 HTTP요청을 보내기 위해서는 어떤 방법을 사용할 수 있나

28-6 XMLHttpRequest와 fetch 메서드의 차이는 뭐라고 생각하는가

29. REST API

29-1 REST API가 무엇인가

29-2 REST API의 구성은 어떤 것이 있나

29-3 REST API를 설계하는데 중요한 것이 있을까

29-4 HTTP 요청 메서드에 대해 아는대로 말해보라

29-5 HTTP 상태 코드를 아는대로 말해보라

30. Promise

30-1 콜백이란 뭐라고 생각하는가

30-2 프로미스가 뭔가

30-3 프로미스 생성 방법

30-4 프로미스의 상태를 나타내는 것은 어떤 것들이 있나

30-5 프로미스 빌트인 객체가 제공하는 정적 메서드에 대해 알고있는가

31. 제너레이터와 async await

31-1 제너레이터란 무엇인가. 일반함수와는 어떤 차이가 있는가

31-2 제너레이터의 구조

31-3 async / await가 무엇인가. 기존의 promise와는 어떤 차이가 있는가

31-4 promise와 async / await의 차이점 한줄 요약

32. 에러

32-1 에러처리를 왜 해야 하는가

32-2 자바스크립트에서 에러를 처리하는 방법에는 뭐가 있을까

33. 모듈

33-1 모듈이 뭔가

34. 가비지 컬렉션

34-1 자바스크립트의 가바지 컬렉션에 대해 알고 있는가