소파에서 개발하기

프론트엔드 개발자라는 역할을 가지고 일을 한 지 벌써 3개월차가 되어 간다. 그 말인즉 아직 수습 기간을 지내고 있는 별 거 아닌 신참이다. 그런데도 하루하루가 쉽지만은 않아서, 짧은 회고도 제대로 하지 못하는 게 마음의 빚이었다. 공부할 때는 매일매일 특정한 챕터, 특정한 주제를 정해놓고 공부했기 때문에 하나의 완성된 글을 써 내기가 비교적 수월했는데 (물론 당시에는 이렇게 말하는 날이 올 거라곤 생각도 못 했다) 일을 시작하면서부터는 모르는 게 사방 천지게 깔려 있기 때문에 그때그때 땜질식으로 알아내는 게 훨씬 많다. 그래서 개인 노션 페이지에 블로깅 아이템은 늘어가고 있는데, 그걸 누구에게 보여줄 수 있을 만한 수준으로 다듬는게 마음만큼 잘 되지 않는다. 어쩌면 그냥 관성일 지도 모른다. 관성이라는..

회사에서 AWS 서비스를 잔뜩 연동해 사용하는데, 개념을 몰라 과정 파악이 어려웠다. 개념을 문서로 정리한 글을 못 찾아, 목마른 자가 우물을 파는 심정으로 정리해 보았다. 내용 추가 / 수정 환영합니다 :) 기본 개념 IoT 디바이스 - 클라우드 or 디바이스 - 디바이스의 통신을 용이하게 하는 기술이다. 이제는 칫솔, 진공 청소기, 자동차 및 기계와 같은 일상적인 디바이스가 센서를 사용하여 데이터를 수집하고 사용자에게 지능적으로 응답할 수 있다. 이러한 스마트 객체는 자동으로 인터넷과 데이터를 주고받을 수 있다. 이러한 모든 "보이지 않는 컴퓨팅 디바이스" 및 이와 관련된 기술을 사물 인터넷이라고 총칭한다. AWS IoT 개요 디바이스 연결과 관리 : 요건에 가장 잘 맞는 프로토콜(HTTP, MQTT..

watch 모드 tsc app.ts --watch또는 tsc app.ts -w 를 입력하면 해당 파일이 관찰 모드로 진입한다. ctrl+c로 저장할 때마다 컴파일이 실행된다. 단점은 특정 파일을 지정해야 한다는 것이다. 규모가 큰 프로젝트에서는 많이 사용하지 않는다. 전체 프로젝트 or 다수의 파일 컴파일하기 index.html에 다수의 js파일(ts로 컴파일하면 생길 파일)을 src로 걸어 두면, 그 중 한 가지만 변경사항이 생기더라도 전부 리컴파일한다. tsc --init 을 입력하면 tsconfig.json 파일이 생기면서 현재 프로젝트 폴더에 들어있는 모든 ts 파일을 컴파일 대상으로 본다. tsc -w 또는 —watch를 입력하면 관찰 모드로 확인하고, 변경 사항이 적용되어야 하는 모든 ts파일..

섹션1 메모 강의 프로젝트 설정 타입스크립트 컴파일러 설치 : npm install -g typescript 이후의 명령어는 tsc 폴더를 만들고 npm init 으로 package.json 생성, tsc init으로 ts 설정 npm install --save-dev lite-server 로 dev dependency에 ‘lite-server’ 설치 package.json 내부 scripts에 "start": "lite-server" 로 명령어 설정 후 실행 tsc app.js 로 작성한 ts코드 js로 컴파일하여 터미널과 브라우저에서 결과 확인 가능 *nodemon으로 워칭하는 법 https://colinch4.github.io/2020-12-03/README.typescript-개발환경구성/ 섹션2..

폭풍같은 일주일이었다. 많은 것들이 지나갔는데 그 사이 아무것도 기록하지 못한 것이 신경쓰여서 간단한 기록을 남긴다. 1. 첫 기업 과제를 제출했다. 개인적으로 여러 면에서 의미가 있었다. 일단 서류 과정을 통과하고 기업 과제를 받아볼 수 있었다는 것 자체로 특별한 일이었다. 거기에 이전까지 원티드에서 훑어보던 기업들에 비해 관심을 가지고 있는 도메인이어서 과제 구현하는 것도 재밌었다. 프로젝트 종료된 이후에 자소서 작성, 일반면접 준비, 기술면접 준비 등 이런저런 이유들로 리팩토링도 미뤄지고 직접 코드 작성하는 시간이 줄어서 에너지가 좀 다운되는 느낌이 있었다. 다시 구현에 집중하는 시간을 끼워넣은 게 일정 환기 면에서도 도움이 되었고, 또 나름대로 타입스크립트도 써 보고 계속 생각만 하던 바닐라 Da..

메인 프로젝트 이후 동기분들의 결과물을 보다가 React query를 이용하신 분들이 꽤 많다는 걸 알게 되었다. 구두로만 '좋아요 써 보세요'라고 듣다가 모 기업 과제를 진행하면서 구체적으로 무엇이 좋은지 알아보았다. 참고자료는 1. 카카오 기술블로그 : React에서 서버 데이터를 최신으로 관리하기(React Query, SWR) https://fe-developers.kakaoent.com/2022/220224-data-fetching-libs/ 2. 오픈소스컨설팅 테크블로그 : React-Query 도입을 위한 고민 (feat. Recoil) https://tech.osci.kr/2022/07/13/react-query/ 3. 노경환님 블로그 : react-query 가이드 https://kyou..

상황 프로젝트를 하는 내내 머리를 감싸쥐게 했던 것이 바로 axios와 jwt 토큰이 메인인 로그인 기능이었다. 이 기능들을 기본 함수와 커스텀 훅을 이용해 구현했는데, 이걸 axios interceptor로 리팩토링하려고 한다. 프로젝트를 진행할 당시에도 interceptor의 존재를 알았지만 안 썼던 이유는 간단하다. 프리 프로젝트를 할 때 직접 할 수 있는 일을 라이브러리를 도입해서 쓰려다가 오히려 더 복잡해진 경험이 있어서, 할 수 있어 보이는 일에 굳이 라이브러리를 쓰고 싶지 않아서였다. 보통 interceptor를 사용하는 이유를 찾으면 주로 이런 것이 나온다. 1) api 호출할 때마다 비효율적으로 axios 인스턴스를 생성 2) axios 마다 동일한 content-type , token와..

문제 더보기 문제 설명 나만의 카카오 성격 유형 검사지를 만들려고 합니다. 성격 유형 검사는 다음과 같은 4개 지표로 성격 유형을 구분합니다. 성격은 각 지표에서 두 유형 중 하나로 결정됩니다. 지표 번호성격 유형 1번 지표 라이언형(R), 튜브형(T) 2번 지표 콘형(C), 프로도형(F) 3번 지표 제이지형(J), 무지형(M) 4번 지표 어피치형(A), 네오형(N) 4개의 지표가 있으므로 성격 유형은 총 16(=2 x 2 x 2 x 2)가지가 나올 수 있습니다. 예를 들어, "RFMN"이나 "TCMA"와 같은 성격 유형이 있습니다. 검사지에는 총 n개의 질문이 있고, 각 질문에는 아래와 같은 7개의 선택지가 있습니다. 매우 비동의 비동의 약간 비동의 모르겠음 약간 동의 동의 매우 동의 각 질문은 1가지..

문제 더보기 문제 설명 최빈값은 주어진 값 중에서 가장 자주 나오는 값을 의미합니다. 정수 배열 array가 매개변수로 주어질 때, 최빈값을 return 하도록 solution 함수를 완성해보세요. 최빈값이 여러 개면 -1을 return 합니다. 제한사항 0 a-b); let freq = []; let temp = 0; let max_f = 0 let max_v = 0; // 다른 수가 나올 때까지 카운팅 for(let idx in sort){ temp += 1 if(sort[parseInt(idx)] !== sort[parseInt(idx) + 1]){ freq.push(temp) if(temp > max_f){ max_f = temp max_v = sort[parseInt(idx)] } temp = ..

문제 더보기 문제 설명 첫 번째 분수의 분자와 분모를 뜻하는 denum1, num1, 두 번째 분수의 분자와 분모를 뜻하는 denum2, num2가 매개변수로 주어집니다. 두 분수를 더한 값을 기약 분수로 나타냈을 때 분자와 분모를 순서대로 담은 배열을 return 하도록 solution 함수를 완성해보세요. 제한사항 0 (a % b === 0) ? b : GCD(b , a % b) const gcd = denum3 >= num3 ? GCD(denum3, num3) : GCD(num3, denum3) var answer = [denum3/gcd, num3/gcd]; return answer; }