오늘도 삽질중

✅ 실행컨텍스트란? - 코드의 실행 환경에 대한 여러가지 정보들을 담고 있는 개념이다. 쉽게 말해서 코드가 실행되고 있는 구역 혹은 범위를 의미한다. 자바스크립트의 엔진에 의해 만들어지고 사용되는 코드 정보를 담은 객체의 집합이다. ✅ 종류 및 실행 순서를 알아보자 글로벌 코드: 클로벌 스코프에서 실행한다. 함수 코드: 함수 스코프에서 실행한다 eval() 엔진이 스크립트 파일을 실행하기 전에 글로벌 실행 컨텍스트(GEC, Global Execution Context)가 생성되고, 함수를 호출할때마다 함수 실행 컨텍스트 (FEC, Function Execution Context)가 생성된다. 중요한 점은 글로벌의 경우 실행 이전에 생성이 되지만 함수의 경우 호출할 때 생성이 된다. 아래 콘솔이 찍히는 순..

알고리즘 문제를 풀다보면 문제에 대한 해답을 찾는것이 가장 중요하지만 그에 못지않게 효율적인 방법을 찾는것도 중요하다. 효율적인 방법을 고민한다는 것은 시간 복잡도를 고민한다는 말과 같은것이다. 시간복잡도와 Big-O(빅-오)표기법에 대해 배워보자 👊 시간 복잡도 시간 복잡도를 고민한다 = 입력값의 변화에 따라 연산을 실행할때, 연산 횟수에 비해 시간이 얼마만큼 걸리는가? 효율적인 알고리즘을 구현한다 = 입력값이 커짐에 따라 증가하는 시간의 비율을 최소화한 알고리즘 시간 복잡도는 주로 빅-오 표기법을 사용하여 나타내준다. 👊 Big-O 표기법 Big-O(빅-오) - 최악 Big-Ω(빅-오메가) - 최선 Big-θ(빅-세타) - 중간(평균) 이 중에서 빅-오 표기법이 가장 많이 사용된다. 빅-오 표기법의 ..

API key와 같이 공개할 수 없는 정보가 코드에 포함될 경우, 네트워크를 통해 API key가 공개될 수 있다. 이런 일을 방지하기 위해서는, API key를 PC에 저장해두고 사용해야한다. JavaScript에서 변수에 문자열을 할당하는 것처럼, API key를 PC에서 사용하는 변수에 할당하고 사용할 수 있다. JavaScript에서 변수는 스코프에 따라 전역변수와 지역변수로 나뉜다. 그러나 파일 A에서 전역변수로 선언하더라도, 다른 파일 B에서 파일 A의 전역변수에 접근할 수 없다. 그러나 파일 A의 전역변수를 export한다면, 파일 B에서 파일 A의 지역변수에 접근할 수 있다. Linux 기반의 운영체제의 PC에는 시스템 자체에 전역변수를 설정할 수 있다. 그리고 시스템에 설정한 전역변수를 ..

엑셀 파일을 그냥 읽기 전용으로 볼 때는 수정할 수 있는 권한이 없지만, 편집 사용 버튼을 눌렀을때 파일을 수정할 수 있는 권한을 획득하게 된다. CLI에서도 파일을 보거나, 수정할때, 실행할 때에도 마찬가지로 권한이 필요하다. Linux에서 사용하는 폴더와 파일에는 권한이 있다. 그리고 그 권한은 읽기(Read), 쓰기(Write), 실행(Execute)이다. 사용권한 - 폴더와 파일의 권한으로 폴더인지 파일인지 구분하는방법, 폴더나 파일의 사용 권한을 변경하는 방법 Read, Write(생성,삭제,수정), Execute 권한 폴더인지 파일인지 확인하기 폴더 생성 / 파일 생성 mkdir linux // 폴더 생성 nano helloworld.js // 파일 생성 코드를 작성한 다음 Ctrl + X, ..

👊 재귀(Recursion) 정의: 자신을 정의할 때 자기 자신을 재참조하는 방법 (어떤 함수가 스스로를 호출하는것) 자연수로 이루어진 배열의 합을 구하는 arrSum (재귀적으로 생각해서 구하기) arrSum([1, 2, 3, 4]) = 1 + arrSum([2, 3, 4]); arrSum([2, 3, 4]) = 2 + arrSum([3, 4]); arrSum([3, 4]) = 3 + arrSum([4]); arrSum([4]) = 4 + arrSum([]); arrSum([]) = 0; 쪼개서 생각하고 또 쪼개서 생각하는걸 볼 수 있음 🎟 모든 재귀 함수는 반복문으로 표현할 수 있다. 그러나 재귀를 적용하는 경우가 더욱 간결하고 이해하기 쉽다. 🎟 재귀는 반복할 구문을 함수 단위로 분리해, 특정 조건..

🎟 Lifting State Up import React, { useState } from "react"; import "./styles.css"; const currentUser = “박소영”; function Twittler() { const [tweets, setTweets] = useState([ { id: 1, writer: “parksoyoung”, date: "2020-11-1”, content: "안녕 리액트" }, { id: 2, writer: “박소영”, date: "2020-11-1”, content: “리액트 너 좀 어렵다?” }, ]); const addNewTweet = (newTweet) => { setTweets([...tweets, newTweet]); }; // 이 상태 ..

React만을 가지고 대부분의 프론트엔드 요구사항을 구현할 수 있지만 React가 모든것을 충족하진 못한다. DOM 엘리먼트의 주소값을 활용해야하는 경우가 있다. focus text selection media playback 에니메이션 적용 d3.js, greensock 등 DOM 기반 라이브러리 활용 - 컴포넌트에서 특정 DOM을 선택해야 할 때, ref를 사용해야 한다. 그리고 함수형 컴포넌트에서 이를 설정할때 useRef를 사용하여 설정해야한다. - useRef으로 DOM노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조할 수 있다. const 주소값을_담는_그릇 = useRef(참조자료형) // 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있다. return ( ) 🗣 React..

컴포넌트 기반 CSS 작성에 적합한 Styled-Component import styled from "styled-components"; // 태그를 렌더링 할 title component를 만듭니다. const Title = styled.h1` font-size: 1.5em; text-align: center; color: teal; `; // 태그를 렌더링 할 Wrapper component를 만듭니다. const Wrapper = styled.section` padding: 4em; background: tomato; `; const Siv = styled.button` background: ${(props) => (props.red ? "palevioletred" : "white")}; color..