ougi FE

오늘은 저희 프로젝트가 빌드 시간이 굉장히 오래 걸려서 해결방법을 찾다가 도입해볼까 고민하게 된 webpack-bundle-analyzer를 소개해보려고 합니다webpack-bundle-analyzer가 무엇일까webpack-bundle-analyzer란 웹팩으로 빌드를 할 때 최종 결과물이 어떻게 번들 됐는지 시각적으로 보여주는 도구입니다프로젝트의 JS 번들 크기, 어떤 라이브러리가 얼마나 차지 하는지 그래프로 예쁘게 시작적으로 보여준다고 합니다크기를 보면서 너무 큰 공간을 차지하는 것을 제거하여서 최적화할 수 있습니다 대표적으로 큰 라이브러리 몇가지를 말하자면Three.js, TensorFlow.js, Chart.js, moment.js, lodash.js 등등이 있다고 합니다사용하기npm insta..

요즘 저희 스터디원들이 자신의 생각을 담은 블로그를 많이 쓰고 있는데 저는 한 번도 저의 생각을 담은 블로그를 써본 적 없는 것 같아처음으로 기술 블로그가 아닌 저의 생각과 의견을 담은 블로그로 돌아왔습니다 왜 이런 생각을 하게 되었는가?먼저 제가 왜 이런 생각을 하게 되었는지 말을 해보자면많은 개발자들이 단지 며칠 지난 자신의 코드도 더럽다는 생각을 해본 적 있을 것입니다그리고 저 또한 매번 프로젝트를 여러 개 할 때마다 그냥 다 갈아엎고 다시 하고 싶다는 생각을 많이 했던거 같습니다또한 더 많은 기술들을 도입해서 처음부터 다시하고 싶다는 생각도 많이 했던거 같습니다 이러한 생각들로 인해 게으른 개발자가 되어야 한다는 결과를 냈습니다 내가 생각하는 게으른 개발자란?제가 생각하는 게으른 개발자는 진짜 말..

오늘은 기본 중에 기본인 CommonJS와 ES Module에 대해서 알아보고 둘의 차이에 대해서도 알아보겠습니다 Module이란?Module이란 코드를 기능별로 분리해서 재사용 가능하게 만든 단위입니다JS에서 모듈은 변수, 함수, 클래스 등을 내보내고 다른 파일에서 가져올 수 있도록 해줍니다CommonJS란?CommonJS 모듈은 원래 nodejs에서 자바스크립트 패키지를 불러올 때 사용하는 근본있는 방식입니다현재 여러 방식을 지원하지만 태초에는 CommonJS 방식이 유일 했다고 합니다require() 함수를 사용하여 모듈을 가져오고 module.exports를 사용하여 모듈을 내보냅니다동기적으로 작동하고 모듈이 로드될 때까지 코드 실행이 중단됩니다트리쎼이킹이 어렵다는 단점을 가지고 있습니다 예제//..

오늘은 평소에도 알아보고 싶었던 ts.config.json 파일 세팅에 대해서 깊게 파보겠습니다tsconfig.json 파일이란?tsconfig 파일은 프로젝트 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정해놓은 파일이라고 합니다디렉토리에 tsconfig.json 파일이 있다면 해당 디렉토리가 TypeScript 프로젝트의 루트가 됩니다javaScript 프로젝트에서는 jsconfig 파일과 거의 동일합니다전역 속성대표적인 전역 속성 몇가지만 알려드리겠습니다include: 컴파일 대상 경로 (예시: "include": ["src/**/*"])exclude: 제외할 파일 폴더 (예시: "exclude": ["node_modules", "dist"])extends: 중복되는 설정을 분리해서 재사용 ..

오늘은 제가 최근에 적용해 본 GA에 대해서 글을 써보았습니다GA란?웹사이트 및 앱 방문자 데이터를 수집하고 분석하는 도구입니다구글에서 무료로 제공하며 마케팅이나 서비스 개선을 위해 방문자의 행동, 트래픽, 사용자 특성 등을 파악할 수 있게 도와줍니다GA의 기능트래픽 분석사용자 행동 분석실시간 데이터사용하기밑에 주소로 들어가서 이용하실 수 있습니다들어가셔서 측정 시작을 눌러주세요!https://analytics.google.com/analytics/web/?pli=1&authuser=2#/provision 계정 이름을 입력하고 체크 박스에 체크를 다 하고 다음을 눌러주세요속성 이름과 시간대 통화를 알맞게 설정해주세요업종 카테고리를 알맞게 설정하고 비즈니스 규모도 체크합니다비즈니스 목표를 선택하고 원하는 ..

오늘은 취업 동아리에서 후배가 질문하는 것을 우연히 들었는데 이 부분은 왜 스타일이 적용되지 않는 걸까요?라는 질문을 하는 것을 보고 더 자세한 이유가 궁금해져 Cascading에 대해서 이렇게 글을 쓰게 되었습니다Cascading이란?CSS의 약자는 Cascading Style Sheets입니다오늘은 제일 앞에 있는 Cascading에 대해서 알아보려 하는데 뜻은 스타일 규칙이 계단식으로 적용되는 방식을 말합니다 일반적으로 여러 개의스타일이 한 html 요소에 적용될 수 있는데, 이 때 어떤 스타일을 우선으로 할지 결정해야 합니다이게 바로 Cascading에 개념인데 규칙이 구체적일수록 우선순위가 높아진다고 합니다Origin, Context먼저 origin에 대해서 알아볼 것인데 출처라는 뜻으로 이 ..

오늘은 제가 최근에 공유 기능을 구현해보면서 알게 된 web share api에 대해서 알아보려 합니다 web share api란?web share api는 사용자가 선택한 공유 대상에 텍스트, 링크, 파일 및 기타 콘텐츠를 공유할 수 있는 기능을 제공합니다공유 대상으로는 시스템 클립보드 , 이메일, 연락처 또는 메시지, SNS 어플리케이션, bluetooth 등이 있습니다기본적으로 제공하는 내장 기능이기 때문에 라이브러리를 따로 설치할 필요도 없고 사용법도 간단한게 큰 장점인거 같습니다 이 API는 두가지 메서드를 제공합니다navigator.share(): 공유 메커니즘을 호출하고 지정된 데이터를 전달합니다 이 메서드는 임시 활성화가 필요해서 반드시 버튼 클릭과 같은 이벤트에서 트리거 되어야 한다고 합..

오늘은 블로그 주제를 찾아서 돌아다니다 이벤트 버블링과 캡쳐링에 대한 글을 읽게 되어서이렇게 정리하기 위해 글을 써보게 되었습니다이벤트에 대해서이벤트란 마우스 클릭이나 키보드 입력과 같은 일반적으로 사용자가 행하는 모든 행동을 말합니다이러한 이벤트를 원하는대로 처리하는 것을 이벤트 핸들링이라고 합니다  HTML문서를 보면 모든 엘리먼트들이 계층적인 구조로 이루어져 있습니다그래서 요소에서 이벤트가 발생할 경우 연쇄적으로 이벤트가 발생할 수 있습니다예를 들어서 이해하기 쉽게 설명하자면  내용 저렇게 3개로 중첩 되어 있어서 제일 안 쪽에 위치하는 span 태그를 클릭할 시 그의 부모 요소인 div와 form 엘리먼트에도 이벤트가 발생할 수 있습니다 이러한 현상을 이벤트 전파라고 부른다고 합니다 ..

오늘은 SEO가 뭔지는 대강 알고 있었지만 그 원리와 하는 법에 대해서 더 자세히 알아보고 싶어서 이렇게 글을 쓰게 되었습니다SEO란 무엇일까?SEO란 Search Engine Optimization의 약자로 해석하자면 검색엔진 극대화로 검색엔진에 친화적인 웹을 구축하여서 광고가 아닌 자연 검색 결과를 통해 트래픽의 양과 질을 극대화 하는 것을 이야기합니다더 쉽게 이야기하자면 개발을 할 때 검색엔진이 더욱 더 이해하기 쉽게 웹을 만드는 것이라고 할 수 있습니다검색엔진 알고리즘구글의 검색엔진의 동작 단계로는 총 3가지가 있습니다크롤링: 웹크롤러(구글봇)이 웹 콘텐츠들을 복사하여서 모든 정보들을 수집한 후 수집한 정보를 검색엔진으로 가져옵니다인덱싱: 가져온 정보들을 주제별로 색인하여 데이터를 보관합니다랭킹:..

저는 예전부터 하던 생각이 있었습니다 무심코 아무 곳에서나 토큰 관리를 한다면 토큰을 탈취 당할 수 있지 않을까?그래서 저는 보안쪽을 잘 모르기 때문에 오늘은 토큰 관리를 어디서 해야 안전할까 라는 주제로 알아보고저의 생각을 이야기 해보겠습니다 XSS 공격? CSRF 공격?일단 토큰을 탈취하기 위한 방법은 두가지정도가 있다고 하는데그 두가지가 XSS(Cross Site Scripting) 공격과 CSRF(Cross-Site Request Forgery) 공격이라고 합니다 XSS 공격이란?XSS 공격이란 보안이 취약한 웹사이트에 악의적인 스크립트를 걸어놓고 사용자가 이 스크립트를 강제로 실행하게끔 유도하는 방법입니다 예시웹사이트 게시물에 태그를 넣어두고 클릭을 유도합니다클릭 시 스크립트가 실행되면서 사용자..