<Yeonny0723/> <Yeonny0723/>

🍋 배경 아래 이미지와 같이 콘텐츠를 동적으로 바꿀 수 있고 & 보여주는 시점으로부터 3초 후 언마운트되는 스낵바를 개발하였다. 모든 스낵바 컴포넌트에 마운트 된 3초 후 언마운트되는 로직을 적용하는 것과 같이, 특정 컴포넌트에 반복적으로 적용할 로직이 있는 경우, 그 코드를 응집화 시킬 수 있는 방안에 대해 고민해보았다. 🍋 결과물 🍋 수정 전 다음은 스낵바 컴포넌트를 생성하고 사용하는 구문이다. content prop으로 내부 콘텐츠를 동적으로 받아올 수 있으며, 스낵바를 보여주고 싶을 때 Main 구문 내 activateSnackbar 함수를 호출하여, 그 시점으로부터 3초가 지난 시점에 스낵바가 자동으로 unmount 된다. // 스낵바 컴포넌트 선언 function Snackbar({conten..

🍋 배경 별도의 api 서버를 두고 호출해서 사용하는 리액트 정적 페이지 배포를 진행하던 중, 새로 고침 시 404 오류가 뜨는 이슈를 맞닥뜨렸다. (IIS 서버에 api 서버 및 정적 페이지가 배포된 상황이었고, 정적 페이지는 example.com/registration 이라는 상세 도메인을 가진 상황) 🍋 원인 URL이 해석되는 장소로 많이들 들어보셨겠지만 두가지 장소, 서버 사이드 & 클라이언트 사이드가 있는데... 서버 사이드 렌더링 방식을 단순화하자면... 유저가 특정 url 로 접속 → 서버로 요청을 보내고 → 구성했던 페이지를 보여준다. 리액트 라우터가 지원하는 클라이언트 사이드 라우팅은, 유저가 특정 url 로 접속 → 서버는 빈 index.html 파일 및 스크립트 파일을 전달하고 → 이..

🍋 의문점 알고리즘 문제를 풀던 중 문자열 “abc”를 대문자로 변환하는 함수 toUpperCase를 사용해야 했다. 사용만 하다가 갑자기 문득 의문이 들었다. “abc” 데이터 타입은 당연하게도 객체도 아니고 문자열인데, 어떻게 toUpperCase라는 메서드를 가질 수 있는 거지? console.log(typeof "abc") // string 🍋 자… 원시값을 객체처럼 다룰 수 있다고? 자바스크립트에서 객체는 다른 언어에서 부르는 클래스와 같이 다양한 값과 메서드를 응집화시킬 수 있게하는 데이터 타입이다. 다양한 종류의 값을 프로퍼티로 가질 수 있고, 내부에 메소드를 추가해 객체 자체를 다룰 수 있다.. const 랜덤문자 = new Object(); 랜덤문자.value = "abc"; 랜덤문자.t..

🍋 공부 배경 다른 분의 리액트 코드를 읽던 중, 상태값과 세터함수를 프롭으로 받아오는 코드를 짠다고 했을 때, 화살표 함수로 값을 바인딩 시키는 (2)번 코드와 동일하게 작동하는 (1) 번 코드를 발견했다. function 컴포넌트({name, setName}){ return } // -- (1) function 컴포넌트({name, setName}){ return {setName("송강")}}> } // --- (2) 스택오버플로우 질문들을 보니 꽤나 6-7년도 전에 흔하게 쓰던 코드였고 화살표 함수가 등장한 지금, 빈번히 사용되지 않는 것 같지만… 두 코드가 대체 왜 동일한 것인지 이해하는 과정에서 조각조각 흩어져있던 this-bind 개념들이 한데로 모이는 경험을 했다. this, 화살표 함수, ..

🍋 등장 배경 변수 선언 방법에 대해 공부하다 보면, “var는 무조건 사용하지 말고, 변하지 않는 값은 const, 변할 수 있는 값은 let을 사용하라” 이런 말을 듣게 되고, 나 역시 별 주관없이 이렇게 받아드려왔다. 머리가 조금 더 커진 지금 시점에 생각해보면 그래도 살짝 추상화가 된 부분이 있지 않나 싶다. 🍋 var 이때 쓸 수도 있겠는데? 파일 시스템 트리 GUI를 만드는 사이드 프로젝트를 진행했다. (여기서 볼 수 있어용) 개발 도중 이러한 문제가 있었다. 커맨드타입(add, delete, move etc) 별 다른 코드를 실행하도록 하는 switch - case 구문을 사용하던 중 변수 ‘결과’ 동일한 스코프에서 이미 선언되었다는 내용의 에러를 마주쳤다. const validateComm..

🍋 공부 배경 자바스크립트에서 외부 모듈을 가져오는 방식인 import와 require에 깊이 파고들다가, import 문을 사용하는 ES6, require 문을 사용하는 CommonJS까지 공부하게 되었다. 이 문서에서는 많고 많은 자바스크립트 문법 중 왜 하필 ES6가 필수적으로 언급되고, 대표적으로 이가 어떤 문제를 해결하기 위해 등장했는지에 대하여 정리하였다. 그 과정에서 단순히 편의를 위해 사용하던 화살표 함수, 내게는 모호했던 클래스 문법과-프로토타입의 관계성에 대해 추가 공부를 할 수 있었다. 🍋 ES6? ECMAScript? Netscape? 대체 뭐야 자바스크립트를 개발한 Netscape가, 규격화된 표준을 승인하는 공식 기관 Ecma에 제출한 표준이 ECMA-262이다. 그 표준화된 규..