본문 바로가기
반응형
Babel 이해하기 이름이 왜 바벨(Babel)일까? 바벨(babel)의 원래 이름은 '6to5'였다. 바벨을 만든 세바스찬 맥켄지(Sebastian McKenzie)는 호주의 고등학교 마지막 학년에 6to5를 만들기 시작했고, 그 당시 만든 계기가 정확히 기억이 나지 않는다고 했다. ES6를 우연히 만났고, 그 후 어찌저찌 'estraverse'라는 파서 라이브러리를 발견해서 더 깊이 배우기로 결심하고, 오픈 소스에 대한 환상이 떠오른 것 같다고 말한다. '6to5'라는 이름에서 알 수 있듯이 미래에 사용(future-proof)하기 적합한 이름은 아니었다. 많은 사용자들은 이것이 단지 ES6가 지원되기 전까지의 '임시 해결책'이라고 생각했지만, 맥켄지는 이것이 미래가 보장될 뿐만 아니라 잠재적으로 미래의 표준에 영향을 .. 2023. 3. 6.
국비지원 학원은 정말 괜찮을까? 며칠 전, 어느 인턴 기자분께서 메일을 보내주셨다. 내용은 부트텐트에서 내 취업후기를 보았고, 한국 코딩열풍의 현주소에 대해 취재를 하고 싶다는 것이었다. 메일을 받고 기자분이라는 것에 한 번 놀라고, 코딩열풍이라는 것에 두 번 놀랐다. 현재 나는 개발자로 일하고 있고, 이제는 새로 사귀는 지인분들도 개발자이다 보니 그냥 '내가 개발자라서 개발에 대한 것만 보이나 보다.'라고 생각했었다. 하지만 곰곰이 생각해보면 관련 뉴스들, 마케터인 친구가 코딩을 배우고(퍼포먼스 마케터라 부르는 것 같다.), 코딩 과외 수업이나 동네에 코딩 학원도 생기고, 요즘 초등학생들 사이에서 로블록스(게임을 프로그래밍하고, 다른 사용자가 만든 게임을 플레이할 수 있다.)라는 게임이 유행이라고 한다. 확실히 예전보다는 일상생활에서.. 2023. 2. 5.
Prettier 줄 바꿈 방지 및 해제하는 방법 VSC를 처음 사용할 때, 필수 익스텐션에 꼭 포함되는 코드 포맷터인 Prettier. 그만큼 정말 유용하게 사용하고 있지만 가끔 의도와 다르게 자동 줄 바꿈이 일어날 때가 있습니다. 이 글에서는 줄 바꿈을 방지하는 방법과, 저장 시 코드 포맷팅을 해제하는 방법을 알아보겠습니다. Print Width 늘리기 가장 간단한 방법은 Print Width를 늘려서 자동 줄 바꿈의 영역을 늘리는 것입니다. 맥은 cmd + shift + p, 윈도우는 ctrl + shift + p 키를 눌러 명령 팔레트를 실행시켜 줍니다. 그 다음 사용자 설정을 열어주고, 'print'를 검색한 후 Print Width를 조절하면 됩니다. 또는 .prettierrc 파일을 생성하여 옵션을 설정 해줘도 됩니다. .prettierrc.. 2023. 1. 3.
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.
반응형

티스토리툴바