Web Frontend

개발을 하다보면, 코드 상에서 직접적으로 DOM을 조작하기도 합니다. 대표적으로 innerHtml을 사용하는 것이 직접적으로 DOM을 조작하는 것입니다.const article = document.getElementById('soccer-article');article.innerHTML = "content . . ."; 하지만, 이렇게 '직접적으로 DOM을 조작하는 것'은 보안적인 측면에서 위험할 수 있습니다.  React에서도 이런 행동이 위험할 수 있다는 것을 상기시키기 위해, 직접 DOM을 조작할 때는 아래와 같이 어느정도 이름에서 위험도가 유추되는 'dangerouslySetInnerHtml'이라는 기능을 사용하도록 합니다.const contentHtml = 'First · Secon..

들어가며벌써 한 해의 절반 정도가 지났습니다. 시간이 벌써 이렇게 흐른 것이 너무 믿기질 않네요...저는 이번 상반기에 열심히 취업을 준비했습니다. 비록 목표한 취업에는 성공하지 못했지만, 그 과정에서 여러 기술적인 개념들을 공부할 수 있었고, 운좋게 참석했던 몇 번의 인터뷰 덕분에 평소 몰랐던 부분들을 다시금 배우는 시간을 가졌습니다. 오늘은 이렇게 제가 취업을 준비하며 진행했던 인터뷰에서 받은 인상 깊은 기술 질문들에 대해 복기하는 시간을 가지며, 질문 받았던 개념들을 몇개 나열해보려고 합니다.  React-Dom 라이브러리 한 달 전, 한 회사의 기술 면접에서 예상치 못한 질문을 받았습니다. "React-Dom 라이브러리에 대해서 설명해주세요." 이 질문을 받았을 때, React-Dom이라는 라이브..

'프로토타입과 프로토타입 체인에 대해 아는 대로 설명 부탁드립니다.' 최근에 기술 면접을 보면서 Javascript의 프로토타입에 대한 질문을 받았습니다. 평소 프로토타입에 대해 완전히 이해하지 못하고 있었기 때문에 결국 어정쩡하게 둘러댈 수밖에 없었는데요. 이번 글에서는 그때의 상황을 돌아보며, Javascript의 프로토타입에 대해 제대로 다시 공부하고 이해한 내용을 공유하려고 합니다. Javascript와 Prototype클래스(Class)는 객체지향에서 중요한 개념입니다. 때문에 대부분의 객체지향 언어(e.g. Java, C++)에서는 이러한 클래스가 기반이 되지만, Javascript는 객체지향 언어이긴 하나, 그 기반이 프로토타입(Prototype-Based)이 됩니다. 즉, 클래스 없이도 객..

이번 글에서는 React에서 새롭게 제시한 React 코드 작성에 대한 권장사항 9가지를 보고 그 중 새롭게 알게 된 몇가지 사실에 대해 정리해보려 합니다.1. 반복문에서 요소의 key를 지정해주는 경우에는 index 사용을 지양하자key는 list의 요소를 추적하기 위해 사용됩니다. 이때 index는 요소를 고유하게 식별하지 않으므로 사용하는 것이 좋지 않습니다// 🛑 WRONGreturn ( {items.map((item, index) => ( … ))} );// 🟢 RIGHT, item.id가 안정적인 고유한 식별자라고 가정return ( {items.map((item, index) => ( … ))} );key를 index로 지정하게 되면 배열..

Axios의 Interceptoraxios의 interceptor는 요청의 응답을 가로챈 후 그 응답을 미리 처리할 수 있는 기능을 지원합니다.그렇기에 인가가 필요한 요청에서 401(Unauthorized) 에러가 발생하면 응답(에러)을 먼저 가로채서 토큰 Refresh를 진행하고, refresh된 토큰을 에러가 발생했던 요청의 헤더에 다시 넣어서 요청을 retry 할 수 있습니다.이러한 interceptor은 모든 요청과 응답에 대해 공통적인 작업을 수행할 수 있어 중복되는 코드를 없애며, 효율적인 인가 처리를 도와줍니다. 다음은 interceptor의 base 코드입니다.export const instance = axios.create({ baseURL: NEXT_PUBLIC_BASE_URL,});..

이번 글에서는 최근에 우연히 공부하게 된 'IIFE'라는 꽤나 유용한 개념에 대해 이야기 하려고 합니다.꽤나 어렵지 않은 개념이니 한 번 공부해둔다면 여러모로 도움이 될 것 같습니다 :) What is 'IIFE'IIFE는 Immediately Invoked Function Expression의 약자로, 정의와 동시에 즉시 실행되는 JavaScript 함수를 의미합니다.  IIFE는 다음과 같은 형태를 가집니다.(function() { console.log("This is an IIFE");})(); IIFE에서는 '()()', 이 괄호 두개가 하는 역할을 아는 것이 중요합니다.첫번째 괄호는 ()로 감싸진 익명함수입니다. 이는 전역 스코프에서 불필요한 변수로 인해 일어나는 오염을 방지하고, IIFE..

오늘은 Notion API를 활용하여 개인 블로그를 개발하던 중에 알게 된 CORS anywhere라는 서비스를 소개해보려 합니다. 문제 상황블로그 제작을 위해 Notion API를 통해 간단히 Page Data를 조회하는 기능을 구현하고 있었습니다.기능 구현을 위해 Axios를 사용해 간단한 API를 구현하고, 작동 확인을 위해 console.log를 확인했습니다.export async function fetchNotionPageContent(pageId: string) { try { const response = await axios.get( `${NOTION_API_URL}pages/${pageId}`, { headers: { Authorizat..

예전에 여러 스타일링 방식을 공부하며 Tailwind CSS를 접했던 적이 있습니다. 당시에는 Tailwind CSS를 보며 네이밍이 없는 CSS와 다소 지저분한 마크업 코드에서 거부감을 느꼈습니다. 그러나 최근에 여러 FE 채용공고를 보면서 많은 팀들이 사용 중인 것 같아 다시 관심을 가지게 되었고, 여러 Tailwind CSS 도입 후기 글을 읽으며 장단점을 파악하고, 이전에 Emotion JS로 스타일링 했던 프로젝트의 CSS를 Tailwind CSS로 마이그레이션 하며 공부하게 되었습니다. 그래서 오늘은 Tailwind CSS를 프로젝트에 적용하며 겪은 주관적인 후기를 알려드리려고 합니다.  Tailwind CSS란?Tailwind CSS는 Utility-First 컨셉의 CSS FrameWork..

개발을 하다보면 개체의 식별을 위해 각 개체에 중복되지 않는 고유적인 id를 부여 해줘야 할 상황이 있습니다. 오늘은 uuid를 라이브러리 없이 효율적으로 생성하는 법을 알아보겠습니다.기존의 방식 - uuid원래 uuid를 생성할때는 'uuid'라는 javascript 라이브러리를 사용하여 생성합니다. 이렇게 아주 간단하게 패키지를 다운로드 받아 사용 가능합니다.새로운 방식 - cryptocrypto는 기본적으로 암호화 기법을 제공하는 강력한 난수 생성기입니다.let example = crypto.randomUUID();console.log(example); // "36b8f84d-df4e-4d49-b662-bcde71a8764f"  사용할 때도 위와 같이 매우 간단히 사용할 수 있습니다. 이렇게 cry..

function DummyFunc({isA}) { if (!isA) { return ; // or null } return Hi I am A;} React에서는 아무 것도 렌더링하지 않으려 할 때 이렇게 fragment()나 null을 반환합니다.이번 글에서는 이런 상황에서의 fragment와 null에 차이를 알아보겠습니다.Fragment fragment는 DOM 구조에 어떠한 영향도 주지 않는 DOM 요소를 생성하지 않는 컴포넌트입니다.이런 fragment는 태그는 최상위 태그로 감싸줘야 하는 React에서 요소들을 그룹화 할 때 사용합니다.function DummyFunc() { return ( Hello ? );}Nullnull을 반환하게 되면 아무것..