본문 바로가기
반응형
크롬 브라우저는 어떻게 작동 할까? - 01 Google Developers 사이트에서 읽은 내용을 정리한 글입니다. CPU, GPU, Memory 그리고 멀티 프로세스 아키텍처 프론트엔드 개발을 공부하면서 가장 친숙하고 자주 사용하는 브라우저. 이 브라우저는 어떻게 우리의 코드를 잘 돌아가는 웹사이트로 변환해주는 것일까? 그 중 크롬을 중심으로 브라우저가 동작하는 방식을 알아보자. 먼저 주요한 컴퓨팅 용어와 컴퓨터의 일부분이 어떻게 동작하는지 알 필요가 있다. 많이 들어보셨죠? 컴퓨터의 중심 CPU와 GPU CPU(Central Processing Unit)란? CPU는 컴퓨터에서 뇌 역할을 담당한다. 다양한 작업들을 들어올 때마다 하나씩 처리한다. 과거에는 CPU가 하나의 칩이었지만(이 당시엔 코어란 같은 칩에 들어 있을 뿐 다른 CPU로 취급.. 2021. 7. 22.
[React.js] 엘리먼트(Element)와 컴포넌트(Component) 엘리먼트(Element) 전 React 엘리먼트를 영화의 프레임으로 생각합니다. React 엘리먼트는 매 순간 어떻게 보여야 되는지 파악하고 변하지 않습니다. - overreacted React 앱의 화면을 표시하는 가장 작은 구성 요소로써 일반 객체(plain object)이다. 영속성을 가지지 않는다. 즉 매번 새로 만들어지고 버려진다. 불변함을 가지기 때문에 생성한 이후 해당 엘리먼트의 자식이나 props을 변경할 수 없다. 따라서 다른 렌더링을 보여주고 싶다면 새로운 엘리먼트 트리를 생성해야 한다. React 엘리먼트는 화면에 무엇을 그리고 싶은지에 대한 정보가 들어있는 객체와 같다. React.createElement( type, [props], [...children] ) type 인자로는 태.. 2021. 7. 17.
[React.js] JSX와 XSS(Cross Site Scripting) 공격 JSX 마크업과 UI 로직을 둘 다 포함하여 개발을 할 수 있다. 익숙한 문법으로 협업에 용이하다. 컴포넌트별로 분류하여 유지보수를 쉽게 할 수 있다. 속성 정의는 따옴표('')를 이용해 문자열 리터럴이나 중괄호({})로 JS 표현식(문법, 변수 등)을 삽입할 수 있다. HTML보다는 JS에 가깝기 때문에, 클래스 명명은 camelCase 명명 규칙을 사용한다. React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프한다. 따라서 앱에 명시적으로 작성되지 않은 내용은 주입되지 않는다. 모든 내용을 렌더링 되기 전에 문자열로 변환한다. 이런 특성들로 인해 XSS(Cross Site Scripting) 공격을 방지할 수 있다. 이스케이프(Escape) 특정 문자를 원래의 기능에서 벗어나게 변.. 2021. 7. 14.
[React.js] Netlify로 배포 후 새로고침 에러 | Page Not Found 최근 Netlify로 토이 프로젝트 배포 후 첫 로그인은 화면이 잘 뜨지만 새로고침 시 위와 같은 에러가 발생했다. 거기에 첫화면은 잘 렌더링 되지만 콘솔엔 failed to load resource까지 뜨는 아이러니..배포가 끝이 아니었던 것이다. 배포 후에 조금씩 원하는 기능을 추가하려 했지만 이슈 해결에만 이틀정도 소요된 것 같다. 그 중에 해당 에러가 가장 눈에 띄고 거슬려서 구글링을 시작했다. 그래도 구글링 실력이 좀 늘었는지 완벽한 해결방법은 아닌 것 같지만 간단하게 해결이 가능했다. 내 프로젝트같은 경우엔 처음 페이지에서 로그인을 하면 로그인이 유지가 되는데 여기서 새로고침 시 문제가 발생하는 것 같았다. 아마 새로고침을 하면 로그인 정보를 못불러오는 것 같은데..이게 CSR 문제인건지, R.. 2021. 7. 9.
[백준] 단계별로 풀어보기 4단계 | Node.js 백준 알고리즘 4단계 while문 https://www.acmicpc.net/step/2 while문 단계 입력이 끝날 때까지 A+B를 출력하는 문제. EOF에 대해 알아 보세요. www.acmicpc.net 01. A + B - 5 | 10952번 const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); let answer = ''; let i = 0; const arr = []; rl.on('line', (num) => { const input = num.split(' '); arr.push(input); while (i < arr.l.. 2021. 7. 9.
[React.js] 컴포넌트 저장 기능 구현하기(dom-to-image, FileSaver) 프로젝트를 진행하면서 컴포넌트를 이미지로 저장하는 기능을 추가하고 싶어서 관련 자료를 찾기 시작했다. 처음엔 html2canvas와 jspdf로 기능을 구현하려고 구글링을 하다 dom-to-image, FileSaver 라이브러리를 알게 되었고 이 조합 코드가 좀 더 직관적이고 사용법이 좋은 것 같아서 결정하게 되었다.(그리고 좀 더 기능 구현 목적에 알맞다.) dom-to-image와 FileSaver 설치 npm install dom-to-image npm install file-saver --save 또는 yarn add dom-to-image yarn add file-saver 기능 구현 각 컴포넌트에 다운로드 버튼이 있고 버튼을 클릭하면 해당 컴포넌트를 PNG 이미지로 저장하도록 구현한다. im.. 2021. 7. 7.
[프로그래머스] 올바른 괄호 | JavaScript 올바른 괄호 문제 설명 괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어 "()()" 또는 "(())()" 는 올바른 괄호입니다. ")()(" 또는 "(()(" 는 올바르지 않은 괄호입니다. '(' 또는 ')' 로만 이루어진 문자열 s가 주어졌을 때, 문자열 s가 올바른 괄호이면 true를 return 하고, 올바르지 않은 괄호이면 false를 return 하는 solution 함수를 완성해 주세요. 제한사항 문자열 s의 길이 : 100,000 이하의 자연수 문자열 s는 '(' 또는 ')' 로만 이루어져 있습니다. 입출력 예 s answer "()()" true "(())()" true ")()(" false "(()(" false .. 2021. 7. 2.
반응형

티스토리툴바