목록전체 글 (146)
게으른개발너D
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/UuPXg/btspOAwx8WW/lR7yYG23il7j9362w788XK/img.jpg)
Player 기능을 개발하는 도중 Player Component 안에서 사용하는 state들이 불필요하게 반복 호출된다는 점을 알게되었다. 아래는 페이지를 새로고침했을 때의 영상이다. console log로 몇번 호출하는지 count를 새보니 3번이나 반복 호출된다. 처음에는 Player component 안에서 사용하는 useEffect때문인줄 알았다. useEffect 안에서 state값을 변경하면 컴포넌트 위에서부터 state 값을 다시 호출하기 때문이다. function CocoPlayer() { const playList = useRecoilValue(playListState); const [nowPlayingIdx, setNowPlayingIdx] = useState(savedNowPlayi..
알파벳 소문자로 이루어진 문자열 myString이 주어집니다. 알파벳 순서에서 "l"보다 앞서는 모든 문자를 "l"로 바꾼 문자열을 return 하는 solution 함수를 완성해 주세요. function solution(my_string) { return my_string.replace(/[a-k]/g,'l'); } 영소문자로 이루어진 문자열 my_string과 영소문자 1글자로 이루어진 문자열 alp가 매개변수로 주어집니다. my_string에서 alp에 해당하는 모든 글자를 대문자로 바꾼 문자열을 return 하는 solution 함수를 작성해 주세요. function solution(my_string, alp) { let re = new RegExp(alp, "g"); return my_strin..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/u9S5r/btspTJGFoU7/tXjS1uV42SaYCT7JQKES8K/img.jpg)
1. gh-pages 설치 gh pages를 설치할 것이다. npm i gh-pages gh pages는 결과물을 github pages에 업로드 할 수 있게 해주는 패키지이다. 일단 package.json 파일을 확인하자. 여기서 script를 보는데, 이 script를 실행하면 웹사이트의 production ready code를 생성하게 된다. production ready란 코드가 압축되고 모든게 최적화 된다는 의미이다. npm run build 이렇게 하면 브라우저가 이해할 수 있는 압축된 코드들이 들어간 build폴더가 생성된다. 2. 레파지토리 추가 github에 push하기 전에 깃헙에 들어가서 레파지토리를 먼저 만든 후 터미널창에 아래 코드를 입력하여 레파지토리를 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/sk9hw/btsp1lddb0u/D1AkH7pKXgPAtboC5I0tn1/img.jpg)
✨ What are Classes ✨ classes는 화려한 object이다. class는 보통 많은 사람들이 라이브러리나 리액트 같은 것을 만들 때 classes를 export한 다음에 classes를 이용한다. 우리가 엄청 많은 코드를 가지고 있고, 이걸 구조화하길 원할 때, class를 이용하면 매우 유용하다. 왜냐하면 class를 재사용할 수 있기 때문이다. class는 기본적으로 blueprint(청사진)이며 화려한 object이다. User라는 class를 만들어 보자 class는 안에 constructor라는 걸 가지고 있는데, constructor는 class를 말그대로 construct(구성)한다는 constructor이다. class User { constructor() { this.u..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cirxjY/btsp1jfp7OY/Ve08skgrueU6eZTqvJKzA1/img.jpg)
1. Library vs Framework 일단 pages 폴더 안에 있는 모든 것을 삭제해 보자. 그리고 pages 폴더 안에 index.js라는 파일을 만들고 이렇게 작성해 주자 // index.js function Home() { return "hi"; } export default Home; 그럼 index.js의 Home component에 넣은 hi라는 문자가 웹사이트에 자동적으로 보이고 있다. library 우리는 library를 불러오고 library를 사용해서 무언가를 한다. create-react-app을 통해서 react 앱을 만든다면, 항상 아래에 이런 부분이 만들어져 있다. // index.js ... ReactDOM.render( ... , document.getElementBy..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cJNtHi/btspRJ1hmnA/NKkBLxK5md0urldveYMBF0/img.jpg)
1. Creating a Project NextJS 프로젝트를 생성해보자 cd Documents npx create-next-app@latest --typescript 타입스크립트를 쓰려면 뒤에 --typescript를 쓰면 된다. 터미널에 위의 명령어를 입려하면 프로젝트명이 뭐냐고 물어볼 것이다 나는 nextjs-intro라고 이름 지어주었다. 설치가 다 되었으면 code nextjs-intro를 입력하여 vscode를 열어본다. npm run dev를 입력해서 실행시켜보자. http://localhost:3000에 직접 들어가서 문제없이 잘 동작하고 있는지 확인해 보자. 프로젝트는 위와 같은 디폴트 페이지를 가지고 있다.
https://school.programmers.co.kr/learn/courses/30/lessons/42579 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Question 스트리밍 사이트에서 장르 별로 가장 많이 재생된 노래를 두 개씩 모아 베스트 앨범을 출시하려 합니다. 노래는 고유 번호로 구분하며, 노래를 수록하는 기준은 다음과 같습니다. 속한 노래가 많이 재생된 장르를 먼저 수록합니다. 장르 내에서 많이 재생된 노래를 먼저 수록합니다. 장르 내에서 재생 횟수가 같은 노래 중에서는 고유 번호가 낮은 노래를 먼저 수록합니다. 노래의 장르를 나타내는..
https://school.programmers.co.kr/learn/courses/30/lessons/42587 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. Queue Array 응용 풀이 function solution(priorities, location) { let answer = 0; const PRI_SIZE = priorities.length; const priorArr = [...priorities].sort((a, b) => b - a); let maxIdx = 0; // 최댓값 순서 let i = 0; // priorities 순..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cjft7e/btsbTwszvAE/lkBKa71IVGECetErmHiPq0/img.png)
우뤼 컴퓨러 시스템에 밑바닥부터 타입스크립트 프로젝트를 설정해 보겠다! TS 프로젝트가 무엇인지, 설정은 어디에 작성해야하고, 어떤 것을 설정할 수 있는지 알아보쟝 But 지금부터 할 것이 알아두어야할 것이긴 하지만 그렇게 자주 사용하게 되진 않을 것이다. 왜냐면 NestJS, NextJS, CRA를 사용하면 요 라이브러리, 패키지들이 자동으로 TS 프로젝트를 만들어주기 때문에 우리가 수동으로 TS 프로젝트를 설정할 일이 거의 없기 때문이다. WebPack을 쓰는 것과 비슷하게 아주 가끔씩 우리가 직접 설정해줘야하는 일이 생길 수도 있다. 일단 typechain 이라는 폴더를 만들어서 vscode로 열어보쟝! 여기서 새 nodeJs 프로젝트를 만들자 npm init -y package.json 파일이 생..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bMyAUd/btspVpnnQzq/8VSroUUWWUyP41dAYxCWa1/img.jpg)
✨ Classes ✨ 타입스크립트는 객체지향 코드를 더 안전하고 좋게 만들도록 도와주는 기능을 제공한다. 타입스크립트로 객체지향 코드를 어떻게 작성하는지 살펴보자. 그리고 typescript가 많은 양의 반복되는 코드들을 쓰지 않도록 어떻게 막아주는지도 알아보자. Player class를 만들자. Player 엔 몇몇 property들이 있을 것이다. 보통 JS에는 constructor 함수를 만들고 그 안에 this.firstName = firstName 또는 this.lastName = lastName 같은 코드를 넣어줄 것이다. 타입스크립트에서는 그런 코드는 안 넣어줘도 된다. 파라미터를 써주기만 하면 typescript가 알아서 constructor 함수를 만들어준다. class Player { ..