전체 글

import "./App.css"; import { useState } from "react"; function App() { let [titleList, setTitleList] = useState(["성수맛집추천", "헤어샵추천", "자바스크립트독학"]); let [likes, setLikes] = useState([0,0,0]); let [modal, setModal] = useState(false); let [title, setTitle] = useState(0); let [inputValue, setInputValue] = useState(''); return ( 블로그 { titleList.map(function(a,i){ return( { setModal(!modal); setTitle(i)..

자바스크립트를 실행하기 위해선 자바스크립트 엔진이 필요하고 웹 브라우저는 자바스크립트 엔진을 내장하고 있다. 브라우저마다 엔진의 종류가 다르지만 코드를 실행하는 방식은 비슷하기 때문에 보통 어떻게 실행하는지 알아두는 것이 좋다. (V8, SpiderMonkey, Javascript core 등의 구현이 각각 다르다) 소스코드를 만나면 파싱하여 AST(Abstract Syntax Tree) 로 변환한다. 인터프리터(Interpreter) 는 AST를 기반으로 바이트코드(Bytecode)를 생성 한다. 인터프리터가 바이트코드를 실행할 때, 자주 사용되는 함수 및 타입 정보 등이 있는 프로파일링 데이터(Profiling data) 와 같이 최적화 컴파일러(Optimizing compiler) 에게 보낸다. 최..

브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진 을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path) 라는 프로세스를 사용하며 다음 단계들로 이루어진다. HTML 파싱 후, DOM(Document Object Model) 트리 구축 CSS 파싱 후, CSSOM(CSS Object Model) 트리 구축 Javascript 실행 주의! HTML 중간에 스크립트가 있다면 HTML 파싱이 중단된다. DOM과 CSSOM을 조합하여 렌더트리(Render Tree) 구축 주의! display: none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트..

SPA (Single Page Application) - 하나의 HTML 파일을 기반으로 Javascript를 활용하여 동적으로 화면의 컨텐츠를 바꿔주는 방식의 어플리케이션이다. (Multiple Page Application) - 사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱하여 보여주는 방식의 어플리케이션이다. 전통적인 방식을 이용한다면, SPA가 사용하는 렌더링 방식은 CSR이고, MPA가 사용하는 렌더링 방식은 SSR이다. 각 방식의 장단점을 알아보고, 전통적인 방식에서 벗어나 SPA를 SSR로 구현했을 때의 장단점도 알아보자. ● CSR CSR에선 브라우저가 서버에 HTML과 JS 로드를 요청 한 후, 로드되면 사용자의 상호작용에 따라 JS을 이용해 ..

●문제 : "OOXXOXXOOO"와 같은 OX퀴즈의 결과가 있다. O는 문제를 맞은 것이고, X는 문제를 틀린 것이다. 문제를 맞은 경우 그 문제의 점수는 그 문제까지 연속된 O의 개수가 된다. 예를 들어, 10번 문제의 점수는 3이 된다. "OOXXOXXOOO"의 점수는 1+2+0+0+1+0+0+1+2+3 = 10점이다. OX퀴즈의 결과가 주어졌을 때, 점수를 구하는 프로그램을 작성하시오. ●입력 : 첫째 줄에 테스트 케이스의 개수가 주어진다. 각 테스트 케이스는 한 줄로 이루어져 있고, 길이가 0보다 크고 80보다 작은 문자열이 주어진다. 문자열은 O와 X만으로 이루어져 있다. ●예제입력 : 5 OOXXOXXOOO OOXXOOXXOO OXOXOXOXOXOXOX OOOOOOOOOO OOOOXOOOOXO..

●문제 : 0보다 크거나 같고, 99보다 작거나 같은 정수가 주어질 때 다음과 같은 연산을 할 수 있다. 먼저 주어진 수가 10보다 작다면 앞에 0을 붙여 두 자리 수로 만들고, 각 자리의 숫자를 더한다. 그 다음, 주어진 수의 가장 오른쪽 자리 수와 앞에서 구한 합의 가장 오른쪽 자리 수를 이어 붙이면 새로운 수를 만들 수 있다. 다음 예를 보자. 26부터 시작한다. 2+6 = 8이다. 새로운 수는 68이다. 6+8 = 14이다. 새로운 수는 84이다. 8+4 = 12이다. 새로운 수는 42이다. 4+2 = 6이다. 새로운 수는 26이다. 위의 예는 4번만에 원래 수로 돌아올 수 있다. 따라서 26의 사이클의 길이는 4이다. N이 주어졌을 때, N의 사이클의 길이를 구하는 프로그램을 작성하시오. ●출력..