[취업준비일지] - 83 - 원티드 인턴십 9일차

프로젝트를 위해 기본적인 스택을 생각해보면
React, styled-components, axios, TypeScript를 사용할 것 같다.

폴더 구조는 페이지가 딱 하나면서 메인 페이지기 때문에 고민되지만
경로를 통해 '/'에 할당하고 pages 폴더로 구분해주기로 했다.

또한 하단 드롭다운 컴포넌트도 따로 구성되기 때문에 
components 폴더도 있어야 할 것 같고
types 폴더와 api폴더도 필요할 것 같다.

간단한 구조를 구상했지만 시간이 없기 때문에
style보다는 간단한 블럭모양으로 만든 다음
기능 구현을 먼저 하고 css를 생각해볼 예정이다(icon 포함)

기본적으로 제공하는 서버를 설치한 다음 (git clone)
실행해보니 간단한 제이슨 서버 형태였고 
params를 받아 해당하는 내용만 알아서 출력했다.

이전에 구현했었던 방식은 서버에서 데이터를 다 받아온 다음
그 데이터를 출력할 때 입력에 따라 필터링하는 방식이었는데
서버에서 데이터를 필터링해 받으니 훨씬 좋은 것 같다.

postman으로 테스트해보는데 의외로 postman 자체의 구동이 느려서
한글자를 입력하고 Send를 누를 경우 papams가 없는 것 처럼 보내진 다음
params의 value에 작성한 글자가 들어가버렸다.

어찌됬건 postman의 문제는 뒤로하고 서버는 정상적으로 잘 작동했고
단순히 글자에 따른 get 요청 하나만 사용할 예정이기 때문에
하나의 함수로 처리가 되는 간단한 것이라 API에 따로 빼야 할까 싶기도 하다.

이제 TS-CRA를 사용해 생성해준 다음
styled-components, axios, react-icons를 설치하고
폴더 구조 정리 및 파일 생성작업을 진행했는데

div를 찾을 수 없다는 이야기가 자꾸 출력되었다.
('div' 이름을 찾을 수 없습니다.)

검색을 해봐도 제대로 된 내용이 없었는데
파일 자체를 tsx가 아닌 ts로 생성해서 생긴 문제였다.

js로 작성할 경우 문제가 없지만 ts는 tsx가 아니면 문제가 발생했다.

간단하게 폴더구조만 작성해서 기본 작업은 커밋 없이 진행한 다음
레포지토리에 올릴 생각이었는데
생각보다 index.tsx 내용을 안채우면 에러가 뜨는 문제가 많아
밖에서 오래 작업하게 되었다.

다음에는 폴더구조 및 모듈 설치도 다시 커밋을 하는 방향으로 해야겠다.

해당 반환 형식 'void'은(는) 유효한 JSX 요소가 아닙니다.가 출력되었는데
한참 문제를 해결하려고 찾았지만 App이 뭔가 문제가 있다는 것 밖에는 알 수 없었다.

확인해본 결과 return을 사용하고 태그 하나만 사용할 경우에는
괄호를 사용하지 않아도 상관없지만 여러개의 줄을 차지할 경우
아래와 같이 return() 내부에 작성해야 여러개로 인식되지 않는다.
jsx로 처리되지 않는다는 의미는 jsx형식으로 나가지 않는다는 것임을 인지하자.

function App() {
  return (
    <Routes>
      <Route path={PATH.HOME} element={<Searching />} />
    </Routes>
  );
}

 

잘못된 검색 결과 때문에 react 버전 확인 및 modules를 다 뒤져가며
리액트 선언 충돌에 대해 뒤져봤지만 해결이 되지 않았는데
검색 키워드의 핵심을 생각하는 것이 중요하다는 것을 다시 한번 느꼈다.

당장 사용할 폴더들을 정리한 다음 마무리했다.

 

1.옵저버 패턴(Observer pattern)은 관찰자인 옵저버를 등록해
지정된 객체의 상태 변화가 있을 때 통지하게 하는 패턴이다.

작성자의 해당 언어인 자바스크립트로 예를 들자면
태그 내부에서 기능 동작을 위해 서는 onXxxxx가 옵저버 패턴이라고 할 수 있다.

예를 들어 button태그에 onClick(deleteList)를 넣어줄 경우
이벤트 발생 시 관찰객체(Button)에서 Event 발생을 감지 후
옵저버(deleteList 함수)에게 발생을 통지하는 것과 같다.

옵저버 패턴은 이벤트가 발생할 경우
그 객체를 감시하던 객체들에게 연락이 가는 1:1 또는 1:다의 관계로
느슨한 결합이기 때문에 유연하며 의존성이 없다는 장점이 있지만
많이 사용할 경우 상태 관리가 복잡해진다는 단점이 있다.





(1).백준 1037 약수는 특정 값의 1과 본인을 제외한 약수들을 받아서
해당하는 값이 무엇인지를 찾는 문제였다.
1을 제외한 약수이기 때문에 해당하는 숫자를 만들 수 있는 값은
최소공배수로 찾을 수 있었고 
만약 중복되는 값 때문에 최소공배수로 찾을 수 없는 경우에는
(2x2x2인 경우 1,2,4,8 중 1,과 8이 사라져 2와 4가 남아 4가 최소공배수다)
최소공배수로 값을 특정할 수 없다는 단점이 있었지만
그런 경우 조건문을 걸어 제일 큰 수와 제일 작은 수을 곱해서 해결했다.
(본인을 제외한 가장 큰 약수에 제일 작은 1이 아닌 약수를 곱하면 본인이 된다)

let input = `14
14 26456 2 28 13228 3307 7 23149 8 6614 46298 56 4 92596`.split('\n')[1].split(' ').map(Number)

const gcdCalulater = (a,b) => {
    let num1 = a
    let num2 = b
    while (num1 % num2) {
        let temp = num1
        num1 = num2
        num2 = temp%num2
    }
    return a*b/num2
}

let result = 1
let maxNum = Math.max(...input)
let minNum = Math.min(...input)
for(let i = 0 ; i < input.length ; i++){
    result = gcdCalulater(result,input[i])
}

if(maxNum === result){
    console.log(result*minNum)
}
else{
    console.log(result)
}