반응형 개발/기타48 브라우저에서 화면 css 스타일 전체 제거 프론트 개발 시 성능 등의 이유로 css 스타일의 영향도를 파악하기 위해 브라우저에서 css 전체를 한번에 제거하고 실행해보고 싶을 때가 있다. 이때 쉽게 화면에서 css 스타일을 제거할 수 있는 방법을 알아본다. 크롬에서 개발자도구를 실행하고, Console 탭에서 아래 명령을 입력한다. document.head.parentNode.removeChild(document.head) 참고로 크롬 개발자도구에서 위 명령을 복사붙여넣기 하면 아래와 같이 Warning이 떠서 직접 타이핑을 해야 한다. 크롬 개발자도구에서 위 명령을 naver에 접속하고 실행한 결과는 다음과 같다. 2024. 9. 7. 드라이퍼스 모델 - 초보자에서 전문가에 이르는 여정 소프트웨어를 설계하고 개발하는 것은 IDE나 어떤 도구가 아니다. 바로 우리의 머리가 상상하고 창조해내는 것이다. 이를 소프트웨어와 비교하여 웻웨어(wetware)라는 말도 있다. 웻웨어(wetware)는 소프트웨어를 생각해내는 인간의 두뇌, 인간의 뇌세포나 사고과정을 의미한다. 이런 의미에서 초보자에서 전문가에 이르는 여정을 모델링한 드라이퍼스 모델에 대해 알아보고, 어떻게 성장 해야하는지 자신은 지금 어느 단계인지 생각해본다. 전문가의 특징전문가들은 그들의 행동을 세세하게 설명하지 못하는 경우가 많다. 그들의 반응은 거의 습관화되어 있어서 생각하기 전에 움직인다. 그들의 많은 경험은 뇌에서 언어를 사용하지 않는 무의식 영역에 저장되어 있기 때문에 관찰하기 어렵고 그들이 직접 말로 설명하기도 어렵다.하.. 2024. 8. 16. 웹 프론트(화면) 성능 지표 알아보기 웹 브라우저에서 화면을 랜더링하는 과정과 화면 성능 지표에 대해서 정리해본다. 화면 랜더링 과정화면 랜더링 과정은 간단히 위의 그림처럼 Dom을 먼저 구성하고, Style, Layout 및 Layer 적용 과정, 그리고 Paint를 하는 과정 순서대로 진행이 된다. Layer는 크롬 개발자도구에서 More tools -> Layers에서 확인이 가능하다. 화면 성능 지표 화면 성능 관련 지표는 대략적으로 순서대로 작성하면 아래와 같다. 아래 지표들은 크롬 브라우저의 Performance 탭에서 확인이 가능하다. 지표(매트릭)내용TTFB (Time To First Byte)- 페이지를 요청했을 때 서버에서 데이터의 첫 번째 바이트가 도착하는 시점을 나타냄- 주로 서버 성능과 직결FP(First Pa.. 2024. 7. 4. DX(Digital Transformation) 이해하기 DX(Digital Transformation)는 디지털 전환이라는 의미로 전반적인 비즈니스 범위에서 디지털 기술을 적용해서 변화, 혁신하는 것을 의미한다. 기존에도 비즈니스에 다양한 IT기술들을 적용해서 활용을 해왔지만 DX는 기업의 전략, 조직 문화, 일하는 방식, 디지털 기술 적용 등 광범위한 변화를 가져온다는 차이점이 있다. 그리고 무엇보다 비즈니스의 근본적인 혁신을 위해 비즈니스의 주체를 IT에 맡긴다는 것이 특징이다. 기존에는 IT가 비즈니스를 후방에서 지원하는 형태로 존재해 왔고 비즈니스의 주체는 각 조직의 사업부서가 주도했다. 하지만 DX는 IT가 비즈니스의 주체가 되어 빠르게 변하는 시장에 대응하는 구조를 갖는다. 기존 IT활용과 DX 구조의 비교기존 IT 활용 구조기존 IT 기술 활용.. 2024. 6. 23. 하이브리드 클라우드, 멀티 클라우드, 분산 클라우드 개념 클라우드 배포 모델 중 큰 개념인 3가지 하이브리드 클라우드와 멀티 클라우드, 그리고 분산 클라우드에 대한 개념을 알아본다. 하이브리드(Hybrid) 클라우드 하이브리드 클라우드는 서로 다른 클라우드 배포 모델을 조합해서 사용하는 형태를 말하는 것이지만, 일반적으로 Private 클라우드 환경과 Public 클라우드 환경을 네트워크로 연결해서 함께 사용하는 것을 말한다. 아래 그림은 하이브리드 클라우드의 이용 형태의 종류이다. 주로 업무상 또는 목적에 따라서 클라우드를 구분해서 사용하거나, 장애 대응 및 가용성 확보를 위해 Public클라우드를 사용하는 경우이다. 멀티(Multi) 클라우드 멀티 클라우드는 여러 회사가 제공하는 Public 클라우드 서비스를 동시에 사용하는 것이다. 아래는 멀티 클라우드 .. 2024. 4. 6. [Google OAuth] 앱을 저장하는 중에 오류가 발생했습니다. 요청이 악용으로 분류되었으며 진행할 수 없습니다. 해결 방법 Google OAuth 사용을 위해 OAuth 동의를 하고, 앱을 등록하는 중에 다음 에러가 발생했다. 앱을 저장하는 중에 오류가 발생했습니다. 요청이 악용으로 분류되었으며 진행할 수 없습니다 앱 등록 정보는 아래와 같이 테스트를 위해 최대한 간단히 작성을 한 상태였다. 문제는 "앱 이름"에 있었다. 앱 이름에 'google' 이라는 단어가 포함이 되어 있으면 '요청이 악용으로 분류되었으며 진행할 수 없습니다.' 라는 에러가 뜨고 다음이 진행이 안된다. 앱 이름 'google'이라는 단어를 제거하고 '구글'로 수정하여 해결했다. 연관 내용: Vue.js Google 로그인 연동하기 Vue.js에서 Google 연동하는 방법을 알아본다.Google 계정 로그인은 OAuth 2.0 기반의 사용자 인증을 제공.. 2024. 3. 15. [Google OAuth2] The given origin is not allowed for the given client ID 에러 해결 Google 로그인 연동 처리 중에 아래와 같은 에러가 발생했다. The given origin is not allowed for the given client ID 구글 연동을 위해 Google Cloud에서 등록한 클라이언트와 지금 호출하고 있는 도메인에 문제가 있었다. 처음에는 로컬에서 테스트를 위해서 구글에서 아래와 같이 'http://localhost:8080'으로 설정 했다. 그러니 위에 같은 에러가 발생하는 상황이었다. 해결방법은 다음과 같이 port를 제거한 도메인 "http://localhost" 를 함께 등록해주니 해결됐다 연관 내용: Vue.js Google 로그인 연동하기 Vue.js에서 Google 연동하는 방법을 알아본다.Google 계정 로그인은 OAuth 2.0 기반의 사용자.. 2024. 3. 15. GitHub Actions를 활용한 AWS S3 CICD 구성(React 어플리케이션) GitHub Actions는 GitHub에서 제공하는 CICD를 제공하는 서비스이다. 다른 CICD 툴 처럼 GitHub 소스에 Push가 되거나 Pull Request 등 이벤트 발생 시 자동 실행도 제공해주고 있다. GitHub Actions를 활용해서 React 프론트 소스를 AWS S3에 호스팅하는 CICD 샘플 구성을 진행한다. 1. GitHub Actions workflow 생성 React 소스가 있는 GitHub 리파지토리에서 Actions을 클릭하고 Node.js를 기본 workflow로 선택(Configure 클릭)한다. 아래와 같이 기본 설정 yml파일(node.js.yml 파일)에서 필요한 부분을 먼저 수정한다. 필자는 node-version을 나머지는 지우고 18버전만 남겼고, ru.. 2023. 11. 19. 이전 1 2 3 4 ··· 6 다음 반응형
