이정우.Blog 이정우.Blog

먼저 MUI에 대해 간단히 말해보고 내가 이해한 Shadcn을 적어보겠다! MUIMUI란 Material-UI의 약자로 UI라이브러리로 사전 제작된 컴포넌트를 제공함으로써 개발자가빠르게 UI를 구축할 수있게 도와준다. 사전 제작되있어 컴포넌트마다 여러 가지 기능이 내장돼있고 일관된 스타일을 유지하며 빠르게 개발할 수 있다는 장점이 있지만기본적으로 스타일이 많이 지정된 있기 때문에 커스터마이징이 상대적으로 여러 울 수 있다는 단점이 있고 완전환 커스터마이징은불가능하다. ShadcnShadcn도 처음 찾아볼 때는 UI를 제공해 주기 때문에 UI라이브러리인 줄 알았다. 하지만 Shadcn은 컴포넌트 컬렉션이라고 한다. 컴포넌트 컬렉션은 여러 컴포넌트의 예제를 모아 놓은 것으로 사용자가 원하는 컴포넌트만 선택해..

오늘 블로그는 3학년 때 내가 취준 했던 이야기를 적은 것이다. 3학년 겨울방학 내 주변 친구들은 회사에 지원을 넣으며 취업준비를 하였지만나는 천천히 하자는 생각으로 마지막 겨울방학을 즐겼던 거 같다. 개학하고 나서 나는 본격적으로 포트폴리오를 적었다. 하지만 내가 프로젝트를 하며 어떤 활동을 했는지 잘 기억나지 않았다.그도 그럴 것이 나는 2학년 12월까지 협업을 하고 그 후부터는 코딩을 하지 않았었다. 그래서 동아리 내에서 나는 어떤 역할을 하였고프로젝트에서 어떤 기여를 했는지 어떠한 기능을 왜 이렇게 구현했는지가 기억나지 않아 포트폴리오를 채워 넣기 너무 힘들었다.그래서 취업준비를 하고 있는 후배들이 맨날 듣는 말이겠지만 항상 내가 한 활동을 문서화하고 2학년때부터 포트폴리오를 적어야 한다.지금의 ..

최근 면접질문 중 cookie httponly속성이 무엇인지 물어보았고 답을 하지 못하였다.그래서 이를 공부해 봐야겠다고 생각해 블로그를 적는다.쿠키란인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일이라고 이해하면 된다. 이런 개념이 생긴 이유는 클라이언트가 서버에 요청을 보내고 서버로부터 오는 응답을 대기한다.그럼 서버는 요청에 대한 결과를 응답한다. 그런데, 이 때 서버는 클라이언트의 상태를 보존하지 않는다. 이특성을 무상태(Stateless)라고 한다. 서버는 기본적으로 브라우저에 요청에 대한 결과를 반환하고 바로 연결을 끊기 때문에이전 요청을 기억하지 못한다. 한마디로 브라우저를 기억하지 못한다. 따라서 서버..

타입스크립트를 처음 공부할 때 any로 무작정 타입을 지정한 기억 있다.그렇기 때문에 any는 나에게 친숙한데 unknown과 never는 무엇일까? anyany부터 알아보자면 any 말 그대로 어떤 타입이든 지정할 수 있다. 타입을 엄격하게 검사하는 타입스크립트에서 any 타입은 치명적인 존재이다. let num: number = 10;console.log(num.length) 위 코드는 문제가 발생한다. number 타입은 length 프로퍼티가 존재하지 않기 때문이다. 그럼 개발자 입장에서는 위 에러를 보고 사전에 예외처리를 하여 문제를 방지할 수 있을 것이다. 하지만 any를 사용한다면? 문제가 발생하지 않는다.let num: any = 10;console.log(typeof num); // nu..

우리는 TypeScript를 사용해 오며 기본적으로 변수에 타입을 지정할 때 아래와 같이 할 것이다.const 상수:number = 2;let 스트링배열: string[] = ['1','2','3'] 하지만 이렇게하면 타입이 고정되기 때문에 유연하지 않다. 그래서 우리는 여기에 유연성을 가미한 유니온 타입을 사용한다.const 하이: number | string | string[]; 위를 보면 하이라는 상수에는 숫자,문자열,문자열배열이 들어올 수 있다. 하지만 프로그래밍을 하다 보면 내가 의도한 타입대로흘러가지 않을수도 있고 그걸 방지하기 위해 유니온타입을 너무 많이 사용하면 타입 안전성이 보장되지 않는다. 그럼 어떻게 해야할까?  그럴 땐 Generic타입이 도움이 될 수 있다. Generic 타입이란..

개요useMemo와 useCallback을 한 번도 사용해보지 않은 나는 이것을 면접질문으로 받았다.다행히 30분전에 급하게 이것저것 공부하다가 메모이제이션과 useMemo와 useCallback이 각각어떤 걸 반환하는지를 보았기 때문에 이 부분을 말할 수 있었지만 자세히 공부해 봐야겠다. Memoization메모이제이션이라는 개념에 대해 먼저 알고 가자. 메모이제이션은 기존에 수행한 연산의 결괏값을 어딘가에저장해 두고 동일한 입력이 들어오면 재활용하는 기법이다.이것을 잘 활용하면 중복되는 연산을 피할 수 있어 애플리케이션의 성능을 최적화할 수 있다. useMemouseMemo는 메모이제이션된 값을 봔환하는 함수이다.useMemo(() => function, [deps]) 여기서 의존성배열 안에 값을 지..

저번 블로그에서 TCP와 HTTP에 대해 알아보다가 나온 HandShake에 대해 자세히 알아보겠다. TCP란TCP는 신뢰성이 높고 연결 지향성 서비스를 제공한다. 정보 전달에 있어 순서대로, 에러 없이 교환할 수 있도록 하는 것에목적을 둔 프로토콜이다. 이러한 이유 때문에 장치들 사이에서는 접속을 성립하기 위해 handshake를 사용하는데 3-Way Handshake와 4-Handshake가 있다.전자는 TCP의 접속, 후자는 TCP의 접속 해제 과정이다. 3-Way Handshake 란?데이터를 전송하기 전에 정확한 전송을 보장하기 위해 사전에 세션을 수립하는 과정이다. 양쪽 모두 데이터를 전송할 준비가 되었다는준비가 되었다는 것을 보장하고, 실제로 데이터 전달이 시작하기 전에 한쪽에서 다른 쪽이 ..

HTTP 통신HTTP통신은 요청을 하면 반드시 응답이 돌아오는 비연결지향적인 단방향 통신이다. 언제든 요청을 하면 그에 해당하는값을 서버에서 보내준다. 인터넷 페이지를 예시로 들어보자. 우리가 보고 있는 페이지는 모두 클라이언트 측에서 받아서 결과로 처리받을 화면을 보고있다. 단방향 통신이기 때문에 항상 연결되어 있는 건 아니다. 요청에 대한 응답을 받았으면 이미 통신은 끝난 것이다.(클라이언트 요청 -> 서버에서 응답) 무조건 클라이언트에서 요청을 해야 한다.  TCP통신 (socket 통신) TCP통신은 Handshake라는 과정으로 서로가 통신이 가능한지 인증 후 통신을 하는 연결지향적 양방향 통신이다.양방향이란 즉 요청을 보내거나 받을 수도 있다는 말이다. HTTP통신도 기본적으로 TCP 위에서 ..