전체 오늘 어제
본문 바로가기
안녕하세요 :) FE 개발자 윤지홍입니다.
저는 리액트를 주로 사용해요.
UX/UI디자인에도 관심이 있어요.
Javascript React NextJs NodeJs Flutter HTML CSS PHP
👋
분류 전체보기 (21)
JS 실행 컨텍스트란? 들어가기 js 공식 문서나 관련 자료들을 찾아보면 컨텍스트, 실행 컨텍스트 라는 단어가 많이 들어가는 것 같다. 글을 읽다 보면 대충 컨텍스트가 이런 걸 말하는 거구나 하고 넘겼었는데 최근 기초부터 다시 공부하다 보니 실행 컨텍스트라는 단어가 유독 많이 나오는 것 같아서 컨텍스트에 대해 정확히 짚고 가자 싶어서 정리했다. 실행 컨텍스트에 대해 알아보자 실행 컨텍스트(Execution Context)란 쉽게 실행 가능한 코드가 실행되기 위해 필요한 환경 정보들을 모아둔 환경이라고 생각하면 될 것 같다 :) 1. 실행 가능한 코드가 뭘까? 자바스크립트에서 실행 가능한 코드의 정의는 아래와 같다..! 1. 전역에 존재하는 코드 2. 함수 코드 3. Block - ES6 이상 4. Eval 코드 2. 그럼 코..
2022년 08월 19일
Javascript 동작 원리에 대해 알아보자 들어가기 자바스크립트를 몇 년 동안 사용해 오면서 동작원리에 대해 대충은 알고 있었는데 "나중에 제대로 알아보자.. 알아보자.." 하며 미뤄놨었다가 드디어 정리했다 :) Javascript 동기식 언어다 js는 동기식으로 동작한다. 비동기 처리가 가능하기 때문에 비동기식 언어라고 생각할 수 있지만 javascript는 동기식으로 동작되고 비동기 처리는 아래에서 나오는 WebAPI로 따로 처리한다. Js는 싱글 스레드 js가 동기적으로 동작하는 이유가 여기에 있다. 싱글 스레드는 한 작업이 종료될 때까지 다음 작업을 실행하지 않고 기다린다. 아래 코드로 살펴보자 alert('hello'); console.log('world'); 콘솔을 확인해 보면 알럿트가 닫히기 전까진 'world'가 찍히지 않는 걸 확..
2022년 08월 17일
클로저(Closure)와 렉시컬 스코프(Lexical Scope) 렉시컬 스코프(Lexical Scope) 란? 렉시컬 스코프를 번역하면 "어휘 범위"라고 하지만 보통 "정적 범위", "정적 스코프"라고 한다. 렉시컬 스코프는 함수가 어디서 실행되는지가 아닌 어디서 선언되었는지에 따라 상위 스코프를 결정한다. 클로저(Closure) 란? 클로저란 함수가 속해있는 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때에도 해당 스코프에 접근할 수 있게 하는 기능을 말한다. 쉽게 말해 외부 함수의 실행 컨텍스트가 종료된 이후에도 내부 함수에서 외부 함수의 컨텍스트에 접근할 수 있게 해주는 기능을 말한다. 아래 코드를 통해 살펴보자 const test = () => { const a = 123; const res = () => { console.log(a) } re..
2022년 08월 16일
Js 스코프(Scope) 란 스코프(Scope)란? 스코프란 식별자(변수, 함수, 클래스) 접근 규칙에 따른 유효 범위를 말한다. 즉 식별자에 접근 가능한 유효 범위가 존재하고 그 범위는 중괄호와 함수에 의해 나눠진다. (중괄호 : Block Scope, 함수 : Function Scope) 스코프의 종류와 접근 Block/Function 스코프가 있다. 1. 스코프는 안에서 밖으로만 접근 가능하다 스코프는 안에서 밖으로만 접근이 가능하고 그 반대는 불가능하다. const app = () => { const a = '테스트'; console.log(a); // result: '테스트' }; // app 블록 종료 console.log(a); // result: Uncaught ReferenceError: b is not define..
2022년 08월 16일
신규 아이디 추천 알고리즘 문제 다음은 카카오 아이디의 규칙에 맞지 않을 경우 새로운 아이디를 추천해 주어야한다. 아이디의 길이는 3자 이상 15자 이하여야 합니다. 아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있습니다. 단, 마침표(.)는 처음과 끝에 사용할 수 없으며 또한 연속으로 사용할 수 없습니다. "네오"는 다음과 같이 7단계의 순차적인 처리 과정을 통해 신규 유저가 입력한 아이디가 카카오 아이디 규칙에 맞는 지 검사하고 규칙에 맞지 않은 경우 규칙에 맞는 새로운 아이디를 추천해 주려고 합니다. 1단계 new_id의 모든 대문자를 대응되는 소문자로 치환합니다. 2단계 new_id에서 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.)를 제외한 모든 문자를 제거합니다. 3..
2022년 08월 16일
React useRef 사용하기 useRef란? useRef란 원하는 특정 DOM을 직접 선택해서 컨트롤 할 수 있게 해주는 Hook이다. 예를 들면 엘리먼트의 크기를 가져오거나 스타일 변경, 포커스 등의 작업을 해야할 때 useRef를 사용하면 된다. 사용법 기본적인 사용법은 useRef로 객체를 생성하고 원하는 DOM에 ref객체를 넣어주면 ref.current가 해당 DOM을 가르키게되고 current를 사용해 DOM을 직접 조작 하면된다. import { useRef } from 'react'; const App = () => { const ref = useRef(); return ; }; 예제위에서 만든 컴포넌트를 사용해서 button 클릭 시 input 값이 초기화 되게 만들어보자. import { useRef } from ..
2022년 08월 16일
React 메모이제이션 사용하기 메모이제이션 메모제이션이란 계산된 값을 자료구조에 저장하고 이후 같은 계산을 반복하지 않고 저장된 값을 꺼내 쓰는 것을 말한다. React.memo React.memo는 의존하는 값들이 변경되었을 때만 렌더링이 일어난다.(React.memo는 훅이 아닌 HOC다.) 사용법 퍼포먼스 최적화를 원하는 컴포넌트를 React.memo로 감싸주기만 하면 된다. React.memo(Component); 아래 컴포넌트를 예시로 보면 props인 label과 onClick이 바뀌었을 때만 렌더링이 일어난다. import { memo } from 'react'; const Button = ({ label, onClick }) => { return {label}; }; export default memo(Button); ..
2022년 08월 16일
useEffect 사용법 SideEffect 란? 우선 리액트에서 컴포넌트가 렌더링된 이후에 처리 되어야 하는 것 들을 SideEffect라고 한다. 대표적으로 API 호출 같은 것들을 SideEffect라고 하는데 API를 호출하고 응답이 돌아올 때 까지 사용자는 아무런 화면도 볼 수 없다. 리액트에선 렌더링 할 수 있는 요소는 먼저 렌더링하고 그 외에 작업들은 비동기로 처리하는 것을 권장한다. useEffect란? 리액트에 함수형 컴포넌트에서 SideEffect를 사용할 수 있게 해주는 기능으로 우리가 useEffect에 넘긴 내용들이 컴포넌트가 렌더링된 이후에 처리될 수 있게 해준다. 그리고 리액트에선 useEffect가 실행되는 시점에 이미 DOM이 업데이트 됐음을 보장한다. 정리(Clean Up)가 없는 Effect 네..
2022년 08월 16일

티스토리툴바