글또를 시작하며나는 평소 경험이나 배운 것들을 기록으로 남기려고 한다.평소 배운것을 밖으로 설명하는데에 어려움을 겪어, 글로 드러내며 그 연습을 하려 한다.그러나 문제는 글을 잘 쓰지 못한다는 것이다.글을 쓰다보면 갑자기 내용이 삼천포로 빠지기도 하고, 기술적인 설명을 깔끔하게 하지도 못한다.그래서 그런지 어느날 부터 글 잘 쓰고 말 잘하는 사람이 나의 동경의 대상이 되버렸다. (넘나 부러움...) 사실 오늘 '회사 프로젝트 회고' 를 작성해서 첫번째 글로 제출하려고 했다.그러나 쓰다보니 시간이 너무 길어지고 이렇게 쓰는게 맞나 의문이 들어 마무리하지 못했다.그 이유는 독자가 일반적인 사람이 아닌, 나만을 위한 글 처럼 되버렸기 때문이다.회사의 상황, 프로젝트 배경과 같이 부연 설명 없이는 이해하기 어..
전체 글
ftp 자동배포를 시도하면서 알게된 것들에 대한 내용을 포스팅해보겠다. 누군가 FTP가 뭐에요?라고 묻는다면, 나는 "파일 전송 프로토콜"이요 라고 밖에 말하지 못하겠다. 이렇게 허접하게 말고, 좀 더 제대로 알고 싶다! # FTP와 SFTPFTP(File Transfer Protocol)서버와 클라이언트 간에 파일을 전송하기 위한 네트워크 프로토콜 특징1. 전송방식: 파일을 암호화하지 않은 상태로 전송함.: 전송 데이터가 암호화되지 않고 평문으로 전송해되기 때문에 전송된 파일, 사용자이름, 비밀번호가 노출될 위험 있음. -> 보안 취약 특징2. 보안이 취약함 : 보안적으로 취약함. 그래서 실무에서는 대체로 사용하지 않는다. SFTP(SSH File Transfer Protocol)ftp 연결에 보안..
css scope기본적으로 css는 전역으로 적용된다.그러나 css scoping을 하면, 해당 컴포넌트 내에서만 한정적으로 적용할 수 있게 된다.css 범위를 해당 컴포넌트로 제한하여, 컴포넌트간 스타일 충돌을 방지할 수 있다. css scoping 적용하면 컴포넌트별로 랜덤한 접두사가 붙는다.html 요소에는 고유한 랜덤 접두사가 추가되고, css에는 접두사가 포함된 셀렉터로 변환된다.만약, 두 컴포넌트에서 동일한 클래스명을 쓰더라도 서로 다른 접두사가 추가되어 서로 충돌나지 않는다.scope 예외그러나 외부 UI라이브러리를 쓰다보면 scoping을 무시해야 할 때가 있다.전역에서 하위 컴포넌트에 설정되있는 스타일을 직접 바꿔서 처리해야 하는 경우가 발생하곤 한다. 그럴 경우 vue에서는 ::v-de..
벨만-포드(Bellman-Ford) 알고리즘 1. 그래프에서 최단 경로를 찾는 알고리즘 중 하나 2. 간선비용이 양수,음수에서 모두 정상 동작함.: 간선 비용은 시간,거리,요금을 나타내서 양수가 일반적임.: 그러나 간선 비용이 음수인 경우에도 정상 동작함 (다익스크라는 음수인 간선에선 동작하지X) 3. 음수 사이클: 음수 사이클이 있는 경우 거리를 무한히 줄이게되서, 최단 경로를 정의할 수 없음. (최단거리가 존재X)구현 코드function bellmanFord(graph, start, end) { const numOfNodes = graph.length; // 10 const distance = Array(numOfNodes).fill(Infinity); // [0, 8, 2, 4, 9, 10, 1..
1. interceptor를 컴포넌트로 만들기✅ 문제처음엔 api에러시 공통 에러메세지를 팝업으로 띄우기 위한 interceptor를 js파일로 만들었다.그랬더니 공통 에러 메세지는 자동으로 관리되지만, 팝업을 띄우기 위한 UI는 컴포넌트에서 별도로 구현해야했다. ✅ 해결이러한 번거로움을 해결하기 위해 interceptor도 컴포넌트로 만들어 사용했다. ✅ 결과→ 에러메세지 팝업창을 interceptor에서 한번만 관리하면 된다.→ 단순히 로직만 공통하는게 아니라 UI까지 공통화 할 수 있어 더 편하다→ 앞으로 확장성을 고려해 js가 아닌 컴포넌트로 만들어 놓는게 좋겠다고 생각됐다. 2. 인터셉터 관리하기 - eject✅ eject메서드: 여러개 인터셉터를 설정한 후, 특정 인터셉터가 더 이상 필요하지..
✅ 문자열을 sort로 정렬시 문제점sort메서드는 문자열을 유니코드 값(아스키 코드)에 따라 정렬한다.그래서 한글의 사전 순서와 다를 수 있고, 대소문자/특수문자가 있는 경우 예기치 않은 결과가 나올 수 있다.유니코드와 아스키코드 대해서 sort로 정렬시 유니코드 순서로 정렬, 대소문자 구분이 되지 않는다.const words = ["apple", "Banana", "apple-pie", "Apple", "banana", "applepie"];words.sort(); // 결과 : [ "Apple", "Banana", "apple", "apple-pie", "applepie", "banana"] ✅ localeCompare란문자열을 특정 언어의 규칙에 따라 비교 가능.- 언어별로 올바른 ..
✅ 이진 탐색 트리란이진 탐색 개념으 트리 구조에 적용한 것 ✅ 활용- (균형잡힌 트리인 경우) 효율적인 '검색'을 위해- 데이터 '삽입', '삭제'가 빈번할 경우- 우선순위가 필요한 작업 (최소값,최대값 빠르게 탐색)- 데이터베이스 인덱싱, 정렬, 검색 엔진, 네트워크 라우팅(라우팅 테이블 관리시) 등 ✅ 시간복잡도O(log n) : 모든 노드를 탐색하지 않고, 트리의 높이만큼 탐색하게 된다. (왼쪽, 오른쪽 트리의 높이가 비슷할 경우)O(n) : 그러나 트리가 한쪽으로 치우쳐 세로로 늘어진 경우 성능 저하 ✅ 특징1. 각 노드의 왼쪽 가지의 값들은 본인보다 작다: 10을 예로들면, 10 아래의 3,8은 10보다 작다 2. 각 노드의 오른쪽 가지 값들은 본인보다 크다.: 16을 예로들면, 23,..
회사에서 순수js로 디바운스를 구현해야 하는 일이 생겼다.프로젝트 내에 lodash를 여기저기 쓰고있어서 나는 디바운스 로직을 직접 구현하지 않고 편하게 쓰고있었다. 막상 직접 로직을 구현하려하니 많이 버벅였다.라이브러리를 쓰기 전에 그 로직의 원리를 이해해야 하는데 라이브러리에 너무 기대고 있었던걸까 다시 기본을 다지도록✅ 디바운스1.개념 : 여러번 발생하는 이벤트에서, 가장 마지막 이벤트 만을 실행되도록 제한함 2. 사용: 사용자가 검색어를 입력할 때, 입력이 멈추면 서버에 요청을 보낼 때: 버튼 연타시 불필요한 api호출을 막기 위해 3. 효과 : 불필요한 이벤트 핸들러의 실행을 줄일 수 있음 4. 내가 구현한 코드- 버튼 클릭시 setTimeout함수가 반환한 Id를 Clear해서 setTime..
✅ 문제피그마 규격대로 똑같이 구현을 했는데 버튼의 너비가 틀어지는 현상 발생이유는 버튼 안의 글자가 피그마와 브라우저간 다르게 나타나기 때문이다. font weight나 자간이 다르게 출력된다. ✅ 원인1. 피그마는 자체 폰트 렌더링 방식이 있기 때문에 피그마는 브라우저등 사용자 환경에 구애받지 않고, 일관된 플래폼을 보여주기 위해 자체 렌더링 방식(antialiasing)을 사용한다. 안티앨리어싱 이란?: 픽셀로 되있어 나타나는 계단 현상을 줄이고 이미지를 부드럽게 만드는 기술.👉해결법피그마와 완전 동일한 표현은 불가하다.css속성을 사용하여 글꼴을 피그마와 비슷하게 표현해줄 뿐이다. 1. macOS : font-smooth 사용Font-smooth 속성은 글꼴이 렌더링될 때 앤티앨리어싱 적용을 막..