profile
기본에 충실하자 😲 틀린 내용이 있다면 댓글 달아주세요 😅

Mac에서 iOS 사파리 디버깅하는법

웹 개발을 하다보면 웹, 모바일(안드로이드,iOS)환경에서 디버깅을 하게됩니다.Mac에서 iOS 디버깅 하는 방법을 잘 몰라서 조금 헤맸습니다. 다른 개발자분들은 쉽게 개발할 수 있도록 Mac에서 iOS 디버깅하는 법을 공유하고자합니다. 🔥Simulator를 켭니다.

2021년 12월 23일
·
0개의 댓글

MPA,SPA,SSR,CSR

Multi-page Application의 약자로 두 개 이상의 페이지로 구성된 애플리케이션을 의미Single-page Application의 약자로 하나의 페이지로 구성된 애플리케이션을 의미렌더링(Rendering)방식이란 결국 화면에 그려지는 것은 HTML인데 이것

2021년 12월 22일
·
0개의 댓글

history push가 안되는 경우

history.push로 페이지를 넘기는 작업중이었다. 그런데 매번 잘되다가 가끔 어떤 경우에 history.push를 할때 에러가 생기는것을 발견했다. 일단 this.props를 찍어보았다. 엥?!! history객체가 없더라.. 보통 App.js 에서 Route로

2021년 12월 4일
·
0개의 댓글
post-thumbnail

컴포넌트 반복 & key

이렇게 key를 가지고 있어서 앞에 요소가 추가가 되더라도, 2015,2016키를 가진 데이터는 이동만 하면되고, 2014키를 가진 데이터만 추가가 됩니다.key값은 데이터가 가진 고유값으로 설정해야합니다. 고유한 값(id)가 없다면 index를 사용할수 있습니다.컴포

2021년 12월 2일
·
0개의 댓글
post-thumbnail

자바스크립트 동작원리 (엔진, 런타임, 이벤트 루프)

Javascript는 싱글스레드로 동작하는 언어입니다. 메인 스레드, 하나의 스레드로 구성되어 있기 때문입니다.싱글스레드는 한번에 하나의 작업만 수행할 수 있습니다.다른 작업이 중간에 끼어들 수도 없고, 기존에 수행하던 작업이 끝나야만 그 다음 작업을 수행할 수 있습니

2021년 11월 30일
·
0개의 댓글
post-thumbnail

Strict Mode

Strict Mode는 코드에 문법을 보다 엄격히 적용하는 방법입니다.strict mode를 적용하려면 전역의 선두 또는 함수 몸체의 선두에 'use strict';를 추가한다.strict mode 스크립트와 non-strict mode 스크립트를 혼용하는 것은 오류를

2021년 11월 30일
·
0개의 댓글
post-thumbnail

화살표 함수

화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다.function 키워드로 생성한 일반 함수와 화살표 함수의 가장 큰 차이점은 this이다.일반 함수는 함수를 선언할 때 this

2021년 11월 30일
·
0개의 댓글
post-thumbnail

this의 바인딩

📌 You don't know JS와 https://poiemaweb.com/ 를 참고하여 작성한 글입니다.this를 지정한 객체로 직접 바인딩 하므로 '명시적 바인딩'이라고 한다.apply()메소드의 경우, call()와 기능은 같다. apply()는 두번

2021년 11월 30일
·
0개의 댓글
post-thumbnail

this

this는 '자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수'이다.자바스크립트의 this keyword는 Java와 같은 익숙한 언어의 개념과 달라 개발자에게 혼란을 준다.Java에서의 this는 인스턴스 자신(self)을 가리키는 참조변수이다

2021년 11월 30일
·
0개의 댓글
post-thumbnail

클로저

클로저는 함수가 속한 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 하는 기능을 뜻합니다.클로저는 자신이 생성될 때의 환경을 기억해야 하므로 메모리 차원에서 손해를 볼 수 있습니다. 그런데 사용하는 이유가 무엇일까요?!

2021년 11월 30일
·
0개의 댓글
post-thumbnail

var,let,const

함수레벨 스코프를 가지고 있어요!중복 선언이 가능해요! 재할당도 가능해요!호이스팅 당해요!블록레벨 스코프를 가지고 있어요!중복 선언이 불가능해요!, 재할당은 가능해요!호이스팅 당해요! → 호이스팅을 당하지않는다는 얘기가 있지만 잘못된 사실이다. 이를 이해하기위해 TDZ

2021년 11월 30일
·
0개의 댓글
post-thumbnail

호이스팅

변수와 함수 선언문이 선언된 위치에서 코드의 꼭대기로 끌어올려지느것이 호이스팅입니당..!!3\. 함수가 먼저 끌어올려지고 그 다음 변수가 끌어올려집니다.!

2021년 11월 30일
·
0개의 댓글
post-thumbnail

함수 vs 블록 스코프

함수 레벨 스코프란 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 함수 외부에서는 유효하지 않다(참조할 수 없다)는 것입니다.!블록 레벨 스코프란 모든 코드 블록(함수,if문,for문,while문,try/catch문 등)내에서 선언된 변수는 코

2021년 11월 30일
·
0개의 댓글
post-thumbnail

렉시컬 스코프

렉시컬 스코프는 렉싱타임에 정의되는 스코프입니다. 렉싱은 컴파일러 과정 중 첫번째로, 소스코드 문자열을 분석하여 상태 유지 파싱의 결과로 생성된 토큰에 의미를 부여하는것 입니다.프로그래머가 코드를 짤 때 변수와 스코프 블록을 어디서 작성하는가에 기초해서 렉서가 코드를

2021년 11월 30일
·
0개의 댓글
post-thumbnail

스코프 / 스코프 체인

📌 You don't know JS와 https://poiemaweb.com/ 를 참고하여 작성한 글입니다.스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기

2021년 11월 30일
·
0개의 댓글
post-thumbnail

리렌더링 조건

1\. state가 변경될 때2\. 부모 컴포넌트가 리렌더링 될 때3\. props가 변경될 때4\. forceUpdate 함수가 실행될 때

2021년 11월 30일
·
0개의 댓글
post-thumbnail

Lifecycle

📌 리액트 공식문서와 리액트를 다루는 기술을 참고하여 작성한 글입니다.9가지의 생명주기 메서드가 있습니다. 하나씩 살펴봅시다..!마운트될때 발생하는 생명주기 입니다.constructorgetDerivedStateFromPropsrendercomponentDidMoun

2021년 11월 30일
·
0개의 댓글
post-thumbnail

Props와 State

📌 리액트 공식문서와 리액트를 다루는 기술을 참고하여 작성한 글입니다.컴포넌트 속성을 설정할 때 사용하는 요소로, 간단히 말하자면 컴포넌트에서 컴포넌트로 전달하는 데이터 이다.props는 읽기 전용이다. → 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 pro

2021년 11월 30일
·
0개의 댓글
post-thumbnail

함수 컴포넌트, 클래스 컴포넌트

컴포넌트를 작성하는 방법은 함수 컴포넌트와 클래스 컴포넌트가 있다.메모리자원도 클래스 컴포넌트 보다 덜 사용한다고 한다. → 그러나 성능은 실제로는 거의 비슷하다고 한다.함수 컴포넌트의 주요 단점이었던 state와 라이프사이클 API의 사용이 불가능하다는 것이었는데,

2021년 11월 30일
·
0개의 댓글
post-thumbnail

JSX

📌 리액트 공식문서와 리액트를 다루는 기술을 참고하여 작성한 글입니다. const element = <h1>Hello, world!</h1>;JavaScript를 확장한 문법, 쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것. JSX로 작

2021년 11월 30일
·
0개의 댓글