Develop+

아 타입스크립트 오류 뜨는 거 찾다가 ㅋㅋ ㅜㅜ 엘레강스하지 못한 방법으로 이것저것 막 시도해보는 모습을 보여주는 짤을 찾았다. 내가 지금 뭐하는 거지 미안해요!!!!!! 웃겨서 가져와봤다 ㅎㅎ (개인 블로그라 이것저것 올립니다)

Naver Map api 를 사용해 맵을 클릭 할 때마다 해당 범위를 선택해 표시해주는 프로그램을 구현 중이었다. naver map에서 제공하는 addListener로 생성한 map 객체와 click에 addHex라는 함수를 추가해주는데 이 addHex라는 함수 내에서는 외부 변수인 data와 hexList라는 변수를 참조한다. 컴포넌트가 생성되는 시점에 addEventListener을 해주니 data 에 값이 들어온 이후 시점에도 컴포넌트 생성 당시의 data값을 가지고 온다. 이거 이론으로만 들어봤던 Lexical scope 인 거 같다! Lexical Scope 렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정된다. 출처: https://poiemaweb.com/js..

정규식이란? -> 각종 현대적 애플리케이션과 프로그래밍 언어에 사용할 수 있는 특수한 텍스트 패턴. 정규표현식 책에서는 앞에서 설명했던것과는 달리 정규표현식이 무엇인지 정의하지 못한다고 했다. 왜? 어떤 텍스트 패턴이 정규식인지 아닌지를 정확히 판단할 수 있는 공식적 기준이 없기 때문 정규식 기본적인 용어, 문법들. 정규식의 클래스란? - []대괄호로 묶인 부분을 문자클래스 라고 한다. 부정문자 클래스란? - NOT과 같은 의미 정규식 의 의미는 u가 뒤에 있지 않은 q (X) u이외의 문자가 뒤에 있는 q (O) lraq is a country -> q뒤에 space공백이 들어있기 때문에 일치 하이픈을 사용하는경우 두 문자 사이에 범위를 형성 [A-z]는 아스키표에 있는 대문자A-z사이의 모든 문자를 ..

요상한 CS 가 들어왔다. IOS 기기에서는 검색이 잘 되는데, 안드로이드에서(일부 페이지에서)는 검색이 되지 않는다는 CS였다. 현재 모바일웹을 없앴다가 기존의 코드들을 복구하는 작업에 있어 다행히 당장 상용서버에서 문제를 일으키고 있지는 않았다. (없애기 전까지는 이런 문제가 있던 것이었던 걸까..) 문제를 보아하니, 검색하는 화면에서 있는 문제였다. 홈화면에 있다가 검색하는 모달을 띄우고 input 에 값을 입력을했다. 키보드에서 "이동" 버튼을 누르니 정상적으로 검색 결과 페이지로 이동하는 것을 볼 수 있었다. 그럼 뭐가 문제지? 다른 페이지로 이동 후 검색모달에서 input에 값을 입력하고 "다음" 버튼을 누르니 다음 동작(검색화면으로 넘어가는 동작)이 실행되지 않았다. onKeyPress에서 ..

리액트를 훅을 사용하다보면 useEffect와 useState만으로도 충분히 프로그램을 짤 수 있다. 그래서 useMemo, useCallback이라는 개념을 듣고 제대로 적용해 본 적이 없는 거 같다. 이렇게 작동하는 코드로 만족하는 것이 새로운 것을 배우려는 마음까지도 좁게 만드는 거 같아 useMomo와 useCallbak 에대해 공부해보고자 한다. 일단 useMemo, useCallback을 배우기 전에 알고가야 할 두 가지는, 함수형 컴포넌트도 "함수"라는 것이다. 함수가 실행될 때 내부에 있는 선언, 함수들이 매번 다시 선언이된다는 점이다. 그리고 컴포넌트는 state와 props가 변경될 때 마다 리랜더링 된다는 점이다. 그렇다면 리랜더링 될 때마다 내부의 변수선언, 함수들이 매번 다시 선언..

리액트에서 props 에 props 타고 내려가는 상태의 물림을 없애기 위해 redux 상태관리 툴이 탄생했다. 리덕스의 state의 전역 객체의 데이터를 여러 컴포넌트에서 참조해서 사용하고, 변경하는 것이 기본적인 개념이다. 이번 포스트에서 Redux의 코어 기능을 구현해보려고 한다. 컨셉을 이해하자. 리덕스의 컨셉은 전역 상태가 필요하다 실제로 여러 컴포넌트에서 리덕스의 상태를 가져다 쓰는데 전역 상태라는 전제 때문에 A라는 데이터를 b,c 컴포넌트에서 여기저기서 수정하게 된다면 어디서 수정이 됐는지 찾기가 힘들다. 그렇다면 이런 문제를 어떻게 해소할 수 있을까? 이는 각 컴포넌트가 리덕스 스토어를 직접 수정할 수 없도록 구현할 수 있다. 그리고 상태를 수정할 수 있는 트리거만을 주고 실제로 수정은 ..

리액트 16.8v 이후부터 함수형 컴포넌트 내에서 hook을 사용할 수 있다. 클래스형 컴포넌트에서 라이프사이클을 이용하면서 여러 문제점들을 만났고, 리액트 팀에서는 그를 보완하기 위해 훅이라는 개념을 도입했다. 그렇다면 훅은 어떻게 구현될까? 가장 기본적인 훅인 useState에 대해 살펴보자. useState의 기본적인 문법은 const [variable, variableSetter] = useState(initialValue); 형식으로 useState의 파라미터로 초기값을 받고, value와 그 값에 유일하게 접근할 수 있는 setter를 반환한다. export function useState(initValue) { let value = initValue; return value, (nextVal..

일단 바닐라js로 리액트 코어를 만들어보려고 한다. 컴포넌트의 ui를 만드는 JSX 는 js문법이 아니기 때문에 js로 바꿔야 하기 때문에 babel을 사용해 변환을 해줄 것이다. 시작하기 전 리액트 버츄어돔에 대한 이해 리엑트는 버츄얼돔을 가지고 있다. 버츄얼 돔을 만든다면 어떻게 만들 수 있을까??? 리액트의 버츄어돔도 오픈소스이기 때문에 전부 공개되어있다. 버츄얼돔은 기본적으로 HTML태그를 변환시키는 구조로 되어있을 것이다. 그러면 html태그는 어떻게 생겼을까. 태그가 있고 그 안에 속성 id등등이 있고, 태그는 열리고 닫히고 내부에는 자식 노드들이 있다. 이걸 버츄어 돔으로 js친화적인 데이터로 만들면 어떨까? js 친화적긴 데이터란 객체이다. EXAMPLE 이걸 객체로 바꾸면 어떨까 객체도 ..