about front-end
-
브라우저 동작원리about front-end 2021. 9. 18. 18:24
크롬 브라우저를 사용한지 아마 어연 10여년이 되는 것 같다. 대학생 때, 그저 흔히 사용해왔던 ie 보다 디자인이 더 깔끔하고 직관적인것 같아 맘에 들어 사용하기 시작했다. 어연 10여년을 사용했음에도 개발자가 되기 전까지는 이 브라우저가 어떠한 원리로 동작하는지 전혀 몰랐다. 직접 배포작업들을 거치면서 웹 브라우저는 어떠한 방식으로 동작할지 살펴보게 되었다. 브라우저의 주요 기능 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서이지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI에 의해 정해진다. 브라우저 기본 구조 사용자 인터페이스 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분을 의미한다. 예를 들면, ..
-
[자료구조] Tupleabout front-end 2020. 7. 6. 14:53
1. 정의 - Tuple Tuple 이란? List와 마찬가지로 데이터를 순차적으로 저장할 수 있는 순열 자료구조이다. 하지만 list와 다르게 한 번 정의되고 나면 수정할 수 없다.(immutable) 2-3개 정도의 적은 수의 소규모 데이터를 저장할 때 많이 사용한다. 함수에서 리턴 값을 한 개 이상 리턴하고 싶을 때 자주 쓰인다. >>> my_tuple = (1,"2",3.0) >>> my_tuple (1, '2', 3.0) >>> for i in my_tuple: ... print(i) ... 1 2 3.0 >>> my_tuple[0] 1 >>> my_tuple[1] '2' >>> my_tuple[2] 3.0 >>> my_tuple[0] = 9 Traceback (most recent call l..
-
[자료구조] 1. Array (List)about front-end 2020. 7. 6. 14:48
1. 정의 - Array(List) JavaScript 에서는 Array, Python에서는 List Array(List)는 가장 기초적이고 단순하면서도 가장 자주 사용 되는 자료 구조이다. 2. Array 특징 순차적으로 데이터를 저장하는 자료 구조 Array의 가장 큰 특징은 순차적(ordered)으로 데이터를 저장한다는 점이다. 자료구조에 저장하는 데이터는 일반적으로 요소(element)라고 한다. Array는 주로 서로 연결된 데이터들을 순차적 으로 저장할때 사용한다. 순서가 상관 없더라도 서로 연결된 데이터들을 저장할때 일반적으로 사용된다. 그래서 array가 가장 자주 사용되는 자료구조중 하나가 되는 것이다. 기타 특징 삽입(insertion) 순서대로 저장된다. (즉, 새로 삽입되는 요소는 ..
-
[자료구조] 개요about front-end 2020. 7. 6. 14:30
1. What is Data Structure? - 자료구조란 데이터에 편리하게 접근하고 조작하기 위한 데이터를 저장하거나 조직하는 방법이다. - 자료 구조의 종류에 따라 각각 갖는 장점과 한계를 잘 이해하고 상황에 맞게 선택하고 사용하는 것이 중요하다. - 자료구조는 언어별로 지원하는 양상이 다르다. (자바스크립트, 파이선..) - 언어별로 지원하는 자료구조의 양상이 다르더라도 개념을 올바르게 이해한다면 해당 언어에 맞추어서 사용하면 되니, 각 자료구조의 본질과 컨셉을 이해하고 상황에 맞는 적절한 자료구조를 선택하는 것이 중요하다. 2. Why Data Structure? - 여자들이 화장품을 담기에 효율적인 것은 캐리어일까? 백팩일까? 파우치일까? - 캐리어는 정말 좋은 도구이지만, 화장품을 담기 위..
-
How the web works? 웹은 어떻게 동작하는가.about front-end 2020. 7. 4. 15:27
'웹의 동작 방식'은 우리의 컴퓨터나 폰의 웹 브라우저 안에서 웹페이지를 볼 때 무슨 일이 발생하는지에 대한 간소화된 개념을 제공할 것이다. 먼저, 웹에 연결된 컴퓨터는 클라이언트와 서버라고 한다. - 클라이언트는 일반적인 웹 사용자의 인터넷이 연결될 장치들 (예를들어, 제가 지금 사용하는 랩탑과 핸드폰은 wifi에 연결되어 있습니다) 과 이런 장치들에서 이용가능한 웹에 접근하는 소프트웨어이다. - 서버는 웹페이지, 사이트, 또는 앱을 저장하는 컴퓨터이다. 클라이언트의 장비가 웹페이지에 접근하길 원할 때, 서버로부터 클라이언트의 장치로 사용자의 웹 브라우저에서 보여지기 위한 웹페이지의 사본이 다운로드 된다. 즉, 브라우저에 사용자가 url을 치면 서버에 요청해서 응답하는 것이 웹의 동작 방식이다. 다시,..
-
git 사용법 (상) 혼자작업편about front-end 2020. 5. 22. 23:03
왜 깃(git)을 사용할까? 내가 뭔가를 만들고 프로젝트를 진행하면, 컴퓨터의 특정 폴더에 작업물들을 넣어둔다. git은 이 폴더 안에, 시간 여행이 가능한 "평행우주"들을 만드는 것이다. 시간여행이 가능하다는 건 내가 수습하기 어려운 실수들을 했거나, 전이랑 뭐가 바뀌었는지 헷갈릴때, 언제든 폴더 내 상태를 과거로 돌릴 수 있다는 것이다. Ctrl+z와 같은 수준이 아니라, 아예 모든 파일들의 저장된 상태를 아까로, 엊그제로, 아니면 아예 맨 초기로 돌려 놓을 수 있다는 이야기이다. 또는 과거로 돌아가서 필요한 것만 챙겨서 현재나 다른 과거로 가져올 수도 있다. 🤗 (엄청난걸?) 예전 처럼 매번 폴더를 압축해서 시점별로 저장해 둘 필요가 없다. (..나를 두고 하신말씀인가..?ㅋㅋㅋ) 평행우주를 만든다..
-
프론트엔드개발자 면접질문 2020. (html편)about front-end 2020. 4. 6. 23:24
https://github.com/h5bp/Front-end-Developer-Interview-Questions 의 글을 번역하였습니다. h5bp/Front-end-Developer-Interview-Questions A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore. - h5bp/Front-end-Developer-Interview-Questions github.com What does a doctype do? How do you serve a page with content in multiple languages? What..
-
프론트엔드 개발자라면 꼭 알아야할 '무료'사이트 (닥코)about front-end 2020. 4. 2. 22:22
https://www.youtube.com/watch?v=dDyn_OmFGfY&feature=share 1. Mozilla Developer Network https://developer.mozilla.org/ MDN Web Docs MDN 웹 문서 사이트는 HTML, CSS, 및 웹 사이트와 프로그레시브 웹 앱을 위한 API를 포함한 오픈 웹 기술에 대한 정보를 제공합니다. 또한 Firefox 개발자 도구와 같은 Mozilla 제품을 위한 개발자 지향 문서도 포함합니다. developer.mozilla.org 웹개발에 관련된 대부분의 정보를 얻을 수 있음. 특히 프론트엔드 개발쪽에 집중이 많이 되어있음. 2. Eloquent Javascript http://eloquentjavascript.net/ E..