Portfolio

프로젝트

(:발표 7분 질문 13분)

웹워커

관련

워커

렌더링 프로세스에서 파싱을 담당하는 메인 스레드를 방해하지 않고 독립적인 일을 수행하는 스레드

웹 워커

스크립트 연산을 웹 어플리케이션의 주 스레드와 분리된 별도의 백그라운드 스레드에서 실행하는 기술.

UI 블락을 피하기 위해 이미지 인코딩, AI, game 등의 무거운 연산이 소요되는 작업을 담당함.

서비스 워커

웹, 브라우저, 네트워크 사이에서 프록시 서버 역할을 담당함.

서비스 워커는 활성화 탭과 독립적인 수명을 가지고 백그라운드에서 계속 살아있을 수 있음.

네트워크 요청을 가로채 수정 할 수 있으며(HTTPS에서만 사용 가능) 캐시, 네트워크 요청 등의 처리를 결정함.

1) 본래 네트워크 요청은 브라우저 프로세스의 네트워크 스레드가 담당하는데

2) 네트워크 스레드는 우선 서비스 워커가 등록된 스코프 레퍼런스를 참고해

3) 해당 사이트가 서비스 워커 스코프 내에 있다면 서비스 워커에 권한을 넘긴다.

4) 서비스 워커가 캐싱된 자원을 로드할지, 네트워크 스레드에 네트워크 요청을 보낼지 결정한다.

프로젝트 시 추가로 개선할 수 있는 사항

스마트에디터에 합류하게 된다면 기여할 수 있는 부분

인성

(:10분)

(인성) 웹개발자 & 프론트엔드 개발자 지망이유

어떤 개발자로 성장하고 싶은가 (단기적/장기적)

나의 장/단점

삶에서 중요한 가치 3가지

기술

(:15분)

(입코딩) 긴문자열이 주어졌을 때, 문자열을 압축할 수 있는 방법을 설명하여라

(JS) 가비지 컬렉션

💡

js에서 가비지콜렉션의 기준은 어떤 다른 객체도 참조하지 않는 객체 이다. 해당 객체를 참조하는 객체가 하나도 없다면, 가비지컬렉션이 수거해간다 (링크)

사용하지 않는 객체에 대해 null을 할당하여, 가비지 컬렉션이 수행되도록 할 수 있다.

mark-and-sweep 알고리즘 (가비지컬렉션 사용 알고리즘)

루트에서 부터 참조하고 있는 객체를 'mark' 한다.
mark된 모든 객체에 방문하여, 해당 객체를 참조하고 있는 객체를 'mark'하는 것을 반복
모든 도달 가능한 객체가 mark 된 이후, mark되지 않은 객체를 메모리에서 삭제(sweep)

최적화기법

세대별 수집 : 생성되지 얼마 안된 객체(새로운객체)를 더 집중적으로 감시 (대부분 생성이후 빠르게 쓸모가 없어지기때문) : 일정시간 살아남은 객체는 '오래된 객체'로 상대적으로 덜 감시
CPU가 쉬고 있을 때만 가비지컬렉션 실행하도록 함

(JS) this

💡

this

this는 함수 실행시 생성되는 실행컨텍스트에 속하며, 함수의 호출방법에 따라 this값이 다르다.

일반적으로 전역객체(windows)를 가르킴

method 방식 호출시 this는 함수실행한 부모객체를 가르킴

new 키워드를 통한 생성자함수로 호출한다면, 새롭게 생성된 인스턴스를 가르킴

call / apply / bind로 지정 가능 (링크)

person2.study.call(person1) : person2가 가지고 있는 study함수를 person1이 사용할 수 있도록 해라
call / apply 첫번째 인자로 this 지정

두번째 인자는 함수호출에 사용할 매개변수를 의미
call은 매개변수의 값을 각각 받음
apply는 매개변수를 배열형태로 받음
실제 사용할 수 없는 method들 사용가능

Array.prototype.join.call(arguments)
함수의 매개변수인 arguments는 유사배열형태이기 때문에 바로 배열메소드 사용불가 → Array.prototype을 빌려서 배열메소드 사용가능

bind

새롭게 binding된 함수를 만들고 반환
반환된 함수에는 this가 바뀌어 있다.
따라서 변수에 할당하고, 호출하는 형태로 사용한다.

let student = person2.study.bind(person1); student()

화살표함수에서의 this

정적으로 항상 상위스코프의 this를 가르키게됨
call, apply, bind 메소드 사용불가

(JS) 객체지향 프로그래밍

💡

객체지향프로그래밍은 공통적인 특징을 가지고 있는 하나의 틀인 '클래스'와 이 공통적인 특징에 특정값을 가지고 있는 '인스턴스'로 데이터구조를 접근하는 하나의 프로그래밍 패턴입니다.

복잡해진 데이터구조를 공통점을 중심으로 쪼개어 생각하는 프로그래밍 패턴이라고 생각

장점

코드 재사용 가능
객체 단위의 코드 생성으로 유지보수/디버깅이 용이

단점

처리속도가 상대적으로 느리다
설계 과정에서 시간과 노력이 필요
객체들이 상태를 공유함에 따라 예상치 못한 버그가능성

4가지 특성

추상화 : 공통 속성을 묶어 하나의 개념으로 표현하는 것
캡슐화 : 관련기능을 한 곳에 모으고, 외부에서 접근하는 것을 제한하고 숨길 수 있도록 함
상속성 : 부모클래스의 속성과 기능을 자식클래스가 상속받을 수 있는 것
다형성 : Overiding, 자식클래스에서 상황에 따라 상속받은 기능을 유동적으로 사용할 수 있는 것

(JS) 함수형 프로그래밍

💡

Side Effect를 최소화하기 위해 순수함수를 사용하는 프로그래밍의 한 기법

sideEffect

함수실행 시 함수 외부의 값이 변경되는 것과 같이 의도하지 않은 모든 동작들
사례

함수내부에서 new Date() 를 선언하면, 실행에 따라 다른 값 가짐- 외부환경
순수함수로 만들기 위해서 Date를 인자로 받도록 수정하여 해결
함수내부에서 외부의 값을 사용하는 것
함수내부에서 외부의 값을 변경하는 것

순수함수는 같은 인자에 대해 항상 같은 값이 리턴되도록 하는 함수

특징

불변성

메모리에 이미 담긴 상태를 변경하지 않는 다는 것
데이터 추가삭제시 재할당하지 않고, 원본을 복사한 별도의 list 생성
map, filter, concat

사용이유(장점)

예측가능한 코드 작성 (작성이외부분 신경쓰지 않아도 되기때문)
이해하기 쉽고 유지보수의 장점
순수함수는 모듈성을 가지고 있어 테스트가 용이하다

리액트는 객체지향프로그래밍인가?

프론트에서 발생할 수 있는 보안관련 이슈와 해결방안

자기소개

웹개발자를 선택한 이유 (3분)

기획, 디자인, 개발 중 가장 잘 맞는 부분을 선택
개발이 가장 잘 맞다는 것은?

개발이 재미있다 → 정답이 명확히 정해져 있다는 부분 재미있다.
잘맞다 → 일이 되어도 힘들어도 재미있어서 잘 맞는다.
기획, 디자인은 재미없다 → 재미가 없어서 잘 안맞다.

답변이 조금 애매모호한듯? → 답이 명확한 부분

인턴 동안 수행한 과제 PPT (준비30초 4분시작)

마크다운 변환모듈 → 스마트에디터 문서변환
markdown → json기반 생성

추가 json → markdown 역변환 구성완료

변환, 역변환 데모 ( ~1분30초)

고민과 해결과정

스펙분석 → 범위산정
컴파일러 이론 학습

토큰화 파싱 변환 생성 과정
토근 AST 변환 → SE AST
추상구문트리란?~
구현: 확장 활용 (6:50~8:10)

Seed를 만든 이유

구체화, SE단계
개선단계(8:40~

미리보기 탭 추가
성능분석

캐싱적용

캐싱을 활용할 때?

Web Worker

메세지 (~10:25)

인턴하면서 아쉬운 점 (너무빠르데?)
인턴하면서 달라진 점

테스트도구, jsDoc, .//?

개발이외의 다른 점 (~11:10)

(질문)추상구문트리란?
remarkable 라이브러리

선정기준에 따라 선정

효율적인 캐싱 방안, 개선방안

캐싱되어 있는 데이터 수를 늘린다?
파일 캐싱

100배 더 큰 문서 처리 가능한지?

보통 80~100개로 테스트한다.
일반적인 사용자에 대해서는 무리가 없지만, 4초정도 시간이 걸리고 실행자체에는 무리가 없다.
Razy.loading

추가 구현 사항

HTML태그
실시간변환

(HOW) 입력값들을 저장해둔 뒤, 이벤트를 기반으로 형식이 변환되도록 구현

토큰화과정 (20분)

인성

(인성) 웹개발자 & 프론트엔드 개발자 지망이유

좋아하는 것과 + 잘하는 것

사용자경험- 사용자인터렉션 많다.
구분이 많이 없어지고 있다.
프론트엔드 중에서도 관심있는 분야

디자인패턴, 코드가독성

(인성) 단기/장기적인 개발자로서의 목표

장기적

사용자의 문제를 기술로 해결하는 개발자.

단기적

프론트엔드 개발자로서 역량을 갖춰서 기술공유를 해보고 싶다.

(인성) 원하지 않는 업무들이 반복해서 주어질 때 어떻게 해결 (조금 수동적인 느낌도있다.)

레거시코드를 수정하는 일도 관련있는 일.
모든 업무에서 배울 점이 있다고 생각

그 중에 성장할 수 있는 포인트를 찾기 위해 노력
부서이동, 적극적인 업무변환에 대해서는 어떻게 생각?

일단 받아들인다.

(인성) 장점과 단점

장점 (2가지 선언하고 가는 것이 듣기에 편할 듯)

기술을 빨리 배운다
책임감과 욕심이 많다.

단점

업무를 도맡아서 하려는 부분이 있다. 다른 팀원의 기회를 뺏을 수도 있는 부분

(인성) 스트레스 해소 방안

산책을 통한 감정해소 (굳.)

(인성) 삶에서 중요한 가치 3가지

성장/발전

어제보다 나은 삶

재미/흥미

계속해서 도전하는 삶

인성면접 결과 굉장히 진취적이고, 성장에대한 열정이 있다고 느껴짐

기술 (~40분)

객체지향 프로그래밍

객체들로 표현하고, 메소드로 상호작용을 표현하는 방법
장단점

장점

객체들이 분리되기 때문에, 하나의 객체를 수정/추가 가능

조금추상적인 느낌?

단점

객체들의 의존성이 깊다면 설계가 복잡하다.

함수형 프로그래밍

무엇이고, 장단점
순수함수를 기본으로 작성하는 프로그래밍

장점

순수함수 사용으로, 불변성을 지켜야한다,
순수함수, 왜 불변성을 지켜야 할까

함수외부의 영향을 줄 수 있기 때문에

단점

(입코딩) 긴문자열이 주어졌을 때, 문자열을 압축할 수 있는 방법을 설명하여라

반복문

문자열을 기억하고, 다른문자를 만날 때 까지 cnt를 증가시킨다

call / apply / bind의 차이점

(Good..)

프론트에서 발생할 수 있는 보안 이슈 - 해결방안

스크립트를 삽입하여 실행하도록 함
정규표현식 사용해서 스크립트 태그 방지

CSRF

사용자가 어떤 행동을 하도록 유도함

기술면전 5일차 (주혜)

프로젝트

인성

기술 (~40분)