FrontEngineer JungBam

작업을 하다보니 한 페이지에 두개의 섹션에 각각의 페이지를 구현하는 일이 생겼다. (페이지네이션에 각각의 페이지를 불러오는 것) 쿼리스트링으로 두개의 값을 넘기는 것은 간단했다. ${i} missing과 abandoned에 각각 값을 넣어서 보내주면 되는 일이었다. 근데 다른 페이지의 현재 페이지 값을 어떻게 갖고 올까 고민하는 문제가 생겼다. 이걸 해결해주기 위해서 찾은 방법이 URL에서 다른페이지에 해당하는 쿼리스트링 값을 가져오면 된다였다. 어떻게 가져오는지 알아보자. 현재 url이 http://localhost:5000/shelter?missing=3&abandoned=1 이라고 해보자. 이 url을 읽어오는 window 메소드는 아래와 같다. window.location.href (쿼리스트링만 ..

기존 코드로 처리를 하다보면 네트워크 창에서는 정상적인 요청처리가 되었다는 것이 뜬다. 클라이언트의 입장에서는 아무 문제없는 것이지만, 개발자의 입장에서는 오류처리된 것이 정상적으로 요청처리되어 상태를 정확하게 알 수 없는 상황이 생길 수 있을 것이다. 이러한 문제를 해결하는 것이 status()인데 아래와 같이 사용하게 되면 '네트워크' status 창에 에러코드가 전달되게 된다. 즉, 내가 클라이언트를 위해 정상적이게 보이도록 처리한 부분이지만 내가 봤을 때에는 어떤 문제인지 알 수 있다는 것!! res.status(404).render('404', { what: '페이지' }) 위와 같이 작성했을 때, 비록 404 페이지가 열리면서 오류처리가 되지만 네트워크에서 상태코드를 통해 어떤 상태인지 확인이..

서버에서의 변수명이 일치하지 않는다던가 json파일 문제라던가 하는 문제들에 대해 처리하는 방법 // 서버 문제를 처리할 미들웨어 app.use(function (error, req, res, next) { res.render('500') }) .use에 위의 코드에 있는 4가지의 매개변수를 모두 받아 작성하면 서버 문제에 대하여 처리하는 라이브러리를 사용할 수 있게 된다.(나는 서버 문제 처리 페이지로 렌더시켰다. 서버에 문제가 발생하면 클라이언트가 인지가 될 정도로만..)

위의 코드들 app.use('/경로', function(){})들에서 처리되지 못하고 정해진 경로가 아닌 요청에 대한 모든 처리를 할 수 있는 방법! .use()의 첫번째 경로를 생략하고 콜백함수를 부르면 정해진 경로가 아닌 나머지 경로에 대한 모든 요청을 처리하는 작업이 된다.(나는 여기서 페이지가 잘못되었다고 페이지를 보내줬다. / 아래가 결과물)

백엔드와 협업이 처음이라 낯설었던 단어, 쿼리 스트링 개념은 간단했다. 엔드포인트 주소에서 내가 원하는 값을 파라미터로 백엔드에게 요청할 수 있는 것 ${i} 쉽게 위의 코드를 보면서 설명하면 백엔드에 abandoned(엔드포인트)에 페이지 번호가 i인 데이터를 요청한 것 즉, 클라이언트의 요청을 백엔드에게 요청할 때 이 요청을 파라미터로 넘겨주는 것. 아직 내가 느끼기에는 쿼리스트링으로 주는 것보다 path로 주는 것이 더 좋다는 생각이 든다. path로 주고 params로 불러오는 것이 코드가 더 직관적이고 깔끔하다는 느낌이 들기 때문.

작업을 하다가 multiple이라는 속성을 처음 사용해봤다. email, file 타입에 대하여 둘 이상의 값을 입력할 수 있음을 명시하는 속성 - email : 콤마(,)를 통해 여러 이메일 주소를 동시에 입려할 수 있다. - file : ctrl키나 shift키를 이용하여 동시에 선택할 수 있다. 참조 : http://www.tcpschool.com/html-tag-attrs/input-multiple

.render() 두번째 변수로 넘겨준 값을 js파일로 가져오는 작업이 필요했다. 구글링과 유튜브를 아무리 찾아봐도 해당 내용을 찾는 것은 어려웠고 내 방식대로 하나씩 방법을 찾아보기로 했다. 변수를 가져올 수 있는 방법을 하나하나 해보기로.. 그러다가 방법을 찾을 수 있었다. 서버 router.get('/', async (req, res, next) => { try { const page = parseInt(req.query.page) || 1; const countOfArticles = await db.collection('community').countDocuments(); const maxIndex = Math.ceil(countOfArticles / 20); const query = { dele..

참고한 블로그 : https://gongbu-ing.tistory.com/26 Node.js | Express : Request Parameters GET method GET 방식의 요청에서 파라미터를 전송하는 방법은 두 가지가 있다. 쿼리스트링(Querystring)이나 경로(Path)를 통하여 파라미터를 전달할 수 있다. 각각의 방법을 알아보자. Querystring 'req.param() gongbu-ing.tistory.com 각 컴퍼넌트별 상세페이지를 만들던 중 상세페이지를 불러오는 각자의 경로를 만들어 주려고 하다보니 get()요청을 몇개를 써야하는가 싶어서 이러한 단순 노가다를 해결할 방법을 찾던중에 만난 params라는 친구 (위의 블로그를 보면 params와 param()의 차이를 알 수..