본문 바로가기

FE54

Recursive Functions 재귀 함수(Recursive Functions)는 자기 자신이 리턴 값인 함수다. 재귀라는 단어는 잘 사용하지 않는 단어라 영어 단어가 훨씬 더 직관적으로 보일 정도다. 한자어인 만큼 한자를 알면 사실 쉽다. 두 재 혹은 다시 재(再)와 돌아갈 귀(歸)다. 다시 돌아간단 뜻이다. 단어를 왜이렇게 길게 설명했느냐 묻는 다면, 이 함수는 이게 핵심이고 전부기 때문이다. 함수를 다시 리턴한다는 건 반복한다는 소리다. 즉, 반복문의 역할이라고 이해하면 좋다. 반복을 함수로 할 뿐인 셈. for문과 재귀함수를 비교하며 살펴보자. 반복의 대명사 팩토리얼로 비교했다. // for문을 이용한 팩토리얼 let n=4 let result=1 for (let i = n; i >= 1; i--) { result = resul.. 2022. 10. 22.
HOC & HOF 고차컴포넌트(HOC, High Order Component)와 고차함수(HOF, High Order Function). 일단 둘 다 dlfma 뜻대로 작동한다. 높은 순위로 작동하는 컴포넌트와 함수다. 이런 게 왜 필요한가 했는데, 사용하다보니 필요성이 느껴진다. 더 신기한건 이런 개념을 react 문서에서도 기술하고 있다는 점이다. 클래스 컴포넌트든, 함수 컴포넌트든 마이페이지를 만든 후 이런 생각이 문득 든다. ‘마이페이지를 들어왔을 때 로그인 상태가 아니라면 경고창을 띄우고 돌려보내는 기능을 넣고 싶다’고. 그런데 가만히 살펴보니 다른 페이지에서도 로그인이 안되었을 때 들어가지 못하게 하는 점검하는 코드가 여러 곳에서 필요함을 느낀다. ‘이를 모아 한번에 묶으면 좋을텐데…’라고 생각이 드는건 당연하.. 2022. 10. 19.
Closure 클로저(closure)는 직역만으론 작동원리를 이해하기 어렵다. 필자 또한 한 번에 이해하기 어려웠다. 크롬 개발자도구에서 지원하는 디버깅 툴을 통해 하나씩 살펴보고 이해했다. (크롬 개발자 도구는 참 많은 걸 지원한다.) 결론부터 말하자면, 클로저는 반환 된 내부 함수가 자신이 선언 되었을 때 환경을 기억하는 함수다. 클로저를 이해해야 하는 이유는 상태 유지, 고차컴포넌트, 매개변수 함수 등을 위해서다. 물론 클로저에 대한 이해가 없이도 어느정도 알 수 있으나, 접근이나 코드가 복잡해지면 길을 잃기 딱 좋아 보인다. 따라서 미리 이해하고 있고자 정리한다. 위 코드를 실행시키고 개발자도구 소스로 가서 해당 코드 진행 사항을 차근차근히 살펴볼 수 있다. 무엇보다 오른쪽 스코프탭을 통해 클로저 상태도 알 수.. 2022. 10. 18.
Scope 스코프(Scope)는 그 말대로 범위다. for문을 쓰든, if문을 쓰든 우리는 항상 중괄호({})를 열도 닫는다. 이 중괄호가 바로 범위를 뜻한다. 스코프가 하나라면 전혀 문제 없지만, 여러 개 중복된다면 매우 헷갈린다. 스코프는 크게 전역 스코프와 지역 스코프로 나뉜다. 이에 따라 해당 변수가 참조할 범위가 바뀐다. 코드를 보면서 살펴보자. let a = 10; for(let i = 1; i 2022. 10. 17.
Cookie, Session, Local Storage 데이터를 저장하는 곳은 데이터베이스만이 아니었다. 웹서핑 시 뭐가 안될 때마다 '쿠키를 삭제 후 다시 접속하세요'라는 말을 자주 들어보았을텐데, 이 쿠키(Cookie)도 사실은 저장소였다. 다만 어디에 저장되어 있느냐가 다를 뿐. 쿠키 외에도 로컬스토리지(Local Storage), 세션스토리지(Session Storage)도 있다. 오늘 정리할 이 세 가지는 모두 클라이언트, 즉 사용자측에 저장되는 저장소다. 데이터를 사용자 컴퓨터에 저장하고, 상황에 따라 자료가 삭제 되거나, 서버와 통신하기도 한다. Cookie 우리에게 제일 친숙한 저장소가 아닐까 싶다. 익스플로러 사용할 때 브라우저가 느려졌다면 옵션 메뉴에서 많이 한 행동 중 하나가 바로 쿠키 삭제였다. 그 쿠키가 바로 이 쿠키다. 쿠키는 만료 .. 2022. 10. 12.

티스토리툴바