⚡Fragment import { Fragment } from 'react' function App() { return ( 안녕하세요 ); } Fragment는 리액트 v16이상부터 도입된 기능입니다. Fragment는 무의미한 div사용을 억제해줍니다. 리액트를 사용하게 위해 쓰는 JSX 문법을 사용할 때 return 문 안에 반드시 하나의 최상위 태그가 있어야한다는 규칙때문에 의미없는 div를 만들게 됩니다. 이를 위와 같이 import { Fragment } from 'react'를 통해 Fragment를 import하고 위와 같이 최상위 태그를 로 묶어주는것으로 사용할 수 있습니다. 🔍단축 표현 import { Fragment } from 'react' function App() { return ..
⚡초기렌더링이란? 어떤 UI 관련 프레임워크, 라이브러리를 사용하든 맨 처음 화면이 어떻게 보일지를 정해줄 필요성이 있습니다. 이를 초기렌더링 이라고 합니다. 리액트에서는 이 초기렌더링을 다루는 render 함수가 있습니다. render() {...} render() 함수는 컴포넌트의 생김새를 정의하는 역할을 수행합니다. html 형식의 문자열을 반환하는 것이 아니라 객체를 반환합니다. 이때 객체에는 뷰가 어떻게 생겼는지, 어떻게 작동하는지에 대한 정보를 담고있습니다. ** 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있습니다. 이때 render함수를 실행하면 내부에 있는 컴포넌트들도 재귀적으로 렌더링합니다. 이렇게 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고있는 정보들을 사용하여 HTML 을 만..
⚡문제정보 같은 글자가 연속으로 들어오면 삭제해주고 모두 제거할 수 있으면 1을 아니면 0을 반환하는 문제입니다. 엥.. 레벨1 짜리 인형뽑기 문제가 더 어려운거같은데요 🔍접근방법 스택을 쓴다. 🔍나의 풀이 function solution(s){ if (s.length % 2 !== 0) return 0; let stack = [s[0]]; for (let i = 1; i < s.length; i++){ stack.push(s[i]); if (stack[stack.length-2] === stack[stack.length-1]){ stack.pop() stack.pop() } } return !stack.length ? 1 : 0; } 설명은 아래에 서술합니다. function solution(s){ l..
🔍렉시컬 환경 😢렉시컬 환경은? 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조로 실행컨텍스트를 구성하는 컴포넌트다. 실행 컨텍스트 스택이 코드의 실행순서를 관리한다면 렉시컬 환경은 스코프와 식별자를 관리한다. 렉시컬 환경은 키와 값을 갖는 객체 형태의 스코프(전역 함수, 블록 스코프)를 생성하여 식별자를 키로 등록하고 식별자에 바인딩 된 값을 관리한다. 즉 렉시컬 환경은 스코프를 구분해주고, 식별자를 키로 등록하고 관리하는 저장소 역할을 한다. 실행 컨텍스트는 렉시컬환경 컴포넌트와 VariableEnvironment 컴포넌트로 구성됩니다. 생성 초기에는 렉시컬과 배리어블 모두 하나의 동일한 렉시컬 환경을 참조하지만 특정 상황을 만나게되면 배리어블컴포넌트를 위한 새로운..
⚡실행컨텍스트 (execution context) 란? 실행컨텍스트는 자바스크립트의 동작 원리를 담고있는 핵심 개념이다. 실행컨텍스트를 바르게 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩 된 값(식별자 바인딩) 을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다. -자바스크립트 모던 딥다이브 359p 본 글은 모던 자바스크립트 딥다이브 내용을 참고하여 작성하지만 제가 이해한 바를 같이 서술하다보니 틀린 점이 있을 수도 있습니다. 최대한 맞게 이해해보려고 노력하겠지만 틀린점이 있으면 지적해주세요 전혀 와닿지는 않는 설명입니다만 아무튼 핵심이고 중요하다는 건 전해지네요 이걸 이해하..
⚡문제정보 끝말 잇기에서 패배하는 케이스는 두가지가 있습니다. 1. 이전에 등장한 단어를 말하는 경우 2. 끝말잇기가 되지 않는 단어를 말하는 경우 저 두가지 케이스에 몇번째 차례에서 몇번째 사람이 걸렸는지를 배열에 담아 리턴하고 배열의 끝까지 아무도 걸리지 않으면 [0,0]을 리턴하면 되는 문제입니다. 🔍접근방법 1. 이전에 등장한 단어를 체크해줘야한다. 2. 끝말잇기가 안되는 경우를 체크해줘야한다. 🔍나의 풀이 function solution(n, words) { let answer = [0,0] let map = new Map() map.set(words[0], 1) for(i=1 ; i
⚡문제정보 문자열 매개변수 두개가 주어지는데 모두 숫자로 이루어져있네요 t 문자열에서 p 문자열만큼 잘라서 작은 값이 있을 경우 +를 해주면 되는 문제인데 숫자의 대소관계는 앞자리 하나로도 정할 수 있으니까 서로 앞자리가 같은 경우에만 전체를 짤라서 비교해주면 될 것 같습니다. 🔍접근방법 t[i]의 첫자리가 p[0]과 같은 경우에만 slice()를 통해 문자열 전체를 비교한다. 🔍나의 풀이 function solution(t, p) { let answer = 0 for( i = 0 ; i < t.length -p.length +1 ; i++) { if(t[i] < p[0]) answer++ else if(t[i] == p[0]) { let spliter = t.slice(i,i + p.length) if..
⚡app.js const socket = io() const welcome = document.getElementById("welcome"); const form = welcome.querySelector("form") const room = document.getElementById("room") room.hidden = true; let roomName = '' function showRoom() { welcome.hidden = true room.hidden = false const h3 = room.querySelector("h3") h3.innerText = `Room ${roomName}` const msgForm = room.querySelector("#msg") const nameForm ..
