cookie, sessionStorage, localStorage 기술은 모두 클라이언트 측에서 값을 저장하는 key-value 저장소 매커니즘이다. 모두 문자열로만 값을 저장할 수 있다. cookie localStrorage sessionStorage 생성자 클라이언트 또는 서버 Set-Cookie 헤더를 사용 클라이언트 클라이언트 만료 수동으로 설정 영구 탭 종료 시 브라우저 세션 전체에서 지속 만료 설정 여부에 따라 다름 ㅇ X 모든 http 요청과 함께 서버로 보냄 쿠키는 Cookie 헤더를 통해 자동 전송됨 X X 용량 (도메인 별) 4kb 5MB 5MB 접근성 모든 윈도우 모든 윈도우 같은 탭

자바스크립트 프레임워크가 인기있기 전에, 프론트엔드 개발자는 비표준 속성, DOM 추가 프로퍼티의 동작없이, DOM 자체에 추가적인 데이터를 저장하기 위해 data- 속성을 사용했다. 이는 적절한 속성이나 요소가 없는 페이지나 어플리케이션에 사용자 정의 데이터를 비공개로 저장하기 위한 것이다. 최근에는 data- 속성을 사용하는 것을 권장하지 않는다. 그 이유는 사용자가 브라우저 inspect 기능을 사용하여 데이터나 속성을 쉽게 수정할 수 있기 때문이다. 데이터 모델은 자바스크립트 자체에 더 잘 저장되며, 라이브러리나 프레임워크의 데이터 바인딩을 통해 DOM을 업데이트 된 상태로 유지하는 것이 더 낫다.

www.acmicpc.net/problem/2458 2458번: 키 순서 1번부터 N번까지 번호가 붙여져 있는 학생들에 대하여 두 학생끼리 키를 비교한 결과의 일부가 주어져 있다. 단, N명의 학생들의 키는 모두 다르다고 가정한다. 예를 들어, 6명의 학생들에 대하여 www.acmicpc.net 핵심아이디어 문제에서 요구한 구현사항을 그대로 구현하기만 하면된다. 각 정점에 대해, ~보다 작은 수/~보다 큰 수를 구한뒤 더 했을때 n-1개가 되면 자신의 위치를 정확히 알고 있는 점을 이용한다. ~보다 작은 수/~보다 큰 수는 어떻게 구하는가? 각 정점간의 relation을 dfs의 edge처럼 사용하여 탐색하며 카운팅해주면 된다. 끝이다. const readline = require('readline');..

www.acmicpc.net/problem/11055 11055번: 가장 큰 증가 부분 수열 수열 A가 주어졌을 때, 그 수열의 증가 부분 수열 중에서 합이 가장 큰 것을 구하는 프로그램을 작성하시오. 예를 들어, 수열 A = {1, 100, 2, 50, 60, 3, 5, 6, 7, 8} 인 경우에 합이 가장 큰 증가 부분 수 www.acmicpc.net 비슷한 알고리즘으로는 LIS가 있는데, LIS가 기억나지 않아서 급하게 찾아보았던 문제였다 ㅜㅜ 핵심아이디어 주어진 수열에서, 증가하는 부분수열 중 가장 합이 큰 것을 구하는 문제이다. 당연히 모든 경우의 수를 탐색할 수 없으므로, dp를 사용해야한다. dp[i] 를 i번째 까지의 수에서 가장 큰 증가하는 부분수열의 합이라고 정의한다. 그럼 dp의 초기..

3주간의 프리코스를 마무리하고 오프라인 코딩테스트를 마치고 12/30일 오후 3시 기다리고 기다리던 우아한 테크코스 합격 메일이 도착했다. 작년에 탈락한 우아한테크코스 2기의 설움을 딛고 1년만에 성취한 목표라서 감회가 남다르고 뛸뜻이 기뻤다. (zereight.tistory.com/416) 서류와 코딩테스트 관련해서는 이전에 포스팅했으니 (zereight.tistory.com/748) 이번엔 한달간의 프리코스 + 오프라인코딩테스트에 대해 글을 써보고자 한다. 프리코스는 백엔드, 프론트엔드에게 모두 같은 주제가 주어졌으며 언어는 java, javascript, 구현방식은 콘솔, 웹페이지으로 차이가 있었다. 1주차에 주어진 과제는 작년에도 한듯한 숫자야구게임이었다. (github.com/zereight/j..

여러 언어로 되어 있는 컨텐츠의 페이지를 어떻게 제공하는가? 하나의 페이지 내의 내용은 하나의 일관된 언어로만 표시되어야 한다. HTTP 요청을 서버에 보내면, 대게 요청하는 user agent가 Accept-Language 헤더와 같은 기본 언어 설정에 대한 정보를 보낸다. 그 다음 서버는 이 정보를 사용하여 해당 언어가 제공가능한 경우, 해당 언어 버전의 문서를 반환할 수 있습니다. 반환된 HTML문서는 ... 과 같이 태그에 lang 속성을 선언해야 합니다. 그리고 서버에서 백엔드 프레임워크의 도움을 받아 특정 언어로 HTML페이지를 동적으로 생성하여 제공합니다. 언제 html 태그에 lang 속성을 사용하는가? (webisfree.com/2019-02-27/html-css-lang-%ED%94%8..

참고: github.com/zereight/front-end-interview-handbook/blob/master/contents/kr/README.md zereight/front-end-interview-handbook 🕸 No-bullshit answers to the famous h5bp "Front-end Job Interview Questions" - zereight/front-end-interview-handbook github.com DOCTYPE이란 무엇인가? DOCTYPE은 document type의 약어이다. DOCTYPE은 항상 DTD (document type definition)과 관련된다. (DTD는 특정 문서가 어떻게 구성되어야 하는지 정의하는 역할) 웹페이지에는 DOCTYP..

www.acmicpc.net/problem/1956 1956번: 운동 첫째 줄에 V와 E가 빈칸을 사이에 두고 주어진다. (2 ≤ V ≤ 400, 0 ≤ E ≤ V(V-1)) 다음 E개의 줄에는 각각 세 개의 정수 a, b, c가 주어진다. a번 마을에서 b번 마을로 가는 거리가 c인 도로가 있다는 의 www.acmicpc.net 핵심 아이디어 가장 작은 사이클을 가지는 경로의 전체 가중치를 구하는 문제이다. 여기서 사이클을 판단하는 방법으로는 union find를 생각했었는데, 그 보다 더 간단한 방법이 있었다. 바로 '플로이드 와샬'방법을 사용하는 것! 일반적으로 플로이드 와샬 알고리즘을 사용할때에는 i->i인 경로, 즉 matrix[i][i]는 INF으로 통일한다. 하지만 i->i경로 matrix[..