Frorong

[TS] enum과 object의 차이가 무엇인가요? 꼭 enum을 사용하면 안되나요? 아래 코드에 이런 코드리뷰가 달렸다. "support view 도 enum class로 관리할 수 있다면 더 좋을 것 같습니다." import styled from '@emotion/styled'; export const Controller = styled.button` border: none; z-index: 1; cursor: pointer; transition: background-color 0.3s ease-in-out; background-color: ${({ theme }) => theme.gray[0]}; `; export const PrevController = styled(Controller)` mar..

[JS] 코딩 테스트 문제가 너무 어려워? 욕심이 너무 없어서 그래! 탐욕법 Greedy Greedy Algorithm 탐욕법은 각 단계에서 현재 상태에서 최선이라고 생각되는 선택을 이어나가 최종적인 해결책을 찾는 방법이다. 전체적인 최적의 해를 보장하지는 않기 때문에 탐욕법을 적용할 수 있는 문제가 한정된다. 탐욕법을 적용할 수 있는 문제인지 아닌지에 대한 눈을 갖기 위해서는 문제를 많이 풀어보는 것이 가장 효과적이다. 예시 문제를 보면서 탐욕법에 대해 알아가보자. 문제상황 어떠한 물건을 사고 고객이 값을 지불했다. 거스름돈을 거슬러줘야 하는데 동전으로 거슬러주려 한다. 동전의 단위는 500, 100, 50, 10원이다. n원을 거슬러줄 때 가장 적은 동전의 개수는 어떻게 되는가? 문제풀이 동전의 리스..

[JS] 자바스크립트는 어떤 역사를 가지고 있을까? 자바스크립트와 브라우저의 역사 내가 가장 많이 사용한 언어는 c언어도 java도 typescript도 아닌 아마 javascript일 것이다. 어떠한 언어나 혹은 기술을 공부할 때에는 기술의 사용 방법도 당연히 중요하지만, 기술의 탄생 배경이나 업그레이드 배경 또한 굉장히 중요하다고 생각한다. 그래서 오늘은 자바스크립트의 역사에 대해 알아볼 것이다. ~1995 1993년. 지금으로부터 30년 전. 컴퓨터를 잘 모르는 사람도 쉽게 사용할 수 있는 UI 요소가 더해진 최초의 상용 웹 브라우저가 등장한다. 바로 그 이름하여 "Mosaic" Mosaic은 일리노이 대학교의 마크 앤드리슨과 그의 팀에 의해 만들어졌다. Mosaic은 웹 브라우저들의 기초가 되었다..

[React] 컴포넌트를 잘 설계하기 위해서 생각해야 할 것. 위 사진은 내가 진행하는 프로젝트에서 메인 화면의 UI다. view size에 따라 렌더링 하는 카드 리스트의 UI가 굉장히 상이하다. 우리 코드의 문제점은 다양한 UI를 렌더링 하는 코드에서 비롯되었다. 컴포넌트를 유연하게 사용하기 위해서 하나의 컴포넌트에서 다양한 형태의 UI를 구현하려고 했지만... 그렇게하니 코드가 더러워졌다. 아래 코드를 보자. 코드가 굉장히 더러우니 대충 읽어도 된다. 요약하자면 view size에 따라 각기 다른 UI의 슬라이더를 렌더링하고, 조작하는 코드이다. 굉장히 읽기도 어지럽고 너무 복잡하다. 이런 코드는 당장 보기도 어려울 뿐더러, 유지보수에도 최악이다. 이 블로그에서는 어떻게 아래와 같은 컴포넌트를 개선..

[CS] TCP 원리. 왜 TCP는 UDP보다 느릴까? tcp/ip 연결 이후에 클라이언트에서 서버로 어떠한 요청을 한다면, 서버는 그에 대한 응답을 보내준다. 여기까지는 많은 사람들이 알고 있는 내용이다. 그런데, 정확히 어떤 원리로 내부 과정이 이루어질까? TCP 먼저 TCP에 대해 간략히 알아보고 들어가자. TCP는 소프트웨어에서 데이터를 교환할 수 있는 네트워크 프로토콜이다. UDP라는 다른 프로토콜도 존재하지만, TCP는 UDP에 비해 신뢰성 있는 연결이 가능하다. 우리가 데이터를 주고 받을 때에는 패킷이라는 조각으로 쪼개어 주고받는다. 전체의 큰 데이터를 한 번에 보낸다고 가정하자. 가는 도중에 어떠한 문제가 생겼을 때에 보완하기 어렵고, 다시 전송할 때에도 큰 리소스가 소모된다. 100kg의..

[FE] 프론트엔드계의 MSA. Micro Frontends. MicroServiece Architecture. MSA. MicroServiece Architecture의 약자이다. 커다란 소프트웨어를 작고 독립적인 각개의 서비스로 분해하여 개발하고 배포하는 아키텍처이다. 기존의 Monolithic Architecture는 소프트웨어믜 모든 구성요소가 한 프로젝트에 통합되어 있는 형태이다. 각각의 모듈별로 개발 이후에 완성된 어플리케이션을 하나로 패킹하여 배포한다. 그런데, 이런 monolithic 방식은 한계가 존재한다. 서비스가 커질 수록 monolithic 어플리케이션에서는 다양한 문제가 발생하는 것이다. Monolithic Architecture에서는 다음과 같은 문제가 발생할 수 있다. 1. 어..

[JS] 코딩 테스트 문제가 너무 어려워? 다이나믹 프로그래밍을 몰라서 그래! DP 코딩 테스트 문제를 해결할 때에 가끔 재귀적인 방법으로 문제를 해결한다. 문제 해결 방식이 한 눈에 보이는 직관성이 뛰어나고, 재귀적 구조로 쉽게 해결할 수 있는 문제 상황들이 존재하기 때문이다. 재귀적으로 문제를 해결한 예시를 보자. 아래는 최대공약수를 구하기 위해 재귀 함수를 사용한 예시이다. 최대공약수를 구하기 위해 조금씩 수를 쪼개가며 문제를 해결한다. 수를 쪼개며 작은 문제부터 해결한다. function gcd(a, b) { if (b === 0) return a; else return gcd(b, a % b); } 피보나치수열을 구하는 것도 재귀적으로 해결할 수 있다. 아래는 n을 전달하면 n+1번째 피보나치수..

[CS] ORS의 credentialed request와 cookie의 same site 정책은 뭐가 다를까? CORS에 대해 본격적으로 알아보자! 2년 전. 내가 처음으로 서버 측 api 연결을 시도하였을 때에 있었던 일이다. 로컬 환경에서 서버 측에 요청을 하였더니 이러한 에러가 발생하였다. 처음 보는 오류였고 굉장히 당황스러워 무엇이 문제인지 서버 측 팀원들과 함께 고민했다. 서버 측 코드로 이 문제를 해결하지 못해 도메인을 구매하여 같은 origin을 만들어주었다. 일시적으로는 해결되었지만 여전히 로컬에서는 같은 문제가 있었다. 이후 컨트롤러에 @CrossOrigin 어노테이션을 사용하여 문제를 해결할 수 있었다. 당시에는 cors에 대한 이해가 부족하여 왜 이런 오류가 발생했고, 어떻게 해서 문..