Frontend8 Frontend Logging System PoC 공유(23년 12월에 진행) 작년 12월에 Frontend 로그 수집 시스템을 구축하고자 비교했던 오픈소스 툴 3가지가 있었다늦었지만 이제서야 포스팅을 올린다 ㅎ(박명수: 늦었다고 생각했을 때가 진짜 늦은거여)- Sentry- Rollbar- LogRocket 그 중에 최종적으로 선택한 것은 ✅ Rollbar 였다유저가 어떤 활동을 했는지 화면기록까지 남기는건 요구사항에 없었고, Pricing의 Free Plan에서 Capacity가 컸던 것 같다정확히는 FE에서 발생하는 Error Tracking을 위해서 유저활동의 Monitoring보다는 Log 수집이 우리의 목표였다(Feat. Vue3+Ts)그리고 LogRocket은 Free 플랜에서 경험할 수 있는게 너무 적었던 것 같다 또한 아래의 2023년에 비교 사이트에서 당시에 알아.. 2024. 7. 23. 개발자도구 조금 더 잘쓰기( feat. network tab ) 웹 개발자의 필수도구인 F12 혹은 option + cmd + i 키를 누르면 나오는 개발자도구... 정말 잘 쓰는 사람은 드물다고 생각한다 일단 이번에는 network 탭에서의 간단한 정보들에 대한 것들을 포스팅하려고 한다 개발자도구 탭에서는 정말 여러가지 디버깅을 해볼 수 있는데, 이 중 network 탭을 살펴보자 저 위의 단축키를 눌러서 네트워크 탭을 들어가보자 보통 이런 화면을 볼 수 있을 것이다 여기에는 webserver가 내려준 정적 파일(css, ico, images)들과 http method 등 다양한 것들을 볼 수가 있는데, 프론트엔드 개발자의 주된 관심사는 Http method 호출이다(Application Programming Interface->api라고 흔히 부르는) 위의 Sub.. 2023. 9. 25. 선언적 렌더링(Declarative Rendering) vs 명령형 렌더링(Imperative Rendering) Imperative: Give step-by-step instructions on how to reach a certain goal Declarative: Describing the result (the what), without instructing how to do it 예시) Mom wants a kid to tidy up its room. Imperative: “Pick up the toys, then empty the bin, then remove dust and finally vacuum the floor.” Declarative: “Here’s a picture of how your room looks like clean. I want you to get it into that state i.. 2023. 1. 11. Mac Node.js, Npm(Node Package Manager) 버전 LTS로 업데이트 하기 LTS:(Long Term Support) 긴 시간동안 업데이트도 하며 지원하는 버전이다 version 확인 npm -v node -v n 모듈 설치 sudo npm install -g n Node.js LTS 버전으로 업데이트 sudo n lts 다시 버전 확인 NPM 재설치 sudo npm install -g n 결과 Node.js v.16.16.0 → v.18.13.0 NPM v8.11.0 → v.8.19.3 2023. 1. 11. Vue Project 생성하기2023 (M1, CLI, UI, Vite) 일단 난 M1 Mac을 사용하고, homebrew를 이용해서 진행할 것이다 Node.js를 설치한다 ⇒ 생략 Vue CLI (Command Line Interface) 설치 sudo npm install -g @vue/cli 1. Vue-CLI default 프로젝트 생성 #vue create [프로젝트명] vue create vue-default 버전 선택 Vue3 프로젝트 매니저 도구 선택 NPM or Yarn Yarn 선택 완료 실행 테스트 # cd [프로젝트명] cd vue-default yarn serve http://localhost:8080 접속 터미널 실행 종료 Ctrl + C - 프로젝트 구조 .idea node_modules public public/favicon.ico public/i.. 2023. 1. 11. IntelliJ에서 Vue.js프로젝트 만들기 사실 프론트엔드분들은 VScode -> WebStorm 순으로 IDEA를 많이 쓸 것 같지만 나는...쪼렙 초보이기때문에 IntelliJ로 프론트를 개발한다(사실은 회사에서 인텔리제이 라이센스만 줘서.. + 내 돈으로 웹스톰 결제하기 싫..ㅋㅋ) 그래서 인텔리제이로 뷰를 공부해보려고 한다 내 인텔리제이 버전은 2022.4 Ultimate Edition이다 기본적으로 인텔리제이에서 새 프로젝트를 만들면 뷰 프로젝트가 안보인다 아마 내 기억으로 WebStorm은 뷰 프로젝트가 있던 것 같다 그럼 인텔리제이는 어떻게 해야하나..? 일단 플러그인에서 Vue.js 플러그인을 검색해서 설치하자 그리고 새 프로젝트를 만들어보면... 아래 Vue.js를 만드는 프로젝트가 보일것이다 이거로 새 프로젝트를 만들자..! 일.. 2022. 12. 8. .js 와 .jsx의 차이점 그리고 문법 설명 JSX(JavaScript XML) : 자바스크립트에 XML을 추가한 확장 문법 대표적인 차이점 * 자바스크립트 내에 html을 쓸 수 있다 const element = Hello, world!; 구글에 이렇게 검색을 해보면... What is the difference between JavaScript and JSX? 스택오버플로우에서 이런 정보들을 얻을 수 있다 어느게 더 가독성이 있고 읽기 좋은 코드인가? 난 jsx에 한 손을 들어주고싶다 또한 리액트 공홈인 https://ko.reactjs.org/docs/introducing-jsx.html 에서도 jsx에 대한 정보를 얻을 수 있다 또한 리액트로 개발할때 사용하며 공식적인 문법 형태는 아니다 바벨이 브라우저에서 실행 되기 전에 자바스크립트 형태.. 2022. 5. 30. JetBrains IDE && Styled-components code 색상입히기 InetlliJ나 WebStrom으로 개발할때 Styled-component를 설치하면 아래처럼 색깔이 입혀지지 않아서 나온다 어디까지가 속성(attribute)이고 어느게 value인지 확 와닿지 않는다..!! 그럴때는 이 플러그인을 설치하자 그러면 결과는....!! 알아보기 쉽고 옆에 색상도 나온다!! 굿 2022. 5. 29. 이전 1 다음
