본문 바로가기

분류 전체보기

(98)
[JS 기초탄탄 프로젝트] 브라우저 이해하기 - 문서, 이벤트, 인터페이스 참고 https://ko.javascript.info/ui 브라우저: 문서, 이벤트, 인터페이스 ko.javascript.info 1. 호스트 자바스크립트가 돌아가는 환경. 옛날에는 웹브라우저만 존재했지만 오늘날에는 Node.js 기반의 서버를 비롯해 다양한 범용 어플리케이션이 될 수 있다. 플랫폼 특정 기능은 브라우저일 경우 웹페이지 제어수단, node일 경우는 서버 사이드 기능 등이 있다. 2. 브라우저 환경 호스트가 웹브라우저일 때 사용 가능한 최상단의 기능은 winodw 객체이다. (DOM, BOM, JS를 포함한다) window 객체는 자바스크립트 코드의 전역 객체가 되며, 브라우저(호스트)를 제어할 수 있는 기능을 제공한다. 3. DOM 문서객체모델. 웹 페이지 내 콘텐츠를 객체화한 것. wi..
[워다타 프로젝트] 4. 컴포넌트 흐름 구성하기 - Analyze, WordBook, WordList [사용 프로그램] draw.io www.diagrams.net/ Diagram Software and Flowchart Maker Security-first diagramming for teams. Bring your storage to our online tool, or go max privacy with the desktop app. No login or registration required. www.diagrams.net [내용] 1. Analyze, WordBook, WordList 단어장 분석 신청 화면(Analyze)과 단어장 목록 화면(WordBook)에서 각각 단어 목록 화면(WordList)으로 넘어가는 부분의 로직 drive.google.com/file/d/1OSeeAZGCRGCdw2..
[기술면접 대비] 4. CS 공통 - 네트워크 네트워크, 인터넷, 웹 여러 통신 장비가 데이터를 공유할 수 있게 연결된 디지털 통신망 네트워크가 있고, 이를 이용하는 가장 큰 네트워크 통신망이 인터넷. 웹은 인터넷을 통해 이용하는 서비스 중 하나이다. 인터넷 상의 데이터 전달 packet switching : 중간중간 라우터를 거쳐가며 패킷을 전달. - 회선을 점유하지 않고 바로 다음 라우터에 보내가면서 최종 목적지로 도달. - 패킷 단위로 움직여야 함. 라우터는 패킷의 끝부분까지 다 도달할 동안 기다린 다음 단계로 이동을 시작함. - 인터넷 사용자 수의 제한이 없다. (동시에 네트워크 요청을 하는 접속자가 터지면 문제가 생기긴 함 ex 수강신청) *circuit switching : 출발지부터 최종 목적지까지 미리 길을 다 닦아놓음. 점유함. 옛날..
[기술면접 대비] 3. CS 공통 - 운영체제 [프로세스 관련] 프로세스란? 커널의 관리 하에 실행 중인 프로그램. 한 시스템 내의 작업의 단위. 프로그램은 디스크에 저장된 파일의 내용과 같은 수동적 개체라면 프로세스는 능동적인 개체. 프로세스 문맥 : CPU 상태(Program Counter, Register), 메모리 영역(code, data, heap, stack), 관련 커널 데이터(PCB, kernel stack-커널 영역에 프로세스 별로 별도의 커널스택을 생성) 각종 자원(H/W 또는 S/W resource)을 요청하고 받을 수 있음 PCB란? 프로세스 생성시 생성됨. 프로세스 관리에 필요한 정보 저장(Linked List 형태로 구성되어있음) PID, Parent PID. 프로세스 상태, CPU 정보(CPU register context..
[기술면접 대비] 2. JS/HTML/CSS [HTML] 1. HTML 이란? html은 마크업 언어이다. 여는 태그, 내용, 닫는 태그를 통틀어 html 요소(element)라 이른다. element가 가지는 속성은 attribute라 한다. attribute에는 class, id, type, disabled 등이 있다. HTML5의 표준 html 구조는 다음과 같다. I am a HTML document 은 문서의 형식을 나타낸다. 마크업의 유효성을 검증하고 브라우저에게 렌더링 모드를 알려줌. 최근에는 크게 유의미하게 사용되지는 않으며, 대신 http 헤더의 Content-Type에 문서 타입을 정의한다. 전체 페이지의 컨텐츠를 포함하는 가장 기본 요소 이용자에게 직접적으로 표시되지 않아도 검색 키워드, 홈페이지에 대한 설명, css 스타일 등..
[기술면접 대비] 1. 웹/브라우저 1. 브라우저가 렌더링 되는 과정 사용자 인터페이스, 그 중에서도 주소창에 사용자가 특정 URL를 입력한다. DNS 서비스를 통해 주소가 IP로 바뀌고, 해당 서버의 자원을 요청한다. 서버에서 제공하는 여러 자원 중 html 및 css문서는 브라우저의 렌더링 엔진을 통해 렌더링이 된다. html 파서와 css 파서가 각각 DOM트리와 SSOM트리를 만들고, 화면에 보여지는 요소들만으로 렌더 트리를 구축하고 배치한 뒤 그리기 시작한다. 크롬(28버전 이전)과 사파리는 웹킷 엔진을 사용하고 파이어폭스는 게코 엔진을 사용한다. 현재 크롬은 웹킷을 기반으로 구글에서 자체적으로 개발한 블링크 엔진을 사용한다. 이러한 과정은 점진적으로 진행된다. 모든 문서의 파싱이 다 끝나기를 기다리지 않고 먼저 파싱이 된 것들에..
[프로그래머스] 2020 카카오 공채 - 괄호변환 오늘 푼 문제 2. 괄호변환 / Lv.2 / 시간 : 29분 programmers.co.kr/learn/courses/30/lessons/60058?language=javascript 코딩테스트 연습 - 괄호 변환 카카오에 신입 개발자로 입사한 "콘"은 선배 개발자로부터 개발역량 강화를 위해 다른 개발자가 작성한 소스 코드를 분석하여 문제점을 발견하고 수정하라는 업무 과제를 받았습니다. 소스를 programmers.co.kr function solution(p) { let split = (s)=>{ // u, v 분리 let [open,close] = [0,0]; for(let i=0;i{ // 올바른 문자열 판단 let stack = []; for(let i=0;i{ if(s==="") return "..
[프로그래머스] 2020 카카오 공채 - 문자열 압축 오늘 푼 문제 1. 문자열 압축 / Lv.2 / 시간 : 31분 programmers.co.kr/learn/courses/30/lessons/60057 코딩테스트 연습 - 문자열 압축 데이터 처리 전문가가 되고 싶은 "어피치"는 문자열을 압축하는 방법에 대해 공부를 하고 있습니다. 최근에 대량의 데이터 처리를 위한 간단한 비손실 압축 방법에 대해 공부를 하고 있는데, 문 programmers.co.kr function solution(s) { if(s.length===1) return 1; var answer = Infinity; let max = s.length/2; for(let n=1;n{ let next = arr[i+1]; if(cur===next) cnt++; else{ if(cnt===1) ..