목록개발 (53)
게으른개발너D
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/lWt0S/btspUnQF4QL/Jz3KdrWjD2wfyoPEIm7Et0/img.jpg)
React는 cross-site scripting 공격을 막기 위해서 html 태그가 담겨있는 string 형태를 렌더링하면, 태그로 나오지 않고 문자열 그대로 렌더링되게 한다. {svgArr?.map((grids: any[]) => grids.map((grid, i) => { return ( {grid} ); }) )} 여기서 svgArr은 svg 태그가 담겨져 있는 2차 배열이며, 이걸 화면에 나타내면 이렇게 나온다. 하.. 괴롭다 괴로워ㅠㅠㅠ 문자열을 html 형태로 렌더링하게되면 취약하지만 대비하고 있다! 라고 생각한다면, 해결하는 방법이 있다. dangerouslySetInnerHTML {svgArr?.map((grids: any[]) => grids.map((grid, i) => { retur..
![](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..
![](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에 직접 들어가서 문제없이 잘 동작하고 있는지 확인해 보자. 프로젝트는 위와 같은 디폴트 페이지를 가지고 있다.
![](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 { ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bVzLx2/btspOCufOes/rcBysCasHdqB3BDkbOLdN0/img.jpg)
✨ Call Signatures ✨ arrow function 으로 typescript 함수를 작성해 보자 const add = (a: number, b: number) => a + b; 우리는 위에서처럼 타입을 적지않고 add 함수만의 타입을 만들고 싶다. type Add = (a: number, b: number) => number; const add:Add = (a, b) => a + b; 이게 바로 함수의 call signature 타입을 만드는 것이다. 이렇게 우리는 함수를 구현하기 전에 타입을 미리 정할 수 있다. 처음에 우리가 타입을 생각할 수 있도록 할 수 있다. ✨ Overloading ✨ 우리는 대부분 다른 사람들이 만든 외부 라이브러리를 사용할텐데, 이런 패키지나 라이브러리들은 오버로..