隣のプログラマー君

일단 서두에 하고 싶은 얘기가 있다. REST API의 목적 상 나름 쉽게 설명하려고 애썼을 것 같긴한데.. 이해가 잘 안간다. 왜냐? 우리나라 사람들 특이 영어로 아무리 쉽게 써놔도 어렵게 번역한다는 것이니까.. 대학에서 전공서적으로 번역판, 원서 둘 다 써본 사람이라면 이해할 것이다. 오히려 원서의 용어들이 훨씬 잘 와닿을 때가 많다. REST 도 말이 어려운데다 줄여놔서 그렇지. 당장 개발할 때 필요한 수준의 개념을 정립하려면 그렇게 어렵지 않다고 본다. 1. REST란? 오늘도 사전적 정의 부터 먼저 가져와봤다. "REST는 Representational State Transfer의 약자로 자원(Resource)을 이름으로 구분하여 자원의 상태를 주고 받는 모든 것" 대부분 어딜 가도 이렇게 설명..

학원에서 자바스크립트를 처음 배우던 시점에 Hoisting을 가르쳐줬었던 것으로 기억한다. 그 때는 애초에 수강생들이 코딩의 ㅋ 정도 겨우 알아가는 과정이라 알려줘봐야 제대로 이해할 리가 만무하니 그냥 선언하기 전에 실행시켜도 나중에 뒤에서 선언만 해주면 문제가 없다. 라는 식으로 알려줬었는데, 이번에 블로그 쓰기 시작하면서 제대로 정리해야겠다는 생각이 들어 작성한다. Hoisting (호이스팅) 이란 무엇인가? 공식적인 설명은 "인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것 " 을 의미한다. 하지만 우리는 이 말로는 절대 이해할 수 없다. 그래서 일반적으로 잘 풀어서 쉽게 설명하는 경우를 가져오면 "변수와 함수의 선언과 초기화를 분리한 후, 선언만을 코드의 최상단으로 옮기는 것"..

순서가 조금 잘못된 것 같긴한데, 어쩔 수 없다고 생각한다. 체계적으로 공부를 해서 기초부터 차근차근 닦아올려가며 일을 하게 된 것이 아니라 당장 오늘 이 코드를 작성하지 못하면 큰일난다는 생각으로 언제나 목에 칼이 들어온 기분으로 코드를 만들어가며 체득하는 신입 SI 개발자는 이런 체계적인 용어? 개념적인 지식? 그런거 모르기 때문에 아 내가 지금까지 써온 이런게 이런 이름이구나~ 라며 깨닫기 마련이다. 오늘은 이런 식으로 깨달은 Scope 와 Closure 기법에 대한 이야기를 해보고자 한다. 1. Scope (유효범위) Scope는 유효범위를 의미한다. 정의나 설명을 통해 이야기하면 누구나 한번에 이해하긴 힘들다. 하지만 일단 이런거다 정도는 알고 있어야하니 정리해보자. 함수, 변수를 선언 했을 때..

어제 일하다 한가지 이상한 점을 확인 했는데 Ag Grid에서 발생한 문제였다. 일단 먼저 Ag Grid가 제공하는 파워풀한 기능들이 당연히 이런걸 전제하고 만들어져있을 것이라고 생각하고 있었는데 세상에 당연한 것은 없다는 것을 한 번 더 깨닫게 해준다. 1) 사건의 발단 지금은 막 단위테스트가 진행되는 중이고 곧 통합테스트가 진행될 예정인 타이밍이라, 내 옆자리에 계신 선배님이 정말 열심히 테스트하는데로 버그를 수정하시며 고생을 하고 계신다. 근데 어제 저녁 "어 오타씨 AG Grid row Data 넣어주면 자체적으로 그 데이터랑 똑같은 데이터를 가지고 있는게 아니라 원본을 그대로 보고 있네요?" 라며 말씀을 하셨는데, 그러면 안되는데.. 라는 생각이 스쳐지나갔다. 자세히 설명하면 Grid 상에서 데..

내가 경험한 프로젝트의 아키텍처들은 경력에 비해 상당히 다양하다. 우리 회사의 특성 상 정해진 솔루션이 있고 매번 똑같은 구조의 프로젝트만 경험할 것이라고 예상했으나 고객사에 기존에 개발되어있던 Legacy 프로젝트가 있다면 꼭 그렇지 않다는 사실을 알게 되었다. 내가 경험한 프로젝트 구조들은 다음과 같다. 1. 학원프로젝트 2. (React + Redux) Monolithic Arch.(MA)를 채용한 고객사의 Legacy 프로젝트 3. (React + Mobx) MSA 를 채용한 우리회사의 솔루션이 들어간 프로젝트 4. (React + React-Query) MSA(MonoRepo)를 채용한 우리 회사의 버전업 솔루션 프로젝트 이 중 오늘은 Monolithic Arch. 와 MSA간의 차이에 대해서 ..

1) 사건의 발단 회사 동료가 질문을 해왔다. 그 질문이 뭐였냐 하면, 현재 우리가 진행하는 프로젝트 상에서 테이블을 띄워주는 library로 AGgrid를 사용하고 있다. 근데 이 AG grid의 함수들을 사용하는 방법이 두가지다. 1번이 gridRef를 통해 DOM 자체를 참조하여 해당 Grid DOM의 API를 끌어다쓰는 방법이고 2번이 해당 Grid DOM 의 gridApi 자체를 State에 set해두고 그 State를 사용하는 방법이다. 여기서 동료가 모르곘다는 부분은 DOM 이 이해가 가지 않는다는 것이었다. 그래서 설명해준 그대로 블로그 글도 써두기로 했다. 2) DOM이란? 우리는 사실 DOM이라는 말은 진짜 많이 들어봤다. React에 대한 내용을 조금이라도 들어봤다면 Virtual D..

알고리즘을 시작하기 전에 자료구조라는 것을 알아야한다고 해서 봤는데, 정보처리기사 따던 시점에 봤던 말들이 나와있어서 좀 반가웠다. 그런 김에 복습 겸 살짝 정리해보고자 한다. 1) Queue (큐) Queue는 위 아래 구멍이 뚫려있는 원통으로 생각해보면 좋다. 일단 정보처리기사를 공부하던 나는 이렇게 이해했고, 교재에서도 제시하니 가장 명확한 설명이 아닐까 싶다. 위의 그림과 같이 Queue는 입구와 출구가 정해져있다. 한쪽으로는 데이터를 꺼내고, 한쪽에서는 데이터를 넣기만 하도록 구조를 잡는다고 보면 된다. 이런 모양을 가지고 있게 되면 처음 넣은 요소가 꺼낼때도 가장 처음으로 나오게 되는데 이를 'FIFO' (First In First Out) 라고 부른다. 쉽게 이해하기 위해 JS 코드로 한번 ..

하다가 정말 어려웠던 것만 블로그에 글을 남길 생각이었는데 벌써 세개째 쓰고 있다. 이건 로직 자체가 어려운건 아닌데 기본 코드 세팅이 롸..? 하게 만드는 상태라 기록해두려고 한다. 문제 : 직각삼각형 출력하기 문제 설명 "*"의 높이와 너비를 1이라고 했을 때, "*"을 이용해 직각 이등변 삼각형을 그리려고합니다. 정수 n 이 주어지면 높이와 너비가 n 인 직각 이등변 삼각형을 출력하도록 코드를 작성해보세요. 제한사항 1 ≤ n ≤ 10 const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); let input = []; rl.on('l..

이 문제 상당히 난감했다. 해답을 보고도 아하! 라며 바로 이해하기 보단 한줄한줄 따라가며 읽어야지만 눈에 들어와서 따로 디테일한 공부 없이 뇌빼고 코딩했던 나같은 사람들한테는 진입장벽이 조금 높을 수도 있겠다는 생각이 들었다. 문제 : 최빈값 구하기 문제 설명 최빈값은 주어진 값 중에서 가장 자주 나오는 값을 의미합니다. 정수 배열 array가 매개변수로 주어질 때, 최빈값을 return 하도록 solution 함수를 완성해보세요. 최빈값이 여러 개면 -1을 return 합니다. 제한사항 0 { m.set(item, (m.get(item) || 0) + 1); }) m = [...m].sort((a,b) => b[1] - a[1]); return m.length === 1 || m[0][1] > m[1..

코테 준비를 하다보니 이해가 안되는 것들이 꽤나 있다. 그 중에 하나가 오름차순, 내림차순 정렬시 sort()를 있는 그대로 사용하지 않고 안에 인자를 넣어주는 것이었는데, 이게 이해되지 않는 이유는 내가 업무할 때 사용하는 데이터 타입이 거의 대부분 string이기 때문이다. 1. sort() sort() 함수는 특정 배열 내의 요소를 규칙에 따라 정렬해주는 함수이다. 내가 업무에서 사용시 abc 순서로 정렬하며 많이 사용하게 되는데, 코딩테스트의 경우 type 이 number인 요소들을 비교하는 케이스가 더 많기 때문에 다른 추가적인 설정이 필요하다. 2. compareFn sort 함수의 인자로 compareFn을 넣어줄 수 있다. array.sort((a,b)=> a-b) // 오름차순 array..