Jonyo Programming

데코레이터 네스트에는 많은 데코레이터가 존재한다. @Body() , @Param() 등 데코레이터를 통해 특정 요청에 대한 값을 접근할 수 있다. 예를들어 request객체 안에 body 에 접근하고자 한다면 해당 값을 가져오기 위해 이렇게 작성 할 것이다. const data= req.body 하지만 여기서 더 readable하고 transparent하게 만들기 위해 @Body() 데코레이터를 사용할 수 있다. login(@Body('user') loginUserDto: LoginUserDto) 이런식으로 req.body 안에 있는 user의 값을 loginUserDto 라는 변수에 쉽게 담을 수 있다. 커스텀 데코레이터 위에 설명한 데코레이터를 커스텀하여 사용할 수 있다. import ..

미들웨어란 미들웨어란 특정한 역할을 하는 함수 이다. request와 response객체에 접근이 가능하여 요청-응답 사이클 도중 그 다음 함수에 대한 접근 권한을 갖는다. 더 간단하게 설명하면 클라이언트로 부터 온 요청을 처리하기 위해 응답을 보내기 전 중간(미들) 지점에서 특정한 로직을 처리하는 함수라고 할 수 있다. 예를들어, 유저 권한이 필요한 요청이 있다고 하자. 미들웨어는 그 요청을 처리하기 전에 미리 권한을 검증하는 미들웨어를 호출하여 검증된 요청에 대해서만 응답을 내려줄 수 있다. Nest 미들웨어 Nest 미들웨어는 기본적으로 express미들웨어와 유사하다. (req, res, next) 라는 인자를 받아 특정한 로직을 수행하고 next() 함수를 호출하면 다음 함수가 실행된다. 미들웨..

activetint 웹사이트를 보면 상단에 네비게이션 바가 위치하고 있다. 이 때 현재 페이지의 위치에 따라 네비게이션 메뉴의 색상이 바뀌는것을 active tintcolor 라고 한다. 예를들어, 다음과 같은 경우이다. react-router-dom react-router-dom을 이용하면 이 작업을 쉽게 해줄 수 있다. React에서는 새로고침을 하지 않기 위해 링크를 걸 때 a 태그를 사용하지 않는다. 대신 react-router-dom에 있는 Link 컴포넌트를 사용한다. 홈NavLink active tintcolor를 적용하기 위해서는 Link 컴포넌트가 아닌 NavLink 컴포넌트를 사용하면 된다. 사용방법은 Link 컴포넌트와 비슷하다. (자세한 내용은 여기에) activeClassName ..

지난 포스팅에서 자바스크립트 예외처리를 다뤘다. 그러나 비동기 상황에서의 예외처리는 조금 다르다. 하나씩 살펴보자. Promise 다음과 같이 Promise를 리턴하는 비동기 함수가 존재한다. const sleep = function(sec){ return new Promise((resolve, reject) => { setTimeout(() => { reject('Error 발생') }, 1000 * sec) }) } sleep(3); 실행시켜봤을 때, catch되지 않은 에러가 있다고 나온다. 그럼 sleep의 사용을 try-catch 문으로 감싸보자. try { sleep(3); } catch (e) { console.log(e); } 결과는 똑같다. 그 이유는 뭘까? 비동기작업은 함수가 실행 될 ..

자바스크립트로 코드를 작성하다보면 예외사항을 처리해야 할 때가 있다. 예를들어, 덧셈 기능을 하는 함수에 매개변수로 문자열이 들어온다면 예외를 발생시켜야 한다. 자바스크립트는 문자 + 숫자 연산도 가능하기에 예외처리를 하지 않으면 끔찍한 결과가 나타날 수 있다. 3 + 5 = 8 이지만, '3' + 5 = 35 라는 결과가 나온다. 따라서, 예외적인 상황에서는 적절하게 예외를 발생시켜야 할 필요가 있다. 예외는 throw 를 통해 발생시킬 수 있다. 덧셈함수로 예시를 보자. function add(a, b){ if (typeof a !== 'number' || typeof b !== 'number') throw '매개변수가 잘못됐어..!' return a + b } 이런식으로 throw 를 통해 예외를 ..

이번 방학때는 인턴을 하게 되었다. 그동안 계속 하고 싶었지만 스스로 너무 부족해 회사에 폐가 될까 지원하지 못하고 있었다. 이번 방학 때는 자신감을 가지고 지원했고 감사하게도 합격하여 12월 27일부터 출근하게 되었다. 합격한 회사는 강남에 위치한 모빌리티 스타트업이다. 프론트엔드 직무로 지원했지만 어떤 일을 하게 될지는 출근해봐야 알 것같다. 인턴 면접은 파트장님과 팀장님과 2:1 면접으로 1시간정도 진행했다. 큰 틀은 다음과 같다. 자기소개, 간단한 인성면접(?) 기술면접 코딩테스트 기타질문 면접이 시작 한 후에 간단히 소개를 하고 기본적인 질문을 주고 받았다. 자기소개를 기반으로 ‘언제부터 컴퓨터 공부를 시작했는지?’, ‘무엇을 만들어본 경험이 있는지?’, ‘회사 서비스를 이용해본적 있는지?’ 등..

내 환경은 다음과 같다. 내 프로젝트 환경을 Dockerfile을 통해 빌드하고 docker run 명령어를 통해 컨테이너를 생성했다. 나는 타입스크립트를 사용하기에 "start" : "nodemon --watch src --exec ts-node src/index.ts" 와 같은 명령어를 사용한다. 만약 자바스크립트를 사용한다면 "start" : "nodemon src/index.js" 가 될것이다. 어찌됐든 다음과 같이 컨테이너를 생성하고 서버를 구동했다. 또 나는 내 로컬 디렉토리와 컨테이너 디렉토리를 mount한 상태이다. 즉 내 로컬의 코드가 변경되면 컨테이너 내부의 코드도 변경된다. 그렇다면 내 로컬의 코드를 변경하면, 컨테이너의 코드가 변경되니 컨테이너에서 돌고 있는 nodemon에 의해 변..

상황은 다음과 같다. 로컬 node환경에서 작업을하고 ORM으로는 sequlize를 사용한다. DB만 docker에서 postgresql컨테이너를 만들고 sequlize로 연결하려고 하는데 계속 다음과 같은 오류가 떴다. docker 컨테이너 생성은 다음과 같은 명령어로 했다. docker run --rm \ --name docker-db \ -e POSTGRES_DB=test \ -e POSTGRES_USER=test \ -e POSTGRES_PASSWORD=test \ -p 5432:5432 \ postgres 컨테이너는 잘 생성되었고 docker exec --it docker-db bash 를 통해 컨테이너로 접속하고, su - postgres 와 psql --username test --dbnam..

ReactNative + Expo를 이용해 안드로이드 시뮬레이터를 열려는데 자꾸 이런 오류가 떴다. Couldn't start project on Android: No Android connected device found, and no emulators could be started automatically. Please connect a device or create an emulator (https://docs.expo.dev/workflow/android-studio-emulator). Then follow the instructions here to enable USB debugging: https://developer.android.com/studio/run/device.html#develop..

[BOJ1946 리뷰] 오랜만에 푼 그리디 문제이다. 문제 조건을 잘 풀어보면 다음과 같다. 신입사원으로 선발 되려면 다른 지원자보다 최소한 점수 하나가 더 높아야 한다. 즉, 점수가 둘다 낮으면 선발될 수 없다. 문제를 해결하기 위해서 먼저 첫번째 기준으로 정렬을 하자. (두번째 기준으로 정렬을 해도 상관이 없다.) 정렬이 되면 서류성적순으로 1등부터 꼴등까지 쭉 정렬이 될 것이다. 이제 여기서 문제의 핵심을 잘 생각해보면 된다. 신입사원으로 선발이 되기 위해서는 최소한 점수 하나가 더 높아야 한다. 지금은 서류성적 순으로 정렬이 되어있기 때문에, 그 밑에 있는 사원들은 일단 서류성적은 첫번째 지원자보다 무조건 낮을 수 밖에 없다. 그렇기에 이 사람이 선발이 되기 위해서는 면접 점수가 무조건 높아야 한..