항해 99 5기 TIL_19

▶ Today I Learned

<CS 스터디>

 

S-R latch같은 것이 나왔는데 사실 이해할 수 없었다..

내용이 너무나 어려웠다..이건 추후 '유튜브 뽕교수의 전자공학' 강의를 들어보자..!

 

 

<홈페이지 구현 - 숙련>

 

[PM2]

Node.js 어플리케이션을 쉽게 관리할 수 있도록 해주는 Process Manager. 이것을 사용하면

터미널 창을 끄거나 node를 종료하더라도 서버가 꺼지지 않게 할 수 있다.

즉, 서버에 연결된 웹사이트에 계속 접속이 되는 것이다.

깊이 들어가면 더욱 자세한 내용들이 나오지만 우선은 구현이 주 목적임을 잊지 말자.

필요할 때에 좀 더 깊이 배우면 된다 :)

 

[npm을 이용해 터미에 mongoose를 설치하는 명령어]

npm i mongoose -S

여기서 -S는 무엇을 의미할까?

 

구글링하여 방법을 알아냈고 터미널에서 npm install --help를 통해 찾아보니 다음과 같다.

-S는 Save의 약자였는데 뒤의 부가적인 말들이 붙어있지 않다 보니 아마 가장 기본적인 방식으로 저장하는 것인듯 하다.

 

 

[RestAPI]

 

REST 아키텍쳐에 따라 사람이 알아보기 쉽게 만든 API, 개발자들의 생산성과 상호작용을 증진시키기 위해 만들어짐

 

특징에 대해서는 아래 링크를 참조해보자.

http://www.incodom.kr/REST#:~:text=REST%EC%9D%98%20%ED%8A%B9%EC%A7%95%20%23&text=%EC%84%B8%EC%85%98%20%EC%A0%95%EB%B3%B4%EB%82%98%20%EC%BF%A0%ED%82%A4%20%EC%A0%95%EB%B3%B4,%EC%9C%BC%EB%A1%9C%EC%8D%A8%20%EA%B5%AC%ED%98%84%EC%9D%B4%20%EB%8B%A8%EC%88%9C%ED%95%B4%EC%A7%84%EB%8B%A4.

 

그 중 확장자명 표시 지양이라는 특징이 있었다.

이전에 구현했던 페이지는 html이 모두 노출되는데.. 이를 header에 대신 넣어줌으로써 지우는 듯 하다.

어떻게 지울 수 있을지는 구현하면서 한번 알아가 보아야겠다.

 

[URI]

URI: Uniform Resource Identifier, 인터넷 자원을 나타내는 고유식별자 :)

URI는 직관적이어야 한다. 흔히 보는 도메인을 URL이라고 하는데,

그 URL 보다 더욱 포괄적인 개념이다.

URL는 자원의 위치를 나타내는 개념에 더 가깝다. 실제로 약자도 Uniform Resource Locator이다.

일반적으로 사이트의 도메인을 나타낸다. 이는 프로토콜까지도 포함한다.

ex) 'https://news.naver.com/main/main.naver?mode=LSD&mid=shm&sid1=102'

에서 https://news.naver.com/main 부분정도 될 것 같다.

 

Validation: 어떤 것을 검증하는 것을 일컫음

 

여기서는 joi라는 미들웨어를 써서 인증해볼 수 있다.

인증 영역은 주석 달아놓은 것을 참조! 내가 달았다 :)

 

ex)

const Joi = require('joi');

const schema = Joi.object({
    username: Joi.string()
        .alphanum() // 알파벳이나 숫자
        .min(3)
        .max(30)
        .required(),

    password: Joi.string()
        .pattern(new RegExp('^[a-zA-Z0-9]{3,30}$')),

    repeat_password: Joi.ref('password'),

    access_token: [
        Joi.string(),
        Joi.number()
    ],

    birth_year: Joi.number()
        .integer()
        .min(1900)
        .max(2013),

    email: Joi.string()
        .email({ minDomainSegments: 2, tlds: { allow: ['com', 'net'] } })
})
    .with('username', 'birth_year')
    .xor('password', 'access_token')
    .with('password', 'repeat_password');


schema.validate({ username: 'abc', birth_year: 1994 }); // username에 문자가 들어있으므로 통과
// -> { value: { username: 'abc', birth_year: 1994 } }

schema.validate({});
// -> { value: {}, error: '"username" is required' }

// Also -

try {
    const value = await schema.validateAsync({ username: 'abc', birth_year: 1994 });
}
catch (err) { }

출처:

https://joi.dev/api/?v=17.6.0 

 

[fetch]

: 게시글 기능 구현 및 로그인/회원가입 기능 구현을 위해 공부하던 중 튜터님께 fetch()를 이용해서 해보라는 조언을 들었다. 구글링을 하던 중 마침 한 블로그에서 fetch()를 쓰는 것을 발견했다.

script(type="text/javascript").
    function deletePost(shortId) {
        fetch('/posts/' + shortId, { method: 'delete' })
            .then((res) => {
                if (res.ok) {
                    alert('삭제되었습니다.');
                    window.location.href = '/posts';
                } else {
                    alert('오류가 발생했습니다.');
                    console.log(res.statusText);
                }
            })
            .catch((err) => {
                console.log(err);
                alert('오류가 발생했습니다.');
        })
}

출처

https://lakelouise.tistory.com/225

 

난 이때까지 ajax콜로 삭제와 같은 기능을 요청하였는데 여기선 그대신 fetch를 쓰고 있었다.

그래서 찾아본 결과 MDN의 공식문서를 보면 fetch()에 대해 다음과 같이 적혀있다.

"Fetch provides a generic definition of Request and Response objects (and other things involved with network requests)."

"For making a request and fetching a resource, use the fetch() method. It is implemented in multiple interfaces, specifically Window and WorkerGlobalScope. This makes it available in pretty much any context you might want to fetch resources in."

 

즉 Fetch로 요청과 응답 객체를 모두 주고 받을 수 있으며 다양한 환경에서 쓰일 수 있는 기능이라는 것이다.

그렇다면 이번에는 이 기능을 써보는 것도 좋을 듯 하다.

출처

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

 

 

<알고리즘>

 

이상한 문자 만들기

 

https://programmers.co.kr/learn/courses/30/lessons/12930

소요시간: 2시간

 

이렇게 작성하였다.

/* 문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수, solution을 완성하세요.

제한 사항
문자열 전체의 짝/홀수 인덱스가 아니라, 단어(공백을 기준)별로 짝/홀수 인덱스를 판단해야합니다.
첫 번째 글자는 0번째 인덱스로 보아 짝수번째 알파벳으로 처리해야 합니다. */

// <나의 아이디어>

// 소문자로 통일

// 공백 기준으로 나누기
// -> 하지만 split(" ")으로 나누면 나중에 다시 합치기가 애매하다
// 어떤 글자 사이에 어떤 공백이 들어가게 할지 어떻게 아는가?

// 조건문을 걸어 짝수자리 글 대문자로 처리


let s = "try hello world";

let lowerS = s.toLowerCase(); // 소문자화, 글자 전체가
// 전부 대문자 혹은 소문자로 통일되어 있지 않을 수 있음,
// 조건문과 반복문으로만 구현하려면 귀찮은 연산을 2배로 해야하니 성능이 떨어질 수 있어 이를 사전에 방지

let arr = lowerS.split("") // 한글자 씩 나눠버리기

let i = 0;
let j = 0;

let arrLength = arr.length

for (i ; i < arrLength ; i++) {

if (arr[j] === " ") {
  
  j++
  arrLength -= 1  
   // 이렇게 하면 공백을 건너 뛰었을 때 i값과 j값의 오차로 인한 문제를 해결해줄 수 있음

  // 예를 들어 이 예제에선 i는 14가 되고 j는 16이 될 것,
  // i 13부터는 arr[j]의 값이 없어 오류가 발생 가능
  // 따라서 공백을 건너뛸 때 마다 i의 값을 하나씩 줄여주면 둘이 정확히 맞아떨어짐
  // 배열길이 arr.length에 직접 1을 빼버리면 배열의 길이를 뺀다는 뜻이 될수 있어 오류의 여지 있음, 따라서 배열의 길이 숫자값을 변수로 받아옴
}

if (j%2 === 0) {
  arr[j] = arr[j].toUpperCase() // 짝수자리 인덱스 글자는 대문자화
  }
j++
}
console.log(arr.join('')) // 합쳐주기

잘 된다고 생각했는데 오류가 하나있었다.

바로 문자열 앞 뒤에 공백으로된 문자가 올 수 있다는 것!

ex) "     try hello world       "

그렇다면 저렇게 바깥쪽의 공백까지도 어떻게 처리해주면 될텐데..방법이 없을까?

 

이후 반복문과 조건문을 바꿔가며 수많은 시도를 했지만 결국 해결하지 못했다..

지난 번 들였던 시간까지 하면 한 8시간 이상 들인 것 같다..

더 고민해볼 수도 있겠지만 다른 공부할 것도 많으므로 우선 내일 해답 코드들을 보고 이해해 보아야겠다.

 

▶ 느낀 점

 

오늘부터 더욱 업그레이드 된 난이도의 홈페이지를 구현해야 한다.

기존에 만들었던 홈페이지는 AJAX콜을 썼다면 이번엔 fetch(), axios라는 함수나 기능 or 템플릿 엔진을 써서 구현해보고 싶다.

기존 홈페이지는 참고 정도만 해서 새롭게 기존의 홈페이지를 구현한 다음 과제에서 제시하는 기능들을 추가해보고자 한다.

 

강의를 바로 볼 생각이었으나 팀원 분들께서 어떻게 이런 류의 홈페이지를 짜는지 먼저 구글링을 통해 코드를 찾아보고

이해해보는 것을 추천하셨다. 생각해보니 괜찮은 방법같다.

그렇게 전반적인 흐름과 자주 쓰이는 기술에 대해 이해하고 조금 찾아본 다음

강의를 듣는다면 이해도 더 빠르고 강의 내용 중 필요한 것을 골라낼 수 있다.

아울러 스스로 먼저 찾아본 것이기에 수동적으로 강의를 듣는 것 보다 더욱 기억에 잘 남을 것이다.

그리고 무엇보다 현실에서는 알맞는 강의를 제공해주지 않는다.

무엇이 필요한 지 스스로 검색해보고 자료나 강의를 찾아 필요한 부분을 찾아들어야 한다.

그렇기에 주도적으로 문제해결을 위한 소스를 찾아서 해결하는 연습이 필요하다.

그렇게 오늘 코드를 조금 찾아보았는데 완벽히 이해할 순 없지만 다른 방법으로 특정 기능을 구현한 것을 발견했다.

내일은 더 본격적으로 찾아보고 강의는 되도록 일요일까지 다 들어보아야 겠다.

 

+ 오늘 소소한 파티까지 해주셨는데 그간 열심히 공부하는 우리들에게 주고싶은 선물이라고 하셨다..

매우 감동..덕분에 정말 재밌게 즐겼다 :)

 

내일도 열심히 해야지..! 화이팅팅!!

 

▶ 공부 시 참고 링크들

 

한번 더 읽어보는 NAT, 공인 IP 부족문제를 해결하기 위해 사설 IP를 써야하는데 이때 사설과 공인 간의 변환을 해주는 기술임

https://jwprogramming.tistory.com/30

NAT란?

 

https://programming119.tistory.com/194

[네트워크📶] URI 란 ? / URI VS URL VS URN 차이 /

 

https://joi.dev/api/?v=17.6.0 

joiSite

 

req.query로 게시글 측 기능을 구현하신 분들이 있던데 이것은 무엇일까??

https://wooooooak.github.io/web/2018/11/10/req.params-vs-req.query/

req.params vs req.query (axios, express) · 쾌락코딩

https://armadillo-dev.github.io/javascript/nodejs/node-js-pm2/

[Node.js] PM2(Process Manager) 알아보기