dev-ruby

TypeScript로 npm package에 배포하기 | React Custom hook 배포

ruby_s — Fri, 30 Dec 2022 20:49:36 +0900

이번에 WebRTC 관련 hook을 만들었는데, 공부하면서 구현하기까지 시간이 꽤 걸렸던 것 같다. 그래서 내가 만든 훅을 npm package에 올려서 다른 분들이 도움을 받을 수 있으면 좋지 않을까! 라는 생각에 처음으로! 올려봤다.

https://www.npmjs.com/package/@ruby-s/use-rtc

@ruby-s/use-rtc

React hook to connect to WebRTC. Latest version: 1.1.8, last published: 19 hours ago. Start using @ruby-s/use-rtc in your project by running `npm i @ruby-s/use-rtc`. There are no other projects in the npm registry using @ruby-s/use-rtc.

www.npmjs.com

1. npm 가입

npm에 패키지를 등록하기 위해서 https://www.npmjs.com/에서 가입하자.

2. package.json 파일 생성

npm init -y

-y 옵셥으로 바로 기본적인 pakage.json 파일을 생성해줍니다.

이제 내 패키지에 맞게 설정해줍니다.

{
  "name": "@ruby-s/use-rtc",
  "version": "1.0.0",
  "description": "React hook to connect to WebRTC",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/juyeong-s/RTC.git"
  },
  "author": "juyeong-s",
  "license": "MIT",
  "keywords": [
    "React",
    "Hook",
    "WebRTC",
    "useRTC"
  ],
  "bugs": {
    "url": "https://github.com/juyeong-s/RTC/issues"
  },
  "homepage": "https://github.com/juyeong-s/RTC#readme",
  "dependencies": {
    "socket.io-client": "^4.5.4",
    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  "devDependencies": {
    "@types/node": "^18.11.18",
    "@types/react": "^18.0.26"
  }
}

name

고유한 패키지명입니다.

version

패키지 버전입니다. 업데이트할 때마다 버전을 다르게 설정해주어야 합니다. 기존의 버전으로 다시 올리려고 할 경우 에러가 나므로 조심할 것.

description

패키지 설명입니다.

main

프로젝트에서 기본 진입 파일을 지정한다.
TypeScript의 경우 ts 파일을 빌드한 후 생성된 js 파일이 있는 위치로 지정해주어야 한다.
나 같은 경우, tsconfig.json 파일에 빌드된 파일이 dist폴더 안에 생성되도록 지정해주었으므로 main에 dist/index.js로 지정했다.

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "strict": true
  }
}

npm run build -> dist 폴더 안에 js 파일들 생성됨 -> 처음 진입할 파일을 main에 지정

types

이 속성을 TypeScript를 사용했을 경우에 필요하다. 위와 마찬가지로 build를 하면 dist폴더에 js 파일과 .d.ts 파일이 함께 생성된다.
이때 .d.ts 위치를 지정해주면 된다.

scripts

이 속성은 TypeScript를 사용했을 경우 build할 필요가 있기 때문에 쓰일 것 같다. build 명령어로 tsc 커맨드를 지정해서 ts파일을 컴파일하도록 한다.

repository

코드가 존재하는 주소를 지정하면 된다. npm docs로 패키지 저장소를 찾을 수 있게 해준다. 다음과 같이 npm 패키지 오른편에 보인다.

author

패키지 제작자의 이름을 지정한다. 이름만 해도 되고, 다음과 같이 해주어도 된다.

{
  "author": {
    "name": "juyeong-s",
    "email": "happyu9986@gmail.com",
    "url": "http://juyeong-s.com"
  }
}

license

라이센스를 지정한다.

keywords

패키지를 나타내는 대표적인 키워드들을 배열의 원소들로 설정해줍니다. 다음과 같이 하단에 보입니다.

bug

패키지에 문제나 버그가 있을 경우 보고할 수 있도록 URL을 지정한다. 보통 깃허브 이슈를 올리는 것 같다.

homepage

프로젝트 홈페이지로 연결되는 URL을 지정한다. 다음과 같이 npm 패키지의 오른편에 보인다.

dependencies

패키지의 배포 시 포함될 의존성 모듈을 지정한다.

peerDependencies

패키지의 호환성 모듈을 지정한다.

devDependencies

패키지의 직접 동작과 관련은 없지만, 이름 그대로 개발할 때 필요한 라이브러리를 지정한다. 보통 테스팅 라이브러리나 type관련 모듈들이 여기 들어간다.
개발에 필요한 라이브러리이기 때문에 배포할 때는 포함되지 않는다.

3. .npmignore 파일 설정

패키지에 배포하지 않을 파일이나 폴더를 지정해준다.
나는 ts로 작성했기 때문에 ts파일이 있는 폴더는 ignore해주고, js만 올리도록 했다.

// .npmignore
src/

.gitignore에는 빌드된 js는 제외하고 ts파일만 올리도록 했다.

// .gitignore
node_modules
.env
dist/

4. npm에 올리기

package.json 파일을 모두 설정해주었고, 배포할 hook파일도 모두 포함시켰다면 이제 npm 패키지에 올릴 준비가 되었다.

js로 작성했을 경우 npm publish로 바로 배포하면 되고,
ts로 작성했을 경우 npm run build 후 js 파일을 생성해 준 후 npm publish로 배포해주면 된다!

[React + socket] 렌더링마다 socket.io 커넥션이 재생성되는 이슈 해결

ruby_s — Mon, 5 Dec 2022 18:50:12 +0900

socket을 사용할 때마다 socket 객체를 전역에 선언해서 사용해야 할 지 컴포넌트 내에 선언해서 지역적으로 사용해야 할 지 항상 고민이였다..

전역으로 사용하면 리액트에 앱에 접속 시, 바로 소켓에 커넥션되기 때문에 너무 불편했다

그렇다고 지역적으로 사용하려니까 커넥션이 렌더링될 때마다 생성되길래 렌더링이 자주 일어나는 서비스일 경우 부하가 심할 것이고, 실제로 WebRTC 화상 회의 구현을 하면서 엄청난 렉과 마주했다..

아래는 내가 처음에 적용했던 소켓 코드다.

function App() {
  const socket = io(env.SERVER_PATH + `namespace`);

  return (
    <div>
    // 어쩌고
    </div>
  );
}

export default App;

App 컴포넌트가 렌더링될 때마다 소켓 객체가 생성될 것이다.. 내가 만들고 있는 실시간 성 서비스에서는 매우 치명적이였다

그래서 내린 결론 useMemo를 사용하기!

function App() {
  const socket = useMemo(() => io(env.SERVER_PATH + `namespace`), []);

  return (
    <div>
    // 어쩌고
    </div>
  );
}

export default App;

소켓 객체를 메모이제이션 해주어서 소켓이 재생성되지 않는다

+ 추가로, socket을 선언 후 하위 컴포넌트에 props로 깊은 depth로 넘겨야 된다면 props drilling이 야기되고, 어디서 선언된 소켓인지 헷갈릴 수 있다
이럴 경우 소켓을 전역 상태로 관리하여 사용하는 방법도 좋다고 생각한다.

[WebRTC] React+TypeScript+WebRTC 개념정리 + 구현하기

ruby_s — Sun, 27 Nov 2022 04:49:20 +0900

부스트캠프 웹모바일 멤버십 그룹 프로젝트에서 WebRTC를 다루게 됐다. 본격적인 작업에 들어가기 앞서 WebRTC에 대해 무지한 상태였기에 미리 학습을 해보았다
처음 학습할 때는 진짜 이게 뭐지 싶었다.. 그래서 이해 못한 채 일단 개념이라도 마구 적어놨다
MDN 문서를 하나씩 살펴보고, 블로그 자료를 엄청 찾아 돌아 댕기다보니 어느정도 정리가 됐다
하단에 참고한 문서들 적어놨어요

WebRTC(Web Real Time Communication)란??

브라우저와 모바일 애플리케이션에서 별도의 소프트웨어 없이 음성, 영상 미디어, 텍스, 파일과 같은 데이터들을 실시간 통신(RTC)으로 주고 받을 수 있게 해주는 기술이다.
Peer To Peer 방식으로 전송하며, 시그널링 서버 하나만 있으면 된다.

시그널링 서버는 뭔데?

서로 다른 네트워크에 있는 디바이스들끼리 통신하기 위해서는 각자의 위치를 알고, 미디어 포맷을 맞출 수 있어야 한다. 이러한 과정을 시그널링 이라고 부른다.
각 디바이스들은 서버로 본인의 정보를 보내고, 시그널링 서버는 받은 네트워크 정보를 그대로 상대 디바이스에게 전달해준다.

실시간이라면 웹소켓과 무슨 차이죠?

웹소켓은 클라이언트가 서버를 통해 정보들을 전달받는다.

그러나 WebRTC는 시그널링 서버를 통해 서로의 네트워크 정보들을 받는다. (시그너링 서버는 단순히 클라이언트의 네트워크 정보를 전달해주는 매개자 역할을 한다.)
클라이언트는 상대 클라이언트의 네트워크 정보를 받고 “너 거기 있구나?” 를 알게 되면 그때부터 클라이언트끼리 연결을 할 수 있게 되는 것이다.

STUN과 TURN

이 개념을 알기 전에 NAT이라는 개념을 먼저 알아야 한다.

NAT(network Address Translation)이란?

사설 IP를 공인 IP로 변경하는데 필요한 주소 변환 서비스이다.
→ 라우터 등의 장비를 사용하여 다수의 사설 IP를 공인 IP 주소로 변환하게 된다.
무슨 말이냐면,
회사망/내부망(LAN) 은 Private IP이기 때문에 다른 네트워크에서는 통용되지 않는다.
그렇기 때문에 우리가 네트워크에서 데이터를 주고받기 위해서는 Public IP 가 필요한데, NAT는 Private IP를 Public IP로 1대1 대응시켜 변환하는 장치다.
그렇다면 STUN, TURN은 뭘까
P2P로 연결하기 위해서도 역시 상대방의 Public IP 주소가 필요하다. 하지만 클라이언트는 보통 방화벽이나 NAT 뒤에서 보호받고 있기 때문에 Public IP 주소를 알기 어렵다.
그래서 WebRTC에서는 STUN 서버 사용을 권장하고 있다.
서로간의 연결을 위한 정보를 공유하여 P2P 통신을 가능하게 해주는 것이 Stun/Turn Server이다.

STUN은 클라이언트-서버 프로토콜이다. STUN 클라이언트는 사설망(private network)에 위치하고, STUN 서버는 인터넷망에 위치한다. STUN 클라이언트는 자신의 공인 IP 주소를 확인하기 위해 STUN 서버에게 요청하고, STUN 서버는 STUN 클라이언트가 사용하는 공인 IP 주소를 응답한다.

TURN 서버는 아직 확실하게 이해가
되지 않아서 하단에 첨부된 노션 상에만 적어놨고, 여기엔 적지 않겠다. 궁금하면 노션으로 타고 들어가서 볼 수 있어요

사설망(private network): 인터넷 어드레싱 아키텍처에서 사설 IP 주소 공간을 이용하는 네트워크

어느 정도 용어 정리는 된 것 같으니 본격적으로 시그널링 과정을 설명해보겠다

처음에 텍스트로만 적혀진 글을 보고 공부했었는데, 이 사진을 보니까 흐름이 어느 정도 이해가 됐었다

1. Session Descriptions 교환하기

먼저, Peer A가 이미 접속해 있었다고 가정해보자.
그 후 Peer B가 들어오면, B가 A에게 “나 들어왔어~” 라고 알린다.
그럼 A는 createOffer()를 통해 offer를 만든다. 이 offer는 위에서 말한 SDP를 의미한다.
내 SDP를 setLocalDescription을 통해 로컬 SDP로 설정해주어야 한다.
생성한 SDP를 상대 B에게 시그널링 서버를 통해 보내준다.
B는 전달받은 SDP를 setRemoteDescription을 통해 RemoteDescription 으로 설정해야 한다.
B는 리모트에 A의 SDP를 설정하고 나면 createAnswer()를 통해 A에게 보낼 SDP를 똑같이 생성한다.
1. 위에서 생성한 createOffer와 같은 과정이다.
마찬가지로 A에게 Answer를 보내주고, A는 받은 answer를 RemoteDescription 으로 설정하게 된다

2. Ice Candidate 교환하기

SDP를 서로 교환한 후에, 두 피어들은 ICE candidate (ICE 후보)들을 교환하기 시작한다.
상대와 통신할 수 있는 candidate를 찾기 시작하는 과정이다.

각 클라이언트는 현재 내 네트워크 정보가 확보되면 실행될 callback을 onicecandidate 핸들러에게 전달한다. 두가지 방법이 있다.

peerConnection.addEventListener('icecandidate', (e) => {});
peerConnection.onicecandidate = (e) => {};

내 네트워크 정보가 확보되면 시그널링 서버를 통해 상대 Peer에게 내 ice candidate를 전송한다.
상대 Peer의 ice candidate가 도착하면, 클라이언트에 저장해두었던 상대 Peer Connection을 찾아서 상대의 addIceCandidate() 로 candidate를 설정해주어야 한다.
1. 이 작업은 서로가 모든 IceCandidate를 교환할 때까지 진행된다.
IceCandidate를 모두 교환하고 나면, addEventListener의 track 이벤트를 통해 상대의 stream을 받아올 수 있다.

peerConnection.addEventListener('track', (e) => {});
peerConnection.ontrack = (e) => {};

흐름은 여기까지! 이제 실전으로 들어가서 코드를 작성해보자.
사실 흐름만 읽었을 때는 이게 무슨 말인가 싶을수도 있는데, 역시 직접 코드를 작성해보면서 배우는게 좋은 것 같다.

Server 코드

import { Server } from 'socket.io';

function signalingSocketServer(io: Server) {
  const signaling = io.of('namespace');

  signaling.on('connection', (socket) => {
    socket.on('join', () => {
      const senderId = socket.id;
      socket.broadcast.emit('join', senderId);
    });

    // senderId : offer를 보내기 시작한 사람의 id, receiveId : offer를 받는 사람의 id
    socket.on('offer', ({ receiveId, offer }) => {
      const senderId = socket.id;
      socket.to(receiveId).emit('offer', { senderId, offer });
    });

    socket.on('answer', ({ receiveId, answer }) => {
      const senderId = socket.id;
      socket.to(receiveId).emit('answer', { senderId, answer });
    });

    socket.on('ice-candidate', ({ receiveId, candidate }) => {
      const senderId = socket.id;
      socket.to(receiveId).emit('ice-candidate', { senderId, candidate });
    });

    socket.on('disconnect', () => {
      const senderId = socket.id;
      socket.broadcast.emit('disconnected', senderId);
    });
  });
}

export default signalingSocketServer;

위와 마찬가지로 A가 있는 상황에서 B가 들어온다고 가정하자.
join
B가 들어오면 socket.broadcast를 통해 이전이 이미 접속해 있던 멤버들에게 B의 소켓 아이디를 알려준다.
socket.broadcast : 나 자신을 제외한 모두에게 이벤트를 보냄
https://socket.io/docs/v3/broadcasting-events/

offer
A가 B에게 보낸 offer를 받아서 socket.to 를 통해 B에게만 offer를 전달해준다.
클라이언트에서 받을 사람의 Id를 보내주어야 한다.

answer
B가 생성한 answer를 받아서 socket.to 를 통해 A에게만 보내준다.
마찬가지로 클라이언트에서 받을 사람의 Id를 보내주어야 한다.

ice-candidate
이 과정은 A와 B 모두 보내게 된다. icecandidate 이벤트로 등록해놓은 이벤트 핸들러 안에서 이 소켓 이벤트가 발생할 것이다. 마찬가지로 전달받은 candidate를 각각 상대방에게 보낸다.
서버는 단지 시그널링을 위한 용도이기 때문에 매우 간단하다.

Client 코드

const socket = io(env.SERVER_PATH + 'namespace');

const [participants, setParticipants] = useState<Map<string, MediaStream>>(new Map(),);
const myStreamRef = useRef<MediaStream | null>(null);
const myVideoRef = useRef<HTMLVideoElement | null>(null);
const peerConnectionRef = new Map();

const setMyStream = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true,
  });
  myStreamRef.current = stream;

  if (myVideoRef.current) {
    myVideoRef.current.srcObject = myStreamRef.current;
  }
};

/**
 * Peer와 연결하기
 * @param peerId 연결할 피어의 Id
 * @returns 새로 생성한 peerConnection 객체
 */
const setPeerConnection = (peerId: string) => {
  const peerConnection = new RTCPeerConnection({
	iceServers: [
	  {
	    urls: ['stun:stun.l.google.com:19302'],
	  },
	],
  });

  /* 이벤트 핸들러: Peer에게 candidate를 전달 할 필요가 있을때 마다 발생 */
  peerConnection.addEventListener('icecandidate', (e) => {
    const candidate = e.candidate;
    if (!candidate) return;

    socket.emit(RTC_MESSAGE.ICE_CANDIDATE, {
      receiveId: peerId,
      candidate,
    });
  });

  /* 이벤트 핸들러: peerConnection에 새로운 트랙이 추가됐을 경우 호출됨 */
  peerConnection.addEventListener('track', (e) => {
    if (participants.has(peerId)) {
      return;
    }

    const [peerStream] = e.streams;

    // 새로운 peer를 참여자에 추가
    setParticipants((prev) => {
      const newState = new Map(prev);
      newState.set(peerId, peerStream);
      return newState;
    });
  });

  myStreamRef.current?.getTracks().forEach((track) => {
    if (!myStreamRef.current) return;

    // 다른 유저에게 전달해주기 위해 내 미디어를 peerConnection 에 추가한다.
    // track이 myStreamRef.current(내 스트림)에 추가됨
    peerConnection.addTrack(track, myStreamRef.current);
  });

  return peerConnection;
};

useEffect(() => {
  setMyStream();

  /* 유저 join */
  socket.emit(RTC_MESSAGE.JOIN);

  /* 새로 들어온 유저의 socketId를 받음 */
  socket.on(RTC_MESSAGE.JOIN, async (socketId) => {
    const peerConnection = setPeerConnection(socketId);

    peerConnectionRef.set(socketId, peerConnection);

    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);

    socket.emit(RTC_MESSAGE.OFFER, {
      receiveId: socketId,
      offer,
    });
  });

  /* offer 받기 */
  socket.on(RTC_MESSAGE.OFFER, async ({ senderId, offer }) => {
    const peerConnection = setPeerConnection(senderId);

    peerConnectionRef.set(senderId, peerConnection);

    await peerConnection.setRemoteDescription(offer);

    const answer = await peerConnection.createAnswer();
    await peerConnection.setLocalDescription(answer);

    /* answer 전송 */
    socket.emit(RTC_MESSAGE.ANSWER, { receiveId: senderId, answer });
  });

  /* answer 받기 */
  socket.on(RTC_MESSAGE.ANSWER, async ({ senderId, answer }) => {
    const peerConnection = peerConnectionRef.get(senderId);
    if (!peerConnection) {
      return console.log('Peer Connection does not exist');
    }

    await peerConnection.setRemoteDescription(answer);
  });

  /* ice candidate */
  socket.on(RTC_MESSAGE.ICE_CANDIDATE, ({ senderId, candidate }) => {
    const peerConnection = peerConnectionRef.get(senderId);
    if (!peerConnection) {
      return console.log('Peer Connection does not exist');
    }

    peerConnection.addIceCandidate(candidate);
  });

  /* disconnected */
  socket.on(RTC_MESSAGE.DISCONNECTED, (senderId) => {
    peerConnectionRef.delete(senderId);

    setParticipants((prev) => {
      const newState = new Map(prev);
      newState.delete(senderId);
      return newState;
    });
  });

  return () => {
    socket.off(RTC_MESSAGE.JOIN);
    socket.off(RTC_MESSAGE.OFFER);
    socket.off(RTC_MESSAGE.ANSWER);
    socket.off(RTC_MESSAGE.ICE_CANDIDATE);
    socket.off(RTC_MESSAGE.DISCONNECTED);
  };
}, []);

const streams = Array.from(participants.values());

return (
    <ul>
      {streams.map((stream) => (
        <li key={stream.id}>
           <Video stream={stream} />
        </li>
      ))}
    </ul>
);

모듈화는 잘 안돼있는데 리팩토링을 다시 해야한다 ㅎㅎ..
사실 이 코드는 버그가 좀 있다.. 현재 버그가 발생한 위치는 찾았으나 원인은 찾지 못한 상황이다. offer, answer, candidate 과정을 통해 SDP를 모두 설정은 해주었으나 peerConnection.addEventListener('track', (e) => {}) 이 부분이 호출되지 않는 것을 발견했다..
내가 이해한 바로는 track 이벤트는 peerConnection.addTrack 가 실행될 때 발생하는 것이다. 상대방이 peerConnection 에 본인의 새로운 track을 추가하게 되면 track 이벤트가 발생하게 되고, 핸들러가 실행되면서 상대의 stream을 가져올 수 있는 것이다.
하지만 track이 올바르게 추가된 것을 확인했으나 가끔 핸들러에 들어가지 않는 경우가 있더라.. 만약 버그를 발견하신 분이 있다면 댓글로 꼭꼭 알려주세요 ㅠㅠ

아무튼 버그가 있더라도 흐름은 맞으니까 다시 설명으로 돌아가서..

setMyStream

내 비디오 스트림을 설정하는 함수다. myStreamRef 에는 MediaStream 타입인 스트림을 걸어주고
myVideoRef 에는 myVideoRef.current.srcObject 에 myStreamRef의 스트림을 넣어주면, video 태그에 아래처럼 걸어주면 내 비디오를 볼 수 있다.

<video ref={myVideoRef} />

setPeerConnection

Peer Connection을 설정해주는 함수다.

먼저, new RTCPeerConnection 로 새로운 피어 객체를 생성해주고, 스턴 서버를 설정해준다. 구글에서 제공해주는 서버를 사용하면 되는 것 같다.
icecandidate 이벤트를 등록해준다. 이 이벤트리스너는 peer connection이 candidate를 전달해야 할 필요가 있다고 판단될 때마다 발생하게 된다.
1. e.candidate 로 candidate를 받아온 후, 소켓 emit 이벤트를 걸어준다. 내 candidate를 상대에게 보내는 과정이다.
track 이벤트를 등록해준다. 이 이벤트 리스너는 위에서 말했던 것처럼 상대방이 peerConnection 에 본인의 새로운 track을 추가하게 되면 발생하게 된다.
1. e.streams로 상대의 stream을 받아온 후, UI에 뿌려주기 위해 useState로 관리중인 participants에 새로운 스트림으로 추가해준다.
getTracks() : 종류에 관계없이 스트림의 트랙 set에 있는 모든 MediaStreamTrack 객체를 반환한다.
1. 다른 유저에게 내 스크림을 전달해주기 위해 peerConnection에 내 스트림을 addTrack으로 담는다.

이제 useEffect 안으로 들어와보자.

먼저 setMyStream 을 호출해 내 미디어를 먼저 설정해준다.
join 이벤트로 내가 들어왔다는 것을 이미 접속해 있던 모든 유저들에게 알린다.
socket.on(RTC_MESSAGE.JOIN) : 그럼 누군가는 이 이벤트를 받게 될 것이다.
1. 누군가 들어왔으니 새로운 peer connection을 생성해주어야 한다.
2. peerConnectionRef에 socketId를 키 값으로 peer connection을 저장해두자. socketId의 상대와 맺은 connection이 이거다! 라는 것을 구분해주기 위함이다.
3. answer와 candidate를 받을 때, 상대와 맺은 peer connection에 받은 answer와 candidate를 추가해주어야 하기 때문에 peerConnection을 저장해둘 필요가 있다.
socket.on(RTC_MESSAGE.OFFER) : 상대방의 offer를 받는 부분이다.
1. 여기서 중요한 것은, offer를 받으면 새로운 peerConnection을 생성해야 한다는 것이다.
2. Join할 때 생성한 peer connection은 A의 것이고, offer를 받는 이벤트는 B가 받을 것이므로 B도 peerConnection을 생성해야 한다
  1. → Peer는 1대1로 맺는 거기 때문에 A,B,C가 있을 때 A-B, A-C, B-C 이렇게 Peer Connection이 생성되어야 한다. Peer Connection 객체는 사실 상 6개인 셈이다.
  2. 각자의 Peer Connection에 상대의 정보를 저장해두어야 하므로..
3. 이제, setRemoteDescription 로 받은 offer 를 리모트에 넣어둔다.
4. 이제 전달해줄 answer를 생성하고 answer는 내 것이므로 local description에 설정 후 socket의 answer 이벤트로 보내준다.
socket.on(RTC_MESSAGE.ANSWER) : 상대방의 answer를 받는 부분이다.
1. 파라미터로 보낸 사람의 socketId를 받아야 한다. 기존에 on(’join’) 에서 저장해두었던 peer connection에서 socketId를 기준으로 누구와 맺은 커넥션인지 찾은 후, 그 커넥션에 리모트로 answer를 추가해준다.
socket.on(RTC_MESSAGE.ICE_CANDIDATE) : 상대방의 candidate를 받는 부분이다.
1. 마찬가지로 파라미터로 보낸 사람의 socketId를 받고, 누구와 맺은 커넥션 인지 찾은 후 addIceCandidate 로 candidate를 추가해준다.
socket.on(RTC_MESSAGE.DISCONNECTED) : 상대방이 나갔을 경우 peer connection과 participants에서 상대방을 삭제한다.

내가 이해한 내용으로 주저리주저리 정리해보았는데 나만 아는 언어로 정리할 거 같기도 하고.. 나름 나중에 봐도 쉽게 이해할 수 있도록 자세하게 적어놨다 ..!
노션에 정리한 링크도 첨부한다.
https://saber-ash-4ab.notion.site/React-TypeScript-WebRTC-1defea4ed489417fb4ce9c7a047291f7

React+TypeScript+WebRTC 구현하기

부스트캠프 웹모바일 멤버십 그룹 프로젝트에서 WebRTC를 다루게 됐다. 본격적인 작업에 들어가기 앞서 WebRTC에 대해 전혀 무지한 상태였기에 미리 학습을 해보았다

saber-ash-4ab.notion.site

레퍼런스

https://dareun.github.io/webRTC 를-이용한-화상회의-개발
https://velog.io/@gojaegaebal/210307-개발일지90일차-정글-나만의-무기-프로젝트-WebRTC란-무엇인가2-ICE-SDP-Signalling
https://medium.com/@hyun.sang/webrtc-webrtc란-43df68cbe511
https://kbs77.tistory.com/102
https://surprisecomputer.tistory.com/14
https://chuun92.tistory.com/39
https://web.dev/webrtc-infrastructure/

[부스트캠프] 부스트 컨퍼런스 후기

ruby_s — Sun, 23 Oct 2022 21:45:16 +0900

10월 20일 목요일에 네이버 1784로 부스트 컨퍼런스를 다녀왔다 내가 네이버 신사옥을 가보다니 .. 이런 경험을 또 언제 해볼까 너무 설렜다 ㅎㅎ
사실 후기 이런거 진짜 못쓴다ㅠ 글이라곤 쓸 줄 모른다.. 한정판 굿즈를 준다는 소식에 한번 아무말이나 끄적여보려고 한다 :)

점심시간에 같은 청주 사시는 경연님과 "그라도" 라는 이태리 식당에 방문했다 마스터 조은님이 추천해주신 맛집이라 궁금해서 가봤는데, 저 매콤 살라미 파스타? 가 엄청 맛있었따 뭔가 특유의 맛이 났는데 되게 비싸서 가끔 먹을 수 있을 것 같다 ㅎㅎ
언젠가 네이버로 간다면 자주 가야지
길을 헤매서 주변 분들에게 여쭤봐서 겨우겨우 찾아간 맛집이었는데, 동네 분들은 다들 아시는 맛집인 것 같더라!

들어가서 방문증을 겟! 했당 방문증을 목에 거니까 뭔가 사원이라도 된 느낌이었다 ㅎ 왠지 멋있길래 빠르게 사진 4장 찍었당
사실 바로 전날도 네이버 1784 방문했었다 ~3~ 커넥트재단 홍보영상에 출연자로 선정돼서 영광스럽게도 이틀 연속 신사옥에 방문했다 .. 꺅 그래서 덕분에 외롭지 않았다 전날 같이 촬영했던 분들이랑 인사도 하고, 챌린지 멤버십 하면서 만났던 분들도 꽤 만났다

와서 명찰?을 달고 간식 선물을 겟또했다 :) 집에 들고가서 엄청 맛있게 묵었따 다른 분들이랑도 기념으로 명찰 사진 !!
명찰에 보면 알파벳 스티커가 하나씩 붙어있는데 첨에 뭔지도 모르고 내이름이 신씨니까 그냥 S 찾아 붙였는데 알고보니 알파벳 별로 네트워킹 시간에 팀이 나뉘는 거였다 ..!
알파벳이 S라서 Swift 분들이 많았다 되게 재밌는 분들이 많았다 ㅋㅋㅋㅋㅋ 최근 내돈내산한 물건을 공유해보는 시간이었는데 한분이 쿠팡에서 산 고추장을 추천해주셔서 너무 웃겼다 ㅋㅋㅋㅋㅋㅎㅎ

2시 반부터 6시까지 알차게 연사도 듣고, 테크톡도 들으면서 쉬는시간에는 아는 분들이랑 인사도 나누고 알차게 보냈다
명찰 뒷면에 조은님의 싸인도 받았다 ㅎㅎ 취뽀기원이라는 멘트를 적어주셔서 기운이 너무너무 좋다 !!

로봇들도 만나고 마스터님과 사진도 찍고 마지막으로 캠퍼들이랑 셀카도 찍으면서 마무리 :) 집와서 보니까 생각보다 사진이 얼마 없었다ㅠ

후기 이렇게 쓰는거 맞는지 모르겠다 ㅎ 아무튼 재밌었다ㅎ

네이버 부스트캠프 웹/모바일 7기 자소서 & 코테 최종 합격 후기

ruby_s — Sun, 17 Jul 2022 00:20:00 +0900

부스트캠프 최종 합격까지 기나긴 여정이였다.. 하루에 백준 3~4문제씩 풀며 부스트캠프 준비에만 매달렸다
백준 문제 레벨은 골드 4-5 ~ 실버 1-2 정도로 꾸준히 풀었다
물론 프로그래머스도 풀었다 프로그래머스는 Lv.1 ~ 2문제는 이미 다 풀어둔 상태라 풀었던 문제를 다시 풀면서 준비했다
지난 기수나 지지난 기수 후기를 보면 코테 문제가 그리 어렵지 않고 CS가 요구된다는 후기가 대부분이라 CS공부도 조금(?)했다
사실 CS가 너무 광범위하기도 하고 1차 코테가 인터넷 검색이 가능했기 때문에 cs50? 강의 한 두번씩 훑어보는 정도로만 공부했다

자소서

지원 질문 (공백 포함 400자 내외)

1. 왜 개발자가 되고 싶은지 부캠에서 이루고자 하는 목표와 함께 서술
2. 소프트웨어 개발을 더 잘하고 싶어서 시도했던 경험과 그 과정에서 어떤 노력을 기울였는지 서술
3. 자기주도적으로 사고하고 행동한 구체적인 과정과 그 경험이 현재 나에게 미친 영향을 중심으로 서술
4. 열린 사고로 동료와 협력한 경험을 구체적인 과정과 그 경험이 현재 나에게 미친 영향을 중심으로 서술
자소서 문항은 4문항이였고, 어떻게 풀어썼는지 1번 문항부터 팁을 공유해보도록 하겠다
1번은 내 멋쟁이 사자처럼 활동을 엮었다. 그때 프론트엔드에 관심이 생김을 시작으로 이유와 그 이유로 인해 어떤 개발자로 성장하고 싶다!
이런식으로 총 3개의 개발자로서의 목표?를 나열하며 그 목표를 부캠에서 어떻게 이루고 싶은지 표현했다
2번은 알고리즘 문제를 풀면서 성장한 환경을 풀어썼다. 그냥 알고리즘을 푼게 아니라 코드리뷰나 공부한 방식을 말하면서 최종적인 결과물? 성취?를 뽐내며 작성했다.
코드 리뷰에서는 뭘 얻었고, 이런 공부하는 방식이 뭐가 좋은지 등 문장마다 그 근거를 덧붙여 썼다.
3번은 현재 참여하고 있는 프로젝트가 굉장히 성장에 있어 많은 영향을 준 프로젝트라 그 내용을 작성했다. 거기서 사용한 기술을 어떻게 접근했고 분석했는지, 그 과정에서 발생한 이슈를 예로 들면서 어떻게 해결했는지, 최종적으로 어떤 사고방식을 가질 수 있었는지
이렇게 작성했당
4번도 현재 참여하고 있는 프로젝트를 중심으로 풀어냈다. 협업 과정과, 그 과정을 통해 얻은 것, 성장한 것을 중심으로 작성했다.

1차 코딩 테스트

1차 코테는 CS 10문제 알고리즘 2문제로 출제되었다. 후기에도 그렇듯 예상했다.
시간은 100분이 주어졌고, 중간중간 문제 사정 상 시간이 추가되기도 했다. cs를 먼저 풀었고 한 40분을 cs 푸는데 시간을 썼고 나머지 1시간 동안 알고리즘을 풀어야 했다.
cs가 생각보다 어려웠고, 전공자임에도 인터넷 검색이 참 고마웠다.. 아는 문제도 있긴 했지만, 알던 것도 막상 답으로 선택하려니 망설여져서 인터넷 검색을 무조건 했다..

알고리즘은 와우..! WOW ..!
분명 후기를 보면,, 백준 기준 난이도 실버 3 ~ 4이거나 프로그래머스 Lv.2 중에서도 쉬운 편으로 나왔다고 했다.. 그랬다고 ..!!!!!!!!!!!
일단 1번 문제는 나름 풀만 했다.. 한 30분? 안에 푼것 같다. 근데 절대 실버 정도의 문제는 아니고 골드 5? 정도로 보면 될 거같다. 근데 제출을 하니까 테케 하나가 틀렸다 ㅠ
그래서 0.9솔..
사실 1차 끝나고 5일 뒤 2차 코테라 문제를 회고할 틈도 없이 준비하냐고 1번 문제가 뭐였는지 기억이 잘 안난다..ㅎ 2번 문제는 아예 손도 못댔다.. 문자열로 고통받는 문제였다 애초에 문제 이해가 안되서 하아아아안참 생각하다 보니까 시간이 다 갔더라..
그래서 그냥 1번이라도 제대로 풀자 하는 마음에 2번을 과감히 버리고 1번 예외 처리를 위해 시간을 쏟았다.
하지만 결국 0.9솔로 제출했다ㅠㅠ

그래도 다행히 합격 메일을 주셨다 ㅠㅠㅠㅠㅠㅠ cs를 전부 맞은걸까..?

2차 코딩 테스트

2차는 알고리즘 3문제에 서술형 2문제였다.. 안내 메일을 받고 흠칫했다 서술형이요 •••?!
한번도 서술형을 낸 적이 없던 것 같은데 진짜 예상치 못한 상황이였다..
아무튼 1번 문제는 나에게 가혹한 문제였다.. 다른 분들 후기를 들어보니 1번은 쉬웠다고 했다
하지만 내가 매우 약한 유형의 문제였다.. 이 문제도 문자열이다. 분명 내가 보기에도 쉬웠다 .. 쉬웠는데.. 시도조차 못해봤다
1번에서 거의 1시간을 썼지만 아무리해도 방법이 생각나지 않았고 그때부터 직감했다.. 이번 코테는 날라갔구나~
그래도 포기를 이르니까 2번을 풀자 ! 하고 파이팅있게 2번 문제를 본 순간 아 이건 탈주해야하나? 이 생각이 들었다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
쌩구현 문제였다 이 문제도 1차 코테처럼 문자열로 괴롭히는 문제다. 코드가 200줄이 그냥 넘어갔다 내가 작성하면서도 이게 맞아..? 탈주할까..? 이 생각이 수십번 들었다

물론 생각만하지. 쫄보라 탈주같은거 못한다.

그래도 난 열심히 풀었다.. 3번 문제를 갔더니 ..? 그 문제도 200줄이 넘어가네 ..? 난 이미 망함을 직감했지만 개같은 코드라도 제출하자. 내 열정을 알아주겠지..ㅋㅋㅋㅋㅋㅋ
테케가 자꾸 틀렸지만 남은 시간은 5분이였다..
그냥 서술형 몇자라도 끄적이자 하는 마음으로 서술형으로 넘어갔다..
서술형은 앞의 문제를 토대로 한 유형의 문제였다. 근데 서술형을 처음 본 순간 남은 시간은 5분이였다. 하지만 3번 문제에 대한 미련을 버릴 수가 없었다.. 분명 로직이 맞는데 이상했다.
그래서 또 서술형을 버리고 ㅋㅋㅋㅋㅋㅋ 3번을 다시 제대로 보기로 했다. 다행히도 원인을 찾았고 결국 테케 전부 맞은 채로 2솔? 로 최종 제출을 했다.
코테가 끝난 후 다른 분들 후기를 들어보니 다들 200줄이 넘어갔다고 하더라..
최종 결과, 대략 10대 1의 경쟁률을 뚫고 합격 !!

이번 코테 준비까지 합치면 거진 270문제 정도 풀었다.. ㅎ
난 멍청하기 때문에 무조건 많이 풀고 깔끔하게 다시 리팩토링 하면서 머리에 익히는게 답이라고 생각했다 ㅋㅎ
밑에 사진은 나름 뿌듯해서 ... (?)

왼: 프로그래머스, 우: 백준

앞으로 부캠 포스팅을 자주 기록해놓을 생각이다.. 바빠서 잘 될 지 모르겠지만 값진 기회를 얻었으니 한번 죽기살기로 해봐야겠다
열심히 하겠습니다

[실리콘 밸리 인턴십] 1주차 회고

ruby_s — Thu, 14 Jul 2022 18:23:03 +0900

6월 27일 - 7월 1일까지 첫째주 실리콘 밸리 인턴십을 시작했다

처음 배정 받은 팀을 확인했더니 내가 리더였다..! 하지만 첫날 팀원 2명이 탈주하게 되고.. 남은 4명이서 구현이 힘들 것 같아 라이언 멘토님께 문의를 드렸더니 팀 조정이 필요한 것 같다고 말씀하셨다

결국 팀 D와 같이 작업을 하게 되었고 우리는 총 8명으로 이루어진 대규모 팀이다 ..

나와 다른 한 분이 프론트엔드 개발을 맡았고, 백엔드 3명, AI 3명 이렇게 나눠졌다.

첫날은 주제를 정하고, 우리는 주변환경에 따른 노래 추천 서비스를 웹사이트로 제작하기로 했다

유저 시나리오

1. 유저가 사진을 업로드한다.
2. 선호하는 장르를 하나 선택한다.
3. 사진과 장르를 조합한 어울리는 노래 추천 결과를 조회한다.
4. 원하는 음악을 선택한다.
4-1. 선택한 음악을 재생한다
4-2. 선택한 음악을 마이 플레이 리스트에 저장한다. -> 단, 로그인 시에만 이용 가능
5. 마이 플레이 리스트 페이지에서 유저가 저장한 음악을 조회한다.

나는 첫주에 메인 페이지 쪽 작업을 맡았고, 이미지 업로드 기능과 노래 결과가 조회되는 테이블을 만들고, 선택 재생, 전체 선택/해제, 플레이 리스트 저장 기능을 구현했다.

현재까지 구현된 작업물

이거 GIF 파일인데 이미지로만 보이네..

넥스터즈 21기 면접 후기

ruby_s — Sun, 5 Jun 2022 01:36:08 +0900

오늘 2022년 6월 4일 토요일. 넥스터즈 면접을 봤다 !! 30-35분 정도 진행이 됐고 그룹 면접인데 나 포함 2명이였다. 3명 정도는 될 줄 알았는데 면접자 2 면접관 3 이라 놀랐다
사실 난 대학교 올 때도 6교과로 와서 인생에 면접을 본 경험이 없다 그냥.. 없어 그냥..
이번에 처음으로 제대로 준비해서 면접을 봤는데 잘 본건지는 모르겠다 ㅎ 말을 버벅였다ㅠ 근데 사실 예상 질문만 38개를 뽑았는데 그 중 하나? 둘? 그정도 나온듯 ㅋ.. 한번쯤 생각해볼만한 질문인데 예상 못한 질문들이 많았다.. 생각나는 질문들을 정리해보자면

1. Uiux에 관심이 많다고 하셨는데 디자이너와 의견조율이 절대 되지 않는다면 어떻게 할 것인지?

➡️ 처음에는 왜 그렇게 생각하시는 지 디자이너 분의 의견을 물어보고 납득이 간다면 합의를 볼 거 같다고 답변을 했는데, 그래도 절대로 조율이 되지 않는다는 전제 하에 말씀을 해달라고 하셨다. 고민을 좀 하다가.. 그럼 다른 팀원들의 의견도 있을테니 그 사람들 의견도 물어보고, 그외 관련없는 사람들에게도 물어봐서 합의점을 찾아야 될 것 같다. 라고 답변했다. 나름 괜찮게 대답한 것 같다.

2. 넥스터즈에서 프로젝트 외에 따로 도전해보고 싶은 것이 있는지

➡️ 타입스크립트나 리액트쿼리, 그래프 큐엘 등등 주제를 딱 정해서 스터디를 하고싶다. 는 식으로 답변함

3. 본인이 의도치않게 팀에 불이익을 주는 사람이 됐다면 어떻게 할 것인지

➡️ 내 질문이 아니였음.

4. 다양한 프레임워크를 사용해 본 것 같은데, 뷰나 장고의 장점에 대해 말해 줄 수 있냐

➡️ 리액트는 라이브러리고. 뷰는 프레임워크라 커스텀의 자유도가 떨어지긴 하지만, 러닝커브가 낮다. 자바스크립트를 잘 몰라도 뷰 문법으로 잘 구현할 수 있기 때문에 장점이다. 장고는 사실 제가 프론트 엔드다 보니까 집중적으로 공부하진 않아서 잘 모르겠다.. 라고 답변했는데 사실 장고는 백엔드에서 다루다보니까 깊이있게 공부를 하진 않았다.. 나는 그때 프론트엔드도 잘 못했었으니까..

5. 넥스터즈에서 본인이 어떤 강점이 될 거같냐

➡️ 다른 사람 의견을 많이 듣는 것을 좋아함. 많이 듣고 반영해서 리팩토링 하는 것을 좋아한다. 아까도 말했다시피 코드리뷰를 그래서 좋아하는 것 같다. 는 식으로 답변했다. 처음에 자기소개할 때 코드리뷰를 좋아한다고 말했었는데 그걸 엮어봤다.

6. 기술스택을 정할 때 따로 정하는 기준이 있냐

➡️ 주로 리액트를 썼었는데, 도전을 좋아하는 편이라 뷰가 어떤 점이 리액트에 비해 좋은지 이런게 궁금해서 써보는 편이다. 이렇게 답변을 했는데 생각해보니까 약간 팀원들의 기술스택을 고려해서 결정을 한다. 이런 식의 답변을 원했던 게 아니였나 이제서야 생각이 든다..

7. 살면서 실패한 경험 말해달라

➡️ 데베시 수업에서 했던 프로젝트를 말해봤다. 백엔드 측에서 연동이 잘 안돼서 제가 그걸 수정을 해서 알려주었다. 프로젝트가 시간적 제한이 있다보니까 완성을 해야되지만 완벽하진 못해서 안되는 부분을 mock데이터로 구현을 할 수 밖에 없던 경험이 있다.
라고 했더니
➡️ 그럼 본인이 너무 주가 돼서 힘들지 않냐는 질문이 들어옴
그래도 프로젝트는 완성을 해야하기 때문에 제가 좀 할 것 같다. 그리고 저는 오히려 그걸 즐긴다. 새로운 것을 배우는 데서 성장도 할 것이고. 뭐 이런식으로 답변했다.

딱 이정도만 생각난다. 만족스러운 면접은 아니였다 ㅠ 준비한 예상질문들이 안나와서 내가 넥스터즈에서 뭘 하고싶은지 이런 강점을 많이 표출하지 못한 것 같다.. 결과는 일주일 뒤 금요일이나 토요일에 바로 알려주신다고 한다 좋은 결과있길

[백준-2502] 떡 먹는 호랑이 | node.js | silver1

ruby_s — Thu, 2 Jun 2022 15:29:30 +0900

문제

https://www.acmicpc.net/problem/2502

2502번: 떡 먹는 호랑이

첫줄에 첫 날에 준 떡의 개수 A를 출력하고 그 다음 둘째 줄에는 둘째 날에 준 떡의 개수 B를 출력한다. 이 문제에서 주어진 D, K에 대해서는 항상 정수 A, B (1≤ A ≤ B)가 존재한다.

www.acmicpc.net

풀이

function solve() {
  const aDp = [1, 0];
  const bDp = [0, 1];

  for (let i = 2; i < d; i++) {
    aDp[i] = aDp[i - 1] + aDp[i - 2];
    bDp[i] = bDp[i - 1] + bDp[i - 2];
  }
  const aCoef = aDp[d - 1];
  const bCoef = bDp[d - 1];

  for (let i = 1; i <= k; i++) {
    const remain = k - aCoef * i;
    if (remain % bCoef === 0) {
      console.log(`${i}\n${remain / bCoef}`);
      break;
    }
  }
}

const filePath =
  process.platform === "linux" ? "/dev/stdin" : "백준/silver/2502/testcase.txt";
const input = require("fs")
  .readFileSync(filePath)
  .toString()
  .trim()
  .split("\n");
let [d, k] = input[0].split(" ").map((el) => +el);
solve();

이 문제는 그냥 수학식이다.
처음 두 값이 A, B니까 두번째 값은 A+B, 세번째 값은 B+A+B => A+2B, 네번째 값은 2A+3B, 다섯번째 값은 3A+5B •••

이 로직을 dp를 이용해서 구하면 마지막 D번째에 오는 숫자들이 각각 A와 B의 계수가 될 것이다. 그럼 여기서부터 A값에 1부터 쭉 대입해보면서 B값이 올바른 정수로 나올 경우 답을 출력하고 break로 종료하면 끝!

디바운싱과 쓰로틀링

ruby_s — Wed, 1 Jun 2022 23:18:02 +0900

잘못된 내용이 있다면 댓글로 알려주세요 !

디바운싱과 쓰로틀링은 디바이스에 무리를 주지 않기 위해 사용하는 프로그래밍 기법이다. 일종의 최적화라고 보면된다. 그렇다면 각각의 의미를 알아보자.

디바운싱(debouncing) : 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식이다. 주로, 그룹에서 처음이나 마지막으로 실행된 함수를 처리하는 방식으로 사용된다.
쓰로틀링(throttling) : 연이어 발생한 이벤트에 대해, 일정한 delay를 포함시켜 연속적으로 발생한 이벤트는 무시하는 방식을 뜻한다. 즉, delay시간동안 호출된 함수는 무시하는 방식이다.

디바운싱

예시를 들어 쉽게 설명해보겠다. 식당에서 주문을 할 때,

첫번째 방법

1. 고객: 콜라 주문이요!
2. 직원: 콜라 주문넣기
3. 고객: 파스타 주문이요!
4. 직원: 파스타 주문넣기
5. 고객: 스테이크 주문이요!
6. 직원: 스테이크 주문넣기

두번째 방법

1. 고객: 콜라, 파스타, 스테이크 주문이요!
2. 직원: 콜라, 파스타, 스테이크 주문넣기

당연히 두번째 방법이 훨씬 효율적이다. 이렇게 주문이 끝날 때까지 듣고 있다가 마지막 요청이 완료된 후 주문을 넣는 것이 디바운싱의 원리이다.

디바운싱 사용예시

스크롤 이벤트로 예시를 들어보겠다. 먼저 디바운싱 기법을 사용하지 않았을 때 예시를 보자.

디바운싱 적용 X 코드

<!DOCTYPE html>
<html>
  <body>
    <div id="main" style="height: 300vh">
      <div style="position: fixed">
        <h3>아무 처리도 하지 않았을 경우</h3>
        <div>
          <label>이벤트 발생 : </label>
          <span id="count">0</span>
        </div>
      </div>
    </div>
  </body>
  <script>
    window.addEventListener("scroll", function (e) {
      console.log("스크롤 이벤트 발생");
      const count = document.getElementById("count");
      count.innerText = parseInt(count.innerText) + 1;
    });
  </script>
</html>

스크롤 이벤트가 발생하는 모든 순간마다 함수가 호출되고 count가 계속 늘어나게 된다. 만약 이 함수가 좀 더 무거운 작업을 하게 된다면 스크롤을 할 때마다 렌더링이 되고 성능 이슈로 이어질 수 있다. 그렇다면 디바운싱 기법을 적용한 코드를 보자.

디바운싱 적용 O 코드

<!DOCTYPE html>
<html>
  <body>
    <div id="main" style="height: 300vh">
      <div style="position: fixed">
        <h3>Debouncing 적용</h3>
        <div>
          <label>이벤트 발생 : </label>
          <span id="count">0</span>
        </div>
      </div>
    </div>
  </body>
  <script>
    let debouncer;
    window.addEventListener("scroll", function (e) {
      if (debouncer) {
        clearTimeout(debouncer);
      }

      debouncer = setTimeout(function () {
        console.log("스크롤 이벤트 발생");
        const count = document.getElementById("count");
        count.innerText = parseInt(count.innerText) + 1;
      }, 300);
    });
  </script>
</html>

debouncer라는 변수에 delay 300ms를 걸어준 setTimeout 함수를 대입한다. 여기에 클로저 개념이 쓰였다고 볼 수 있다. 만약 현재 발생한 스크롤 이벤트가 이전에 발생한 스크롤 이벤트보다 300ms내에(보다 빨리) 발생했다면, 이전 이벤트에 기록된 setTimeout이 대입된 debouncer에 다시 새로운 setTimeout을 대입시킨다. 이때 debouncer에 값이 들어있다면 clearTimeout으로 해당 타이머를 취소해야 한다. 그래야 이전 타이머가 지워지고 새로운 타이머가 대입된다.
결과적으로 마지막으로 발생한 이벤트에 대해서만 300ms가 지난 후 setTimeout안의 로직이 수행되어 카운트가 적절히 변하게 되는 것이다.

쓰로틀링

쓰로틀링은 보통 성능 문제 때문에 많이 사용하게 된다. 쓰로틀링은 실행 횟수에 제한을 거는 것이라고 보면 된다.
스크롤 이벤트가 발생할 때마다 이벤트가 발생하지 않고, 몇 초에 한 번 또는 몇 밀리초에 한 번씩만 실행되도록 제한을 두는 것이다.

쓰로틀링 적용 O 코드

<!DOCTYPE html>
<html>
  <body>
    <div id="main" style="height: 300vh">
      <div style="position: fixed">
        <h3>Throttling 적용</h3>
        <div>
          <label>이벤트 발생 : </label>
          <span id="count">0</span>
        </div>
      </div>
    </div>
  </body>
  <script>
    let throttler;
    window.addEventListener("scroll", function (e) {
      if (throttler) {
        return;
      }
      throttler = setTimeout(function () {
        console.log("스크롤 이벤트 발생");
        const count = document.getElementById("count");
        count.innerText = parseInt(count.innerText) + 1;
        throttler = null;
      }, 200);
    });
  </script>
</html>

실행 결과, 스크롤을 천천히 움직여도, 엄청 빠르게 움직여도 일정하게 count가 변하는 것을 볼 수 있다.

여기서 디바운스와 다른 점은 throttler에 타이머가 설정되어 있을 경우 clearTimeout으로 타이머를 취소해주는 것이 아닌 return으로 그냥 종료 시키는 것이다. 그렇게 되면 이전에 대입되었던 타이머가 취소되지 않고, 타이머가 설정이 된 이후로부터 300ms내에 실행되게 될 것이다. throttler에 타이머가 설정되고 난 후 300ms동안은 throttler가 이벤트를 쥐고 있는 것이다. 이벤트를 쥐고 있는 300ms동안 1번의 이벤트만 발생하게 된다.
또한, 로직이 실행되고 난 후 throttler를 null로 초기화 시켜주면서 throttler에 값이 없다는 것 알려주어야 다음 스크롤 이벤트 발생 시 return 되지 않고 setTimeout을 다시 걸어줄 수 있을 것이다.

콘솔로 확인해보니 setTimeout이 양의 정수값을 리턴하는데, 300ms후 로직이 전부 끝나고 나서는 1을 출력하는 것을 확인했다. 우리는 clearTimeout으로 타이머를 초기화시켜주지 않았으므로 null로 값이 없다는 것을 알려주어야 한다.

레퍼런스

https://developer.mozilla.org/ko/docs/Web/API/setTimeout

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

https://velog.io/@yujuck/Javascript-%EB%94%94%EB%B0%94%EC%9A%B4%EC%8A%A4%EC%99%80-%EC%93%B0%EB%A1%9C%ED%8B%80%EB%A7%81

https://programming119.tistory.com/241

[백준-11497] 통나무 건너뛰기 | node.js | silver1

ruby_s — Sun, 29 May 2022 01:10:15 +0900

문제

https://www.acmicpc.net/problem/11497

11497번: 통나무 건너뛰기

남규는 통나무를 세워 놓고 건너뛰기를 좋아한다. 그래서 N개의 통나무를 원형으로 세워 놓고 뛰어놀려고 한다. 남규는 원형으로 인접한 옆 통나무로 건너뛰는데, 이때 각 인접한 통나무의 높이

www.acmicpc.net

풀이

function solve(n, tree) {
  tree.sort((a, b) => a - b);
  let maxLen = 0;
  for (let i = 2; i < n; i++) {
    maxLen = Math.max(maxLen, Math.abs(tree[i] - tree[i - 2]));
  }
  return maxLen;
}

const filePath =
  process.platform === "linux"
    ? "/dev/stdin"
    : "백준/silver/11497/testcase.txt";
const input = require("fs")
  .readFileSync(filePath)
  .toString()
  .trim()
  .split("\n");
for (let i = 1; i < input.length - 1; ) {
  const n = +input[i];
  const tree = input[i + 1].split(" ").map((el) => +el);
  i += 2;
  console.log(solve(n, tree));
}

이 문제는 예를 들어서 설명해보겠다.

1, 3, 5, 7, 9, 12, 14, 16, 18, 20

다음과 같이 있다고 가정했을 때, 아래와 같이 배치 했을 때 난이도의 최소값이 나오게 된다. 이때 난이도는 5가 된다.

1, 5, 9, 14, 18, 20, 16, 12, 7, 3

주어진 배열을 오름차순으로 정렬한 뒤 순서대로 양끝에 배치시킨 것이다. 그 이유는 1, 2 , 3, 100, 101, •••를 예로 들어서 설명하겠다. 3과 100을 인접시켜야만 난이도의 최소값이 나올 것 같지만 그렇지 않다. 3과 100을 인접시킬 경우,

만약, 3의 왼쪽에 1이나 2중 하나가 나온다면 그 1이나 2는 100보다 큰 어떤 값들과 인접될 수 밖에 없을 것이다. 그렇다면 3과 100의 차이보다 더 큰 차이값이 나오게 되므로 난이도의 최소값을 올바르게 도출할 수 없다.

만약, 3의 왼쪽에 100보다 큰 값이 인접하게 된다면 3과 100의 차이보다 3과 왼쪽에 인접한 그 값과의 차이가 더 커지기 때문에 3과 100이 최대 난이도가 아니게 된다. 따라서 오름차순된 배열을 작은 값부터 양 끝에서부터 번갈아가며 배치해야 한다.

1 => 1, 3 => 1, 5, 3 => 1, 5, 7, 3 => ••• => 1, 5, 9, 14, 18, 20, 16, 12, 7, 3

결국, 통나무를 오름차순으로 정렬한 뒤 i번째 값과 i-2번째 값을 비교한 것과 같은 로직이다.
1, 3, 5, 7, ••• => 1과 5비교, 3과 7비교, •••

[백준-1946] 신입사원 | node.js | silver1

ruby_s — Thu, 26 May 2022 10:18:51 +0900

문제

https://www.acmicpc.net/problem/1946

1946번: 신입 사원

첫째 줄에는 테스트 케이스의 개수 T(1 ≤ T ≤ 20)가 주어진다. 각 테스트 케이스의 첫째 줄에 지원자의 숫자 N(1 ≤ N ≤ 100,000)이 주어진다. 둘째 줄부터 N개 줄에는 각각의 지원자의 서류심사 성

www.acmicpc.net

풀이

function solve(n, ranking) {
  ranking.sort((a, b) => a[0] - b[0]);

  let answer = 1;
  let minRank = ranking[0][1];
  for (let i = 1; i < n; i++) {
    const rank = ranking[i][1];
    if (rank < minRank) {
      minRank = rank;
      answer++;
    }
  }
  return answer;
}

const filePath =
  process.platform === "linux" ? "/dev/stdin" : "백준/silver/1946/testcase.txt";
const input = require("fs")
  .readFileSync(filePath)
  .toString()
  .trim()
  .split("\n");
for (let i = 1; i < input.length; ) {
  const n = +input[i];
  console.log(
    solve(n, input.slice(i + 1, i + 1 + n).map((rank) => rank.split(" ").map((num) => +num)))
  );
  i += n + 1;
}

문제 이해가 안돼서 헤맸다.. 주어진 숫자는 점수가 아닌 등수이다. 아래처럼 순위가 돼있다고 했을 때, 서류의 순위는 변동되지 않고 면접에 따라 뽑힐 지 말지가 결정된다. 왜냐하면 둘 중 하나라도 다른 사람보다 높은 등수일 경우 뽑히는 정책이기 때문에 서류를 오름차순으로 정렬하면 서류는 무조건 통과한다는 전제하에 면접 등수를 체크하는 것이다.

서류 면접
A 1 4
B 2 3
C 3 2
D 4 1
E 5 5

먼저 A의 면접 등수를 최소 등수로 두고 B부터 비교를 시작한다. B의 면접 등수가 현재 최소 등수보다 높을 경우 B는 선발된다.
그럼 현재 최소 등수는 B의 등수인 3일 될 것이고, C를 비교한다. C의 면접 등수는 2이므로 현재 최소 등수보다 높다. 따라서 C도 선발된다. 이런식으로 비교하다보면 E를 비교했을 때, 최소 등수인 1보다 낮으므로 E빼고 모두가 선발되게 된다.

[백준-1541] 잃어버린 괄호 | node.js | silver2

ruby_s — Thu, 26 May 2022 09:19:15 +0900

문제

https://www.acmicpc.net/problem/1541

1541번: 잃어버린 괄호

첫째 줄에 식이 주어진다. 식은 ‘0’~‘9’, ‘+’, 그리고 ‘-’만으로 이루어져 있고, 가장 처음과 마지막 문자는 숫자이다. 그리고 연속해서 두 개 이상의 연산자가 나타나지 않고, 5자리보다

www.acmicpc.net

풀이

function solve() {
  let arr = [];
  for (let splited of input.split("-")) {
    let cnt = 0;
    let s = splited.split("+");

    for (const op of s) {
      cnt += +op;
    }
    arr.push(cnt);
  }

  return arr[0] + arr.slice(1).reduce((acc, curr) => acc - curr, 0);
}

const filePath =
  process.platform === "linux" ? "/dev/stdin" : "백준/silver/1541/testcase.txt";
const input = require("fs")
  .readFileSync(filePath)
  .toString()
  .trim()
  .split("\n")[0];
console.log(solve());

55-50+40-30+90

로 예시를 들어 설명하겠다.

arr에 모두 푸시한 후 값을 살펴보면 [55, 90, 120] 이 들어있다.
-(마이너스)를 기준으로 다음 - 가 나올때까지 arr에 그 사이의 값을 더해서 푸시해준다.

결국 55, 50+40, 30+90 이렇게 3개의 요소가 들어가게 되는 것이다. 그런 후 맨 처음 값 55 에서 뒤에 값들을 쭉 빼주면 -를 기준으로 괄호를 친 셈이 된다. 그 값이 최솟값이 될 것이다.

[VanillaJS] 프로그래머스 과제 테스트를 연습하면서 배운 웹 페이지 구조

ruby_s — Wed, 11 May 2022 13:07:25 +0900

이번에 우테캠 5기 2차 과제테스트를 준비하기 위해 프로그래머스에 고양이 사진첩 애플리케이션 이라는 과제테스트를 풀어보았다. 지난번에 고양이 사진 검색하기를 했었는데 그때 바닐라JS가 처음이라 진짜 아무것도 모르고 이것저것 뒤지면서 구현했더니 머리에 남아있는게 없다.. 바닐라 JS자체가 너무 재미없어서 꾸역꾸역 해서 그런것도 있는 것 같다 ㅎ
뭐 쨋든 서론은 이만하고,

이번 포스팅에서는 과제테스트를 딱 열었을 때 아무것도 없는 생 파일에 어떻게 구조를 구성해나가면 될 지 알아볼 것이다.

먼저 처음엔 index.html이 있을 것이다. 자바스크립트를 구현하면서 해당 파일안에 요소가 계속 추가 될 것이다.
html파일에서 할 일은 js파일을 연결해주면 된다.

<html>
  <head>
    <title>고양이 사진첩!</title>
    <link rel="stylesheet" href="./src/styles/style.css" />
  </head>
  <body>
    <h1>고양이 사진첩</h1>
    <main class="App"></main>
    <script src="src/js/index.js" type="module"></script>
  </body>
</html>

script태그는 <head>안에 넣어도, <body>안에 넣어도, <html>안에 넣어도 상관 없다. 다만, html의 body태그보다 js파일일 먼저 컴파일될 시 js파일은 body안의 태그들을 읽지 못할 것이다. 우리가 DOM을 조절하려면 조절할 요소들보다 아래 쪽에 script를 연결해줘야 한다.
여기서 또 중요한 게 있다. script태그의 속성에 보면 type="module"이 보인다. export/import방식으로 구현하고 싶다면 이 속성을 꼭 추가해줘야 한다.

이제 js파일을 하나씩 생성해보자. 나는 아래처럼 파일구조를 구성했다.

컴포넌트 분리는 선택이 아닌 필수다 !

1. index.js

import App from "./App.js";
new App(document.querySelector(".App"));

가장 먼저 해야 할일은 메인 자바스크립트 파일(App,js)에 DOM요소를 연결해주는 것이다. import로 App을 가져온 후, new 연산자로 App객체안 에 최상단의 App DOM요소를 넣어주면 된다.

2. api.js

const API_END_POINT =
  "https://zl3m4qq0l9.execute-api.ap-northeast-2.amazonaws.com/dev";

export const request = async (nodeId) => {
  try {
    const response = await fetch(`${API_END_POINT}/${nodeId || ""}`, {
      method: "GET",
    });
    if (response.ok) return response.json();
    else throw new Error("error");
  } catch (e) {
    throw new Error("error");
  }
};

한번 구현해보니까 api를 요청하는 부분을 처음에 구현해놓는 것이 편한 것 같다고 느꼈다. 그래서 다음은 api를 요청하는 파일이다.

공통 url은 전역변수로 두었다. 네이밍(API_END_POINT)은 다른 사람들 코드를 참고했다.
기본적으로 api요청 함수는 async await함수로 구현하자. try catch문으로 예외 처리도 해주자.
Promise가 올바르게 전달 받아졌다면 response를 json으로 리턴해주자.
(에러를 뱉을 때는 throw로 뱉어줄 것)

3. App.js

import { request } from "../api/api.js";
import Breadcrumb from "./Breadcrumb.js";
import Nodes from "./Nodes.js";
import ImageView from "./ImageView.js";
import Loading from "./Loading.js";

const cache = {};

export default function App($app) {
    this.state = {
        isRoot: true,
        nodes: [],
        depthStack: [],
        currentPath: null,
        selectedFilePath: null,
        isLoading: true,
    };
  
    this.setState = (nextState) => {
        this.state = nextState;
    };
  
    this.init = async () => {
        try {
            const rootNodes = await request(null);
            this.setState({
            ...this.state,
            nodes: rootNodes,
            });
        } catch (e) {
            throw new Error(e);
        }
    };
    this.init();
}

초기 App이다.

this.state: `this.${변수명}`이런 방식으로 지역변수를 선언해주면 된다. state안에 필요한 요소들을 하나씩 추가해주는 방식으로 구현한다.

this.setState: 지역변수들이 변경될 때마다 각 컴포넌트에 변경사항을 반영해주기 위해 생성한 함수이다.

this.init: 첫 초기 화면을 구성하기 위해 만든 함수이다.
1. await request()로 api요청을 받아온다.
2. this.setState()로 변경사항을 반영해준다. -> ...this.state: 기존 state는 그대로 반영하고 nodes는 rootNodes로 변경하도록.

4. Nodes.js

export default function Nodes({ $app, state, onClick, onBackClick }) {
  this.state = state;
  this.onClick = onClick;
  this.onBackClick = onBackClick;

  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };

  const nodes = document.createElement("div");
  nodes.className = "Nodes";

  this.render = () => {
    const template = this.state.nodes
      .map((node) => {
        return `
        <div class="Node" data-node-id="${node.id}">
          <img src="./assets/${node.type.toLowerCase()}.png"
          data-node-id="${node.id}"/>
          <div>${node.name}</div>
        </div>
      `;
      })
      .join("");

    const backTemplate = `
      <div class="Node">
        <img src="./assets/prev.png" />
      </div>`;

    nodes.innerHTML = this.state.isRoot
      ? template
      : `
      ${backTemplate}
      ${template}
    `;

    $app.appendChild(nodes);
  };

  nodes.addEventListener("click", (e) => {
    const { nodeId } = e.target.closest(".Node").dataset;
    if (nodeId) {
      const selectedNode = this.state.nodes.find((node) => node.id === nodeId);
      if (selectedNode) {
        this.onClick(selectedNode);
      }
    } else {
      this.onBackClick();
    }
  });

  this.render();
}

그냥 최종 코드를 붙이겠다 이 컴포넌트도 마찬가지로 상단에 this.${변수명}으로 필요한 변수들을 정의한다.

여기서 컴포넌트 의존도를 줄이기 위해 매개변수로 받아온 $app, state 같은 변수들을 this.state = state 처럼 지역변수로 만들어 주도록 한다.

여기도 this.setState가 보이는데, Nodes의 setState는 App.js에서 호출된다. App.js의 setState안에서 호출된다. App에서 상태가 변경되면 setState가 호출되고 그 안에서 nodes.setState({변경된 변수}) 이렇게 호출된다. 그럼Nodes의 지역변수인 this.state에 App에서 변경되었던 nextState가 반영된다.

아래 참고.

  this.setState = (nextState) => {
    this.state = nextState;
    nodes.setState({
      isRoot: this.state.isRoot,
      nodes: this.state.nodes,
      currentPath: this.state.currentPath,
    });
  };

그리고 꼭 컴포넌트 안의 지역변수가 변경되었다면 this.render()를 다시 호출해줘야 html에 반영이 된다. 따라서 this.setState에서 변경사항이 다 반영된 후 render()를 호출해주도록 한다. 아 그리고 변경되었을 때만 호출 되는게 아니라 초기에도 호출이 필요하기 때문에 최하단에 this.render(); 도 추가해줘야 한다.

  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };

render에서는 해당 컴포넌트에 관련된 추가해줘야 할 요소들을 조작한다. 조작만 하면 안된다. 우리는 new App안에 $app으로 최상단 DOM요소를 전달 받았기 때문에 각 컴포넌트마다 $app을 전달해줄 필요가 있다. $app에 추가해줄 요소들을 appendChild로 추가해준다.

$app.appendChild(nodes);

이벤트 리스너의 경우 웬만하면 render함수 안에 정의하지 말고 밖에 정의하도록 하자. -> 이벤트 최적화

nodes.addEventListener("click", (e) => {
    const { nodeId } = e.target.closest(".Node").dataset;
    if (nodeId) {
      const selectedNode = this.state.nodes.find((node) => node.id === nodeId);
      if (selectedNode) {
        this.onClick(selectedNode);
      }
    } else {
      this.onBackClick();
    }
  });

이런식으로 다른 컴포넌트들도 구성하면 된다 ! 아래에 전체 코드를 첨부하겠다.

index.js

import App from "./App.js";
new App(document.querySelector(".App"));

api.js

const API_END_POINT =
  "https://zl3m4qq0l9.execute-api.ap-northeast-2.amazonaws.com/dev";

export const request = async (nodeId) => {
  try {
    const response = await fetch(`${API_END_POINT}/${nodeId || ""}`, {
      method: "GET",
    });
    if (response.ok) return response.json();
    else throw new Error("error");
  } catch (e) {
    throw new Error("error");
  }
};

App.js

import { request } from "../api/api.js";
import Breadcrumb from "./Breadcrumb.js";
import Nodes from "./Nodes.js";
import ImageView from "./ImageView.js";
import Loading from "./Loading.js";

const cache = {};

export default function App($app) {
  this.state = {
    isRoot: true,
    nodes: [],
    depthStack: [],
    currentPath: null,
    selectedFilePath: null,
    isLoading: true,
  };

  const loading = new Loading({ $app, initialState: this.state.isLoading });

  const breadcrumb = new Breadcrumb({
    $app,
    state: this.state.depthStack,
    onClick: (index) => {
      // 루트 노드를 선택한 경우
      if (index === null) {
        this.setState({
          ...this.state,
          isRoot: true,
          depthStack: [],
          nodes: cache["root"],
          selectedFilePath: null,
        });
        return;
      }

      // 현재 path를 선택한 경우
      if (index === this.state.depthStack.length) {
        return;
      }

      // 그 외
      const depthStack = this.state.depthStack.slice(0, index + 1);

      this.setState({
        ...this.state,
        depthStack: depthStack,
        nodes: cache[depthStack[depthStack.length - 1]].id,
        selectedFilePath: null,
      });
    },
  });

  const nodes = new Nodes({
    $app,
    state: this.state,
    onClick: async (node) => {
      try {
        this.setState({
          ...this.state,
          isLoading: true,
        });
        if (node.type === "DIRECTORY") {
          if (cache[node.id]) {
            this.setState({
              ...this.state,
              isRoot: false,
              depthStack: [...this.state.depthStack, node],
              nodes: cache[node.id],
            });
          } else {
            const nextNodes = await request(node.id);
            this.setState({
              ...this.state,
              isRoot: false,
              depthStack: [...this.state.depthStack, node],
              nodes: nextNodes,
            });
            cache[node.id] = nextNodes;
          }
        } else if (node.type === "FILE") {
          this.setState({
            ...this.state,
            selectedFilePath: node.filePath,
          });
        }
      } catch (e) {
        throw new Error(e.message);
      } finally {
        this.setState({
          ...this.state,
          isLoading: false,
        });
      }
    },
    onBackClick: async () => {
      try {
        this.setState({
          ...this.state,
          isLoading: true,
        });
        this.state.depthStack.pop();
        const prevId = this.state.depthStack.length
          ? this.state.depthStack[this.state.depthStack.length].id
          : null;

        if (prevId === null) {
          this.setState({
            isRoot: true,
            nodes: cache["root"],
            depthStack: this.state.depthStack,
          });
        } else {
          this.setState({
            ...this.state,
            isRoot: false,
            nodes: cache[prevId],
            selectedFilePath: null,
            depthStack: this.state.depthStack,
          });
        }
      } catch (e) {
        throw new Error(e.message);
      } finally {
        this.setState({
          ...this.state,
          isLoading: false,
        });
      }
    },
  });

  const imageView = new ImageView({ $app, state: this.state.selectedFilePath });

  this.setState = (nextState) => {
    this.state = nextState;
    nodes.setState({
      isRoot: this.state.isRoot,
      nodes: this.state.nodes,
      currentPath: this.state.currentPath,
    });
    breadcrumb.setState(this.state.depthStack);
    imageView.setState(this.state.selectedFilePath);
    loading.setState(this.state.isLoading);
  };

  this.init = async () => {
    try {
      const rootNodes = await request(null);

      this.setState({
        ...this.state,
        nodes: rootNodes,
      });
      cache["root"] = rootNodes;
    } catch (e) {
      throw new Error(e);
    } finally {
      this.setState({
        ...this.state,
        isLoading: false,
      });
    }
  };
  this.init();
}

Nodes.js

export default function Nodes({ $app, state, onClick, onBackClick }) {
  this.state = state;
  this.onClick = onClick;
  this.onBackClick = onBackClick;

  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };

  const nodes = document.createElement("div");
  nodes.className = "Nodes";

  this.render = () => {
    const template = this.state.nodes
      .map((node) => {
        return `
        <div class="Node" data-node-id="${node.id}">
          <img src="./assets/${node.type.toLowerCase()}.png"
          data-node-id="${node.id}"/>
          <div>${node.name}</div>
        </div>
      `;
      })
      .join("");

    const backTemplate = `
      <div class="Node">
        <img src="./assets/prev.png" />
      </div>`;

    nodes.innerHTML = this.state.isRoot
      ? template
      : `
      ${backTemplate}
      ${template}
    `;

    $app.appendChild(nodes);
  };

  nodes.addEventListener("click", (e) => {
    const { nodeId } = e.target.closest(".Node").dataset;
    if (nodeId) {
      const selectedNode = this.state.nodes.find((node) => node.id === nodeId);
      if (selectedNode) {
        this.onClick(selectedNode);
      }
    } else {
      this.onBackClick();
    }
  });

  this.render();
}

Breadcrumb.js

export default function Breadcrumb({ $app, state, onClick }) {
  this.state = state;
  this.onClick = onClick;
  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };

  this.$target = document.createElement("nav");
  this.$target.className = "Breadcrumb";
  $app.appendChild(this.$target);

  this.render = () => {
    if (this.state.length) {
      this.$target.innerHTML = `<div class="nav-item">root</div>
    ${this.state
      .map(
        (node, index) =>
          `<div class="nav-item" data-index="${index + 1}">${node.name}</div>`
      )
      .join("")}`;
    } else {
      this.$target.innerHTML = `<div>root</div>`;
    }
  };

  this.$target.addEventListener("click", (e) => {
    const { index } = e.target.closest(".nav-item").dataset;
    this.onClick(parseInt(index, 10) || null);
  });

  this.render();
}

ImageView.js

const IMAGE_PATH_PREFIX = `https://fe-dev-matching-2021-03-serverlessdeploymentbuck-t3kpj3way537.s3.ap-northeast-2.amazonaws.com/public`;

export default function ImageView({ $app, initialState }) {
  this.state = initialState;
  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };

  this.$target = document.createElement("div");
  this.$target.className = "Modal ImageViewer";

  this.render = () => {
    this.$target.innerHTML = `
      <div class="content">
      ${this.state ? `<img src="${IMAGE_PATH_PREFIX}${this.state}" />` : ""}
      </div>
    `;
    this.$target.style.display = this.state ? "block" : "none";
  };

  this.$target.addEventListener("click", (e) => {
    e.target === this.$target["Modal"]
      ? this.$target.classList.remove("ImageViewer")
      : false;
    this.$target.innerHTML = "";
    this.$target.style.display = "none";
  });

  this.render();
  $app.appendChild(this.$target);
}

Loading.js

export default function Loading({ $app, initialState }) {
  this.state = initialState;

  this.$target = document.createElement("div");
  this.$target.className = "Loading Modal";
  $app.appendChild(this.$target);

  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };

  this.render = () => {
    this.$target.innerHTML = `
        <div class="content">
            <img src="./assets/nyan-cat.gif"/>
        </div>
    `;

    if (this.state) this.$target.style.display = "block";
    else this.$target.style.display = "none";
  };
  this.render();
}

[HTML/JS] dataset활용하기 (data-*)

ruby_s — Tue, 10 May 2022 23:21:38 +0900

어느 Element에나 data-로 시작하는 속성을 사용할 수 있다. 화면에는 렌더링 되지 않게 정보를 엘리먼트에 담아놓을 수 있다.

사용법

<div
  class="item"
  data-node-id="1"
  data-columns="3">
...
</div>

Javascript에서 접근하기

자바스크립트에서 dataset객체를 통해서 data속성을 가져올 수 있다.
이때 접두사인 data-가 제거되고, 모든 대문자는 소문자로 변환된다. 그리고 data-다음에 오는 속성명은 -(dash)를 제거하고 camelCase로 변환된다.
예를 들면, data-node-id -> nodeId 로 변환.

따라서, 아래처럼 사용할 수 있다.

const { nodeId } = e.target.dataset;
e.target.dataset.nodeId;
e.target.dataset['nodeId'];

in 연산자로 해당 속성이 존재하는지 확인할 수도 있다.

'nodeId' in e.target.dataset

net::ERR_ABORTED 404 (Not Found) 에러 해결

ruby_s — Tue, 10 May 2022 14:16:02 +0900

프로그래머스 고양이 사진첩 과제를 구현하던 중 위와 같은 에러를 만났다.

먼저 html에 아래와 같이 스크립트를 연결해줬다.

<script src="src/js/index.js" type="module"></script>

export, import를 사용 할 것이기 때문에 type="module"이 필요하다.

index.js

import App from "./App";
new App(document.querySelector(".App"));

import해줄 것이기 때문에 다른 js파일들은 html에 연결해주지 않아도 된다. index.js에서 App을 import 후 querySelector로 앱을 전달해줬는데..! 아래와 같은 에러가 뜬 것이다. App이라는 파일을 찾을 수 없나보다.

net::ERR_ABORTED 404 (Not Found)

난 스크립트 태그의 순서에 문제가 있나 했더니.. 파일 확장자를 붙여주지 않아서 웹이 해당 파일을 읽을 수 없던 거다 ㅎㅎ

import App from "./App.js";

import 시 .js를 꼭 붙여주도록 하쟝

[백준] 5052 - 전화번호 목록 | Gold4 | node.js 자바스크립트

ruby_s — Sun, 8 May 2022 01:10:08 +0900

문제

https://www.acmicpc.net/problem/5052

5052번: 전화번호 목록

첫째 줄에 테스트 케이스의 개수 t가 주어진다. (1 ≤ t ≤ 50) 각 테스트 케이스의 첫째 줄에는 전화번호의 수 n이 주어진다. (1 ≤ n ≤ 10000) 다음 n개의 줄에는 목록에 포함되어 있는 전화번호가

www.acmicpc.net

코드

function solve(phoneNumList) {
  phoneNumList.sort();

  for (let i = 1; i < phoneNumList.length; i++) {
    const prevNum = phoneNumList[i - 1];
    const currNum = phoneNumList[i];
    if (currNum.startsWith(prevNum)) return "NO";
  }
  return "YES";
}

const filePath =
  process.platform === "linux" ? "/dev/stdin" : "백준/gold/5052/testcase.txt";
const input = require("fs")
  .readFileSync(filePath)
  .toString()
  .trim()
  .split("\n");
for (let i = 1; i < input.length; ) {
  const n = +input[i];
  console.log(solve(input.slice(i + 1, i + 1 + n)));
  i += n + 1;
}

처음엔 전화번호의 자릿수가 작은 순으로 오름차순 정렬을 하고 선형 탐색으로 풀었으나 역시나 시간초과 ..!

생각해보니 문자열 정렬은 "976 > 911867" 이런식으로 판단을 하기 때문에 그냥 sort만 써도 된다.
아래 예제의 경우를 보면,

예제 입력 1

976
97625999
91125426

예제 출력 1

NO

정렬하면 ["91125426", "976", "97625999"] 이렇게 된다. 따라서 i의 현재 값과 다음 값만 비교해줘도 정답이 나온다. 굳이 선형탐색으로 하나하나 비교를 다 안해줘도 된다.

어리석은 나 반성해라

[프로그래머스] 양과 늑대 | 자바스크립트 | Lv.3 | 2022 KAKAO BLIND RECRUITMENT | DFS

ruby_s — Fri, 6 May 2022 12:58:21 +0900

문제

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

코딩테스트 연습 - 양과 늑대

[0,0,1,1,1,0,1,0,1,0,1,1] [[0,1],[1,2],[1,4],[0,8],[8,7],[9,10],[9,11],[4,3],[6,5],[4,6],[8,9]] 5 [0,1,0,1,1,0,1,0,0,1,0] [[0,1],[0,2],[1,3],[1,4],[2,5],[2,6],[3,7],[4,8],[6,9],[9,10]] 5

programmers.co.kr

풀이

function solution(info, edges) {
  const tree = Array.from({ length: info.length }, () => []);
  for (const [parent, child] of edges) tree[parent].push(child);

  let answer = 0;
  function dfs(node, sheep, wolf, possible) {
    answer = Math.max(answer, sheep);
    if (sheep <= wolf) return;

    const possibleNode = [...possible, ...tree[node]];
    possibleNode.splice(possibleNode.indexOf(node), 1);

    for (const next of possibleNode) {
      if (info[next]) dfs(next, sheep, wolf + 1, possibleNode);	// 늑대일 경우
      else dfs(next, sheep + 1, wolf, possibleNode);	// 양일 경우
    }
  }
  dfs(0, 1, 0, [0]);

  return answer;
}

이 문제 너무 어려웠다.. 그냥 dfs로 하면 이전에 방문했던 곳을 어떻게 또 방문하지 ..? 싶었다..

하나씩 풀이해보면, 먼저 parent의 인덱스에 각각 [왼쪽, 오른쪽] 자식을 넣어준다. -> tree
아래 예시 사진으로 설명하겠다.

위에서 보면 0 -> 1 -> 8 -> 7 -> 9 -> 4 -> 6 -> 5 이 순서대로 가야 양의 최대값이 나온다.

function dfs(node, sheep, wolf, possible) {
    answer = Math.max(answer, sheep);
    if (sheep <= wolf) return;

    const possibleNode = [...possible, ...tree[node]];
    possibleNode.splice(possibleNode.indexOf(node), 1);

    for (const next of possibleNode) {
      if (info[next]) dfs(next, sheep, wolf + 1, possibleNode);
      else dfs(next, sheep + 1, wolf, possibleNode);
    }
}

dfs를 들어오면 sheep개수를 계속해서 반영해준다. 만약 sheep보다 wolf의 개수가 크거나 같으면 리턴한다.

이제 매개변수로 들어온 possible과 현재 node의 자식노드들을 합쳐줄 것이다. possible은 말 그대로 아직까진 방문할 수 있는 노드들을 뜻한다. 만약 2노드를 들어갔다 왔어도 wolf의 개수가 많아서 종료됐다면 2는 아직 방문의 가능성이 있는 노드가 된다. -> possibleNode를 반복문 돈다고 해서 꼭 노드가 사라지는게 아님. (나의 큰 착각이였음. dfs를 들어갔다오면 각 노드가 꼭 사라진다고 인지해버렸다. if (sheep <= wolf) return; 이 조건에 걸리면 안사라짐.)

앞서 가능성 있는 노드들과 현재 node의 자식노드를 합친 다음, 현재 node는 방문을 했으므로 possibleNode에서 제거한다.(splice) 그리곤 양일 경우와 늑대일 경우를 나눠서 카운트를 조절해주면 된다.

방문한 현재 node와 possibleNode를 순차적으로 보는게 사실 이해가 빠르다.

// console.log(node, possibleNode)
0, [ 1, 8 ]
1, [ 8, 2, 4 ]
8, [ 2, 4, 7, 9 ]
2
4
7, [ 2, 4, 9 ]
2, [ 4, 9 ]
4
9, [ 4, 10, 11 ]
4, [ 10, 11, 3, 6 ]
10
11
3
6

0: 1, 8의 자식노드가 방문 가능한 노드이다.
1: 본인 1은 제거하고 전달받은 8과 본인의 자식노드 2, 4가 가능성 있는 노드이다.
8: 본인 8은 제거하고 전달받은 2, 4와 본인의 자식노드 7, 9가 가능성 있는 노드이다.
2: wolf가 더 커지거나 같으므로 바로 리턴된다.
4: 마찬가지.
7: 본인 7은 제거하고, 8번째 노드에서 그대로 전달받은 2, 4, 9가 가능성 있는 노드이다.
2: 위의 2와 다르게 sheep의 개수가 늘어서 왔으므로 2도 방문할 수 있다. 본인2는 제거하고, 7에서 전달받은 4, 9가 가능성 있는 노드이다.
4: return
9: 본인 9는 제거하고, 2에서 전달받은 4와 본인의 자식노드 10, 11이 가능성 있는 노드이다.
4: 여기서부터 생략 ...

다음부터는 쉽게 풀었으면 한다.. 난 사실 아직도 재귀가 익숙치 않다 ..ㅎ; 평생 친해지고 싶지 않은 친구다.

[프로그래머스] 길 찾기 게임 | 자바스크립트(js) | Lv.3 | 이진트리 | 2019 KAKAO BLIND RECRUITMENT

ruby_s — Fri, 6 May 2022 00:01:38 +0900

문제

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

코딩테스트 연습 - 길 찾기 게임

[[5,3],[11,5],[13,3],[3,5],[6,1],[1,3],[8,6],[7,2],[2,2]] [[7,4,6,9,1,8,5,2,3],[9,6,5,8,1,4,3,2,7]]

programmers.co.kr

풀이

function solution(nodeinfo) {
  const sorted = nodeinfo
    .map((el, index) => [...el, index + 1])
    .sort((a, b) => (a[1] === b[1] ? a[0] - b[0] : b[1] - a[1]));

  function order(sorted, preAnswer, postAnswer) {
    const [x, y, node] = sorted[0];
    const leftChild = [];
    const rightChild = [];

    for (let i = 1; i < sorted.length; i++) {
      const row = sorted[i];
      if (row[0] < x) leftChild.push(row);
      else rightChild.push(row);
    }

    preAnswer.push(node);
    if (leftChild.length) order(leftChild, preAnswer, postAnswer);
    if (rightChild.length) order(rightChild, preAnswer, postAnswer);
    postAnswer.push(node);
  }

  const preAnswer = [];
  const postAnswer = [];
  order(sorted, preAnswer, postAnswer);
  return [preAnswer, postAnswer];
}

이 문제는 각 노드마다 x와 y좌표가 주어진다. 이진트리이기 때문에 자식 노드는 최대 2개만 가질 수 있다. 처음에는 무작정 Y값이 현재 노드보다 작은 것을 탐색하고 그 중 X값이 작으면 왼쪽에 배치, X값이 크면 오른쪽에 배치 하려고 했으나..! 그렇게 하면 아래 그림에서 예외가 발생한다.
2노드의 왼쪽 아래에 1이 존재하지만, 1은 2의 자식노드는 아니다. 따라서 단순히 x, y좌표로만 판단해서는 안된다..

const sorted = nodeinfo
.map((el, index) => [...el, index + 1])
.sort((a, b) => (a[1] === b[1] ? a[0] - b[0] : b[1] - a[1]));

먼저 y를 기준으로 정렬을 해줘야 한다. 그 전에 해당 노드의 인덱스를 기억할 필요가 있으므로 마지막 원소에 index를 추가해준다. 왼쪽부터 탐색할 것이기 때문에 y값이 같다면 x값을 기준으로 오름차순으로 정렬해준다.

이제 순회 함수를 보자.

function order(sorted, preAnswer, postAnswer) {
const [x, y, node] = sorted[0];
const leftChild = [];
const rightChild = [];

for (let i = 1; i < sorted.length; i++) {
const row = sorted[i];
if (row[0] < x) leftChild.push(row);
else rightChild.push(row);
}

preAnswer.push(node);
if (leftChild.length) order(leftChild, preAnswer, postAnswer);
if (rightChild.length) order(rightChild, preAnswer, postAnswer);
postAnswer.push(node)
}

sorted의 상위노드를 꺼내준다. 해당 상위 노드는 answer에 하나씩 push할 node이다.
순회를 시작하기 전에 answer에 push하면 전위순회, 순휘가 끝난 후 뒤에서부터 push하면 후위순회가 된다.

여기서 주목해야 할 것은 반복문의 i는 1부터 시작한다는 것이다. 이미 정렬이 돼있는 배열이므로, 상위노드의 아래 노드들을 쭉 탐색한다.
상위노드의 x값보다 작다면 왼쪽 서브 트리를 구성하는 노드이므로 leftChild에 넣어주고, 상위노드의 x값보다 크다면 오른쪽 서브트리를 구성하는 노드이므로 rightChild에 넣어준다.

preAnswer에는 상위노드를 순차적으로 저장하면 되고, 왼쪽 자식과 오른쪽 자식이 있을 경우, 각각 왼쪽 순회와 오른쪽 순회를 돌게 된다. 만약 왼쪽 자식(leftChild)과 오른쪽 자식(rightChild)이 모두 없다면 순회는 끝났다. 이제 맨 하단의 노드부터 재귀를 끝내면서 postAnswer에 저장될 것이다.

사실 트리를 어떻게 배열로 구성해야 할까 엄청 많은 고민을 했다. 그럴 필요없이 정렬을 하면 되는데 대신 인덱스를 기억해야 한다는 사실까지 스스로 알아낼 수 있지만..! 순회를 까먹어서 다시 공부하면서 구현했다

[프로그래머스] 표 편집 | 자바스크립트 | 2021 카카오 채용연계형 인턴십 | Lv.3

ruby_s — Wed, 4 May 2022 09:34:19 +0900

문제

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

코딩테스트 연습 - 표 편집

8 2 ["D 2","C","U 3","C","D 4","C","U 2","Z","Z"] "OOOOXOOO" 8 2 ["D 2","C","U 3","C","D 4","C","U 2","Z","Z","U 1","C"] "OOXOXOOO"

programmers.co.kr

풀이

function solution(n, k, cmd) {
  const stack = [];
  const answer = Array.from({ length: n }, () => "O");
  const list = Array.from({ length: n }, (_, index) => [index - 1, index + 1]);
  list[n - 1][1] = -1;

  function upNode(k, row) {
    for (let i = 0; i < row; i++) k = list[k][0];
    return k;
  }

  function downNode(k, row) {
    for (let i = 0; i < row; i++) k = list[k][1];
    return k;
  }

  function deleteNode(k) {
    const [prev, next] = list[k];
    stack.push([k, prev, next]);
    answer[k] = "X";

    if (next === -1) {
      if (prev !== -1) list[prev][1] = next;
      k = prev;
    } else {
      list[next][0] = prev;
      if (prev !== -1) list[prev][1] = next;
      k = next;
    }
    return k;
  }

  function restoreNode() {
    const [node, prev, next] = stack.pop();
    if (prev !== -1) list[prev][1] = node;
    if (next !== -1) list[next][0] = node;
    answer[node] = "O";
  }

  for (const item of cmd) {
    const [direct, row] = item.split(" ");
    switch (direct) {
      case "D":
        k = downNode(k, +row);
        break;
      case "U":
        k = upNode(k, +row);
        break;
      case "C":
        k = deleteNode(k);
        break;
      case "Z":
        restoreNode();
        break;
    }
  }
  return answer.join("");
}

이 문제는 양방향 연결 리스트를 사용해야 효율성까지 통과하는 문제인 것 같다..

function upNode(k, row) {
    for (let i = 0; i < row; i++) k = list[k][0];
    return k;
}

k의 위치를 위로 올리는 함수부터 보자. row에는 얼만큼 올려야 하는 지 숫자가 들어온다.
예를 들어 3만큼 올리려면, 3번 반복하면서 현재 k위치가 가리키는 prev를 k에 대입해준다. 그렇게 3번 반복하면 k의 현재 위치는 3번째 위에 있는 노드가 될 것이다. downNode 함수도 이와 같은 방식이다.
중요한 것은 deleteNode와 restoreNode 함수이다.

function deleteNode(k) {
    const [prev, next] = list[k];
    stack.push([k, prev, next]);
    answer[k] = "X";

    if (next === -1) {
      if (prev !== -1) list[prev][1] = next;
      k = prev;
    } else {
      list[next][0] = prev;
      if (prev !== -1) list[prev][1] = next;
      k = next;
    }
    return k;
}

next가 1인 경우는 마지막 행을 뜻하므로 k를 이전 행으로 변경해준다. 그리고 prev가 -1이 아닌 경우 (행이 한개인 경우가 아닐 경우), 이전 행의 next는 -1이 된다.

next가 1이 아닌 경우는 마지막 행이 아닐 때이다. next가 가리키는 prev를 현재의 prev로 변경해주고, prev의 다음 값이 현재의 next가 되도록 변경해준다. 그리고 k를 다음 행으로 넘긴다.

이제 restoreNode함수를 보자.

function restoreNode() {
    const [node, prev, next] = stack.pop();
    if (prev !== -1) list[prev][1] = node;
    if (next !== -1) list[next][0] = node;
    answer[node] = "O";
}

가장 최신의 행을 스택에서 pop한다. if으로 모두 예외 처리를 해주고, prev의 다음 값을 현재 행으로, next의 이전 값을 현재 행으로 바꿔주고 answer의 node위치를 O로 변경해준다 !

자료구조 때 배웠던 양방향 연결 리스트를 다시 한번 복습했다..

[프로그래머스] 징검다리 건너기 | 자바스크립트 | Lv.3 | 2019 카카오 개발자 겨울 인턴십

ruby_s — Mon, 2 May 2022 22:30:11 +0900

문제

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

코딩테스트 연습 - 징검다리 건너기

[2, 4, 5, 3, 2, 1, 4, 2, 5, 1] 3 3

programmers.co.kr

풀이

정확성O, 효율성X 코드

function solution2(stones, k) { // 정확성만 통과
  let start = 1,
    end = Math.max(...stones);
  while (start <= end) {
    const mid = Math.floor((start + end) / 2);
    const temp = stones.map((num) => num - mid);
    let count = 0;
    for (const num of temp) {
      if (num <= 0) count++;
      else count = 0;
      if (count >= k) break;
    }
    if (count >= k) end = mid - 1;
    else {
      start = mid + 1;
    }
  }
  return start;
}

정확성O, 효율성O 통과 코드

function solution1(stones, k) { // 효율성 통과
  let start = 1,
    end = 200000000;
  while (start <= end) {
    const mid = Math.floor((start + end) / 2);
    let count = 0;
    for (const num of stones) {
      if (num - mid <= 0) count++;
      else count = 0;
      if (count >= k) break;
    }
    if (count >= k) end = mid - 1;
    else {
      start = mid + 1;
    }
  }
  return start;
}

수의 범위가 20만까지 가기 때문에 단순히 반복문만 돌려서 하기엔 시간 초과가 날 거라는 걸 알 수 있다. 그렇기 때문에 딱 봤을 때 이분탐색을 사용해야 할 것 같았다.

stones배열 원소들의 범위는 1 이상 200,000,000 이하인 자연수라고 주어졌기 때문에 start를 1로, end를 200,000,000으로 두고stones를 한번 돌때마다 mid값을 갱신한다.

for (const num of stones) {
  if (num - mid <= 0) count++;
  else count = 0;
  if (count >= k) break;
}

이 부분은 연속된 0의 최대 개수를 구하는 로직이다. stones의 각 원소에 mid를 뺀값이 0보다 작거나 같을 경우 mid가 해당 원소보다 크거나 같다는 뜻이다. 1부터 200,000,000사이를 범위로 해서 mid를 계속 갱신해서 stones에 반영해보고 mid의 왼쪽 범위를 탐색해야 할 지 오른쪽 범위를 탐색해야 할지 선택하는 방식이다.

count가 k보다 클 경우, end를 mid - 1로 왼쪽(아래) 값을 탐색하도록하고, count가 k보다 작을 경우, start를 mid + 1로 오른쪽(위) 값을 탐색하도록 한다.

아래 예제를 통해 알아보자.

입출력 예 #1

첫 번째 친구는 다음과 같이 징검다리를 건널 수 있습니다.

첫 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다.
두 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다.

두 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다.
세 번째 친구도 아래 그림과 같이 징검다리를 건널 수 있습니다.

세 번째 친구가 징검다리를 건넌 후 디딤돌에 적힌 숫자는 아래 그림과 같습니다.
네 번째 친구가 징검다리를 건너려면, 세 번째 디딤돌에서 일곱 번째 디딤돌로 네 칸을 건너뛰어야 합니다. 하지만 k = 3 이므로 건너뛸 수 없습니다.

따라서 최대 3명이 디딤돌을 모두 건널 수 있습니다.

만약 mid가 200,000,000부터 계속 1/2씩 줄여와서 5가 됐다고 치자. 그럼 num - mid가 <= 0인 연속적인 부분의 최대 길이는 전체 길이가 될거다.
여기서 다시 end를 5 - 1 = 4 로 갱신하면 mid는 2가 된다. 그럼 num - mid가 <= 0인 연속적인 부분의 최대 길이는 5번째의 2 1 이 부분일거다.
2 < k이므로 start = mid + 1 = 3으로 갱신하면 mid는 3이 된다. 그럼 num - mid가 <= 0인 연속적인 부분의 최대 길이는 4번째의 3 2 1 이 부분일거다. 3 >= k이므로 end를 mid - 1 = 2로 갱신되고 start <= end를 만족하지 못해 while문을 빠져나오게 된다.

나는 이분탐색을 인덱스에서 활용하는 법만 알았는데 이런식으로 원소들의 최대 최소값을 기준으로 탐색할 수도 있다는 걸 알았다. 다음에 요런 문제 나오면 제대로 활용해봐야지 ..

[백준][브루트포스]치킨 배달 - node.js | javascript | gold5

ruby_s — Thu, 28 Apr 2022 09:46:18 +0900

문제

https://www.acmicpc.net/problem/15686

15686번: 치킨 배달

크기가 N×N인 도시가 있다. 도시는 1×1크기의 칸으로 나누어져 있다. 도시의 각 칸은 빈 칸, 치킨집, 집 중 하나이다. 도시의 칸은 (r, c)와 같은 형태로 나타내고, r행 c열 또는 위에서부터 r번째 칸

www.acmicpc.net

풀이

function solve() {
  const twoIdxList = [],
    oneIdxList = [];
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      if (city[i][j] === 2) twoIdxList.push([i, j]);
      else if (city[i][j] === 1) oneIdxList.push([i, j]);
    }
  }

  function getCombination(arr, num) {
    const result = [];
    if (num === 1) return arr.map((el) => [el]);

    arr.forEach((fixed, index, origin) => {
      const rest = origin.slice(index + 1);
      const combination = getCombination(rest, num - 1);
      const attached = combination.map((el) => [fixed, ...el]);
      result.push(...attached);
    });
    return result;
  }

  function getMinDistance(chickenIdx) {
    let sum = 0;
    for (const [oneX, oneY] of oneIdxList) {
      let distance = Infinity;
      for (const [twoX, twoY] of chickenIdx) {
        distance = Math.min(
          distance,
          Math.abs(oneX - twoX) + Math.abs(oneY - twoY)
        );
      }
      sum += distance;
    }
    return sum;
  }

  const combination = getCombination(twoIdxList, m);

  let answer = Infinity;
  for (const indexs of combination) {
    answer = Math.min(answer, getMinDistance(indexs));
  }
  return answer;
}

const filePath =
  process.platform === "linux" ? "/dev/stdin" : "백준/gold/15686/testcase.txt";
const input = require("fs")
  .readFileSync(filePath)
  .toString()
  .trim()
  .split("\n")
  .map((row) => row.split(" ").map((el) => +el));
const [n, m] = input[0];
const city = input.slice(1);
console.log(solve());

이 문제는 조합만 쓰면 쉽게 푸는 문제다.
조합으로 치킨 집(2) 중 폐업 시키지 않을 인덱스 조합들을 만들고, 집(1)에서부터 치킨 집까지의 거리를 쭉 반복문 돌려서 구하면 된다.

Math.min 으로 계속해서 최소값을 반영해주면 풀이 끝 !

좀 더 쉬운 풀이를 아시거나 고쳐야 할 코드가 있다면 댓글로 알려주세요 !

[RN] 수많은 오류(에러) 해결..

ruby_s — Sun, 3 Apr 2022 02:25:51 +0900

진짜 공식 문서만 주의깊게 읽어도 나지 않을 에러들이 많은 것 같다..ㅎ

1. Could not find proper version of cocoapods (1.11.3) in any of the sources Run `bundle install` to install missing gems.

왜 그런지 모르겠다만.. pod install 을 하면 자꾸만 저 에러가 난다. 그럴 경우 하라는 대로 하면된다.
$ bundle install 을 실행후 pod install 을 하면 잘된다.

2. Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

이건 어이없는 오류 ㅎ
이미 실행 중인 포트가 있는 거다. 터미널에서 뭐가 돌아가고 있는지 주의 깊게 보자.. 종료하고 실행하면 잘 될거다

3. mac jdk Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8.

1. Android - Preferences에 들어간다. (mac기준) - 윈도우는 File - setting일거다.

2. Build, Execution, Deployment - Build tools - Gradle 에 들어가면 아래와 같은 화면이 보인다.
- 단, 내가 작업하고 있는 폴더의 android 폴더로 프로젝트를 열어 준 뒤 들어가야 한다.
난 그것도 모르고 시작화면에서 Gradle projects가 안보여서 헤맸다

여기서 Gradle JDK를 11버전으로 맞춰주자.
안드로이드를 처음 깐 경우 JDK가 없는 것 같다. 그래서 나는 아래 링크에서 다운로드 받았다.
https://www.oracle.com/kr/java/technologies/javase/jdk11-archive-downloads.html
다운로드 받고 Add JDK로 다운받은 파일을 넣어주면 된다~!

4. Requiring unknown module 'undefined' ~

1. node_module 폴더 및 yarn.lock 파일 삭제
2. $ yarn
3. $ yarn cache clean

5. adb reverse ENOENT

환경변수가 잘못 설정되어서 나는 오류다.
해결법(macOS 기준)
1. bash_profile을 열어준다.

$ open ~/.bash_profile

2. 다음 환경변수를 맨 아래에 넣어주자. 참고로 open명령어는 메모장처럼 마우스로 조작이 가능하다.

export ANDROID_SDK=/Users/<your_computer_name>/Library/Android/sdk
export PATH=/Users/<your_computer_name>/Library/Android/sdk/platform-tools:$PATH

3. 저장 후 닫기
4. 변경사항 컴파일하기

source ~/.bash_profile

**6. Error while waiting for device: AVD Pixel_2_API_28_2 is already running. If that is not the case, delete the files at C:\Users\UserName\.android\avd/Pixel_2_API_28_2.avd/*.lock and try again.**

에뮬레이터를 비정상적으로 종료했을 때 뜨는 오류다. 이상하게 종료 버튼을 눌렀는데 종료가 되지 않았다. 그래서 강제 종료를 하려고 하였으나 그것조차 먹지 않았다..
1. 해당 Virtual Device를 삭제한다. 디바이스의 오른쪽에 점 3개 버튼을 누르면 Delete 할 수 있다.
2. 종료할 때는 에뮬레이터에서 탭의 x버튼을 눌러 지워주면 된다.

7. The following build commands failed: CompileC /Users/ ••• main.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler

이럴 경우 pod를 재설치 해주면 된다. 아마 라이브러리를 install 했다가 삭제한 경우 ios와 android에 반영되는 문제 때문에 발생한 것같다.

$ cd ios -> ios 폴더로 이동
$ pod deintegrate -> pod 삭제
$ pod update -> 최신버전으로 업데이트
$ pod install -> Podfile의 라이브러리 재설치

Podfile에 여러 라이브러리가 들어있는 상태에서 install & update하면 라이브러리들이 설치된다.

추가로 아래 명령어를 사용하면 문제가 있는 부분을 진단해준다.

$ npx @react-native-community/cli doctor

참고

react-native android 세팅
https://reactnative.dev/docs/environment-setup#installing-dependencies

Setting up the development environment · React Native

This page will help you install and build your first React Native app.

reactnative.dev

https://www.npmjs.com/package/react-native-image-crop-picker?activeTab=versions

react-native-image-crop-picker

Select single or multiple images, with cropping option. Latest version: 0.37.3, last published: 2 months ago. Start using react-native-image-crop-picker in your project by running `npm i react-native-image-crop-picker`. There are 57 other projects in the n

www.npmjs.com

https://github.com/ivpusic/react-native-image-crop-picker

GitHub - ivpusic/react-native-image-crop-picker: iOS/Android image picker with support for camera, video, configurable compressi

iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping - GitHub - ivpusic/react-native-image-crop-picker: iOS/Android image picker with supp...

github.com

[오류로그]React-native - yarn ios 실행 시 발생하는 오류 해결

ruby_s — Sat, 26 Mar 2022 11:57:33 +0900

나는 MacOS M1칩을 사용중이다.

이번에 React-native로 사진첩에 접근할 필요가 있어서 초기 설정을 하는중에 개발인생 중 가장 많은 오류를 만났다..ㅎ 이래서 앱은 정말 골치아프다
우선 책을 보고 셋팅을 했기 때문에 순서대로 Xcode, cocoapods를 설치했다. (XCode는 앱스토어에서 설치 )

sudo gem install -g cocoapods

설치 완료후 react-native init명령어로 프로젝트를 만들고 ios폴더에 cd로 들어가 yarn ios를 실행했더니 .. 아래와 같은 오류를 만났다.

export GENERATE_INFOPLIST_FILE\=NO
    export GENERATE_MASTER_OBJECT_FILE\=NO
    export GENERATE_PKGINFO_FILE\=NO
    export GENERATE_PROFILING_CODE\=NO
    export GENERATE_TEXT_BASED_STUBS\=NO
    export GID\=20
    export GROUP\=staff
    export HEADERMAP_INCLUDES_FLAT_ENTRIES_FOR_TARGET_BEING_BUILT\=YES
    export HEADERMAP_INCLUDES_FRAMEWORK_ENTRIES_FOR_ALL_PRODUCT_TYPES\=YES
    export HEADERMAP_INCLUDES_NONPUBLIC_NONPRIVATE_HEADERS\=YES
    export HEADERMAP_INCLUDES_PROJECT_HEADERS\=YES
    export HEADERMAP_USES_FRAMEWORK_PREFIX_ENTRIES\=YES
    export HEADERMAP_USES_VFS\=NO
    export HEADER_SEARCH_PATHS\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Products/Debug-iphonesimulator/FBReactNativeSpec/include\ \ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Private\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Private/FBReactNativeSpec\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/DoubleConversion\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/FBLazyVector\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/FBReactNativeSpec\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/RCT-Folly\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/RCTRequired\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/RCTTypeSafety\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/React-Core\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/React-callinvoker\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/React-cxxreact\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/React-jsi\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/React-jsiexecutor\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/React-jsinspector\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/React-logger\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/React-perflogger\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/React-runtimeexecutor\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/ReactCommon\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/Yoga\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/fmt\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/glog\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/../../node_modules/react-native/React/FBReactNativeSpec/React/FBReactNativeSpec\"\ \"/Users/happy/Desktop/reactProject/ios/Pods/RCT-Folly\"
    export HIDE_BITCODE_SYMBOLS\=YES
    export HOME\=/Users/happy
    export ICONV\=/usr/bin/iconv
    export INFOPLIST_EXPAND_BUILD_SETTINGS\=YES
    export INFOPLIST_OUTPUT_FORMAT\=binary
    export INFOPLIST_PREPROCESS\=NO
    export INLINE_PRIVATE_FRAMEWORKS\=NO
    export INSTALLHDRS_COPY_PHASE\=NO
    export INSTALLHDRS_SCRIPT_PHASE\=NO
    export INSTALL_DIR\=/tmp/Pods.dst/usr/local/lib
    export INSTALL_GROUP\=staff
    export INSTALL_MODE_FLAG\=u+w,go-w,a+rX
    export INSTALL_OWNER\=happy
    export INSTALL_PATH\=/usr/local/lib
    export INSTALL_ROOT\=/tmp/Pods.dst
    export IPHONEOS_DEPLOYMENT_TARGET\=11.0
    export JAVAC_DEFAULT_FLAGS\=-J-Xms64m\ -J-XX:NewSize\=4M\ -J-Dfile.encoding\=UTF8
    export JAVA_APP_STUB\=/System/Library/Frameworks/JavaVM.framework/Resources/MacOS/JavaApplicationStub
    export JAVA_ARCHIVE_CLASSES\=YES
    export JAVA_ARCHIVE_TYPE\=JAR
    export JAVA_COMPILER\=/usr/bin/javac
    export JAVA_FRAMEWORK_RESOURCES_DIRS\=Resources
    export JAVA_JAR_FLAGS\=cv
    export JAVA_SOURCE_SUBDIR\=.
    export JAVA_USE_DEPENDENCIES\=YES
    export JAVA_ZIP_FLAGS\=-urg
    export JIKES_DEFAULT_FLAGS\=+E\ +OLDCSO
    export KEEP_PRIVATE_EXTERNS\=NO
    export LD_DEPENDENCY_INFO_FILE\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Objects-normal/undefined_arch/FBReactNativeSpec_dependency_info.dat
    export LD_GENERATE_MAP_FILE\=NO
    export LD_MAP_FILE_PATH\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/FBReactNativeSpec-LinkMap-normal-undefined_arch.txt
    export LD_NO_PIE\=NO
    export LD_QUOTE_LINKER_ARGUMENTS_FOR_COMPILER_DRIVER\=YES
    export LEGACY_DEVELOPER_DIR\=/Applications/Xcode.app/Contents/PlugIns/Xcode3Core.ideplugin/Contents/SharedSupport/Developer
    export LEX\=lex
    export LIBRARY_DEXT_INSTALL_PATH\=/Library/DriverExtensions
    export LIBRARY_FLAG_NOSPACE\=YES
    export LIBRARY_FLAG_PREFIX\=-l
    export LIBRARY_KEXT_INSTALL_PATH\=/Library/Extensions
    export LIBRARY_SEARCH_PATHS\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Products/Debug-iphonesimulator/FBReactNativeSpec\ 
    export LINKER_DISPLAYS_MANGLED_NAMES\=NO
    export LINK_FILE_LIST_normal_x86_64\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Objects-normal/x86_64/FBReactNativeSpec.LinkFileList
    export LINK_WITH_STANDARD_LIBRARIES\=YES
    export LLVM_TARGET_TRIPLE_OS_VERSION\=ios11.0
    export LLVM_TARGET_TRIPLE_SUFFIX\=-simulator
    export LLVM_TARGET_TRIPLE_VENDOR\=apple
    export LOCALIZATION_EXPORT_SUPPORTED\=YES
    export LOCALIZED_STRING_MACRO_NAMES\=NSLocalizedString\ CFCopyLocalizedString
    export LOCALIZED_STRING_SWIFTUI_SUPPORT\=YES
    export LOCAL_ADMIN_APPS_DIR\=/Applications/Utilities
    export LOCAL_APPS_DIR\=/Applications
    export LOCAL_DEVELOPER_DIR\=/Library/Developer
    export LOCAL_LIBRARY_DIR\=/Library
    export LOCROOT\=/Users/happy/Desktop/reactProject/ios/Pods
    export LOCSYMROOT\=/Users/happy/Desktop/reactProject/ios/Pods
    export MACH_O_TYPE\=staticlib
    export MAC_OS_X_PRODUCT_BUILD_VERSION\=21E230
    export MAC_OS_X_VERSION_ACTUAL\=120300
    export MAC_OS_X_VERSION_MAJOR\=120000
    export MAC_OS_X_VERSION_MINOR\=120300
    export METAL_LIBRARY_FILE_BASE\=default
    export METAL_LIBRARY_OUTPUT_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Products/Debug-iphonesimulator/FBReactNativeSpec/
    export MODULE_CACHE_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/ModuleCache.noindex
    export MTL_ENABLE_DEBUG_INFO\=INCLUDE_SOURCE
    export MTL_FAST_MATH\=YES
    export NATIVE_ARCH\=x86_64
    export NATIVE_ARCH_32_BIT\=i386
    export NATIVE_ARCH_64_BIT\=x86_64
    export NATIVE_ARCH_ACTUAL\=x86_64
    export NO_COMMON\=YES
    export OBJC_ABI_VERSION\=2
    export OBJECT_FILE_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Objects
    export OBJECT_FILE_DIR_normal\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Objects-normal
    export OBJROOT\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex
    export ONLY_ACTIVE_ARCH\=YES
    export OS\=MACOS
    export OSAC\=/usr/bin/osacompile
    export OTHER_CFLAGS\=\ -fmodule-map-file\=\"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/React/React-Core.modulemap\"\ -fmodule-map-file\=\"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/yoga/Yoga.modulemap\"
    export OTHER_CPLUSPLUSFLAGS\=\ -fmodule-map-file\=\"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/React/React-Core.modulemap\"\ -fmodule-map-file\=\"/Users/happy/Desktop/reactProject/ios/Pods/Headers/Public/yoga/Yoga.modulemap\"
    export PACKAGE_TYPE\=com.apple.package-type.static-library
    export PASCAL_STRINGS\=YES
    export PATH\=/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin:/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/local/bin:/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/libexec:/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/usr/bin:/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/usr/local/bin:/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/local/bin:/Applications/Xcode.app/Contents/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/local/bin:/var/folders/x4/kwk1qfsj3sndq6fgfc5_83vh0000gn/T/yarn--1648226174070-0.3699977193943793:/Users/happy/Desktop/reactProject/node_modules/.bin:/Users/happy/.config/yarn/link/node_modules/.bin:/usr/local/libexec/lib/node_modules/npm/bin/node-gyp-bin:/usr/local/lib/node_modules/npm/bin/node-gyp-bin:/usr/local/bin/node_modules/npm/bin/node-gyp-bin:/Users/happy/opt/anaconda3/bin:/Users/happy/opt/anaconda3/condabin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/Users/happy/.rvm/bin:/Users/happy/.yarn/bin
    export PATH_PREFIXES_EXCLUDED_FROM_HEADER_DEPENDENCIES\=/usr/include\ /usr/local/include\ /System/Library/Frameworks\ /System/Library/PrivateFrameworks\ /Applications/Xcode.app/Contents/Developer/Headers\ /Applications/Xcode.app/Contents/Developer/SDKs\ /Applications/Xcode.app/Contents/Developer/Platforms
    export PER_ARCH_OBJECT_FILE_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Objects-normal/undefined_arch
    export PER_VARIANT_OBJECT_FILE_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Objects-normal
    export PKGINFO_FILE_PATH\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/PkgInfo
    export PLATFORM_DEVELOPER_APPLICATIONS_DIR\=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications
    export PLATFORM_DEVELOPER_BIN_DIR\=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin
    export PLATFORM_DEVELOPER_LIBRARY_DIR\=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Library
    export PLATFORM_DEVELOPER_SDK_DIR\=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs
    export PLATFORM_DEVELOPER_TOOLS_DIR\=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Tools
    export PLATFORM_DEVELOPER_USR_DIR\=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr
    export PLATFORM_DIR\=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform
    export PLATFORM_DISPLAY_NAME\=iOS\ Simulator
    export PLATFORM_FAMILY_NAME\=iOS
    export PLATFORM_NAME\=iphonesimulator
    export PLATFORM_PREFERRED_ARCH\=x86_64
    export PLATFORM_PRODUCT_BUILD_VERSION\=19E239
    export PLIST_FILE_OUTPUT_FORMAT\=binary
    export PODS_BUILD_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Products
    export PODS_CONFIGURATION_BUILD_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Products/Debug-iphonesimulator
    export PODS_ROOT\=/Users/happy/Desktop/reactProject/ios/Pods
    export PODS_TARGET_SRCROOT\=/Users/happy/Desktop/reactProject/ios/Pods/../../node_modules/react-native/React/FBReactNativeSpec
    export PODS_XCFRAMEWORKS_BUILD_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Products/Debug-iphonesimulator/XCFrameworkIntermediates
    export PRECOMPS_INCLUDE_HEADERS_FROM_BUILT_PRODUCTS_DIR\=YES
    export PRECOMP_DESTINATION_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/PrefixHeaders
    export PRESERVE_DEAD_CODE_INITS_AND_TERMS\=NO
    export PRODUCT_BUNDLE_IDENTIFIER\=org.cocoapods.FBReactNativeSpec
    export PRODUCT_MODULE_NAME\=FBReactNativeSpec
    export PRODUCT_NAME\=FBReactNativeSpec
    export PRODUCT_SETTINGS_PATH\=
    export PRODUCT_TYPE\=com.apple.product-type.library.static
    export PROFILING_CODE\=NO
    export PROJECT\=Pods
    export PROJECT_DERIVED_FILE_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/DerivedSources
    export PROJECT_DIR\=/Users/happy/Desktop/reactProject/ios/Pods
    export PROJECT_FILE_PATH\=/Users/happy/Desktop/reactProject/ios/Pods/Pods.xcodeproj
    export PROJECT_NAME\=Pods
    export PROJECT_TEMP_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build
    export PROJECT_TEMP_ROOT\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex
    export RECURSIVE_SEARCH_PATHS_FOLLOW_SYMLINKS\=YES
    export REMOVE_CVS_FROM_RESOURCES\=YES
    export REMOVE_GIT_FROM_RESOURCES\=YES
    export REMOVE_HEADERS_FROM_EMBEDDED_BUNDLES\=YES
    export REMOVE_HG_FROM_RESOURCES\=YES
    export REMOVE_SVN_FROM_RESOURCES\=YES
    export REZ_COLLECTOR_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/ResourceManagerResources
    export REZ_EXECUTABLE\=YES
    export REZ_OBJECTS_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/ResourceManagerResources/Objects
    export REZ_SEARCH_PATHS\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Products/Debug-iphonesimulator/FBReactNativeSpec\ 
    export SCAN_ALL_SOURCE_FILES_FOR_INCLUDES\=NO
    export SCRIPT_INPUT_FILE_0\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/ActionSheetIOS/NativeActionSheetManager.js
    export SCRIPT_INPUT_FILE_1\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Alert/NativeAlertManager.js
    export SCRIPT_INPUT_FILE_10\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Components/AccessibilityInfo/NativeAccessibilityInfo.js
    export SCRIPT_INPUT_FILE_11\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Components/AccessibilityInfo/NativeAccessibilityManager.js
    export SCRIPT_INPUT_FILE_12\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Components/Clipboard/NativeClipboard.js
    export SCRIPT_INPUT_FILE_13\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Components/DatePickerAndroid/NativeDatePickerAndroid.js
    export SCRIPT_INPUT_FILE_14\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Components/Keyboard/NativeKeyboardObserver.js
    export SCRIPT_INPUT_FILE_15\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Components/Sound/NativeSoundManager.js
    export SCRIPT_INPUT_FILE_16\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Components/StatusBar/NativeStatusBarManagerAndroid.js
    export SCRIPT_INPUT_FILE_17\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Components/StatusBar/NativeStatusBarManagerIOS.js
    export SCRIPT_INPUT_FILE_18\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Components/ToastAndroid/NativeToastAndroid.js
    export SCRIPT_INPUT_FILE_19\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Core/NativeExceptionsManager.js
    export SCRIPT_INPUT_FILE_2\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Animated/NativeAnimatedHelper.js
    export SCRIPT_INPUT_FILE_20\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Core/SegmentFetcher/NativeSegmentFetcher.js
    export SCRIPT_INPUT_FILE_21\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Core/Timers/NativeTiming.js
    export SCRIPT_INPUT_FILE_22\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js
    export SCRIPT_INPUT_FILE_23\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/EventEmitter/__mocks__/NativeEventEmitter.js
    export SCRIPT_INPUT_FILE_24\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/HeapCapture/NativeJSCHeapCapture.js
    export SCRIPT_INPUT_FILE_25\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Image/NativeImageEditor.js
    export SCRIPT_INPUT_FILE_26\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Image/NativeImageLoaderAndroid.js
    export SCRIPT_INPUT_FILE_27\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Image/NativeImageLoaderIOS.js
    export SCRIPT_INPUT_FILE_28\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Image/NativeImagePickerIOS.js
    export SCRIPT_INPUT_FILE_29\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Image/NativeImageStoreAndroid.js
    export SCRIPT_INPUT_FILE_3\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Animated/NativeAnimatedModule.js
    export SCRIPT_INPUT_FILE_30\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Image/NativeImageStoreIOS.js
    export SCRIPT_INPUT_FILE_31\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Interaction/NativeFrameRateLogger.js
    export SCRIPT_INPUT_FILE_32\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Linking/NativeIntentAndroid.js
    export SCRIPT_INPUT_FILE_33\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Linking/NativeLinkingManager.js
    export SCRIPT_INPUT_FILE_34\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Modal/NativeModalManager.js
    export SCRIPT_INPUT_FILE_35\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/NativeComponent/NativeComponentRegistry.js
    export SCRIPT_INPUT_FILE_36\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/NativeModules/specs/NativeAnimationsDebugModule.js
    export SCRIPT_INPUT_FILE_37\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/NativeModules/specs/NativeDevMenu.js
    export SCRIPT_INPUT_FILE_38\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/NativeModules/specs/NativeDevSettings.js
    export SCRIPT_INPUT_FILE_39\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/NativeModules/specs/NativeDeviceEventManager.js
    export SCRIPT_INPUT_FILE_4\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Animated/NativeAnimatedTurboModule.js
    export SCRIPT_INPUT_FILE_40\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/NativeModules/specs/NativeDialogManagerAndroid.js
    export SCRIPT_INPUT_FILE_41\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/NativeModules/specs/NativeLogBox.js
    export SCRIPT_INPUT_FILE_42\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/NativeModules/specs/NativeRedBox.js
    export SCRIPT_INPUT_FILE_43\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/NativeModules/specs/NativeSourceCode.js
    export SCRIPT_INPUT_FILE_44\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Network/NativeNetworkingAndroid.js
    export SCRIPT_INPUT_FILE_45\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Network/NativeNetworkingIOS.js
    export SCRIPT_INPUT_FILE_46\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Performance/NativeJSCSamplingProfiler.js
    export SCRIPT_INPUT_FILE_47\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/PermissionsAndroid/NativePermissionsAndroid.js
    export SCRIPT_INPUT_FILE_48\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/PushNotificationIOS/NativePushNotificationManagerIOS.js
    export SCRIPT_INPUT_FILE_49\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/ReactNative/NativeHeadlessJsTaskSupport.js
    export SCRIPT_INPUT_FILE_5\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/AppState/NativeAppState.js
    export SCRIPT_INPUT_FILE_50\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/ReactNative/NativeI18nManager.js
    export SCRIPT_INPUT_FILE_51\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/ReactNative/NativeUIManager.js
    export SCRIPT_INPUT_FILE_52\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Settings/NativeSettingsManager.js
    export SCRIPT_INPUT_FILE_53\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Share/NativeShareModule.js
    export SCRIPT_INPUT_FILE_54\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Storage/NativeAsyncLocalStorage.js
    export SCRIPT_INPUT_FILE_55\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Storage/NativeAsyncSQLiteDBStorage.js
    export SCRIPT_INPUT_FILE_56\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/TurboModule/samples/NativeSampleTurboModule.js
    export SCRIPT_INPUT_FILE_57\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Utilities/NativeAppearance.js
    export SCRIPT_INPUT_FILE_58\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Utilities/NativeDevLoadingView.js
    export SCRIPT_INPUT_FILE_59\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Utilities/NativeDevSplitBundleLoader.js
    export SCRIPT_INPUT_FILE_6\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/BatchedBridge/NativeModules.js
    export SCRIPT_INPUT_FILE_60\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Utilities/NativeDeviceInfo.js
    export SCRIPT_INPUT_FILE_61\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Utilities/NativeJSDevSupport.js
    export SCRIPT_INPUT_FILE_62\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Utilities/NativePlatformConstantsAndroid.js
    export SCRIPT_INPUT_FILE_63\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Utilities/NativePlatformConstantsIOS.js
    export SCRIPT_INPUT_FILE_64\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Vibration/NativeVibration.js
    export SCRIPT_INPUT_FILE_65\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/WebSocket/NativeWebSocketModule.js
    export SCRIPT_INPUT_FILE_7\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Blob/NativeBlobModule.js
    export SCRIPT_INPUT_FILE_8\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/Blob/NativeFileReaderModule.js
    export SCRIPT_INPUT_FILE_9\=/Users/happy/Desktop/reactProject/node_modules/react-native/Libraries/BugReporting/NativeBugReporting.js
    export SCRIPT_INPUT_FILE_COUNT\=66
    export SCRIPT_INPUT_FILE_LIST_COUNT\=0
    export SCRIPT_OUTPUT_FILE_0\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/DerivedSources/codegen-FBReactNativeSpec.log
    export SCRIPT_OUTPUT_FILE_1\=/Users/happy/Desktop/reactProject/ios/Pods/\ /Users/happy/Desktop/reactProject/node_modules/react-native/React/FBReactNativeSpec/FBReactNativeSpec/FBReactNativeSpec.h
    export SCRIPT_OUTPUT_FILE_2\=/Users/happy/Desktop/reactProject/ios/Pods/\ /Users/happy/Desktop/reactProject/node_modules/react-native/React/FBReactNativeSpec/FBReactNativeSpec/FBReactNativeSpec-generated.mm
    export SCRIPT_OUTPUT_FILE_COUNT\=3
    export SCRIPT_OUTPUT_FILE_LIST_COUNT\=0
    export SDKROOT\=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator15.4.sdk
    export SDK_DIR\=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator15.4.sdk
    export SDK_DIR_iphonesimulator\=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator15.4.sdk
    export SDK_DIR_iphonesimulator15_4\=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator15.4.sdk
    export SDK_NAME\=iphonesimulator15.4
    export SDK_NAMES\=iphonesimulator15.4
    export SDK_PRODUCT_BUILD_VERSION\=19E239
    export SDK_VERSION\=15.4
    export SDK_VERSION_ACTUAL\=150400
    export SDK_VERSION_MAJOR\=150000
    export SDK_VERSION_MINOR\=150400
    export SED\=/usr/bin/sed
    export SEPARATE_STRIP\=NO
    export SEPARATE_SYMBOL_EDIT\=NO
    export SET_DIR_MODE_OWNER_GROUP\=YES
    export SET_FILE_MODE_OWNER_GROUP\=NO
    export SHALLOW_BUNDLE\=NO
    export SHARED_DERIVED_FILE_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Products/Debug-iphonesimulator/FBReactNativeSpec/DerivedSources
    export SHARED_PRECOMPS_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/PrecompiledHeaders
    export SKIP_INSTALL\=YES
    export SOURCE_ROOT\=/Users/happy/Desktop/reactProject/ios/Pods
    export SRCROOT\=/Users/happy/Desktop/reactProject/ios/Pods
    export STRINGSDATA_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Objects-normal/undefined_arch
    export STRINGSDATA_ROOT\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build
    export STRINGS_FILE_INFOPLIST_RENAME\=YES
    export STRINGS_FILE_OUTPUT_ENCODING\=binary
    export STRIP_BITCODE_FROM_COPIED_FILES\=NO
    export STRIP_INSTALLED_PRODUCT\=NO
    export STRIP_STYLE\=debugging
    export STRIP_SWIFT_SYMBOLS\=YES
    export SUPPORTED_DEVICE_FAMILIES\=1,2
    export SUPPORTED_PLATFORMS\=iphoneos\ iphonesimulator
    export SUPPORTS_TEXT_BASED_API\=NO
    export SWIFT_ACTIVE_COMPILATION_CONDITIONS\=DEBUG\ 
    export SWIFT_EMIT_LOC_STRINGS\=NO
    export SWIFT_OPTIMIZATION_LEVEL\=-Onone
    export SWIFT_PLATFORM_TARGET_PREFIX\=ios
    export SWIFT_RESPONSE_FILE_PATH_normal_x86_64\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Objects-normal/x86_64/FBReactNativeSpec.SwiftFileList
    export SWIFT_VERSION\=5.0
    export SYMROOT\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Products
    export SYSTEM_ADMIN_APPS_DIR\=/Applications/Utilities
    export SYSTEM_APPS_DIR\=/Applications
    export SYSTEM_CORE_SERVICES_DIR\=/System/Library/CoreServices
    export SYSTEM_DEMOS_DIR\=/Applications/Extras
    export SYSTEM_DEVELOPER_APPS_DIR\=/Applications/Xcode.app/Contents/Developer/Applications
    export SYSTEM_DEVELOPER_BIN_DIR\=/Applications/Xcode.app/Contents/Developer/usr/bin
    export SYSTEM_DEVELOPER_DEMOS_DIR\=/Applications/Xcode.app/Contents/Developer/Applications/Utilities/Built\ Examples
    export SYSTEM_DEVELOPER_DIR\=/Applications/Xcode.app/Contents/Developer
    export SYSTEM_DEVELOPER_DOC_DIR\=/Applications/Xcode.app/Contents/Developer/ADC\ Reference\ Library
    export SYSTEM_DEVELOPER_GRAPHICS_TOOLS_DIR\=/Applications/Xcode.app/Contents/Developer/Applications/Graphics\ Tools
    export SYSTEM_DEVELOPER_JAVA_TOOLS_DIR\=/Applications/Xcode.app/Contents/Developer/Applications/Java\ Tools
    export SYSTEM_DEVELOPER_PERFORMANCE_TOOLS_DIR\=/Applications/Xcode.app/Contents/Developer/Applications/Performance\ Tools
    export SYSTEM_DEVELOPER_RELEASENOTES_DIR\=/Applications/Xcode.app/Contents/Developer/ADC\ Reference\ Library/releasenotes
    export SYSTEM_DEVELOPER_TOOLS\=/Applications/Xcode.app/Contents/Developer/Tools
    export SYSTEM_DEVELOPER_TOOLS_DOC_DIR\=/Applications/Xcode.app/Contents/Developer/ADC\ Reference\ Library/documentation/DeveloperTools
    export SYSTEM_DEVELOPER_TOOLS_RELEASENOTES_DIR\=/Applications/Xcode.app/Contents/Developer/ADC\ Reference\ Library/releasenotes/DeveloperTools
    export SYSTEM_DEVELOPER_USR_DIR\=/Applications/Xcode.app/Contents/Developer/usr
    export SYSTEM_DEVELOPER_UTILITIES_DIR\=/Applications/Xcode.app/Contents/Developer/Applications/Utilities
    export SYSTEM_DEXT_INSTALL_PATH\=/System/Library/DriverExtensions
    export SYSTEM_DOCUMENTATION_DIR\=/Library/Documentation
    export SYSTEM_KEXT_INSTALL_PATH\=/System/Library/Extensions
    export SYSTEM_LIBRARY_DIR\=/System/Library
    export TAPI_ENABLE_PROJECT_HEADERS\=NO
    export TAPI_VERIFY_MODE\=ErrorsOnly
    export TARGETED_DEVICE_FAMILY\=1,2
    export TARGETNAME\=FBReactNativeSpec
    export TARGET_BUILD_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Products/Debug-iphonesimulator/FBReactNativeSpec
    export TARGET_DEVICE_IDENTIFIER\=3149D368-C4AE-4C76-89F8-3FB0493C196F
    export TARGET_DEVICE_MODEL\=iPhone14,5
    export TARGET_DEVICE_OS_VERSION\=15.4
    export TARGET_DEVICE_PLATFORM_NAME\=iphonesimulator
    export TARGET_NAME\=FBReactNativeSpec
    export TARGET_TEMP_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build
    export TEMP_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build
    export TEMP_FILES_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build
    export TEMP_FILE_DIR\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build
    export TEMP_ROOT\=/Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex
    export TEST_FRAMEWORK_SEARCH_PATHS\=\ /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Library/Frameworks\ /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator15.4.sdk/Developer/Library/Frameworks
    export TEST_LIBRARY_SEARCH_PATHS\=\ /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/lib
    export TOOLCHAINS\=com.apple.dt.toolchain.XcodeDefault
    export TOOLCHAIN_DIR\=/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain
    export TREAT_MISSING_BASELINES_AS_TEST_FAILURES\=NO
    export UID\=501
    export UNSTRIPPED_PRODUCT\=NO
    export USER\=happy
    export USER_APPS_DIR\=/Users/happy/Applications
    export USER_LIBRARY_DIR\=/Users/happy/Library
    export USE_DYNAMIC_NO_PIC\=YES
    export USE_HEADERMAP\=YES
    export USE_HEADER_SYMLINKS\=NO
    export USE_LLVM_TARGET_TRIPLES\=YES
    export USE_LLVM_TARGET_TRIPLES_FOR_CLANG\=YES
    export USE_LLVM_TARGET_TRIPLES_FOR_LD\=YES
    export USE_LLVM_TARGET_TRIPLES_FOR_TAPI\=YES
    export USE_RECURSIVE_SCRIPT_INPUTS_IN_SCRIPT_PHASES\=YES
    export VALIDATE_DEVELOPMENT_ASSET_PATHS\=YES_ERROR
    export VALIDATE_PRODUCT\=NO
    export VALIDATE_WORKSPACE\=YES_ERROR
    export VALID_ARCHS\=arm64\ arm64e\ i386\ x86_64
    export VERBOSE_PBXCP\=NO
    export VERSION_INFO_BUILDER\=happy
    export VERSION_INFO_FILE\=FBReactNativeSpec_vers.c
    export VERSION_INFO_STRING\=\"@\(\#\)PROGRAM:FBReactNativeSpec\ \ PROJECT:Pods-\"
    export WRAP_ASSET_PACKS_IN_SEPARATE_DIRECTORIES\=NO
    export XCODE_APP_SUPPORT_DIR\=/Applications/Xcode.app/Contents/Developer/Library/Xcode
    export XCODE_PRODUCT_BUILD_VERSION\=13E113
    export XCODE_VERSION_ACTUAL\=1330
    export XCODE_VERSION_MAJOR\=1300
    export XCODE_VERSION_MINOR\=1330
    export XPCSERVICES_FOLDER_PATH\=/XPCServices
    export YACC\=yacc
    export arch\=undefined_arch
    export variant\=normal
    /bin/sh -c /Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Script-5F4C70EF7D90A5A5BDAEB404279F232A.sh
N/A: version "default -> N/A" is not yet installed.

You need to run "nvm install default" to install it before using it.
Command PhaseScriptExecution failed with a nonzero exit code


2022-03-26 01:47:02.744 xcodebuild[41720:229409] Requested but did not find extension point with identifier Xcode.IDEKit.ExtensionSentinelHostApplications for extension Xcode.DebuggerFoundation.AppExtensionHosts.watchOS of plug-in com.apple.dt.IDEWatchSupportCore
2022-03-26 01:47:02.744 xcodebuild[41720:229409] Requested but did not find extension point with identifier Xcode.IDEKit.ExtensionPointIdentifierToBundleIdentifier for extension Xcode.DebuggerFoundation.AppExtensionToBundleIdentifierMap.watchOS of plug-in com.apple.dt.IDEWatchSupportCore
** BUILD FAILED **


The following build commands failed:
        PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/happy/Library/Developer/Xcode/DerivedData/reactProject-delykgxnkgwfzvfpjeouqgcoawyh/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Script-5F4C70EF7D90A5A5BDAEB404279F232A.sh (in target 'FBReactNativeSpec' from project 'Pods')
(1 failure)

쭉 잘 실행되다가 마지막쯤에 보면 PhaseScriptExecution 이런 에러가 보인다
그 위에 보면 nvm install default를 하라고 돼있길래 했더니 또 다음과 같은 오류가 발생했다.

Version 'default' not found - try `nvm ls-remote` to browse available versions.

해결한 명령어 순서대로 정리

$ nvm install node

$ node --version
$ v17.8.0

$ which node
$ /Users/happy/.nvm/versions/node/v17.8.0/bin/node

$ nvm ls-remote

결과: 아래처럼 설치할 수 있는 버전들이 쭉 출력된다.

v0.1.14
        v0.1.15
        v0.1.16
        v0.1.17
        v0.1.18
        v0.1.19
        v0.1.20
        v0.1.21
        v0.1.22
        v0.1.23
        v0.1.24
        v0.1.25
        v0.1.26
        v0.1.27
        v0.1.28
        v0.1.29
        v0.1.30
        v0.1.31
        v0.1.32
        v0.1.33
        v0.1.90
        v0.1.91
        v0.1.92
        v0.1.93
        v0.1.94
        v0.1.95
        v0.1.96
        v0.1.97
        v0.1.98
        v0.1.99
       v0.1.100
       v0.1.101
       v0.1.102
       v0.1.103
       v0.1.104
         v0.2.0
         v0.2.1
         v0.2.2
         v0.2.3
         v0.2.4
         v0.2.5
         v0.2.6
         v0.3.0
         v0.3.1
         v0.3.2
         v0.3.3
         v0.3.4
         v0.3.5
         v0.3.6
         v0.3.7
         v0.3.8
         v0.4.0
         v0.4.1
         v0.4.2
         v0.4.3
         v0.4.4
         v0.4.5
         v0.4.6
         v0.4.7
         v0.4.8
         v0.4.9
        v0.4.10
        v0.4.11
        v0.4.12
         v0.5.0
         v0.5.1
         v0.5.2
         v0.5.3
         v0.5.4
         v0.5.5
         v0.5.6
         v0.5.7
         v0.5.8
         v0.5.9
        v0.5.10
         v0.6.0
         v0.6.1
         v0.6.2
         v0.6.3
         v0.6.4
         v0.6.5
         v0.6.6
         v0.6.7
         v0.6.8
         v0.6.9
        v0.6.10
        v0.6.11
        v0.6.12
        v0.6.13
        v0.6.14
        v0.6.15
        v0.6.16
        v0.6.17
        v0.6.18
        v0.6.19
        v0.6.20
        v0.6.21
         v0.7.0
         v0.7.1
         v0.7.2
         v0.7.3
         v0.7.4
         v0.7.5
         v0.7.6
         v0.7.7
         v0.7.8
         v0.7.9
         ...
         
         v17.7.2
->       v17.8.0

$ nvm install v4

Downloading and installing node v4.9.1...
Downloading https://nodejs.org/dist/v4.9.1/node-v4.9.1-darwin-x64.tar.xz...
#################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v4.9.1 (npm v2.15.11)

$ nvm alias default system

alias 옵션으로 기본 노드 버전을 변경한다. 이미 OS에 설치해 놓은 system 버전을 기본(default)으로 변경해 보자.

default -> system

$ nvm use v17.8.0

Now using node v17.8.0 (npm v8.5.5)

$ yarn ios

성공 ..! 결국 노드 버전 차이 였던 거..

참고

https://jeonghwan-kim.github.io/2016/08/10/nvm.html

[오류로그]npm install -global로 설치 시 command not found 해결법

ruby_s — Fri, 25 Mar 2022 22:57:15 +0900

나는 macOS M1을 사용중이다.

터미널에서

npm install -global yarn

명령어로 yarn을 설치 했다. 터미널에서 yarn -v 로 버전을 확인해보면 올바르게 출력되었다.

하지만 VSCode터미널에서는 계속해서 다음과 같은 오류가 발생했다..

zsh: command not found: yarn

오류를 해결하려는 순서대로 적겠다.(해결 X는 저 방법으로 해결되지 않은것.)

1. 해결X

brew uninstall yarn
npm uninstall yarn
npm install -global yarn

2. 해결X
You should add

export PATH="$PATH:$(yarn global bin)"

to your ~/.bash_profile

3. 해결O

https://realapril.tistory.com/27

npm설치한 프로그램이 뭘해도 command not found가 뜰때

mac, 리눅스 공통 npm global 설치한후 실행시 계속 command not found 가 뜰때 보통 경로문제다. 하지만 .bash 파일을 수정하다 잘돌아가던것까지 박살나기 쉽다. 우회하자. 터미널에서 경로 세팅을 다시

realapril.tistory.com

위와 같이 경로 설정 문제였다.. 대신 아래 명령어처럼 경로를 설정해줬다면

npm config set prefix /usr/local

npm 으로 설치할 때 sudo npm install로 설치를 해야한다. 로컬 파일이 숨김파일이기 때문인 것 같다.

[백준] 퇴사 - silver3 | node.js | 다이나믹 프로그래밍 | 브루트포스

ruby_s — Sun, 20 Mar 2022 23:09:12 +0900

문제 (https://www.acmicpc.net/problem/14501)

상담원으로 일하고 있는 백준이는 퇴사를 하려고 한다.

오늘부터 N+1일째 되는 날 퇴사를 하기 위해서, 남은 N일 동안 최대한 많은 상담을 하려고 한다.

백준이는 비서에게 최대한 많은 상담을 잡으라고 부탁을 했고, 비서는 하루에 하나씩 서로 다른 사람의 상담을 잡아놓았다.

각각의 상담은 상담을 완료하는데 걸리는 기간 Ti와 상담을 했을 때 받을 수 있는 금액 Pi로 이루어져 있다.

N = 7인 경우에 다음과 같은 상담 일정표를 보자.

	1일	2일	3일	4일	5일	6일	7일
Ti	3	5	1	1	2	4	2
Pi	10	20	10	20	15	40	200

1일에 잡혀있는 상담은 총 3일이 걸리며, 상담했을 때 받을 수 있는 금액은 10이다. 5일에 잡혀있는 상담은 총 2일이 걸리며, 받을 수 있는 금액은 15이다.

상담을 하는데 필요한 기간은 1일보다 클 수 있기 때문에, 모든 상담을 할 수는 없다. 예를 들어서 1일에 상담을 하게 되면, 2일, 3일에 있는 상담은 할 수 없게 된다. 2일에 있는 상담을 하게 되면, 3, 4, 5, 6일에 잡혀있는 상담은 할 수 없다.

또한, N+1일째에는 회사에 없기 때문에, 6, 7일에 있는 상담을 할 수 없다.

퇴사 전에 할 수 있는 상담의 최대 이익은 1일, 4일, 5일에 있는 상담을 하는 것이며, 이때의 이익은 10+20+15=45이다.

상담을 적절히 했을 때, 백준이가 얻을 수 있는 최대 수익을 구하는 프로그램을 작성하시오.

입력

첫째 줄에 N (1 ≤ N ≤ 15)이 주어진다.

둘째 줄부터 N개의 줄에 Ti와 Pi가 공백으로 구분되어서 주어지며, 1일부터 N일까지 순서대로 주어진다. (1 ≤ Ti ≤ 5, 1 ≤ Pi ≤ 1,000)

출력

첫째 줄에 백준이가 얻을 수 있는 최대 이익을 출력한다.

예제 입력 1

예제 출력 1

예제 입력 2

예제 출력 2

예제 입력 3

예제 출력 3

예제 입력 4

예제 출력 4

내가 푼 풀이

function solve(){
    const dp = Array.from({ length: N+1 },() => 0);
    let max = 0;
    for(let i = 0; i < N; i++){
        const [t, p] = consult[i];
        max = Math.max(max, dp[i]);

        if(i + t <= N){
            dp[i+t] = Math.max(dp[i+t], max + p);
        }
    }
    return Math.max(...dp);
}

const filePath = process.platform === 'linux'? '/dev/stdin' : '백준/silver/14501/testcase.txt';
const input = require('fs').readFileSync(filePath).toString().trim().split('\n');
const N = +input[0];
const consult = input.slice(1).map((date)=> date.split(' ').map(Number));
console.log(solve());

현재 날짜 i에서 걸리는 시간인 t만큼 간 곳에 최댓값을 반영해주는 방식으로 풀었다.
기존에 저장되어 있던 값(dp[i+t])과 현재의 최대값 + 현재의 이득 값(max + p)을 비교하여 최댓값으로 반영해준다.

if(i + t <= N) : 현재 날짜(i)에서 t만큼 갔을때 퇴사 기간이 넘으면 판단하지 않음

[프로그래머스]입국심사 - 자바스크립트 | 이분탐색 | Lv.3

ruby_s — Sat, 12 Feb 2022 22:21:18 +0900

문제

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

코딩테스트 연습 - 입국심사

n명이 입국심사를 위해 줄을 서서 기다리고 있습니다. 각 입국심사대에 있는 심사관마다 심사하는데 걸리는 시간은 다릅니다. 처음에 모든 심사대는 비어있습니다. 한 심사대에서는 동시에 한

programmers.co.kr

풀이

function solution(n, times) {
    times.sort((a, b) => a - b);
    let min = times[0];
    let max = n * times[times.length -1];

    while(min <= max){
        const mid = Math.floor((min + max) / 2);
        const count = times.reduce((acc, curr) => acc + Math.floor(mid / curr), 0); // 한 사람당 몇명 할 수 있는지
        console.log(min, max, mid, count);
        count >= n ? max = mid - 1 : min = mid + 1;
    }
    return min;
}

1. 이분탐색을 위해서는 정렬된 배열이 필요하다.

times.sort((a, b) => a - b);

2. 가장 최소로 걸리는 시간(min)과 최대로 걸리는 시간(max)를 먼저 구해준다.

let min = times[0];
let max = n * times[times.length -1];

3. (최소+최대)/2로 시간의 중간값(mid)을 구한다.

const mid = Math.floor((min + max) / 2);

4. times를 돌면서 각 심사관 한 사람당 mid 시간동안 몇명을 심사할 수 있는지 계산(Math.floor(mid / curr))해서 총합을 구한다. (acc에 누적해줌)

const count = times.reduce((acc, curr) => acc + Math.floor(mid / curr), 0);

5. 만약, mid시간 동안 검사할 수 있는 인원의 총 수(count)가 주어진 n명보다 많거나 같을 경우,

max를 mid 이전으로 만들어 왼쪽 공간을 탐색 공간으로 정한다.

n명보다 적을 경우,

min을 mid 다음으로 만들어 오른쪽 공간을 탐색 공간으로 정한다.

count >= n ? max = mid - 1 : min = mid + 1;

그럼 최종 min값이 n명을 심사하는 데 걸리는 최소 시간이다.

느낀점

이분탐색을 그냥 왼쪽 오른쪽 조절해서 탐색하는 용, 배열에 있는 값에서 찾고자 하는 값만 찾는 알고리즘이라고 생각했었는데, 이 문제로 이분탐색을 어떻게 활용하면 되는지 알 것 같다.
처음에는 times 배열만으로 어떻게 왼쪽 오른쪽 탐색 공간을 잡을 지 생각해봤는데..

무조건 주어진 배열에서 mid값을 구해서위치만 조절하는 것이 아닌, 문제를 활용해서 내가 직접 최소값과 최대값을 지정해주고 탐색할 공간의 범위를 생각해보자. 그렇게 내가 정한 공간에서 중간값을 변경하면서 조건을 따져보는 식으로 풀면 될거다..!

[백준][BOJ] 카드 구매하기 - silver.1 | 자바스크립트 | 동적계획법 (Dynamic progrmming, DP)

ruby_s — Wed, 26 Jan 2022 23:59:11 +0900

문제

https://www.acmicpc.net/problem/11052

11052번: 카드 구매하기

첫째 줄에 민규가 구매하려고 하는 카드의 개수 N이 주어진다. (1 ≤ N ≤ 1,000) 둘째 줄에는 Pi가 P1부터 PN까지 순서대로 주어진다. (1 ≤ Pi ≤ 10,000)

www.acmicpc.net

풀이

function solution(N, price){
    let dp = [0, ...price];
    for(let i = 2; i <= N; i++){
        for(let j = 1; j < i; j++)
            dp[i] = Math.max(dp[i], dp[j] + dp[i - j]); // j + (i-j) = i이기 때문에, i 개의 카드를 뽑기 위한 조합 별로 j를 증가시켜서 최댓값을 계속 업데이트해준다.
    }
    return dp[N];
}

const fs = require('fs');
const input = fs.readFileSync('/dev/stdin').toString().trim().split('\n');
const N = +input[0];
const price = [...input[1].split(' ')].map((el) => +el);
console.log(solution(N, price))

처음에 일일이 N개를 뽑을 수 있는 조합의 경우 수를 다 구했는데, 아무리봐도 좀 더 쉽게 풀 수 있을 것 같았다.

위 코드는 각 i마다 i개씩 뽑을 수 있는 경우의 수 별로 최댓값을 계속 업데이트 해주는 방법이다.
i = 2일 때, j는 1로 한번 반복될 수 있고(조건이 j < i 이기 때문) 기존의 원래 값( dp[i] ) 보다 dp[j] + dp[i-j] 가 더 크다면 업데이트 된다.

입력 배열(price)의 1번째 인덱스에는 1장 짜리 카드의 금액이 들어있고, 2번째에는 2장 짜리 카드의 금액, 3번째에는 3장 짜리 카드의 금액 ••• 쭉쭉 들어있는데,
i = 3 일때는 j가 1, 2 로 2번 반복되고, dp[j] + dp[i-j] 에서 보면
" j = 1 : 1번째 + 2(3-1)번째 더한 값,
j = 2 : 2번째 + 1(3-2)번째 더한 값 " 을 각각 기존 값과 비교해서 더 큰 경우 업데이트 해주게 된다.

결국, i 개 반복마다 j 반복에서 맨 처음인 1부터 높은 인덱스 방향으로 올라가는 값과 i에서 j씩 빼주면서 낮은 인덱스 방향으로 내려오는 값을 더하면 그 둘은 합이 i개가 되기 때문에 "2개를 뽑는 경우 최댓값, 3개를 뽑는 경우 최댓값 ••• N개를 뽑는 경우 최댓값" 이 쭉쭉 계산돼서 dp[N]에는 N개를 뽑을 때 최댓값이 들어가게 된다.

dp[1] : 1개를 뽑을 때 최댓값
dp[2] : 2개를 뽑을 때 최댓값
•••
dp[N] : N개를 뽑을 때 최댓값

어렵다 어려워..^^

[알고리즘] 이진 탐색 (이분 탐색, Binary Search)

ruby_s — Wed, 26 Jan 2022 13:41:41 +0900

이진 탐색 (이분 탐색, Binary Search)

이진 탐색 알고리즘은 정렬되어 있는 리스트에서 탐색 범위를 절반씩 좁혀가며 데이터를 탐색하는 방법이다.
이진 탐색은 배열의 데이터가 정렬되어 있어야만 사용할 수 있는 알고리즘이다.
변수 3개(start, mid, end)를 사용하여 탐색한다.
찾고자하는 데이터와 배열의 중간(mid) 위치에 있는 데이터를 반복적으로 비교해서 원하는 데이터를 찾는 것이 이진 탐색이다.

이진 탐색(Binary Search)의 탐색 과정

위의 데이터 집합에서 8이란 데이터를 탐색하도록 하자. 우선 첫번째로 배열의 중간 요소를 선택한다.
mid = 7;

두번째로는 중간 값과 찾으려는 값을 서로 비교한다.
만약 찾으려는 값이 중간 값보다 작다면 중앙 요소의 왼쪽에서 중간 값을 다시 택하고, 찾으려는 값이 중간 값보다 크다면 오른쪽에서 중간 값을 다시 택하게 된다.
그리곤 다시 이진 탐색(Binary Search)과정을 거치는 것이다.
위의 경우, 찾으려는 값인 8이 중간값 7보다 크므로 중간 값 왼쪽에 있는 데이터는 비교할 필요가 없는 것이다.
이제, 중간 값 7의 오른편에서 중간 값을 다시 택한다.

이제는 중간 값이 9이고, 다시 찾으려는 값과 중간 값을 비교하게 됩니다.
찾으려는 값 8, mid = 9;
8이 9보다 작으므로 중간 값 왼편에서 데이터를 찾아야 한다.

그럼 다시 왼쪽에서 중간 값을 선택한다.
mid = 8;
남은 데이터 8이 중간 값으로 택해지게 되는데 찾으려는 데이터와 일치하므로 탐색을 끝마친다.

이진 탐색 코드 (JavaScript)

: 자바스크립트로 구현한 이진탐색 코드이다.

function binarySearch(sortedArray, target) {
    let start = 0;
    let end = sortedArray.length - 1;
  
    while (start < end) {
      const mid = start + Math.floor((start + end) / 2);

      if (sortedArray[mid] === target)
        return mid;

      if (sortedArray[mid] < target)
        start = mid + 1;
      else
        end = mid - 1;
    }
  
    return -1;
}
  
const nums = [10, 40, 70, 50, 30, 90, 80, 20, 60];
const sortedNums = nums.sort();

console.log(binarySearch(sortedNums, 40));
> 3

console.log(binarySearch(sortedNums, 100));
> -1

[개발환경 구축하기] babel과 Webpack

ruby_s — Tue, 25 Jan 2022 15:49:39 +0900

웹 프로젝트를 새로 시작하기 위해서는 라이브러리를 받아와 개발환경을 구축하는 일부터 시작해야 한다.
처음에는 CRA(create-react-app)으로 개발환경을 구축했지만 "CRA 없이 개발환경을 구축해보기" 공부를 하기 위해 작성해본다.

1. package.json 생성

첫 번째는 package.json 파일부터 생성해야한다.

npm init -y 명령어를 사용하여 package.json를 생성하자. yarn init -y 을 사용해도 된다.

npm init 만 입력하게 되면 사용자에게 package.json파일의 name이나 version, license등을 묻는데, -y 명령을 붙이면 npm의 package.json 기본값에 따라 파일이 생성된다.

자세한 내용은 npm init docs에서 확인하자.

npm init -y 로 생성된 파일은 아래와 같다.

//package.json

{
  "name": "babel-webpack-practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

이제 필요한 라이브러리를 붙여나가면 된다.

2. babel 설치

babel 라이브러리를 설치하기 위해서 npm install [설치할 라이브러리] 명령어를 입력하자.

우선 설치해야 할 라이브러리는 @babel/core, @babel/cli이다.
@babel/core 는 babel이 트랜스파일을 할 수 있게 해주는 역할이고,
@babel/cli 는 CLI(Command Line Interface, git bash나 cmd 같은 거임)에서 babel을 실행할 수 있게 해주는 역할이다.
나는 npm install --save-dev @babel/core @babel/cli 명령어를 사용했다.

--save-dev(줄여서 -D) 명령어는 이 라이브러리들을 개발단계에서만 사용하겠다는 뜻이다.

-D 명령어를 쓰지 않고 라이브러리를 설치하면 package.json의 dependencies 객체에 라이브러리의 이름이 추가된다. 이 패키지가 배포되어서 설치됐을 때 dependencies 객체에 포함된 라이브러리들이 같이 설치된다.

-D 명령어를 사용하고 라이브러리를 설치하면 devDependencies 객체에 라이브러리가 추가되고, 이 라이브러리들은 배포된 패키지에 포함되지 않는다.

babel은 상위 ES 문법이 사용된 js파일을 하위 ES 문법인 js파일로 변환시켜주는 라이브러리이기 때문에 개발단계에서만 사용한다. 그렇기 때문에 -D 명령어를 사용해서 설치하자.

// pacakage.json

{
  "name": "babel-webpack-practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.16.8",
    "@babel/core": "^7.16.12"
  }
}

이렇게 devDependencies에 설치한 라이브러리가 추가되었다.
하지만 이것만으로 babel을 사용할 수는 없고 plugin이 필요하다.

2-1. plugin과 preset

babel의 plugin은 실제로 코드를 변환시키는 기능을 담당한다.
babel plugin Docs를 보면 plugin이 세세하게 나뉘어져 있어 설치하는 것이 번거롭고, 내가 필요한 plugin을 하나하나 찾는 것도 힘들다.
(예를 들면, 내가 ES6의 화살표 함수 문법을 사용했다면, 이를 변환시키기 위해 @babel/plugin-transform-arrow-functions 라이브러리의 설치가 필요하고,
블럭 스코프를 사용했다면 @babel/plugin-transform-block-scoping 라이브러리의 설치가 필요하다.)

그래서 preset이 등장하게 된다.
preset은 목적에 따라 plugin들을 모아놓은 라이브러리다.

preset도 여러가지가 있는데, 그 중에서도 @babel/preset-env 라이브러리가 targets 옵션을 이용해서 어떤 브라우저에도 유연하게 대응할 수 있기 때문에 가장 자주 쓰인다.
그럼 @babel/preset-env을 설치해서 사용해보자!

npm install -D @babel/preset-env 로 설치한다. 그 다음 babel.config.js 파일을 만들어서 내가 preset을 사용하겠다는 것을 선언하자.

// babel.config.js

const presets = [
  [
    "@babel/preset-env",
    {
      targets: {
        chrome: "87",
      },
      useBuiltIns: "usage",
      corejs: "3.6.4",
    },
  ],
];

module.exports = { presets };

옵션 중, useBuiltIns는 polyfill을 사용할 것인지 아닌지를 선택할 수 있는 옵션이다.
useBuiltIns 옵션은 "usage" | "entry" | false 중 하나를 선택할 수 있고 default는 false다.

"usage"는 내 코드를 분석해서 필요한 polyfill plugin만을 적용시킨다.
"entry"는 targets 브라우저에 필요한 polyfill plugin을 모두 적용시킨다.
false는 polyfill을 사용하지 않는다는 뜻이다.

corejs 옵션은 polyfill을 사용할 때 삽입되는 corejs의 버전을 선택하는 옵션이다.
useBuiltIns 옵션이 활성화되어 있을 때 적용가능하다.
2, 3 혹은 { version: 2 | 3, proposals: boolean } 중 하나를 선택할 수 있고 default는 2다.
2는 업데이트가 중단되어서 3을 사용하는 것이 좋다.

@babel/preset-env의 옵션들과 자세한 정보는 @babel/preset-env Docs에서 확인하자.

이렇게 preset 옵션 배열을 module.exports 해주면 preset 적용이 완료된다.

3. webpack

webpack은 entry파일을 지정해서 entry파일이 의존성을 띄고 있는 모듈들을 모두 하나로 묶어내는 라이브러리다.

npm install -D webpack webpack-cli 명령어로 webpack과 webpack-cli를 설치한다.

이제 번들링할 js파일을 만든다.

// src/index.js

const pow = function (a) {
  const result = a * a;
  return result;
};

console.log(pow(3));

그리고 webpack.config.js 파일을 만들어서 옵션을 설정한다.

// webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist/js"),
    filename: "bundle.js",
  },
  devtool: "inline-source-map",
  mode: "development",
};

entry 옵션은 번들링의 시작점이 될 파일을 설정하는 옵션이다. 배열이나 객체의 형태로 여러 개의 entry를 지정할 수도 있다.

output 옵션은 번들링이 완료된 파일에 대한 옵션이다.
output.path는 번들링된 파일이 저장될 위치이고, output.filename은 번들링된 파일의 이름이다.
(위의 예시에서는 dist/js/bundle.js 경로로 파일이 생성될 것이다.)

devtool 옵션에는 여러 종류의 source-map 중 하나를 입력할 수 있다. source-map은 번들링 된 코드의 원본 위치를 알려주는 역할을 한다.
아래 사진의 맨 오른쪽을 보면 index.js:6이라고 써있는데, index.js 파일의 6번째 줄에서 콘솔에 실행됐음을 알 수 있다.
뭐 .. 이런 역할을 한다. 우리가 주로 개발하면서 많이 참고했던 것들인데, 이렇게 환경 구축에 따라 달라질 수도 있음을 느낀다.

mode옵션은 "production" | "development" 두 가지 옵션이 있다. 목적에 맞게 코드를 최적화시켜주는 역할을 한다.

이제 npx webpack 명령어로 webpack을 실행하자.

그럼 dist/js/bundle.js 이 생성된다.
bundle.js가 제대로 작동하는지 확인하기 위해 index.html 을 만들어서 bundle.js를 script로 불러온다.

// index.html

<!DOCTYPE html>
<html>
<body>
  <script src="./dist/js/bundle.js"></script>
</body>
</html>

그리고 index.html을 브라우저에 띄워 보면 (그냥 클릭해서 띄움) 위의 사진처럼 콘솔에 9가 찍히게 된다.
source-map 덕분에 이 console.log가 index.js:6에서 발생했다는 것도 알 수 있다.
여기까지가 webpack의 기본적인 기능이다. 이제 webpack의 엄청난 기능들에 대해 알아보자.

3-1. loader

webpack은 entry 파일이 의존성을 띄고 있는 모든 것을 모듈로 받아들여 묶어낸다.
내가 React를 쓰고 있고, app 컴포넌트가 css나 scss를 import하거나 혹은 TypeScript를 사용해서 js가 아닌 ts나 tsx를 사용한다면?

궁금해졌으니 css 파일을 entry로 지정해서 webpack을 사용해보자.

/* src/css/main.css */

@import url("./background.css");

/* src/css/background.css */

body {
  background-color: thistle;
}

아래는 webpack.config.js 설정이다. entry에 ./src/css/main.css 를 추가해줬다.

// webpack.config.js

const path = require("path");

module.exports = {
  entry: ["./src/js/main.js", "./src/css/main.css"],
  output: {
    path: path.resolve(__dirname, "dist/js"),
    filename: "bundle.js",
  },
  devtool: "source-map",
  mode: "development",
};

이 상태에서 webpack을 작동시키면 에러가 난다. 이 유형의 파일을 처리하려면 loader가 필요할 것이며, 현재 이 파일에 대한 loader가 설정되어있지 않다는 설명과 함께.

3-1-1. css loader

그럼 css에는 어떤 loader가 필요할까? css를 처리하기 위해서는 css-loader와 style-loader가 필요하다.

npm install -D css-loader style-loader 로 설치한 뒤 적용해보자.

// webpack.config.js

const path = require("path");

module.exports = {
  entry: ["./src/js/main.js", "./src/css/main.css"],
  output: {
    path: path.resolve(__dirname, "dist/js"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  devtool: "source-map",
  mode: "development",
};

loader를 적용하려면 module 객체안에 rules 배열을 두어야한다. rules 배열 안에는 객체들이 들어있고, 객체는 필수적으로 test와 use를 가져야 한다.
test는 loader를 적용시킬 파일 확장자의 정규표현식이고,
use는 test 확장자명을 가진 파일에 적용시킬 loader다.
use는 배열을 사용해서 하나 이상의 loader를 적용시킬 수 있고, 배열의 오른쪽에 있는 loader부터 적용된다.
결국, 이 옵션은 .css로 끝나는 파일에 1. css-loader 2. style-loader 순서로 loader를 적용시키겠다는 뜻이다.
css-loader는 css 스타일시트를 JS로 변환시켜주고, style-loader는 JS로 변환된 css 스타일시트를 DOM에 동적으로 추가시켜준다.

이제 다시 webpack을 실행시킨다. (npx webpack)
그럼 배경화면 색상이 바뀐 것을 확인할 수 있다.

3-1-2. babel loader

이제 webpack으로 묶어낼 때 js에 babel을 적용시키기 위해 babel-loader를 사용하겠다.

npm install -D babel-loader 명령어를 사용하고 webpack.config.js에서 babel-loader를 적용시키자.

// webpack.config.js

const path = require("path");

module.exports = {
  entry: ["./src/index.js", "./src/css/main.css"],
  output: {
    path: path.resolve(__dirname, "dist/js"),
    filename: "bundle.js",
  },
  module: {
    rules: [{
        test: /\.js$/,
        use: [
            {
                loader: "babel-loader",
                options: {
                    presets: [
                        [
                            "@babel/preset-env",
                            {
                                useBuiltIns: "usage",
                                corejs: "3.6.4",
                                targets: {
                                chrome: "87",
                                },
                            },
                        ],
                    ],
                },
            },
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  devtool: "inline-source-map",
  mode: "development",
};

rules 배열에 새 객체가 생겼다.
1. 먼저 test는 .js 파일 확장자를 가진 파일들을 대상으로 하고 있다.
2. use는 css-loader를 사용할 때와는 다른 형태다. use 배열안에 객체가 들어있다. 이것은 babel-loader의 option을 설정하기 위해서다.

이 객체를 살펴보면,
3. loader에는 적용할 loader인 "babel-loader"가 들어있다.
4. options는 babel-loader의 옵션을 담는 객체다. presets 배열에 사용할 preset들을 입력한다.
나는 @babel/preset-env를 사용할 것이다.
이외에도 plugin과 preset-env의 polyfill 기능도 설정할 수도 있다.
5. exclude는 webpack의 번들에서 제외할 폴더나 파일이다.
node_modules 폴더에는 수 십 수 백개의 라이브러리들이 들어있기 때문에 보통 node_modules는 .js 확장자에 적용시킬 loader에서 제외시킨다.

webpack loaders Docs에서 더 자세히 살펴볼 수 있다.

3-2. plugin

plugin은 webpack의 편의성을 높여준다. 그 중에서 편리하다고 생각되는 것 몇 개만 적용시켜 보자.

3-2-1. HtmlWebpackPlugin

HtmlWebpackPlugin은 webpack을 실행한 뒤 번들링 된 js파일을 포함한 html을 자동으로 생성해준다.
이전에 bundle.js 파일을 webpack으로 생성한 뒤, index.html 파일을 직접 만들어서 bundle.js를 포함시켰다. 이 과정을 자동으로 해주는 것이다.

npm install -D html-webpack-plugin 명령어로 설치한 뒤 적용시킨다.

// webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: ["./src/index.js", "./src/css/main.css"],
  output: {
    path: path.resolve(__dirname, "dist/js"),
    filename: "bundle.js",
  },
  module: {
    rules: [{
        test: /\.js$/,
        use: [
            {
                loader: "babel-loader",
                options: {
                    presets: [
                        [
                            "@babel/preset-env",
                            {
                                useBuiltIns: "usage",
                                corejs: "3.6.4",
                                targets: {
                                chrome: "87",
                                },
                            },
                        ],
                    ],
                },
            },
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin()],
  devtool: "inline-source-map",
  mode: "development",
};

두번째 줄의

const HtmlWebpackPlugin = require("html-webpack-plugin");

과 plugins 를 추가해주었다.

plugins: [new HtmlWebpackPlugin()],

이제 또 npx webpack을 실행시켜주면, output 경로 안에 index.htm 이 자동으로 생성된다.
HtmlWebpackPlugin Docs에서 옵션에 대해 자세히 볼 수 있다.

3-2-2 CleanWebpackPlugin

webpack을 사용하다 보면 이전에 번들링했던 결과물이 계속 남아있어 불편한 때가 있다.
CleanWebpacPlugin은 새로 번들링했을 때 이전에 번들링한 결과물을 없애준다.

3-3. WebpackDevServer

방금 webpack으로 실습을 하면서 계속 반복중인 것이 있다.

webpack.config.js 설정 수정
webpack을 실행
번들된 js파일을 index.html에 적용시킨 후 확인

이 과정을 계속 반복중이다.
불편함을 개선하기 위해 webpack 자체에서 실시간으로 코드의 변경을 반영해주는 WebpackDevServer라는 기능을 제공하고 있다.

npm install -D webpack-dev-server 명령어로 webpack-dev-server 를 설치 후, npx webpack serve 명령어로 webpack을 실행하면 번들된 js 파일이 자동으로 index.html에 삽입되어 localhost에서 실행된다.

WebpackDevServer Docs에서 자세한 설명을 보도록 하자!

여기까지 babel, webpack 에 대해 알아봤다.
정말 개발은 쉽지않다..ㅎ 이런거 하나 하나 공부할게 너무 많은 것 같다.

[자바스크립트] 문자열 중 몇개가 다른 문자인지 개수 세기 | 문자열 비교

ruby_s — Tue, 25 Jan 2022 14:56:46 +0900

reduce 활용하기

const adj = [];
const difIdx = [...el].reduce((acc, curr, idx) => curr !== word[idx] ? acc += 1 : acc, 0);
if(difIdx === 1) adj.push(el);

간단하게 for문을 돌려서 카운트를 증가시키면 비교하고자 하는 문자열과 몇개의 문자가 다른지 알 수 있지만, reduce를 활용할 수도 있다!
위의 예시에서 보면, difIdx 는 다른 문자의 개수가 저장될 것이다.

예를 들어, word = 'apple', el = 'appel'일 경우
뒤에 2문자가 다르므로 difIdx = 2가 된다.