뚱이의 이모저모 세상 알기 & 개발 일기 😼 뚱이의 이모저모 세상 알기 & 개발 일기 😼

프론트엔드 일을 하다가 처음으로 GTM이라는 것을 실시했다. 아무래도 마케팅 기반의 회사다보니 AE들이 주를 이루었고, 이분들이 GA를 통해서 확인 할 수 있도록 GTM을 심는 일을 해야했다. 나도 처음이다보니 공부를 하면서 실시를 하게 되었다. GTM이란? GTM이라는 것은 Google Tag Manager를 뜻한다. 이는 Google에서 제공하는 데이터 분석 지원 서비스 이며, 추적코드(태그)를 비교적 쉽게 적용 가능하고, 구글 외에 플랫폼에도 설치 및 관리기능을 제공하고 있다. 또한 기본적으로는 비개발자가 사용 할 수 있도록 만들어졌으므로 GTM에서 자동 에러체크를 하여 문제를 알려준다는 장점도 볼 수 있다. 내가 생각하는 모양은 이러하다. GTM을 통해 내가 GA에서 보고 싶은 것을 만들어내고, ..

오늘 아침부터 함께 스터디하며 도움을 받고 있는 분과 함께 재미있는 이야기를 했다. 요즘 Javascript와 Node.js의 내부 사정에 대해서 공부를 하고 있는데, 그러다보니 이런 문제가 나온 것 같다. 아마 당연하다고 생각하시는 분들도 있겠지만, 의외로 주니어의 경우 모르는 분들 또한 많을 것 같다고 생각 되어 정리를 해둔다. 첫 번째 문제는 이것이었다. var name1 = { name: "javascript" }; var name2 = { name: "javascript" }; name1 == name2 자 이것의 답은 무엇일까? name1과 name2는 같은 것일까? 이전에 정리해 둔 포스팅인 이벤트루프 편을 읽어보시면 조금 더 빨리 감을 잡을 수 있을 것이다! 정답은 바로! false 이다...

okky에서 본 글이다. 어떤 분이 면접을 다녀왔는데 면접장에서 "자바스크립트는 기본적으로 동기적으로 동작하는데..." 라고 했다가, 면접관이던 대표분이 "아뇨 자바스크립트는 비동기로 동작하구요!" 라고 했다고 한다. 댓글을 보면 의견이 분분하다. 자바스크립트가 동기적이냐 비동기적이냐에 대해서 분분한 것이 아니라, 면접관의 생각에 대해서 분분했다. 등 다양한 의견들을 보였다. 그래서 간단하게나마 정리를 해두려고 한다. 자바스크립트는 싱글스레드이며 동기적인 프로그래밍(Blocking)이다. 콜백 시스템을 활용해 Non-bl..

브라우저 렌더링 과정-1 의외로 신입이 모르는 것! - 브라우저 렌더링 과정 면접에서 신입에게 가장 많이 물어봤던 것이 브라우저 렌더링 과정이었다. 즉, "www.google.com" 이라고 치면 화면에 보여지기까지의 과정을 말하라는 것인데, 생각보다 많은 지원자들이 이를 잘 알 patrick-f.tistory.com 앞서 전체적인 브라우저 렌더링 과정에 대해서는 간단하게 살펴보았다. 그렇다면 서버 쪽은 잠시 두고, 프론트엔드 개발자로써 알아야 할 브라우저 렌더링 과정에 대해서 이해를 해보자! ( 파이어폭스, 사파리, 크롬 각 브라우저 마다 조금씩 차이가 있을 수 있어서 이번에는 Chrome에 국한 된 포스팅을 하고자 한다 ) 1. 브라우저의 구조 우선 브라우저의 구조에 대해서 전체적으로 살펴보자! "브..

많은 취준생분들이 로그인, 회원가입 구현을 해보고 취직을 하는지 모르겠다. 나의 경우 OAuth 정도는 사용해봤는데, 사실 인증 구현에 대한 것을 제대로 접해보진 못했다. ( 사실 언젠가 해봤는데 그 방법이 이해도 잘 안되고, 너무 어렵게 느껴져서 회피하게 된 것 같다 ) 그런데 회사에서 만들고 있는 프로젝트에서는 사용자가 로그인을 하고 들어오면 자신만의 마케팅 정보를 볼 수 있어야했다. 그렇기 때문에 인증구현에 대한 것은 필수적이라고 할 수 있다. 인증에 대한 제대로 된 공부에 앞서 많은 분들이 사용하고 있는 인증 구현 방법에 대해서 알아보려고 한다. 그 방법은 바로 Session, JWT, OAuth 이다. 프론트단에서 봤을 때 이는 사용자의 로그인, 회원가입과 같이 사용자의 로그인, 회원가입과 같이..

처음에는 단순히 코딩 언어만 잘 하면 일처리에 문제가 없을 것이라고 생각했다. 하지만 비전공자로써 일을 하다보니 결국은 나오게 되는 말이 컴퓨터과학, 알고리즘과 같은 것이었다. 일 처리 하는 것과는 상관이 없어보지만 사실상 관계성을 가진다. Javascript에서 사용 되는 Array.prototype.map()과 같은 경우에도 단순히 사용 방법만 알고 사용 할 수도 있지만, 어떻게 사용 되는지 충분히 이해한 상태에서 사용하려면 알고리즘과 자료구조를 알고 있어야한다. 그래서 깊이 들어가기 전에 간단하게 조금 이미지를 그려보려고 한다. Computer Science 컴퓨터 과학이라고 하는 것은 쉽게 말해 문제 해결을 위한 학문이라고 한다. 특히 대학에 가려는 분들이 헷갈려 하는 경우가 컴퓨터 과학, 컴퓨터..

원래 맡겼던 백엔드 분과 협의가 잘 되지 않았는지, 중간에 회사와의 연결이 끊어졌다. 모든 전말을 상세하게 아는 것은 아니지만, 가장 큰 부분은 회사에서 비즈니스를 생각하는 대표와 개발자의 생각이 서로 다른 채로 이야기가 진행되었던 것 같다. 즉, 커뮤니케이션 문제가 가장 크지 않았나 하는 생각이 든다. 그래서 글을 쓰고 있는 오늘을 기준으로 다음 주 화요일에 다른 외주 백엔드분을 만나서 미팅을 가지는데 함께 가기로 했다. 여기서 나의 고민은 크게 두 가지가 발생했다. 1. 기존 백엔드 분은 나와 아는 사이니 내가 일하기 편하게 도와줄 수 있었다. 그러나 외주에 맡긴다는 것은 나에게 필요한 것을 확실하게 내가 전달해야한다는 의미일 수도 있다. 2. 나와 함께 미팅을 가자는 말은 어느정도 내가 필요한 것들..

비전공자로써 처음 Javascript를 공부하기 시작한 분들이 아마 다 비슷비슷할 것이다. 처음부터 var, let, const 등을 시작으로 문자열, 객체, 클래스, 함수 등을 배우게 된다. 즉, 눈 앞에 코드를 쳐보면서 시작을 하는 것이다. 처음에는 그런 것이 재미있게 느껴졌기 때문에 시작을 하는 입장에서는 좋은 방법이라고 생각은 든다. 하지만 이제는! Javascript의 맛을 조금 봤다면, 발을 조금 담궈봤다고 한다면! Javascript의 Event Loop에 대해서도 공부를 해봐야 할 것이다. " Event Loop를 모른다면 Javascript를 안다고 말할 수 없다 " 라는 말을 하는 만큼 Javascript를 사용하는 분들이라면 누구든지 이벤트 루프에 대해서 알아야 할 것이다! 우선은 전..