서론 최근 토스의 기술 포스팅 중 ESLint와 AST로 코드 퀄리티 높이기를 보면서 토스의 다양한 Rule…

SOLID 원칙 중 OCP(개방-폐쇄 원칙)와 SRP(단일 책임 원칙)을 기반으로, props.type 에 따라서 컴포넌트를 import 해오는 코드를 정리해보았습니다. 링크드인에서 해당 코드들을 발견하였는데, SOLID…

Typescript를 사용하는 프로젝트를 진행하다보면 interface 혹은 type을 분리하여 import 해오는 상황이 있을텐데요! 예를 들어 특정 interface…

최근 학교 친구와 기술 스터디를 진행하게 되었는데요. 전공 수업 내용이 가물가물해지던 요즘, 알고리즘부터 시작하여 차근차근 CS 지식 복습을 진행하고 있습니다. 그러던 중 sort…

진행 중인 프로젝트에서 사용자 권한과 요청에 맞게 파일 다운로드 기능을 제공해야했는데요. 대게 다운로드 기능을 제공해야하는 파일들은 이며, JavaScript에서는 바이너리 데이터를 다루는 방법으로 와 를 제공하고 있습니다. Buffer…

사내 인프라 파트에서 인턴 경험을 쌓으면서 팀원들의 인프라 관련 업무를 엿볼 수 있었는데요. 인프라엔지니어는 사내 구성원을 위한 기술적 지원을 하고, 더 나은 업무 환경을 위해 고민하는 직무라는 것을 알 수 있게 되었습니다. 또한 Hardware…

1. for 파일 시스템 탐색 pwd는 Print Work Directory 의 약자로, 현재 작업 중인 디렉터리 경로를 프린트합니다. ls는 list segments…

프론트엔드 개발자의 테크 면접 필수 질문 중 하나는 “브라우저의 동작 원리”인데요. 간단하게 정리해보면 아래와 같습니다. 파싱 : HTML을 통해 DOM 트리를, CSS를 통해 CSSOM 트리를 빌드 랜더 트리 : DOM과 CSSOM…

Go는 Http 서버를 만들 수 있는 패키지를 제공하고 있습니다. 1. http 서버 시작하기 가장 먼저 http 서버를 시작해보겠습니다. 함수를 통해 서버를 시작할 수 있습니다. 해당 함수는 2개의 매개변수를 요구합니다. ip, port…

오늘은 저의 인생 첫 외근이자 기술 세미나를 다녀왔습니다 💓 제가 방문한 세미나는 로, 클라우드를 위한 인프라 자동화 SW 기업 하시코프에서 주최하였습니다. 세미나는 환영 인사 및 CTO…

Keycloak? Keycloak은 ID 및 액세스 관리 솔루션을 제공하는 오픈소스입니다. 과 를 쉽게 해주고 SSO(Single-Sign-On) 기능을 제공합니다. Kubernetes, MSA 환경에 최적화 된 솔루션입니다. SSO…

OpenLDAP 을 활용하여, LDAP 서비스를 구축하는 토이프로젝트를 진행하고 있는데요! 그러기 위해선 EC2 인스턴스가 필요하여, SSH 키 등록 부터 EC2 접속까지 정리해보려고 합니다. 1. AWS SSH…

LDAP(Lightweight Directory Access Protocol…

오늘 새롭게 알게 된 기술은 Vault by HashiCorp 인데요. 요즘 ‘좀 더 안전한 개발 방식’을 고민하고 있는 저에게 매우 흥미롭게 다가온 기술입니다. 공식 문서는 https://www.vaultproject.io…

이번에 Next.js 13 신버전 발표회가 열렸다고 합니다. 발표에서의 키워드를 나열해보자면, Turbopack 출시, html streaming, React server components, 개선, Nested Layout, OG…

1. HTTP의 GET과 POST GET과 POST 모두 HTTP 프로토콜을 이용해 서버에 무엇인가를 요청할 때 사용하는 메서드입니다. , , , , 모두 목적에 맞게 사용해야 합니다! GET GET은 의 에 url…

1. Array vs Linked List Array Array 자료구조는 인덱스(index)로 해당 원소(element)에 접근할 수 있습니다. 찾고자 하는 element의 index 값을 알고 있으면 O(…

…

현업에서 NextJS를 사용하는 비율이 점점 증가합니다. NextJS를 쓰는 이유를 알아보기 이전에, 가장 큰 특징이라고 이야기할 수 있는 과 에 대해서 알면 좋을 것같습니다. 1. CSR VS SSR CSR 먼저 Single Page…

Storybook은 프론트에서 작업한 컴포넌트를 관리하고 테스트하기 위해 도입한 기술입니다. 디자이너와의 소통을 원활하게 해주고 프론트 팀의 작업물을 팀 구성원들이 쉽게 관리할 수 있도록 돕습니다. 최근 프로젝트에서 tailwind css…

1. DOCKER 기본 이해 DOCKER…

서버는 2…

네트워크통신 이미지, 동영상, 음악… 네트워크를 통해 다운받고 사용하고 있다는 사실! 이러한 콘텐츠는 컴퓨터 로컬에 저장되어 있는 것이 아닌, 외부와의 통신을 통해 가져옵니다. 그 중에서도 프론트엔드에서는 HTTP와 자바스크립트 비동기 API…

객체의 복사는 얕은 복사 shallow copy 와 깊은 복사 Deep copy…

React query useMutation 를 사용하여, 변경된 부분만 다시 호출

Modal Portal → 위 코드처럼 작성하는 것의 문제점 : 띄우지 않은 Modal 에 대한 컴포넌트도 랜더링되고, visible(boolean) 값에만 숨겨지고 보여지는 것으로 동작한다. 이에 대한 대안책은 방식으로 구현하는 것이다. Modal…

Server-State VS Client-State useQuery 가 반환하는 객체의 프로퍼티로 4가지 상태 중 어떤 상태인지 확인가능하다. fresh : 새롭게 추가된 쿼리 인스턴스 → active로 시작 fetching…

JS에서 If - else if - else 문 작성을 지양하는 이유? 프로젝트 코드 리뷰 시간에 항상 듣는 피드백은 ‘if 문을 줄이고, 삼항연산자나, switch case 문을 작성해보자’ 입니다. (저는 읽어보지 않았지만, 클린 코드에서도 if…

HTML Data-type ? HTML 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. 은 표준이 아닌 속성이나 추가적인 DOM…

JavaScript 역사 1995년 : 자바스립트의 탄생 당시 네스케이프사의 네비게이터가 웹브라우저 시장을 지배하고 있었는데, 네스케이프는 HTML…

input 태그에 파일이 첨부될 때(onChange)의 event 를 찍어보았다. 다중업로드? 처럼 속성값을 넣어주면, 다중 파일 업로드가 가능해진다. Files 내부에 파일을 Object…

useRouter hook을 사용하여 앱의 기능 구성 요소 내에 있는 라우터 개체에 접근할 수 있습니다! NEXT JS 공식문서 : https://nextjs.org/docs/api-reference/next/router

해결 방안 : input 태그에 를 label에는 for 대신 를 작성하면 된다.