profile
사용자 경험을 중시하는 프론트엔드 개발자 🐥

react-router-dom 사용할 때 특정 페이지에서만 컴포넌트(Header,Footer,Nav 등) 보여주기

사이드 프로젝트를 하던 도중에 어떤 페이지는 Header,Footer,Nav가 보여져야하고, 어떤 페이지에서는 안보여주는 방법을 찾아보고 있었습니다. 😱 각 필요한 페이지마다 Header, Footer, Nav를 보여주도록 하는것은 비효율적이라는 생각이 들어서 원하는

2022년 8월 9일
·
1개의 댓글
·

CKEditor & stale closure

2일동안 나를 힘들게했던 오류와 내가 어떻게 그 오류를 해결했는지에 대해 작성해보려고한다. 나의 성격이 약간 이해안되는 부분 있으면 무조건 해결하고 가야하는.. 그런 성격이다. 어떤 성격인지 아시는 분들은 아실거다 😅 개발할때는 좋은 점..? 인것 같다.. 😅 실

2022년 3월 26일
·
0개의 댓글
·

useEffect vs useLayoutEffect

오늘은 useEffect와 useLayoutEffect의 차이에 대해 공부해보려고 합니다. 일단 2가지 과정에 대해 알아야합니다. Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 Paint: 실제 스크린에 Layout을 표

2022년 3월 19일
·
0개의 댓글
·

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개의 댓글
·
post-thumbnail

실행 컨텍스트

실행 컨텍스트는 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이다. 쉽게 설명하자면, 실행 가능한 코드가 실행되기 위해 필요한 환경이다.

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

history push가 안되는 경우

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

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

async/await

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다.에러 핸들링Promise 를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하지만, async/await 은 에러 핸들링 할 수 있는 기능이 없어 try-catch()

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

Promise

Promise는 자바스크립트 비동기 처리에 사용되는 객체입니다.콜백 헬비동기 함수의 처리 결과를 가지고 다른 비동기 함수를 호출해야 하는 경우, 함수의 호출이 중첩(nesting)이 되어 복잡도가 높아지는 현상이 발생하는데 이를 콜백 헬이라고 합니다.에러처리크게 2가지

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개의 댓글
·