1. SOP(Same Origin Policy)

동일 출처 정책은 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식. 동일 출처 정책

• 동일 출처 정책으로 한 출처에서 로드된 문서나 스크립트가 다른 출처의 자원과 상호작용 하지 못하도록 제한 하는 것
• 동일한 출처 라는 것은 프로트콜(Protocol), 호스트(Host), 포트(Port)가 같아야 함을 말한다.
• 웹 페이지 스크립트는 해당 페이지와 동일한 서버에 있는 Ajax 비동기 통신을 할 수 있다.
  js에서 서로 다른 도메인에 대한 요청을 보안상 제한하는 정책을 말합니다. SOP정책으로 인해 생기는 이슈를 크로스도메인 이슈라고 하고 JSONP는 이 이슈를 우회해서 데이터 공유를 가능하게 합니다 cross가 활성화되기 이전에 데이터를 요청하는 방법입니다. sop에 따라 도메인 간 request를 제한하지만

<script src="..."></script>로 추가하는 JavaScript
<link rel="stylesheet" href=“…">로 추가하는 CSS
<img>로 표시하는 이미지.
<video>와 <audio>로 재생하는 미디어.
@font-face로 적용하는 글씨체.
> <iframe>으로 삽입하는 모든 것.

iframe으로 다른 출처에서 가져온거는 null이 뜨고
같은 출처에서 가져온거면 접근 가능!
SOP때문에 (보안상 제한)되므로 pageOther: null

2. 교차출처 리소스 공유(cross origin resource sharing)

• Cross Origin Resource Sharing (말 그대로 다른 도메인간의 자원 공유를 의미)
• 본래 대부분의 브라우저는 타 도메인 간 요청을 Same-Origin-Policy에 의해 차단한다.
• 이런 설정을 우회하기 위해 여러 방법이 있었지만, HTML5가 등장하면서 CORS가 등장했다.
  CORS는 헤더를 통하여 Cross-Domain간 사용가능한 자원을 헤더를 통하여 알려준다.

브라우저가 에러 발생시킨다.
추가 HTTP헤더를 사용하여, 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제. 웹 애플리케이션은 리소스가 자신의 출처(도메인,프로토콜,포트)와 다를 떄 교차출처 HTTP요청을 실행합니다.

깃헙 데이터를 다른 곳에서 받을 수 있는 이유
access-control-allow-origin: *
모든 도메인에서 접근 가능함을 의미한다

JSON-P 설명

요청(클라이언트 > 백) - 응답 (백 > 클라이언트)
Access-Control-Allow-Origin
응답헤더는 이 응답이 주어진 origin으로부터의 요청코드와 공유될 수 있는지 ( 서버에서 허가해줘야함 )
카카오웹지도

앱키 - 달라지면?
410에러
클라이언트 오 류상태 응답코드 - 해당 리소스에 유효한 인증 자격 x

3. 웹 페이지 랜더링 과정

1. HTML 마크업을 처리하고 DOM 트리를 빌드합니다.

2. CSS 마크업을 처리하고 CSSOM 트리를 빌드합니다.

3. DOM 및 CSSOM을 결합하여 렌더링 트리를 형성합니다.

4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 형태를 계산합니다.

5. 개별 노드를 화면에 페인트합니다.

   브라우저 렌더링 과정은 우선, 사용자가 페이지에 접속하고 HTML을 서버에서 내려받게 되면 이를 브라우저 렌더링 엔진에서 파싱(처리)합니다. 이렇게 "DOM 트리"를 만들고, link 태그를 통해 CSS 파싱을 해서 "CSSOM 트리"를 만듭니다. DOM 트리와 CSSOM 트리를 결합한 것이 "렌더 트리"가 되고, 레이아웃 작업을 통해 사용자에게 그려줄 영역을 계산해서 화면에 뿌려줍니다. 이 과정을 진행하다가 자바스크립트 런타임 환경에 수행권한을 넘겨 결과 값을 받으면 DOM 파싱은 중단됩니다. 모든 노드 수치를 재계산해서 렌더 트리를 재생성하는 과정을 "reflow"라 하고, 이후 재생성된 렌더 트리를 다시 그리는 것을 "repaint"라 합니다. 리페인트는 레이아웃 수치에 영향을 끼칠 때만 진행됩니다.

   레이아웃 트리(렌더 트리) 생성

• 페인트 기록에는 요소를 렌더링하는 순서가 저장. 글고 지금까지의 정보를 바탕으로 한 페이지를 여러개의 레이어로 나눈 뒤 그 위에 텍스트, 색, 이미지, 보더, 그림자 등의 모든 시각적 부분을 그리는 작업 필요

인프런 강의에서 추가 설명 *

1.파싱 / 4. 페인트 / 5. 컴포지팅
브라우저 랜더링 설명사이트

4. GET, POST

GET : 서버로부터 정보를 조회하기 위해 설계된 메소드 입니다.

• 필요한 데이터를 Body에 담지않고 쿼리스트링(URL)을 통해 전송합니다.
• 파라미터명과 각각의 파라미터값을 URL에 포함합니다.
• 특정 페이지 링크 및 북마크가 가능합니다.
• 웹 캐시가 요청을 가로채 서버에게 재요청시 리소스의 복사본을 반환합니다. 따라서 브라우저 히스토리에 남아 보안에 취약합니다.

POST : 리소스를 생성/변경하기 위해 설계된 메소드 입니다.

• 길이에 제한이 없어 대용량 데이터를 전송할 수 있다
• 데이터가 body로 전송되고 내용이 눈에 보이지 않아 GET보다 보안적 측면에서 안전하지만, 민감한 데이터의 경우 반드시 암호화하여 전송해야합니다.
• 게시글작성 등에 사용되며, 길이 제한이 따로 없어 용량이 큰 데이터를 보낼 때 사용합니다.

get길이가 생각보다 짧지않았다. -stackoverflow

5. 회사에 지원한 이유, 입사한다면 어떤 기여를 할 수 있다고 생각하나요?

1. 본인을 낮추는 것은 지양
2. 구체적으로 어떻게 기여할 것인지 말하기
3. 적응할것이다 -> 빼기 당연한 말 / 어떻게 기여할 것인가가 질문의 요지
4. 본인의 강점 어필
5. 원활한 커뮤니케이션 -> 빼기
6. 구체적인 나의 강점 경험을 통해 어필

• 회사 서비스 반나절만 훑고가도 티가 난다!

  날마다 배운것을 기록하는 습관 !
  서비스를 경험해보고 이런 부분을 보완하면 좋겠다고 생각했고, (이 부분을 구현해봤습니다!)

6. section 요소와 article 요소의 사용 용도

• article 요소는 사이트 안에서 독립적으로 구분해 재사용할 수 있는 구획을 나타냅니다. 예를 들어, 뉴스기사, 블로그 글 등이 있습니다.
• section 요소는 HTML문서의 독립적인 구획을 나타내며 더 적합한 의미가 없을 때 사용합니다. 보통은 제목을 포함합니다.

7. CSS Sprite기법에 대한 정의와 장단점

• 정의 : 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미

• 장점

• 웹페이지에 이미지가 사용되면 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 요청하게 됩니다. 이러한 요청을 단 몇 번으로 줄여 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼에서는 로딩 시간을 단축해주는 효과가 있습니다.
• 또한, 많은 파일을 관리하는 대신 몇 개의 이미지 파일만을 관리하면 되므로 매우 간편합니다.
• 단점 : 하나의 이미지 요소의 크기가 변경되면 위치값을 재조정해야 하기 때문에 잦은 수정이 있는 이미지는 스트라이프를 적용하지 않는 것이 좋습니다.
• 또한, 큰 이미지는 로딩 시간이 길어지므로, 과도하게 스프라이트 기법을 사용하지 않는게 좋습니다.
• 결론: 잦은 수정이 있거나 큰 이미지는 스프라이트 기법 사용하지 않는다!(잦은 수정인 이미지는 마지막에 위치시킨다던가 해서 다른 이미지 좌표는 안건드리도록 하기도 한다)

8. 형상관리도구(버전 관리 시스템)에 대해 전반적인 설명+(주 사용 도구도 서술해주세요.)

정의

• 소프트웨어 버전 관리 툴 , 소스의 변화를 끊임없이 관리하는 것

• 소스를 버전 별로 관리할 수 있어서 개발할 때 실수로 소스를 삭제하거나, 수정하기 전으로 돌아가야하는 경우 유용하게 사용되는 툴

• 또한 팀 프로젝트에서 누가 무엇을 어떻게 수정했는지도 알 수 있기 때문에 코드를 추적하는 데에도 쓰인다.

주사용 도구

• Client/Server 타입 : Subversion(SVN), CVS, Perforce, ClearCase, TFS

• 분산저장소 타입 : Git, Mercurial, Bitkeeper, SVK, Darcs

• Folder 공유 타입 : RCS, SCCS

형상관리도구 설명블로그

9. alt와 title의 차이

alt

• 해당 경로에 이미지가 없거나 액박이 뜰 때 이미지 대신 보여지는 대체 텍스트
• 시각 장애인들은 alt의 내용을 리더기로 듣게 된다. 글자수(200-250자) 권장 / 그 이상이면 longdesc로 제공
• 의미없는 이미지일 경우 alt넣지 않는다.
• 권장사항(seo에도 좋음-검색최적화)
  title
• 이미지 위에 마우스 커서가 위치했을 때 보여지는 말풍선 (이미지 제목)
• 선택사항
  title 참고사이트

10. 프론트엔드 관련 공부는 어떻게 진행하고 계신가요??

저는 프론트엔드 기술의 발전 방향이 자바스크립트와 리액트 숙련도 그리고 사용자경험 증진이라고 생각하는데요. 그 관점에서 리액트를 통해 동적 페이지를 꾸리는 프로젝트를 꾸준히 하고 있습니다. 3개 정도 가지고 있고, 포트폴리오로 이미 공유드린바 있구요. 그리고 사용자경험에 대한 연구를 위해 UX분야 경력자들과 함께 스터디를 3개월째 꾸려오고 있습니다. (영웅님의 모범답안)
무엇을 위해 나는 ~ 하고있다.
현재 ~에 초점을 맞추어 ~을 공부하고 있다.

스터디를 꾸리는데, 스터디 운영하는 방법을 개선하면서 변화를 주도했다. Good!
컨퍼런스 다녀와서 내용 정리해서 발표 Good!
연봉협상에 중요한 점은 ? -> 결과물이 깔끔 + 시킨것만 하면 절대 오르지 않음 + 사내 스터디

카카오 지도 만들기

1. 카카오 개발자사이트 (https://developers.kakao.com) 접속
2. 개발자 등록 및 앱 생성
3. 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록
4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080)
5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다.
6. 앱을 실행합니다.

header에서 script를 따로 받기 때문에, SOP에 제한받지 않고 사용할 수 있다.
JSON객체에 관한 설명 (데이터를 받아올때 주로 json타입)