본문 바로가기
반응형
1년 차 프론트엔드 개발자 회고 작년 겨울에 입사하여 다시 겨울이 왔다. 나는 프론트엔드 개발자로 일하는 1년 동안 방향을 잘 잡고 성장을 했을까? 이제는 회사생활에 대한 회고가 주를 이룬다. 1년 동안 나름 열심히 하다보니 부장님과 차장님도 열심히 도와주시고 팀원들도 나를 믿고 일을 맡겨주고 계신다. 회의를 통해 내 의견을 적극적으로 표현하고, 기회가 생기면 적극 활용했다. 모르는 것은 최대한 찾아보고 거침없이 질문을 드렸다. 그래서 불과 3개월 전과 비교해 보면 많은 개선들이 이루어졌다. 이를 통해 내가 회사에서 개인적이든 아니든 그 일에 대해 개선해볼 생각과 의지가 있다면 스스로 만족할만한 결과를 얻을 수 있다는 것을 느꼈다. 내가 다니고 있는 회사는 이런 것들에 대해 호의적이어서 행운이라 생각한다. 그리고 결정적으로 1년 차에 .. 2022. 12. 29.
URI, URL 그리고 URN 이해하기 웹 프론트엔드 개발자로 일하면서 경험하는 혼란스러운 단어들이 있습니다. URI, URL 그리고 URN에 대한 명확한 개념이 저에게 필요했습니다. 가끔씩 이 용어들을 볼 때마다 '무슨 차이지?', '이런 경우엔 URI라고 해야하나?' 등의 혼란을 겪습니다. 이제 더 이상 혼란을 겪지 않기 위해 정리를 해보는 시간을 가져보려 합니다. 시작하기 먼저 이 개념들의 목적은 명확합니다. 바로 인터넷상의 리소스를 식별하기 위한 수단이라는 점입니다. URI(Uniform Resource Identifier) URL(Uniform Resource Locator) URN(Uniform Resource Name) 결국 모두 리소스의 식별자 역할을 하는 것에는 동일합니다. 하지만 마지막 단어에서 이들의 역할을 어느 정도 생각.. 2022. 12. 25.
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.
반응형

티스토리툴바