ougi FE

오늘은 블로그 주제를 찾아서 돌아다니다 이벤트 버블링과 캡쳐링에 대한 글을 읽게 되어서이렇게 정리하기 위해 글을 써보게 되었습니다이벤트에 대해서이벤트란 마우스 클릭이나 키보드 입력과 같은 일반적으로 사용자가 행하는 모든 행동을 말합니다이러한 이벤트를 원하는대로 처리하는 것을 이벤트 핸들링이라고 합니다  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 공격이란 보안이 취약한 웹사이트에 악의적인 스크립트를 걸어놓고 사용자가 이 스크립트를 강제로 실행하게끔 유도하는 방법입니다 예시웹사이트 게시물에 태그를 넣어두고 클릭을 유도합니다클릭 시 스크립트가 실행되면서 사용자..

오늘은 제가 면접을 보면서 질문을 받았던 호이스팅에 대해서 글을 써보려고 합니다완벽하게 답변하지는 못한 것 같아서 다음에는 더 완벽하게 답변하기 위해 이렇게 글을 쓰게 되었습니다호이스팅이란?JavaScript에서 호이스팅은 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다단순하게 단어를 해석하자면 스크립트 내 변수와 함수의 선언 순서에 상관 없이 순서가 끌어올려진 듯한 현상입니다물리적으로 끌어올려지는게 아니라 JS 엔진이 코드를 스캔하고 실행컨텍스트에 미리 기록해 놓아서 이런 현상이 발생하는 것입니다예시함수 호이스팅example() // 실행 됨 result: "호잇 호이스팅"function example(){ console.log("호잇 호이스팅");} var 변수 호..

최근에 코드를 보다가 우연히  middle.ts라는 파일을 보게 되었습니다궁금하여서 서치하다가 이 middleware에 대해서 좀 더 알아보게 되어 이렇게 글을 써보게 되었습니다middleware란?Next.js에서의 middleware란 요청과 응답 사이에서 실행됩니다특정 작업을 처리하거나 요청을 수정할 수 있는 함수입니다사용자 인증, 리다이렉션, 요청 헤더 수정, A/B 테스트와 같은 기능을 구현할 때 사용됩니다사용하기1. next 최신 버전으로 설치하기2. 루트 디렉토리에 middleware.ts 파일 생성하기3. middleware.ts 파일에서 middleware 함수를 내보냅니다npm install next@latest # npmyarn add next@latest # yarn설치import ..

오늘은 코딩테스트를 풀다 자주 봐왔던 개념인 깊은 복사와 얕은 복사를 자세히 알아보고자 합니다얕은 복사 깊은 복사가 무엇일까?얕은 복사란 객체의 참조 값(주소)를 복사하는 것 입니다깊은 복사란 객체의 실제 값을 복사하는 것 입니다 JavaScript에서의 값은 원시 값과 참조 값으로 나누어집니다원시 값은 기본 자료형을 말합니다원시 값에는 Number, String, Boolean, Null, undefined 등이 있습니다 참조 값은 여러 자료형으로 구성되는 메모리에 저장된 객체입니다참조 값에는 Object, Symbol 등이 있습니다 깊은 복사의 예시const 똥 = "응가";let school = "student";school = "teacher";console.log(똥) // result: "응가..

오늘은 깃허브를 보다가 발견한 Husky에 대해서 알아보면서 기본으로 알아야 할 Git Hook까지 알아보도록 하겠습니다Git Hooks란?Git Hooks는 Git repository에서 특정 이벤트가 발생할 때마다 자동으로 실행되는 스크립트입니다훅은 .git/hooks 이곳에 저장됩니다 이 디렉토리에서는 Git이 기본적으로 제공한 유용한 스크립트 예제가 몇가지 존재합니다그리고 스크립트가 입력받는 값이 어떤 값인지 파일 안에 자세히 설명되어 있습니다 클라이언트 훅과 서버 훅으로 나눌 수 있습니다클라이언트 훅commit이나 merge를 할 때 실행됩니다클라이언트 훅은 매우 다양해서 committing-workflow 훅, email-workflow 훅, 기타가 있는데저는 committing-workflo..

오늘은 CI/CD에 개념을 제대로 잡고 넘어가고 싶어 이렇게 글을 쓰게 되었습니다CI/CD란?CI/CD란 지속적 통합(Continuous Integration)과 지속적 배포(Continuous Deployment)의 약자로소프트웨어 개발 과정을 자동화하여 더 빠르고 안정적으로 애플리케이션을 고객에게 제공하는 방법입니다CI/CD 파이프라인 구축은 개발 효율성을 높이고 배포할 때 오류를 최소화합니다 먼저 CI에 대해서 더 자세히 말해보자면개발자가 코드 변경 사항을 정기적으로 병합하는 것을 의미합니다이 과정에서 코드 변경 사항마다 빌드와 테스트가 자동되어 문제를 빠르게 발견하고 해결할 수 있습니다 CD에 대해서 더 자세히 말해보자면CI 과정을 통해 테스트를 통과한 코드를 자동으로 배포하는 단계를 말합니다CD..

오늘은 깔끔한 코드를 작성하는 것으로 고민을 하다가Barrel export 패턴에 대한 글을 보게 되어서 이렇게 글을 쓰게 되었습니다Barrel export 패턴이란?Barrel export 패턴은 여러 개의 모듈을 하나의 진입점(entry point)에서 모아서 export하는 방식이라고 합니다이 방식을 사용하면 import문을 더욱 더 깔끔하고 간결하게 만들 수 있다고 합니다사용 예시먼저 폴더 구조를 말씀 드리겠습니다src/ components/ footer.tsx header.tsx index.ts  원래 Barrel export 패턴을 사용하지 않고 하려면 이런 식으로 import 해야 했습니다import Header from 'src/component..

저는 최근에 프로젝트에서 3D를 구현해야 할 일이 생겨이렇게 three.js에 대해서 공부하고 사용하고자 글을 쓰게 되었습니다❓ three.js란?three.js는 웹페이지에 3D 객체를 더욱더 쉽게 렌더링 할 수 있도록 도움을 주는 JavaScript의 3D 라이브러리입니다3D 객체를 렌더링하기 위해서 webGL이라는 것을 사용합니다webGL이 있지만 three.js를 쓰는 이유는 webGL이 점, 선, 삼각형만 그릴 수 있어 코드양이 굉장히 많아지기 때문입니다🏗️ three.js의 기본 구조Rendererthree.js의 핵심 객체입니다Scene과 Camera 객체를 넘겨 받아서 3D 장면을 2D 화면에 그려주는 역할을 합니다Three.js에서는 WebGLRenderer를 이용하여 웹 페이지의 ca..