군붕이의 메모장

토이프로젝트를 진행하던 도중 뜬금없이 Cannot Freeze 에러가 발생했다. 분명 Object.freeze() 메소드를 쓴적이 없는데...해서 좀 더 자세히 살펴보기로 했다. ● Object.Freeze() 란? 객체의 불변성을 유지하기위해 변경을 차단하는것을 뜻한다. 내부 값을 삭제하거나 변경할 수 없어진다. MDN Docs : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze Object.freeze() - JavaScript | MDN Object.freeze() 메서드는 객체를 동결합니다. 동결된 객체는 더 이상 변경될 수 없습니다. 즉, 동결된 객체는 새로운 속성을 추가하거나 존..

리액트를 사용할때 styled-component 라이브러리를 통해서 전역 스타일 지정이 가능하다. 전역스타일은 모든 html 요소에 대해서 공통적인 스타일을 가지는것이다. 예시로는 아래와 같다 모든 li 태그에서 list-style 제거하기 a 태그에서 text-decoration 제거하기 button 태그에 cursor: pointer 지정하기 만약 전역스타일을 사용하지 않는다면 각 페이지 마다 일일히 list-style: none, text-decoration: none 등을 적용해야된다. 1. styled-component 설치 -- 자바스크립트 환경에서의 설치 yarn add styled-components -- 타입스크립트 환경에서의 설치(추가설치필요) yarn add styled-compone..

중고나라 클론 프로젝트를 하면서 처음 해보는 이미지 업로드 기능에 부딪혔다. 여기저기 정보를 찾아보면서 공부한 내용을 정리해보려고 한다. 그리고 단순 input에 받는것이 아닌 다른 요소(div 등..)를 눌렀을 때 이미지 업로드와 동시에 preview 화면도 구현한다. 해당 포스트에 있는 코드는 이해를 돕기위해 코드를 모두 html 파일 내부에 작성했다. 실제 프로젝트에서는 html, css, js를 모두 나눠서 작업했다. ● HTML 에서 이미지를 업로드 받는방법 input type속성을 file로 정의하면 파일 업로드가 가능해진다. 또한 accept 속성을 img/*으로 지정할 경우 이미지 파일만 업로드가 가능해진다. ● 다른 요소(div 등..) 클릭시 input 이벤트가 발생하게 하는방법 내가 ..

Django 에서 DB로 Mysql을 사용하려면 mysqlclient 가 필요하다. pip install mysqlclient 하지만 위 명령어를 입력하고나면 쉘에서 OSError 와 함께 에러가 발생한다. 이때 에러를 해결하려면 아래 패키지를 설치해주면 된다. # Debian, Ubuntu 계열 sudo apt-get install python3-dev default-libmysqlclient-dev build-essential # Redhat, CentOS 계열 sudo yum install python3-devel mysql-devel 그리고 나서 pip install mysqlclient 를 실행하면 정상적으로 설치가 진행된다. 출처 : https://stackoverflow.com/questio..

● event.preventDefault() HTML 에서 a, submit 태그 등 고유한 동작을 가지고있다. a 태그의 경우 태그를 누르게되면 특정 경로로 이동하게 되고, submit 의 경우 form input 안에 데이터를 전송한다. 이러한 특정 동작을 막을때 event.preventDefault() 메소드를 사용한다. # 태그 구글로 이동 이때 event.preventDefault() 태그를 사용하여 이동하는것을 막아보겠다. 구글로 이동 a 태그를 클릭해도 이벤트가 실행되지 않는다. # 태그 2 + 2 = ? 전송 form 태그를 이용하여 전송 버튼을 누를경우 입력한 답이 출력되는 코드를 작성했다. submit 을 누르게 되면 0.1 초 정도 값이 보이고 바로 사라져 버린다. 이 때 event...

● 증상 위 코드처럼 DTL 태그를 사용하여 이미지를 불러오는 코드를 작성했다. 하지만 화면에서 사진이 깨지는것으로 보여 개발자도구를 확인하니 아래처럼 출력되었다. ● 해결방법 위 처럼 {{ match.master.perk_2 }} 가 encode 되버리는 것은 static 태그 내에는 변수가 존재할 수 없기 때문이다. 그래서 static 태그 내에서 변수를 활용할려면 아래 예제처럼 {% get_static_prefix %}/경로/파일명.확장자 를 입력해줘야 한다.

해당 게시물은 Instance 생성 및 네트워크 설정은 끝났다는 가정하에 진행했다. OS : Ubuntu Linux 20.04 ( Not Minimal ) Open Port : 80, 443, 8080 1. code-server 설치하기 code-server github : github.com/cdr/code-server cdr/code-server VS Code in the browser. Contribute to cdr/code-server development by creating an account on GitHub. github.com 원작자분께서 친절히 작성하신대로 따라해보았다. 1. curl -fsSL https://code-server.dev/install.sh | sh 로 code-ser..

라이엇에서 제공하는 소환사 아이콘 이미지를 다운로드 할려고 한다. 하지만 라이엇에서 제공하는 아이콘은 약 2800개 정도로 일일히 다운로드 하는것은 불가능했다. 그래서 python 에서 제공하는 request 모듈을 사용하여 사진 자동저장을 제작했다. ● 롤 프로필 아이콘 리스트 가져오기 Json Link : ddragon.leagueoflegends.com/cdn/11.4.1/data/en_US/profileicon.json 우선 프로필 아이콘의 id 와 json 에서 반환해주는 data 내의 key 값이 동일한점을 참고한다. import requests def getIconId(url): req = requests.get(url).json()['data'] iconIdList = list(req.ke..

우선 롤 전적검색 사이트를 만들기에 앞서 라이엇에서 제공하는 데이터가 무엇인지 확인할 필요가 있다고 생각했다. 리그오브레전드, 리그오브룬테라, TFT전략적팀전투(롤토체스), 발로란트 의 데이터를 제공하지만 플레이해본 리그오브레전드와 관련된 API 만 사용해볼려고 한다. ● ACCOUNT-V1 Americas, Asia, Europe 을 대상으로 만들어진 API로 추정. 나는 한국서버만 다룰꺼기 때문에 생략했다. ● CHAMPION-MASTERY-V4 CHAMPION-MASTERY-V4 에는 총 3가지 API가 존재한다. API 설명 API /lol/champion-mastery/v4/champion-masteries/by-summoner/{encryptedSummonerId} Description Get..

● Riot API 발급받기 우선 riot 개발자 페이지에 접속해야한다. URL : developer.riotgames.com/ Riot Developer Portal About the Riot Games API With this site we hope to provide the League of Legends developer community with access to game data in a secure and reliable way. This is just part of our ongoing effort to respond to players' and developers' requests for data and developer.riotgames.com 접속후 상단 Login 을 눌러 본인의 리..