분류 전체보기

개발을 하다보면, 코드 상에서 직접적으로 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)이 됩니다. 즉, 클래스 없이도 객..

요즘 코딩테스트를 준비하면서 여러 자료 구조들을 마주치곤 합니다. Hash Table도 그 중 하나인데요.이러한 Hash Table이 기술 면접에서 자주 언급되는 개념이라고 생각되기도 하고, 한 번쯤 제대로 짚고 넘어가야 할 필요가 있다고 생각 되기에, 오늘은 이 Hash Table이라는 자료 구조에 대해 공부하고 이해한 내용을 공유하려고 합니다. What is Hash TableHash Table(해시 테이블)은 기본적으로 key, value 형태로 데이터를 저장하는 자료 구조입니다. 이러한 형태를 이용해 주료 효율적으로 데이터 탐색과 저장을 위해 사용됩니다.위 그림은 Hash Table의 기본적인 구조를 보여줍니다. 각각의 Key가 어떤 범주 내에 속해있는지를 Index를 통해 찾고 있는데요.'App..

이번 글에서는 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..

고치는 데 크게 어려움은 없었던 에러지만, 서버 관련 에러를 스스로 처리한 것이 뿌듯하여 글로 남겨봅니다 :)문제 소개평소 잘 작동하던 프로젝트의 로그인 기능을 테스트하던 중, 갑자기 에러 코드 500이 발생했습니다..배포가 되어있던 프로젝트였기에 빠르게 클라우드 타입의 로그를 확인했습니다.RedisConnectionException: Unable to connect ~  대충 봐도 뭔가에 연결을 실패한 것 같았고, 곧바로 구글링을 통해 에러를 정확히 파악했습니다.  문제는 어느정도 파악했으나, 평소 서버 쪽 개념이 정말 1도 없었기 때문에 지인에게 자문을 구했습니다. 자문을 구하여 알아본 결과, 프로젝트에서 무료 요금제로 사용 중이던 Redis 서버가 만료 되었던 것이었습니다.그리하여 새로운 Redis..