개발 관련 정보를 찾다보면 꼭 한 번 씩은 MVC 패턴이라는 단어와 마주하게 된다. 디자인 패턴이란 것은 무엇이며 특히, 오늘 알아볼 MVC 패턴이란 무엇인가에 대해 알아보고자 포스팅을 했다. 디자인 패턴이란? 기본적인 설명으로는 소프트웨어를 설계할때 특정 부분에서 자주 발생하는 고질적인 문제들이 또 발생했을때 재사용할 수 있도록 하는 훌륭한 해결책이다. 라고 말하지만 저 말을 내 생각대로 풀어내자면 협업을 진행하는 개발자들이 코드의 패턴을 제작해 문제 해결과 코드의 효율성을 높이는 것이라고 본다. MVC 패턴이란 개발을 할 때, 3가지 형태로 역할을 나누어 개발하는 방법론. Model-View-Controller 의 약자로 사용자가 Controller를 조작하면 Controller는 Model을 통해서..

// example 1 Input: n = 2 Output: [0,1,1] Explanation: 0 --> 0 1 --> 1 2 --> 10 정수 n이 주어졌을 때, 길이 n + 1의 배열 ans를 반환하여 각 i(0 String으로 타입이 변한 것을 이용했고, num.length를 활용해 for문을 사용할 수 있었다. 그리고 다시 요소를 더해줄 땐 Number()를 사용해 Integer 타입으로 변환했고 최종적으로 숫자 배열을 만들어 return했다. /** * @param {number} n * @return {number[]} */ var countBits = function(n) { let result = []; for(let i=0; i

정수 배열 번호가 지정된 경우 다음 유형의 여러 쿼리를 처리합니다. 왼쪽

정수 n이 주어지면 문자열로 구성된 배열을 리턴하는 문제이다. 예전에 면접을 볼 때 화이트 보드 코딩으로 풀었던 문제였는데 leetcode에서 만나니 감회가 새로웠다. i를 0으로 설정해줄 경우 0부터 배열에 들어가기 시작하므로 1로 시작해줘야 하며 15를 첫 조건으로 설정한 이유는 15는 3의 배수이기 때문에 3으로 if문을 출발하게 된다면 15의 조건에 맞아도 3의 조건에서 통과되어버리기 때문이다. /** * @param {number} n * @return {string[]} */ var fizzBuzz = function(n) { let result=[]; for(let i=1; i

이전 회사에서 채팅 서비스를 개발하며 겪었던 오류가 떠올라 작성하게 되었다. 주변에서도 나만 유일하게 겪은 오류이기에 기억에 남는다. 기존 채팅 서비스는 Socket IO를 기반으로 운영되고 있었고 나 또한 Socket IO를 이용한 개발을 하고자 했다. 하지만 웹소켓 연결 이슈로 1주 하고도 3일을 소모하며 불필요한 작업 지연이 발생하게 되었고 팀장님과 데브옵스분, 백엔드분과 모여 회의한 결과 이건 AWS 문제로 보여진다는 결론을 내렸다. 해당 이슈에 대해 이해를 하기 위해선 HTTP의 통신 구조에 대해 먼저 알 필요가 있다. 일반적으로 HTTP 통신은 단방향 통신으로 클라이언트에서 HTTP 요청을 요청하면 서버는 요청에 대한 응답을 내려주고 끝난다(= 단방향성) 기존의 서버 통신에서는 클라이언트 서버..

패턴과 문자열 s가 지정된 경우 s가 동일한 패턴을 따르는지 여부를 찾는 문제. 처음엔 이중 for문으로 접근을 해야하는 문제로 파악했지만 해결할 수 없었고 Map을 활용한 문제 접근을 해서 테스트는 통과했지만 제출에는 실패했다. 패턴과 문자열의 lengh는 같지만 동일한 문자가 반복되는 문자열일 경우에 대한 예외처리가 없었기 때문이다. 중복을 허용하지 않는 Set의 size를 비교해 예외 케이스를 작성해주어 제출이 가능했다. /** * @param {string} pattern * @param {string} s * @return {boolean} */ var wordPattern = function(pattern, s) { const word = s.split(' '); const map = new ..

개인 프로젝트를 진행하며 빌드를 마친 후 파일이 대부분 고용량인 것을 확인할 수 있다. 큰 기능이 동작하는 모듈이라고 하더라도 번들에서 2mb가 넘게 나올 수는 없었다. 용량을 줄이기 위한 조치가 필요했고, 트리쉐이킹과 코드 스플리팅 개념에 대해 배우게 되었다. 적용 전: 적용 후: 트리쉐이킹(= Tree Shaking)이란? 코드를 빌드할 때도 실제로 쓰지 않는 코드들을 제외한다는 개념. 기본적으로 webpack이 수행하지만 commonjs으로된 코드나 development 단계에서는 적용되지 않는다. ES module로 의존성을 관리하는 모듈 및 production 모드로 실제 배포를 위해 번들링할 때만 적용된다. 트리쉐이킹은 왜 필요한 것인가? 번들 사이즈 축소에 따른 다운로드 속도와 컴파일 속도의..

개인 프로젝트 배포 준비를 하며 깃 버전에 노출되어선 안되는 key 파일이 계속 깃에 노출되었다. deploy라는 폴더 내에서 .gitignore를 적용시켰고, back 폴더 내 .env나 node_modules와 같은 파일들은 정상적으로 깃에 노출되지 않았지만 front 폴더에는 적용이 되지 않았다. // 폴더구조 📦deploy ┗ 📦 front ┗ 📦 back 📦.gitignore front 폴더 내의 key 파일에 적용되지 않은 이유는 간단하다. 해당 폴더에 .git 파일이 있거나, .gitignore에 등록하지 않았거나 둘 중 하나이다. 나의 경우에는 front 폴더에 .git 파일이 존재해 바깥의 deploy와 다른 버전으로 관리가 되고있었다. 그래서 .gitignore가 적용되지 않았던 것이었..