본문 바로가기
반응형
Stack Frame과 Execution Context는 같은 개념일까? 최근 자바스크립트를 좀 더 깊게 이해하고자 공부 중인데, 혼란스러운 두 용어가 있다. 바로 실행 컨텍스트(execution context)와 스택 프레임(stack frame)이다. 콜 스택을 설명할 때 둘의 용어를 혼용해서 사용하는 것이었다. 스택 프레임(Stack Frame)이란? 어떤 함수든 호출되는 순간 스택에는 그 함수를 위한 영역이 할당된다. 이것을 스택 프레임(stack frame)이라고 한다. 즉, 함수의 실행 데이터가 스택 프레임에 저장되는 것이다. 다르게 말하면, 스택 프레임은 스택 영역에 차례대로 저장되는 함수의 호출 정보이다. 스택 프레임에는 매개변수, 호출이 끝난 뒤 돌아갈 반환 주소값, 함수에서 선언된 지역 변수 등이 저장된다. 따라서 이것이 실제 실행 스택이며, 각 프레임은 해.. 2022. 12. 7.
React에서 DataTables 사용하기(반응형 테이블) jQuery용 DataTables와 리액트를 함께 사용하는 일은 많이 없을 거라 생각합니다. MUI, Ant Design과 같은 호환성이 좋은 선택지가 이미 있기 때문입니다. 그럼에도 여러 상황에 따라 이 조합을 써야할 경우가 있습니다.(바로 저처럼..) 그런데 사용하면서 느낀 건, 생각보다 강력한 도구라는 것입니다. 테이블 형태로 노출되는 화면을 어떻게 반응형으로 만들어야 할지 막막했는데, 이 부분을 DataTables가 시원하게 해결해주었습니다. 이름에서도 알 수 있듯 DataTables는 jQuery(이하 제이쿼리)에 대한 의존성을 갖습니다.(v1.11부터 non-jQuery 방식으로 초기화가 가능하지만 여전히 제이쿼리에 의존성을 갖고 사용합니다.) 제이쿼리와 리액트 둘 다 DOM(Document .. 2022. 9. 22.
[번역] useEffect 단순화 Photo by Christopher Burns 원문 : https://tkdodo.eu/blog/simplifying-use-effect 글에서 오타나 오역을 발견하신 경우, 댓글로 알려주시면 감사하겠습니다. 의역이 포함되어 있습니다. :D useEffect. 모두에게 필요한 훅이지만 누구도 원하지 않습니다. 리액트 공식 문서에 따르면 이것은 "리액트의 순수 함수형 세계에서 명령형 세계로 탈출하는 창구"입니다. 리덕스 원작자이자 리액트의 핵심 팀원인 댄 아브라모프(Dan Abramov)가 작성한 useEffect 완벽 가이드는 49분 분량이며, 실제로 이해하는 데 최소 두 배의 시간이 걸립니다. useEffect는 리액트에서 얻을 수 있는 만큼 복잡하고, 이것 없이 애플리케이션을 작성할 수 있을 가능성.. 2022. 9. 12.
MUI Data grid column default value 설정 방법 MUI Data grid는 기본적으로 column의 필드값이 존재하지 않으면 빈값으로 노출이 됩니다. 하지만 상황에 따라 기본이 되는 값을 변경하고 싶을 때가 있습니다. 예를 들어 날짜별로 제품의 주문횟수들을 계산할 때, 주문이 들어오지 않아 받아오는 데이터에 해당 속성이 없다면 어떻게 할까요? 코드로 확인해보겠습니다. 코드 import { Box } from '@mui/material'; import { DataGrid } from '@mui/x-data-grid'; const rows = [ { id: 1, date: '01', name: '반팔', orders: 2550, stock: 9230 }, { id: 2, date: '02', name: '코트', stock: 1872 }, { id: 3,.. 2022. 8. 30.
오늘 하루 그만 보기 모달 윈도 구현하기(feat.Cookie) 마케팅 회사의 개발자로 일하다보니 꽤 많은 온라인 쇼핑몰에서 모달 윈도를 다양하게 활용하고 있다는 것을 알게 되었습니다. 특히 사용자의 구매 유도를 위한 배너 광고 형식을 자주 보는 것 같아요. 배너 광고 형식 외에도 프로모션 알림, 공지사항 등이 있겠네요. 여기엔 '오늘 하루 그만 보기', '3일 동안 보지 않기'와 같은 기능도 포함이 되어 있습니다. 이러한 기능은 어떻게 구현을 하는지 해당 기능을 중심으로 알아보겠습니다. 왜 쿠키(Cookie)일까? '오늘 하루 그만 보기'와 같은 기능은 대부분 쿠키를 통해서 구현을 합니다. 현재 네이버의 프로모션 알림도 쿠키를 통해 제어를 하고있습니다. 확인하는 방법은 개발자 도구를 켜서 애플리케이션 탭의 쿠키에서 확인을 하실 수 있습니다. 네이버에서 '3일 동안 .. 2022. 8. 18.
9개월 차 프론트엔드 개발자 회고 지난 회고에 이어 3개월이 지났다. 이번 회고는 다른 시기와 달리 더 보고, 듣고, 배우고, 느꼈던 것들이 많았다. 개발자 커뮤니티 이제는 커다란 커뮤니티가 된 테오의 프론트엔드 오픈채팅방은 다양하고 많은 질문들과 대답들이 오고간다. 뛰어난 분들이 많아서 대화를 보는 것만으로도 도움이 될 때가 많다. 그 외에도 컨퍼런스나 해커톤, 좋은 블로그 글 등 유용한 정보들을 공유 해주어서 주변 개발자 지인들에게도 추천하고 있다. 요즘은 대화가 많이 쌓여있을 때는 못볼 때도 있지만 틈틈이 출근길이나 퇴근길에 보려고 노력하고 있다. 그리고 그 덕분에 인프런 네트워킹 데이 행사에도 참여할 수 있었다. 프론트엔드 개발자들이 오프라인으로 모여 연사도 듣고, 피자와 맥주를 마시면서 대화도 나누는 네트워킹 행사였다. 걱정했던.. 2022. 8. 8.
인프런 네트워킹 데이에 다녀오다 이틀 전인 6월 17일(금), 인프런에서 주최한 FE 개발자 네트워킹 데이에 다녀왔습니다. 정말 운이 좋게 당첨 되었어요. 총 695분 중 60명 안에 들었으니까요. 개발자로 취직을 한 이후에 커뮤니티도 굉장히 중요하다고 생각해와서 이런 저런 기회가 생기면 지원을 했어요. 하지만 오프라인 행사는 처음이었기에 너무나 떨린 마음으로 갔던 기억이 납니다. 너무 어색해서 얼굴에 경련이 일기 직전, 인프런 직원들이 오셔서 먼저 말도 걸어주시고 저의 얼굴 근육도 풀어주셨습니다. 지금와서 생각해보면 오히려 일찍 도착을 한 게 다행인 것 같아요. 덕분에 네트워킹 데이 비하인드(?)도 듣고 조금씩 즐기게 되었습니다. 그렇게 시간이 흘러, 조금씩 사람들이 채워지고 제가 배정받은 팀의 팀원분들도 오시기 시작했습니다. 이미 .. 2022. 6. 19.
반응형

티스토리툴바