topblade71의 등록된 링크
topblade71로 등록된 네이버 블로그 포스트 수는 81건입니다.
[컨퍼런스] FEConf 2021: 컴포넌트 다시 생각하기 정리 [내부링크]
https://www.youtube.com/watch?v=HYgKBvLr49c&t=725s&ab_channel=FEConfKorea 최근에 프론트엔드 개발을 하면서 일정에 맞춰 개발하기에 급급했는데, 컴포넌트를 어떤 기준으로 나누고 설계해야 재사용성이나 변화에 유연할지 고민하다보니 부족한 부분이 많은 것 같아, 컴포넌트 설계 방식에 대해 다시 생각해보고 공부하면서 (리팩토링도 할겸) 강연 내용을 정리해보려고 한다. 의존성 제빵을 해본적은 없지만. 케이크를 만드려면 밀가루, 설탕, 계란이 필요할 것 같다. 케이크를 만들기 위해 반드시 밀가루, 설탕, 계란이 필요하다는 뜻이다. 바꿔말하면, 케이크는 밀가루, 설탕, 계란에 의존한다라고 할 수 있다. 이것을 케이크는 밀가루, 설탕, 계란이라는 의존을 갖는다고 표현한다. React 컴포넌트는 그럼 어떤 의존성을 가지고 있을까? 이를 아까처럼 바꿔말하면 아래처럼 표현할 수 있다. React 컴포넌트를 만드려면 뭐가 필요할까? 주로 아래와 같은
[JavaScript] 스코프 [내부링크]
스코프란? 변수나 함수 등 어떤 대상에 접근할 수 있는 범위이다. 간단하게 유효 범위라고 생각하면 쉽다. 좀 더 정확하게 말하면 식별자를 특정하게 식별하기 위한 규칙이라고 할 수 있다. 다른 프로그래밍 언어에서도 유효 범위 개념이 적용되지만, 자바스크립트에서는 어떻게 동작하는지 살펴보자. 함수 레벨 스코프 자바스크립트는 함수 레벨 스코프로 작동한다. 블록 레벨 스코프를 따르는 C 같은 언어와는 다른 방식이다. 왜냐하면 자바스크립트에서 함수는 클로저 역할을 하기 때문에 스코프를 생성하고, 따라서 함수 내에 정의된 변수는 외부 함수나 다른 함수 내에서는 접근 할 수 없게 되는 것이다. 함수 레벨 스코프와 블록 레벨 스코프는 뭐가 다른지 살펴보자. 아래 코드에서 if문안의 변수 a는 전역변수이고, tmp 함수안의 a는 지역변수이다. if (true) { var a = 1; // 이건 전역변수 (JS는 블록 레벨 스코프가 아니므로) } function tmp() { var a = 2; //
[JavaScript] 실행 콘텍스트 [내부링크]
자바스크립트 코드를 실행하기 위한 정보들을 모아놓은 객체를 실행 콘텍스트라고 한다. 그리고 이는 함수 단위로 생성된다. 우선 맨 처음에는 자동으로 전역 컨텍스트가 생성이 된다. 아까 함수 단위로 생성된다는 말처럼, 이후에 함수가 호출되면 각 컨텍스트가 콜스택에 쌓인다. (즉, 실행 컨텍스트는 함수 호출 시점에 생성됨) 실행 컨텍스트에는 아래와 같은 3가지 정보가 들어간다. 1. lexical environment record: let, const 등을 저장한다. outer: 스코프 체인을 저장한다. 지금까지 쌓인 스코프들의 연결리스트(함수 선언 시점에 결정)라고 볼 수 있고이는 식별자 결정에 사용한다. 2. variable environment var로 선언된 변수를 저장한다. 3. this binding 따로 지정하지 않으면 this는 전역 객체이다 (strict에선 undefined). new 연산자나 bind를 이용하여 this 를 바꿔줄 수 있다. 실행 컨텍스트는 함수 호출시
[컨퍼런스] FEConf 2021: 상태관리, 이제 Recoil 하세요 [내부링크]
Recoil 이란? Recoil 이란 페이스북에서 만든 전역 상태 라이브러리 입니다. React의 내부상태만 이용하고 작은 Atom 단위로 관리하며, 상태가 변경되면 atom을 참조하는 컴포넌트들만 리렌더링된다는 특징이 있습니다. 또한, Facebook에서 만들었기 때문에, React의 향후 호환성부분이나 성능 이점에 대해서도 기대해볼 수 있습니다. Atom 써보기 예를 들어, Modal 컴포넌트를 구현한다고 해봅시다. Modal 을 열고닫는 기능 자체는 아주 간단하지만, 실제로 열고 닫는 이벤트가 각각 다른 컴포넌트에서 이루어지기 때문에, 전역 상태를 활용할 수 있습니다. 아래 코드는 상태를 정의하는 방법인데요, atom이라는 함수에 key와 기본값을 설정해주면 됩니다. 이후에, 아래처럼 Recoil 에서 제공하는 state를 다루는 함수들에 조금전에 정의해둔 atom을 넣으면, 바로 React의 hooks 처럼 사용할 수 있습니다. 이때, Recoil 에서는 읽기전용함수와 쓰기전
[컨퍼런스] if(kakao)dev2022: 눈에 보이지 않는 개선: My구독의 Redux에서 React-Query 전환 경험 공유 [내부링크]
https://www.youtube.com/watch?v=HcVCb36WZZk&t=161s&ab_channel=%EC%B9%B4%EC%B9%B4%EC%98%A4 눈에 보이지 않는 개선 대부분 프로젝트에서 처음 프로젝트를 진행할 때는 어느정도 깔끔하게 코드가 작성이 됩니다. 그러나 오픈이후에는 UX 개선, 새로운 기능들의 추가로 기존에 깔끔했던 설계가 점점 더 복잡해지고, 기존에 깔끔했던 형태를 유지하기 어려울 수 있습니다. 왜나하면 완벽한 설계라는 것은 없고, 새로운 기능과 앞으로의 사용자 경험 개선 과정을 처음부터 고려하기 쉽지 않기 때문인데요, 여기서 필요한 것이 리팩토링입니다. My구독 서비스도 이 리팩토링 작업을 피해갈 수 없었고, Redux에서 React-Query로의 전환을 진행하게 되었다고 합니다. React-Query 알아보기 api 요청시 필요한 기능들로 주로 데이터 fetching, 캐싱, 동기화가 있습니다. 이러한 기능들을 사용하기 쉽게 해주는 것이 바로 Reac
[C++] 백준 13460번 구슬 탈출 2 [내부링크]
삼성 SW 역량 테스트 기출문제라고 하네요. https://www.acmicpc.net/problem/13460 13460번: 구슬 탈출 2 문제 스타트링크에서 판매하는 어린이용 장난감 중에서 가장 인기가 많은 제품은 구슬 탈출이다. 구슬 탈출은 직사각형 보드에 빨간 구슬과 파란 구슬을 하나씩 넣은 다음, 빨간 구슬을 구멍을 통해 빼내는 게임이다. 보드의 세로 크기는 N, 가로 크기는 M이고, 편의상 1×1크기의 칸으로 나누어져 있다. 가장 바깥 행과 열은 모두 막혀져 있고, 보드에는 구멍이 하나 있다. 빨간 구슬과 파란 구슬의 크기는 보드에서 1×1크기의 칸을 가득 채우는 사이즈이고, 각각 하나씩 들어가 있다. 게임의 목표는 빨간 구슬을 구멍을 통해서 빼내는 것이다. ... www.acmicpc.net 쉬운줄 알았는데..생각보다 구현이 좀 까다롭습니다. 변하는 것은 빨간 구슬과 파란 구슬의 위치 뿐이므로 두 구슬의 상태를 가지고 BFS 를 쓰면 됩니다. 방문 체크는 arr[10][
크롬 확장 프로그램 개발일지 #2 [내부링크]
2021년 2월 13일 css 오타 수정 뭔가 모양이 이상하다 했더니 중간에 세미콜론이 들어갔었다. 난관 3, 버그 수정 2. 가끔씩 Unchecked runtime.lastError: The message port closed before a response was received. 오류 발생한다. 이유를 찾아보니 popup.html 이 꺼져있을 때, background.js 에서 connect 를 시도해서 생긴 문제였음. 프로그램 특성상 확장 탭에서 popup 창을 꺼놔도 background 에서 계속 다운로드를 재개해야하기 때문에, 연결이 끊겼을 때도 이벤트를 기록할 방법이 필요함. => 모든 로그를 chrome.storage 에 기록하게 함. 로그는 로컬에 따로 저장되므로 popup, background에 모두 독립적이게 된다. 로그를 볼 때 로컬에 저장된 로그를 불러와 로드하는 방식으로 변경 크롬 웹 스토어에 확장 프로그램 등록 일단 테스트 해봤는데 문제가 없는 것 같아 웹
크롬 확장 프로그램 개발일지 #3 [내부링크]
2021년 2월 22일 난관 4. 파이어폭스에서 중지된 다운로드를 다시 시작하지를 못하고있다. 로그를 찍어보니 canResume 속성이 false로 나온다. 크롬에서는 이 속성이 true 여서 API 로 다운로드를 재개하는 것이 가능했다. 하지만 파이어폭스에서는 GUI 에서는 Retry가 됨에도 불구하고 canResume이 false로 나타난다. 이전에 파이어폭스 버전에 대해 issue를 남긴 사람과 문제에 대해 얘기를 나눠보았는데, 찾아본 바로는 버그일 가능성이 있으니 제보하라고 한다. 따로 파폭 API 문서를 읽고 구글링을 해봐도 명시적으로 resume을 거부했다는 얘기는 나오지않아서 https://discourse.mozilla.org/ 에 물어봤다. Retry 버튼과 canResume 속성 사이의 불일치에 관해서 물어보니, 현재 API 에서는 사용불가하다 하며 크롬과 파이어폭스 간의 parity 버그일 수 있으니 제보하라고 답글이 달렸다. 결국 bugzilla 에 제보를 했고
크롬 확장 프로그램 개발 일지 #4 [내부링크]
다운 재개 프로그램을 릴리스 한 지 반년 정도가 지났고, 현재 3000명 정도가 사용하고 있어 많지는 않지만 뿌듯한 느낌이 든다. 하지만 사용자가 많아지면서 버그 제보가 몇 개 있었고 그중에서 공통적으로 나왔던 것이 프로그램 켜져 있어도 가끔 재개가 되지 않는다는 것이었다. 버그 - 1 프로그램이 켜져있어도 때때로 다운로드가 재개 되지않음 문제 인식 가장 먼저 다운로드를 재개하기 위해 resume API를 호출하는 코드를 살펴보았는데, 혹시나해서 콘솔에 로그를 찍어보고, 계속 돌려봐도 문제점이 안보여서 구글링부터 해보기로했다. 개발하면서 프로그램을 직접 사용해봤지만, 이런 버그를 겪은 적이 없어서 일단 chrome.downloads.resume API 에 대한 정보를 찾아봤다. 비슷한 버그나 오류를 겪은 사람이 있다면 실마리를 얻을 수 있을 것 같았다. 그러던 중 Chromium Extensions 그룹의 게시물에서 아래와 같은 글을 발견했다. 오류로 중지된 다운로드에 대해 resu
React 한국 문서 컨트리뷰션 [내부링크]
https://ko.reactjs.org/ 에서 문서를 읽다가 링크가 깨진 것을 발견했다. 버그 리포트에 올릴까하다 간단한 거라 직접 고쳐서 올려보기로 했다. 우선 컨트리뷰션 가이드라인부터 읽고, 혹시 실수할까 봐 다른 분들이 올린 이슈, PR을 한 번 살펴보았다. 그다음에 바로 fork, 커밋, PR 순서로 쭉쭉 진행했다. 링크만 다시 걸면 돼서 코드 짜는 거보다 clone으로 다운받는 시간이 더 걸린 거 같다. 너무나도 작은 기여지만 react 문서 첫 화면에 내 코드가 들어가있다는 사실은 정말 뿌듯한 것 같다.
[CSS] Tailwind CSS 3.0: Fundamentals 강의 메모 [내부링크]
tailwind 세팅 npm install tailwindcss@latest postcss@latest autoprefixer@latest // tailwind 초기화 npx tailwindcss init // 이거 넣어줘서 스캔 -> JIT로 css 파일 생성 module.exports = { content: ["./*.html"], theme: { extend: {}, }, plugins: [], }; // 컴파일 (--watch 속성주면 자동으로 변경) // 근데 --watch 하면 쓰다가 안쓰는 것도 컴파일에 들어감 -> 프로세스 중지하고 다시 컴파일하면 됨 // --minify 하면 css 파일크기 줄여줌 npx tailwindcss -o style.css tailwind css sm md lg -> 반응형 웹 hover focus -> css 상태 다크모드 -> tailwind 설정에 darkMode: "media" 추가 (사용자 테마 대로) module.exports =
[CSS] Instagram UI Clone Header (Next.js + tailwind) 강의 메모 [내부링크]
플젝 세팅 npx create-next-app ig-header cd ig-header npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p // tailwind 설정 /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], } // global.css 에 추가 @tailwind base; @tailwind components; @tailwind utilities; // className에다 tailwind 써주면됨 <div className="shadow-sm border-b bg-white top-0 fixed w-full"> // 실행 n
[브라우저] 검색 창에 구글을 입력하면 일어나는 일 [내부링크]
우선, 크롬 브라우저에서는 브라우저 프로세스, 렌더러 프로레스, 플러그인 프로세스 등 여러 프로세스가 IPC로 통신하는 방식이다. 검색창에 크롬을 검색하면 대략 아래와 같은 순서로 동작하게된다. 1. 주소 입력창에 입력하고 엔터를 치면 → 브라우저 프로세스의 UI 스레드가 내용을 파싱 하고 → 구글 검색으로 갈지, 컴퓨터 파일로 갈지, 요청한 사이트로 이동할지 결정한다. 2. 사이트로 이동하는 거면 네트워크 호출을 시작해서 (이건 네트워크 스레드가 담당) → DNS로 사이트의 IP주소를 가져온다. (이때, 로컬 캐시에서 먼저 보고 없으면 루트 도메인부터해서 Top-level-domain, 그 다음 도메인... 순으로 쭉 해서 찾는다) 그런데 (서비스 워커 같은 곳에) URL에 대한 응답이 캐시가 되어있으면 네트워크 연결 없이 데이터를 가져와서 바로 렌더링을 한다. 3. IP 주소를 찾으면 브라우저와 서버가 TCP 연결을 만든다. (3-way-handshaking) → 서버에 HTTP
[브라우저] 크롬은 왜 멀티 프로세스 구조를 선택했는가 [내부링크]
Chrome의 멀티 프로세스 아키텍처. Chrome은 탭마다 렌더러 프로세스를 실행하기 때문에 렌더러 프로세스를 여러 겹으로 표현했다. 크롬은 위와 같이 여러 프로세스들이 통신하며 동작하는 형태로 브라우저를 구현한다. 가장 상단에는 브라우저 프로세스가 떠있어서 다른 프로세스들을 조정하는데 → 이때, 크롬은 탭마다 각각 렌더러 프로세스가 할당 (정확히는 사이트마다 생성되는 방식, 즉 iframe 같은 곳에도 렌더러 프로세스 할당된다) 아무튼 크롬은 멀티 프로세스 아키텍처이고 실제 크로미움 프로젝트에서는 아래와 같은 그림으로 설명되고 있다. https://www.chromium.org/developers/design-documents/multi-process-architecture/ 그래서 왜 멀티 프로세스 구조를 선택했는가? 옛날 웹 브라우저의 문제 옛날에 (2006년 쯤) 웹 브라우저의 상태는 단일 사용자, 멀티태스킹 운영 체제의 상태와 비슷했는데 → 이러한 상태에서는 응용프로그램
[JavaScript] 호이스팅 [내부링크]
호이스팅이란? 자바스크립트 엔진이 먼저 코드를 스캔하면서 변수나 함수들을 해당 스코프에 저장해서 선언이 맨 위로 끌어올려진것처럼 보이는것 변수의 경우 var 미리 생성을 해놓고 undefined 로 초기화한다. → 따라서 ReferenceError 가 발생하지 않는다. console.log(a); // undefined var a = 1; console.log(a); // 1 let, const 생성을 해놓지만 초기화 하지않는다 → 따라서 참조 시 Referrence Error 가 발생한다. console.log(b); // ReferenceError: Cannot access 'b' before initialization let b = 2; console.log(b); // 2 let, const처럼 선언 이전에 참조 불가능한 구역 → 일시적 사각지대 (Temporal Dead Zone) (참고로 TDZ 에서는 typeof 도 Reference Error 가 발생한다) (typeo
[Java] JUnit으로 테스트 코드 돌려보기 [내부링크]
코딩을 하다보면 내가 지금까지 만든게 제대로 돌아갈지 궁금할때, 테스트 용으로 돌려보신 경험이 많으실겁니다. 보통 main을 직접 작성하고 System.out으로 출력하면서 진행하는 경우가 많은데, main을 테스트 할때마다 작성하는 것은 번거롭게 때문에 JUnit 으로 단위별 테스트를 쉽게 만들 수 있습니다. 혹은 테스트 주도 개발(TDD) 같은 것을 할때도 유용하게 사용할 수 있습니다. JUnit 사용법 JUnit 을 사용하기 위해선 가장 먼저 JUnit 라이브러리가 필요하고, 아래처럼 src/main/java 디렉토리와 src/test/java 디렉토리가 존재해야합니다. import org.junit.jupiter.api.*; Spring initialzr 같은걸로 프로젝트를 생성하면 자동으로 JUnit 라이브러리도 추가해주고 위와 같은 디렉터리 구조를 자동으로 생성해주므로 편리합니다. 그리고 어노테이션을 사용하여 테스트할 메소드 들을 정의합니다. 세 가지 어노테이션이 많이 사
Given-When-Then 패턴 [내부링크]
@Test void 회원가입() { //given //when //then } 테스트가 커져도 위처럼 given, when, then 을 보고 준비/실행/검증 구간을 쉽게 파악할 수 있다. given : 이 코드를 기반으로 하는구나 when : 이 코드를 검증하는구나 then : 이 값이 나와야 하구나
[Kotlin] 널 가능 변수, 세이프 콜, 엘비스 연산자 [내부링크]
null 참조 문제 null값 참조로 인해 발생하는 NullPointerException 문제는 악명높은걸로 유명합니다. 경험상 Java 프로그램이 갑자기 다운되면 대부분이 NPE 문제였던것 같습니다. null 참조를 고안해낸 Tony Hoare 라는 분도 이 발명을 백만불짜리 실수라고 표현했습니다. https://en.wikipedia.org/wiki/Tony_Hoare 코틀린에서는 이런 null이 가능한 변수와 아닌 변수를 구분하여 작성할 수 있습니다. 이로인해 null 로 인한 오류 감지 시점을 최대한 컴파일 시점으로 당길 수 있습니다. 널 가능 변수 기존 자료형 그대로 변수를 선언하면 null 할당시 에러가 발생하지만, 자료형 뒤에 ? 를 붙이면 null 할당을 허용할 수 있습니다. val str1: String = "Hello" Ok val str2: String = null 에러 발생 val str3: String? = null Ok ? 가 붙어있지 않은 변수에 null
[AWS] EC2 인스턴스 접속이 안될 때 해결 방법 [내부링크]
ssh로 ec2에 직접 접속하거나, ec2에서 도는 어플리케이션에 접속이 안될 때가 있는데 그럴 때 해결 방법입니다. 1. time out 거의 보안 그룹 문제로 보통 인바운드 규칙에서 허용을 안 해줘서 막힌 경우 2.connection refused 어플리케이션 자체적으로 문제가 있거나, ec2가 꺼져있는 경우 3. Permissions ~~~ are too open ssh키 권한 설정 문제, chmod 0400 .ssh/파일명.pem 해주면 됨 PS. 만약 로드밸런서 쪽 문제라면, 4xx 에러 => 클라이언트 쪽 문제 5xx 에러 => 어플리케이션 쪽 문제 ex> HTTP 503 에러가 발생한다면, 백엔드 인스턴스가 등록이나 크기가 부족문제일 가능성이 높음 더 자세한 정보를 원하시는 분들을 위해 아래에 링크를 달아두겠습니다. https://docs.aws.amazon.com/ko_kr/AWSEC2/latest/UserGuide/TroubleshootingInstancesConne
AWS Solutions Architect Associate (SAA-C02) 합격 후기 [내부링크]
이전에 웹 사이트를 호스팅 하기 위해 AWS를 처음 접하고 사용해보았습니다. 당시에는 호스팅 용도로만 사용하였지만 시스템 설계에 필요한 각종 인프라, 편의 기능까지 없는 게 없더라구요. AWS의 활용도가 정말 무궁무진하다는 걸 그때 알게 되었고 솔루션 아키텍트 자격증에 도전하게 되었습니다. AWS 배경지식이 거의 없는 상태로, Udemy, AWS 설명서, FAQ 를 통해서 4주 정도 빡세게 공부했습니다. 시험 자체의 난이도가 어렵다기보다는 다루는 범위가 워낙 넓기 때문에 학습에 어느 정도 시간이 걸렸습니다. 공부량과 무관하게 시험장에 처음가면 당황할 수 있기 때문에, 훗날 AWS 자격증에 도전하실 분들을 위해 시험과정에 대해 적어보려고 합니다. 후기 시험 신청 AWS 자격증 홈페이지에서 저는 PSI 시험으로 예약했습니다. 큰 이유는 없고 제가 원하는 날짜가 PSI 에 있어서 골랐습니다. 예약할 때 30분 추가시간을 요청할 수 있는데, 저는 신청하지 않았습니다. 실제로 시험에서 검토를
[부스트코스] 자바스크립트 라이브러리 사용법 [내부링크]
안녕하세요! 이번에는 외부 자바스크립트 라이브러리를 사용하는 법에 대해 알아봅시다. <자바스크립트의 시작> 이라는 부스트코스 강의 내용을 정리한 것이므로 더 자세한 강의는 https://www.boostcourse.org/cs124 에서 무료로 보실 수 있습니다. 라이브러리의 필요성 프로그램이 커지면 커질수록 필요한 기능이 늘어나지만, 그런 것들을 직접 하나하나 구현하려면 시간과 노력이 매우 많이 들겁니다. 그리고 이미 만든 기능과 똑같은 기능을 다른 프로그램에 적용시키고 싶다면, 코드를 직접 들어내서 같다 붙이는 것이 아니라 독립적인 부품처럼 붙였다 뗄 수 있는 방법이 필요할 것입니다. 그럴 때, 미리 만들어진 라이브러리, 프레임워크 등을 사용하면 됩니다. 라이브러리 vs 프레임워크 예를 들어, 이런 컵홀더를 만들기로 했다고 해봅시다. 라이브러리는 만드는데 필요한 나무판자, 물감, 톱이라고 생각하시면 됩니다. 완전히 처음부터 만드는 것은 아니지만, 직접 필요한 연장이나 부품들을 가
[부스트코스] UI 와 API 란 [내부링크]
안녕하세요! 이번에는 UI와 API란 무엇인지 공부해봅시다. 직접 구현을 하거나 코딩하는 것은 아니고 간단하게 개념만 알아봅시다. 이제 벌써 마지막 강의까지 왔네요. 오리지널 강의는 <자바스크립트의 시작> 이라는 부스트코스 강의이고 https://www.boostcourse.org/cs124 에서 무료로 수강하실 수 있습니다. UI란? UI 는 User Interface 의 약자입니다. 우리가 프로그램을 사용하면서 직접 상호작용하는 모든 것들이라고 볼 수 있습니다. 버튼, 화면 구성, 입력창 같이 흔히 시스템을 제어하기 위해 조작하는 장치뿐만 아니라, 터미널 같은 CLI도 UI로 볼 수 있습니다. 집으로 예를 들면, 문, 전등 스위치, 창문, 부엌 등등 사람이 사용하는 물건들이 UI 라고 볼 수 있습니다. 따지고 보면 대부분의 프로그램이 UI를 통해서 사용자와 의사소통합니다. 그래서 UI가 있다 없다로 구분하는 것이 아니라 보통 UI가 좋다 나쁘다로 구분합니다. 보통 웹을 디자인할
크롬 확장 프로그램 개발 일지 #1 [내부링크]
발단 공부용으로 fedora 옛날 버전을 다운 받으려고 하는데, 그날따라 인터넷이 안 좋았는지 공식 아카이브에서 받는데도 예상시간이 3시간 가까이 나왔다. 그냥 다운 눌러놓고 쉬는데 중간중간 네트워크 오류로 다운이 중단. 다운로드 재개 버튼을 누르면 다시 시작하긴 하는데, 중단될 때마다 또 눌러주기에는 솔직히 너무 귀찮음 누군가 자동 재개 확장 프로그램을 만들어 놨을 거 같아서 찾아봤는데 마지막 업데이트가 2018년이고 리뷰에서도 작동이 안 된다는 글이 많았다. 그래서 그냥 직접 만들기로 함 2021 2월 11일 Github 리포지토리를 하나 팠다. 이름은 딱히 생각이 안나서 그냥 Auto Resume Download 로 했다. 확장 프로그램에 대해 아무런 지식이 없기 때문에, 생활코딩님 크롬 익스텐션 강의를 2배속으로 빠르게 봤다. 이걸로 대충 어떻게 만들지 감을 잡음. (https://opentutorials.org/module/2503/14051) 다음엔 크롬 개발자 사이트에
[부스트코스] 자바스크립트 함수의 기본 문법 [내부링크]
안녕하세요 이번에는 자바스크립트에서 함수의 사용법에 대해 배워봅시다. 처음에는 아주 기초적인 문법부터 정리해볼 예정이니, 더 구체적인 사용방법은 다음 포스팅에서 다루도록 하겠습니다! 부스트코스 강의를 직접 들어보고 싶으신 분들은 https://www.boostcourse.org/cs124 에서 무료로 수강하실 수 있습니다! 함수란? 수학에서 함수라는 단어를 한번쯤은 들어보셨을 겁니다. 보통 어떤 값을 주면 그에 대응하는 값을 반환하는 것이 함수입니다. 프로그래밍에서도 비슷하지만 약간의 차이가 있습니다. 프로그래밍에서 함수란 일정한 동작을 수행하도록 만드는 코드들을 모아놓은 것입니다. 값을 반환하는 것 뿐만 아니라 일련의 동작들을 수행하는 것까지 포함하며, void 함수처럼 값을 반환하지 않는 경우도 있습니다. 아래는 예전에 예제에서 사용했던 버튼의 코드입니다. <input id="night_day" type="button" value="night" onclick=" var targe
[부스트코스] 자바스크립트 함수 매개변수와 리턴 [내부링크]
안녕하세요 이번에는 자바스크립트에서 함수의 매개변수와 리턴값에 대해 다뤄보도록 하겠습니다. 저번에는 함수의 기본 사용법에 대해 배웠는데, 좀 더 심화된 내용을 정리해보도록 하겠습니다! 원본 강의는 부스트코스의 자바스크립트의 시작이라는 강의이고 https://www.boostcourse.org/cs124 에서 무료로 들으실 수 있습니다! 매개변수, 인자 그리고 리턴의 개념 저번에 함수를 설명할 때 위와 같은 그림을 보셨을 겁니다. 뭔가 넣는 부분이 있고, 뭔가 나오는 부분이 있죠? 여기서 넣는 부분을 매개변수 또는 인자라고 부를 수 있고, 나오는 부분을 리턴값이라고 부를 수 있습니다. 이때, 매개변수와 인자는 비슷하긴 하지만 분명한 차이가 있는데, 예시로 설명해드리도록 하겠습니다. function square(number) { return number*number; } 이렇게 제곱을 하는 함수가 있다고 가정해봅시다. 저기서 number라는 변수가 들어오고 number*number를 계
[부스트코스] 자바스크립트 객체의 개념 [내부링크]
지난 시간에 함수를 사용해서 코드의 반복을 줄이는 법을 알아보았습니다. 이번에는 자바스크립트의 객체를 사용해서 코드를 간결하게 만드는 법에 대해 알아봅시다. 부스트코스 자바스크립트의 시작이라는 강의를 정리한 것이니 직접 듣고 싶으신 분들은 https://www.boostcourse.org/cs124 에서 들으실 수 있습니다. 이번 객체에 관한 내용은 프로그래밍 언어를 처음 접하신 분들에게는 어려우실 수 있겠지만 최대한 쉽게 적어보도록 하겠습니다. 객체란? 이전에 배열은 어떤 데이터들을 순서대로 담는 것이라고 배웠었죠. 객체는 무언가 담는다는 느낌에서는 배열과 비슷하지만 순서가 정해져있지 않습니다. 객체는 데이터나 함수를 담을 수 있는 그릇 같은 것이고, 키(Key)와 값(Value)으로 구성되어 있습니다. (보통 데이터는 프로퍼티, 함수는 메소드라고 함) 객체는 중괄호 { } 를 이용하여 선언할 수 있고 키와 값은 콜론( : )으로 구분하며 쉼표( , )를 이용하여 여러 개를 추가할
[부스트코스] 자바스크립트의 객체 순회 [내부링크]
안녕하세요! 이번에는 저번에 이어서 자바스크립트 객체를 순회하는 법에 대해 살펴봅시다. 부스트코스 강의 내용을 정리한 것이므로 더 자세한 강의는 https://www.boostcourse.org/cs124 에서 무료로 보실 수 있습니다. 객체 순회의 아이디어 예전에 배열을 다룰 때 반복문을 이용해서 순회했던 기억이 있으실 겁니다. 배열 0,1,2,3 .. 이런식으로 인덱스 접근이 가능하기 때문에 반복문을 순회하기가 쉬웠습니다. 하지만 객체는 키-값으로 이루어져있고 반복되는 형태로 만들기가 좀 까다롭습니다. 그래서 아이디어는 key 값으로 된 배열을 또 만들고 그 배열을 이용해 순회하는 것입니다. 그리고 Object.keys(객체) 를 하면 객체의 key 배열을 쉽게 얻을 수 있습니다. 이를 이용하여 반복문을 만들어봅시다. const keys = Object.keys(person) for (let i = 0; i < keys.length; i++) { const key = keys[i
IntelliJ "Could not target platform" 에러 해결방법 [내부링크]
Spring initalizr와 IntelliJ 자바 버전이 맞지 않아서 나는 오류입니다. 프로젝트 설정탭으로 가셔서 SDK 버전을 바꾸어주시면 정상적으로 실행됩니다. 실행결과:
[Java] 람다식 (Lambda Expression) 사용법 [내부링크]
람다식 기본 코드를 간결하게 만들어주고 병렬처리가 가능한 람다식에 대해 알아봅시다. 아래와 같은 문법으로 작성할 수 있습니다. 1. (매개변수) -> {함수몸체} 2. () -> {함수몸체) 3. (매개변수) -> 함수몸체 4. (매개변수) -> {return 0;} 함수형 인터페이스 활용 함수형 인터페이스로 간단한 덧셈 예제를 만들어봅시다. 먼저 간단한 인터페이스를 구현해줍니다. @FunctionalInterface interface Plus{ public int run(int x, int y); } 람다식 문법으로 덧셈 함수를 만들면 (int x, int y) -> x + y; 이런식으로 만들수 있을겁니다. 이를 이용해서 Plus를 구현합니다. public class Lambda { public static void main(String[] args) { Plus plus = (int x, int y) -> x + y; System.out.println(plus.run(1, 2)
[Java] Optional 클래스 사용법 [내부링크]
기존의 null 처리 문제 null값 참조로 인해 발생하는 NullPointerException 문제는 정말로 프로그램 곳곳에서 도사리고 있고, Java 프로그램이 갑자기 다운되면 대부분이 null 문제였던것 같습니다. 근데 또 이 문제를 해결하려면 이런 코드를 작성해야합니다. if(A != null) { if(B != null) { if(C != null) { ... } } } null 참조를 고안해낸 Tony Hoare 라는 분도 이 발명을 백만불짜리 실수라고 표현했습니다. https://en.wikipedia.org/wiki/Tony_Hoare 그래서 이 악명높은 null 참조를 해결하기 위해 Optional 클래스 라는 것을 도입했습니다. Optional 사용법 우선 Optional<T> 처럼 사용하기 때문에, T에 넣은 객체를 감싸는 Wrapper 클래스입니다. 이처럼 null 일수도 있고 아닐수도 있는 객체를 감쌀수 있습니다. optional 객체 생성 of() 메소드나
[C++] PS/알고리즘 풀땐 float 보단 double을 쓰자 [내부링크]
메모리 초과가 뜰 정도가 아니라면 float보단 double을 쓰는 것이 좋다. float 4byte 6-7 개의 유효 자릿수 double 8byte 15-16 개의 유효 자릿수 float는 유효숫자가 6~7까지밖에 안되므로 억 단위가 넘어가는 값들을 float로 계산하다 보면 오차가 발생할 수 있다. int main(void) { int a = 1234567890; int b = 11; float v1 = (float)a / b; double v2 = (double)a / b; printf("float에 저장한 값 : %f\n", v1); printf("double에 저장한 값 : %f\n", v2); return 0; } a/b의 값은 원래 112233444.5454545... 으로 나와야하지만 float로 계산하면 다른 값이 나오는 것을 확인할 수 있다.
[Android] 안드로이드 스튜디오 개발 버전 정하기 [내부링크]
https://developer.android.com/distribute/best-practices/develop/target-sdk Google Play의 타겟 API 수준 요구사항 충족하기 | Android Developers Google Play 가이드 Google Play의 타겟 API 수준 요구사항 충족하기 목차 최신 SDK를 타겟팅해야 하는 이유 Android 10(API 수준 29)에서 Android 11(API 수준 30)로 이전 Android 10(API 수준 29) 미만에서 이전 앱 현대화하기 SDK 및 라이브러리 확인 및 업데이트 APK를 업로드하는 경우 Google Play의 타겟 API 수준 요구사항 을 충족해야 합니다. 신규 앱 및 앱 업데이트( Wear OS 제외)는 Android 10(API 수준 29) 이상을 타겟팅해야 합니다. developer.android.com 위 링크에 들어가보면 구글플레이 가이드라인에 타겟 SDK 버전과 그 외 API 요구사항
[Android] 버튼 background가 변경이 안될 때 [내부링크]
Button background 속성에 drawable이 적용이 안되서 살펴보았더니 안드로이드 스튜디오 4.1 이상에서 프로젝트를 만들면 Theme.MaterialComponents 를 기본 테마로 하기 때문에 버튼을 만들면 MaterialButton으로 생성된다 MaterialButton은 커스터마이징하기 힘들기 때문에 android.widget.Button 으로 태그를 변경해주고 작업을 하면된다
알고리즘 문제 배열 크기 정할때 아주 사소한 팁 [내부링크]
자주 하는 실수중 하나가 배열의 상한을 착각하여 인덱스 밖의 값에 접근하는 것인데 예를 들어 1월~12월까지의 어떤 정보를 저장하려고 arr[12]를 만들면 month - 1로 접근은 할 수 있겠지만 실제값과 접근하려는 인덱스의 값이 다르기 때문에 헷갈려 하시는 분들이 많습니다. 그래서 선언할때 그냥 arr[50] 정도로 넉넉하게 선언하시면 편합니다. 사실 대부분의 문제에선 메모리가 넉넉하다못해 남아돌기 때문에 10000개를 저장하려면 10010개짜리 배열을 100개면 아싸리 200개짜리로 선언해주시면 실수로 상한을 헷갈려도 프로그램은 잘 돌아갑니다
[부스트코스] 자바스크립트의 시작 [내부링크]
안녕하세요! 평소에 부스트코스 강의가 무료임에도 퀄리티가 좋아서 자주 들었는데 이번에 부스트코스 3기 서포터즈로 활동하게 되어 "자바스크립트의 시작" 이라는 강의를 듣고 정리, 요약한 것을 포스팅하려고 합니다. 웹 프로그래밍 초보분들 혹은 고수지만 기초를 다시 한번 배우고 싶으신 분들 모두 저랑 같이 자바스크립트의 기초부터 차근차근 배워봅시다..! 최대한 성심성의껏 정리해서 올려드릴 테지만 오류나 지적사항이 있으면 언제나 지적해주시고 더 자세한 강의를 듣고 싶으신 분들은 아래 링크에서 들으시면 될 것 같습니다 (-.-) (_ _) (꾸벅) -> https://www.boostcourse.org/cs124 왜 자바스크립트를 써야할까 HTML만 사용하는 기존의 웹페이지는 매우 정적이었습니다. 일단 HTML 자체도 프로그래밍언어가 아니고 마크업 언어이기 때문에 사용자는 단순히 서버에 저장된 문서를 클릭하고 열람하는 수준이었던 것입니다. html로만 이루어진 페이지 중 하나 하지만 Java
[C++] 랜덤 문자열 생성기 [내부링크]
C++의 난수 객체를 이용하여 length 길이의 문자열을 반환하는 함수입니다. 여러모로 유용하게 쓰일 수 있으니 라이브러리로 만들어놓는 것도 좋을 것 같습니다 std::string random_string(std::size_t length) { const std::string CHARACTERS = "abcedfghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; std::random_device random_device; std::mt19937 generator(random_device()); std::uniform_int_distribution<> distribution(0, CHARACTERS.size() - 1); std::string random_string; for (std::size_t i = 0; i < length; ++i) { random_string += CHARACTERS[distribution(generat
[부스트코스] 자바스크립트의 자료형과 변수 [내부링크]
안녕하세요! 저번과 이어서 부스트코스 자바스크립트의 시작 강의를 정리해서 올리도록 하겠습니다. 오류나 지적사항이 있으면 언제나 지적해주시고 더 자세한 강의를 듣고 싶으신 분들은 아래 링크에서 들으실 수 있습니다! -> https://www.boostcourse.org/cs124 자바스크립트의 자료형? 자바스크립트의 기본적인 자료형은 Boolean, Null, Undefined, Number, String, Symbol 이렇게 6개가 있습니다. 그중에서 저희는 숫자와 문자열에 대해 살펴볼 예정입니다. Number 자료형 Number 자료형은 말그대로 숫자입니다. 저희가 1+1, 2*2 등 산술연산에 쓰이는 숫자들이 Number라고 할 수 있겠습니다. 콘솔을 열고 타입을 확인하면 이처럼 number 타입인 것을 확인 할 수 있습니다. 그리고 아래와 같이 Number끼리 산술연산을 하면 Number 타입으로 결과가 출력되는 것을 확인 할 수 있습니다. 참고로 Number.MAX_VALUE
[부스트코스] 자바스크립트 조건문 [내부링크]
안녕하세요! 이번에도 자바스크립트의 부스트코스의 강의를 듣고 정리해서 포스팅하도록 하겠습니다. 제가 따로 이해해서 추가한 부분도 있으니 틀린 부분이 있으면 지적해 주시면 감사하겠습니다. 자바스크립트의 시작 강의는 -> https://www.boostcourse.org/cs124 에서 무료로 들으실 수 있습니다! 자바스크립트의 비교연산자 자바스크립트에는 크게 ==, !=, ===, >, >=, <, <= 가 있습니다. 두 피연산자의 값을 비교하여 Boolean 자료형을 리턴합니다 (true/false) 아마 기존에 c언어나 다른 프로그래밍 언어로 코딩을 해보신분들은 익숙하실겁니다. 근데 === 이건 뭘까요? 우선 자바스크립트의 == 연산에 대해 알아야합니다. ==연산은 두 피연산자가 같은지 비교하는데, 이때, 자료형이 다르면 자료형을 같게 만든후 비교합니다. 위처럼 "1" 과 1은 근본적으로 다르지만 형변환이 일어나 true로 출력됩니다. 그래서 ===은 ==와 다르게 자료형 변환 없
[부스트코스] 자바스크립트의 while문과 배열 [내부링크]
안녕하세요! 이번에는 자바스크립트에서 반복문 while과 배열의 사용법에 대해 정리해보도록 하겠습니다. 원본 강의는 https://www.boostcourse.org/cs124 에서 들으실 수 있습니다! 자바스크립트에서 배열 배열은 많은 데이터를 한번에 담을 수 있는 변수입니다. 예를 들어 1,2,3을 저장할 변수를 만든다고 하면, 변수 a1,a2,a3를 선언하고 값을 할당하고... 이런식으로 할 수는 있을겁니다. 그런데 1부터 1억 까지 저장하고자 한다면 어떻게 할까요? a1~a10000000 까지 1억개를 다 손으로 쳐야할까요? 이를 한번에 해결할 수 있는 것이 배열입니다. 배열 선언하기 빈 배열 선언 var arr = new Array(); var arr = []; 빈 배열 선언 + 크기 지정, 값은 들어있지 않음 var arr = new Array(5); 배열을 선언과 동시에 초기화 var arr = new Array(1, 2, 3, "apple", "banana"); var
[Python] 간단한 카톡 분석기 + 소스코드 [내부링크]
Previous image Next image pandas 공부도 할 겸 재미삼아 만든 카톡 분석기 첨부파일 main.py 파일 다운로드 소스코드 + 실행방법 https://github.com/Dongw1126/Kakaotalk_analysis Dongw1126/Kakaotalk_analysis 간단한 카톡 분석기. Contribute to Dongw1126/Kakaotalk_analysis development by creating an account on GitHub. github.com
[C++] 백준 long double 사용시 주의점 [내부링크]
long double형을 출력할 때 %f 나 %lf 를 써도 잘 돌아가는 것처럼 보이지만 실제로 제출하면 틀렸다고 나올 수 있다. 이때, format specifier로 %Lf 로 쓰면 정답처리가 된다. 코드를 여기저기 바꾸다 보면 헷갈릴 수 있으니 주의하자 long double a = 0; printf("%f\n", a); // 오류 발생 가능 printf("%Lf\n", a);
[C++][D4] 백준 1557번 제곱ㄴㄴ [내부링크]
https://www.acmicpc.net/problem/1557 짧길래 도전했다가 큰코 다친 문제였습니다 어떤 수 n이 주어졌을 때, n이하의 수 중에 제곱ㄴㄴ수가 아닌 수의 개수를 α라 하면, n이 몇번째 제곱ㄴㄴ수인지 계산하는 방법은 집합 A_i를 n>= i 인, i의 배수들의 집합이고, ex) n=10, A_4 = { 4, 8 } p_j를 j번째 소수의 값, m을 (p_k)^2 <= n 을 만족시키는 k의 최대값이라 하면, α는 다음과 같이 구할 수 있습니다. ( n(A) = 집합 A의 원소의 개수 ) ex) n=36, α = n(A_4 ∪ A_9 U A_25) = 36/4 + 36/9 + 36/25 - 36/(4*9) 결국 α는 소수의 배수들의 합집합의 개수인데 이런식으로 짝수개의 조합은 빼주고 홀수개의 조합은 더해주고 하면됩니다 (nC1-nC2+nC3-nC4 ... 이런식으로 쭉) 이제 n이 주어졌을때 몇번째 제곱ㄴㄴ수 인지 구한거고, 문제는 k가 주어졌을때 n을 구해야하
[AWS] EC2로 JSP 호스팅하기 (Tomcat) [내부링크]
인스턴스 생성 EC2 메뉴로 가서 인스턴스 시작을 눌러줍니다. 우분투를 골라줍니다 프리티어에서 쓸수있는걸로 골라줍니다. 그리고 인스턴스 설정을 시작하는데 기본설정에서 스토리지랑 보안그룹만 손봐주시면 됩니다. 프리티어 계정에서 스토리지는 30GB까지 사용가능한데 기본은 8GB이므로 30GB이내로 늘려줍시다 보안 그룹은 SSH는 자기 IP 에서만 쓸 수 있게하고 톰캣 기본 포트인 8080을 열어줍니다 8080이 아니어도 다른 포트를 쓰시면 그 포트번호를 적어주시면 됩니다. 이제 검토 및 시작을 눌러서 만들려면 이런 창이 뜨는데 이름을 설정하고 키 페어를 다운받아줍니다. (.pem 파일) 외부에서 접속할 수 있게 고정 IP를 받도록 합니다 IP를 할당받아서 연결해줍니다 putty로 SSH 접속 https://www.putty.org/ putty를 설치해줍니다. 일단 putty gen 을 열어줍니다 (putty를 깔면 같이 깔림) Load를 누르고 아까 인스턴스를 만들때 받았던 pem파일을
[대학] 웹 프로젝트 과제로 만든 웹 캘린더 [내부링크]
웹 프로그래밍 수업에서 만든 사이트 동기 3명과 함께 제작하였다.
[Python] Adversarial Example 직접 생성해보기 (Targeted Misclassification) [내부링크]
Adversarial attack 이란 최근에 알게 된 재미있는 개념인데, 머신러닝 AI 를 상대로 의도적으로 변형된 이미지(Adversarial example)를 주입시켜 분류 알고리즘이 제대로 작동하지 못하도록 교란시키는 것이다 Adversarial example 은 원본 이미지에다 사람은 구별하기도 힘든 픽셀 단위의 작은 변화를 준 것이지만, 인공지능에게서 원본 이미지와 전혀 다른 결과값을 도출해 낼 수 있다 아래 이미지는 Explaining and Harnessing Adversarial Examples by Goodfellow et al 에 소개된 가장 유명한 적대적 샘플인 판다의 사진이다 왼쪽 사진을 보면 인공지능이 57.7% 신뢰도로 panda 라고 인식하지만, 중간에 있는 노이즈를 더한 사진을 다시 인식시키면 사람 눈에는 여전히 panda 임에도 불구하고 gibbon 으로 인식하는 것을 볼 수 있다 이런 식으로 모델의 traning dataset 을 직접 변형시키거나
[Python] tensorflow 로 이미지 인식해 보기 (MobileNetV2, ImageNet) [내부링크]
ImageNet 이란? http://image-net.org/ ImageNet 프로젝트는 스탠퍼드, 프리스턴 대학교수들이 만든 이미지 데이터 셋이다 제공하는 이미지의 양이 엄청나다 그래서 거의 모든 이미지를 인식할 수 있는듯하다 우리가 사용할 MobileV2 ImageNet은 1000가지의 이미지를 인식할 수 있다 다행히 아주 똑똑하신 분들이 이 방대한 이미지를 학습시켜 모델을 이미 만들어놨기 때문에 우리는 그것을 사용하면 된다 tensorflow 설치 일단 2020년 8월 현재 시스템 요구 사항 파이썬 3.5 ~ 3.7 (최신 버전이 3.8.x 일 텐데 거기선 설치가 안 됨) pip 최신 버전 (19.0 이상) 윈도우 7 이상, 64비트 컴퓨터 바뀔 수도 있으니 링크 첨부 https://www.tensorflow.org/install/pip pip3 install tensorflow 일단 용량이 커서 시간이 좀 걸린다 GPU를 사용하지 않는다면 CUDA 설치는 안 해도 된다 코드
[C++] 디자인 패턴 - 커맨드 패턴 (Command Pattern) [내부링크]
커맨드 패턴이란?? 요청 자체를 캡슐화 하는 것입니다. 이를 통해 서로 다른 사용자(client)를 매개변수로 만들고, 요청을 대기시키거나 로깅하며, 되돌릴 수 있는 연산을 지원합니다. (GoF의 디자인 패턴) 따라서 요청 자체를 캡슐화, 즉 기능들을 함수로 만드는 것이 아니라 객체로 만들어서 변수에 저장하거나 로그를 기록 할 수 있도록하는 패턴이다. 게임을 예를 들어보자. 우선, 게임에는 요청을 수행할 캐릭터들이 필요하다. gameActor.h #pragma once class gameActor { public: virtual ~gameActor() {}; virtual void jump() = 0; virtual void fire() = 0; }; class Hero : public gameActor { public : void jump(); void fire(); }; class Enemy : public gameActor { public : void jump(); void f
[C++] private, protected, private 접근 지정자 정리 [내부링크]
접근 지정자란 클래스 또는 클래스 멤버(메서드, 변수)에 대한 접근 권한을 지정하는 키워드입니다. 기본적으로 접근 지정자는 public, protected, private 3가지가 있습니다. public은 어디서나 접근 가능하다 protected는 클래스 내부 혹은 상속된 클래스에서 접근 가능하다 private는 클래스 내부에서만 접근 가능하다 public 상속 : 기본 클래스의 접근 지정자를 그대로 상속 protected 상속 : 기본 클래스의 접근 지정자를 최소 protected로 상속 private 상속 : 기본 클래스의 접근 지정자를 모두 private로 상속 아래 예제 소스코드를 보면, #include <iostream> using namespace std; class Base { public: Base() { a = 1; b = 2; c = 3; } int a; protected: int b; private: int c; }; class Derived : public Ba
게임 개발 꿀사이트 [내부링크]
리소스 사이트들 무료 음악, 무료 이미지등 그래도 저작권과 라이센스에 주의 Unity Asset Store - The Best Assets for Game Making Discover the best assets for game making. Choose from our massive catalog of 2D, 3D models, SDKs, templates, and tools to speed up your game development process. assetstore.unity.com OpenGameArt.org Latest Art by my Friends - ( view more ) The OGA Spring Game Jam 2019 - Announcement By Spring on Thu, 2019-03-28 15:20 Spring is in the air and it's time to create something new, something fun, something ex
구름 IDE로 클라우드 개발환경 만들기 [내부링크]
현재 개인적인 사정으로 개인PC가 아닌 공용PC로 개발을 해야하는 상황에 처한지라.. PC사용시마다 컴파일러 깔고 툴 깔고 하기 버거워서 웹에서 파이썬 개발환경을 만들기 시작했습니다 방법을 찾던중 구름IDE라고 무료 웹 개발환경이 있길래 써봤더니 상당히 괜찮아서 소개해드리려 합니다 구름IDE - 설치가 필요없는 통합개발환경 서비스 구름IDE는 언제 어디서나 사용 가능한 클라우드 통합개발환경(Integrated Development Environment IDE)을 제공합니다. 웹브라우저만 있으면 코딩, 디버그, 컴파일, 배포 등 개발에 관련된 모든 작업을 클라우드에서 할 수 있습니다. ide.goorm.io 여기서 가입하면 사용할 수 있는데 각자 상황에 맞게 구매해서 사용하면 됩니다 일단 개발초기단계에선 CPU나 메모리를 무지막지하게 먹지않기 때문에 저는 무료로 사용하고 있습니다 아무튼 가입하고 나면 컨테이너를 생성할수있는데 대시보드화면에서 이런 버튼을 누르면 컨테이너 생성화면이 뜹니
구름 IDE에서 게임 실행화면 띄우기 (pygame) [내부링크]
구름 IDE에 게임을 출력할 화면이 없기때문에 웹 서버로 게임화면을 띄워야 하는데 그 방법을 알려드리려 합니다. 우선 기본 파이썬 프로젝트가 아닌 파이썬 Tkinter 기본 프로젝트로 만들어줍니다 그리고 터미널에서 pygame을 설치해줍니다 파이썬 2 사용시 파이썬 3 사용시 파이썬 버전 변경은 여기서 맨밑의 속성으로 갑니다 빌드/실행 설정에서 컴파일러 버전을 고르시면 됩니다 설치 하셨으면 이제 구름 IDE의 상단바의 실행 -> 실행 명령 추가에 들어갑니다 이런 화면이 나올텐데 여기서 스크립트의 1번째줄의 python.set.main.path 이 부분에 실행시킬 py파일의 경로가 들어가면 됩니다 /workspace/Python-project/src/index.py 이런식으로요 기본경로 그대로면 일단 그냥 실행시키셔도 됩니다. 이 코드를 실행시켜 보죠 # coding=utf-8 import pygame # pygame으로 게임 만들기 - 2 (움직임 구현) pygame.init() o
[C++] undefined reference to ~~ 오류.. [내부링크]
코딩하는데 undefined reference to 머시기 머시기 오류가 뜬다 코드를 아무리 뒤져봐도 에러가 있을만한 곳이 안보이고 뭐가 문제인지 구글링도 해보고 스택오버플로우도 뒤져보다가 결국 문제를 찾았는데 Observer라는 추상클래스의 가상 소멸자가 문제였다 Observer.h는 추상클래스니까 굳이 Observer.cpp에다 구현해줄필요가 없겠지 생각한게 실수였다 그러다보니 가상 소멸자의 몸체부분이 없었다. 몸체부분을 추가했더니 에러가 없어졌다
[C++] 디자인 패턴 - 감시자 패턴 (Observer Pattern) [내부링크]
감시자 패턴이란? 어떤 객체의 상태가 변할 때 그 객체의 의존성을 가진 다른 객체들이 그 변화를 통지 받고 자동으로 갱신될 수 있게 만듭니다. GoF 디자인패턴 p382 객체가 서로 연동해서 작동할때, 객체간의 결합도를 높이는것 대신(재사용성이 떨어짐) 게시 - 구독 관계의 상호작용을 하게 만드는 패턴입니다. 주체(Subject)가 게시를하면 구독한 감시자(Observer)가 통보를 받는 개념입니다. 예제를 보면서 살펴봅시다. 시계 타이머 예제 디지털 시계와 아날로그 시계가 있다고 해봅시다. 이때, 시계는 서로 다르지만 시간이 1초흐르면 디지털이나 아날로그나 1초씩 흐를것입니다. 주체가 시간, 감시자는 디지털시계와 아날로그 시계라고 해봅시다. 흐른 시간이 게시되면 감시자들은 그에 맞춰 상태를 업데이트합니다 디지털시계와 아날로그시계가 시간을 구독한 것입니다. 이런 느낌입니다 이해가 가시나요? 그러면 이제 실제로 코드를 짜봅시다. 우선 인터페이스 만들기부터 추상클래스로 Observer
[C++] C++ 상속 개념 쉽게 이해하기 (is-a 관계) [내부링크]
Effective C++ 을 읽던중 상속에 대해서 잘 설명된 글이 있어서 정리해보려고 합니다 C++로 객체 지향 프로그래밍을 하면서 다른건 잊더라도 꼭 잊지말라고 여러분께 부탁하고 싶은 규칙이 딱 하나 있거든요. 바로, public 상속은 "is-a (...는 ...의 일종이다)" 를 의미한다는 이야기입니다. Effective C++ p233 public 상속은 is-a(...는 ...의 일종이다) 관계이다.. 이 말이 무엇일까요? is-a 관계 여러분이 Base클래스를 public 상속 받아 Derived클래스를 만들었다면, C++ 컴파일러에게 이렇게 말한것과 똑같습니다. "Base 클래스에 적용되는 모든것들은 Derived에 그대로 적용됩니다" 왜냐하면 모든 파생클래스 객체는 기본클래스 객체의 일종이기 때문입니다 모든 Derived 객체는 Base의 객체이지만 (D is a B), 모든 Base객체는 Derived의 일종이 아닌것 입니다. 예를 들어, 다음과 같이 사람클래스와 이
[파이썬] pygame으로 게임개발 연습 - 1 (점프, 발판 생성) [내부링크]
실제 개발하기전에 연습삼아 게임을 하나 만들어보겠습니다 두들점프라고 아시나요? 이런식으로 캐릭터가 발판을 밟고 점점 더 높이 올라가는 그런 게임입니다 두들점프같은 게임을 한번 만들어봅시다 게임에 쓰일 변수선언 settings.py # game options/settings TITLE = "TEST" WIDTH = 800 HEIGHT = 600 FPS = 60 # Player properties PLAYER_ACC = 1.5 PLAYER_FRICTION = -0.2 PLAYER_GRAVITY = 0.8 # Starting platforms PLATFORM_LIST = [(0, HEIGHT - 40, WIDTH, 40), (WIDTH/2 - 50, HEIGHT*3/4, 100, 20), (125, HEIGHT - 350, 100, 20), (350, 200, 100, 20), (175, 100, 50, 20)] # define colors WHITE = (255, 255, 255) BL
[C++] 가상 소멸자는 언제 쓰는가 [내부링크]
기본클래스의 포인터가 파생클래스 객체를 가리키고 있고 이 포인터를 delete할때 가상 소멸자가 없다면 파생클래스의 부분이 소멸되지않습니다 예를들어, 다음과 같이 두 클래스가 있다고 해봅시다 class Base{ public: ~Base() { ... } }; class Derived : public Base{ public: Derived() { ... } ~Derived() { //Derived의 자원을 제거합니다 } }; 이런 클래스에서 Derived* D = new Derived(); delete D; //Derived의 소멸자가 호출되므로 괜찮습니다 Base* B= new Derived(); delete B; //Base의 소멸자만 호출됩니다 Derived의 자원이 없어지지 않습니다!! Base의 포인터가 Derived 객체를 가리킬때 문제는 발생합니다. 객체의 일부가 소멸되지않고 그대로 있는건데 이 문제를 어떻게 해결하냐 그 답이 바로 가상 소멸자에 있습니다 class Ba
[파이썬] pygame으로 게임개발 연습 - 2 (점수, 화면 전환) [내부링크]
안녕하세요 이번에는 점수표시와 화면 전환을 해보겠습니다 우선 만들기전에 몇가지 미리 추가된것이 있는데.. # game options/settings ... FONT_NAME = 'arial' # Player properties ... # define colors ... LIGHTBLUE = (0, 155, 155) BGCOLOR = LIGHTBLUE 폰트와 배경색을 넣어주었습니다 이 배경색을 Game클래스의 draw 메소드에 써줍시다 def draw(self): # Game Loop - Draw self.screen.fill(BGCOLOR) .... 간단하죠? 이제 점수표시를 해볼까요 점수표시 점수 계산은 "블록이 아래로 사라져 없어질때마다 10씩 증가" 로 해봅시다 점수를 넣을 변수를 new함수에서 선언해주고 def new(self): # start a new game self.score = 0 Game클래스의 update함수로 가면 저번에 plat.kill()을 썼던게 보이실겁니
[파이썬] pygame으로 게임개발 연습 - 3 (하이스코어 구현, 파일 입출력) [내부링크]
안녕하세요 이번에는 파이썬의 파일 입출력을 이용해서 최고 기록을 저장해보겠습니다. settings.py에 하이스코어가 저장될 파일명을 적어줍시다 ... HEIGHT = 600 FPS = 60 FONT_NAME = 'arial' HS_FILE = "highscore.txt" ### # Player properties PLAYER_ACC = 1.5 ... HS_FILE을 추가하셨으면 이제 main.py로 가서 파일을 불러봅시다 파일 입출력 함수 main.py의 Game 클래스에다 파일 읽는 함수를 만들어봅시다 import random from settings import * from sprites import * from os import path ### from os import path 를 추가해줍니다. 이는 파일 경로를 생성 및 수정하고, 파일 정보를 쉽게 다룰 수 있게 해주는 모듈입니다. 그러면 이제 함수를 정의합니다 def load_data(self): # Load high s
[파이썬] pygame으로 게임개발 연습 - 4 (이미지 로드, 애니메이션) [내부링크]
이번에는 외부 이미지를 불러와서 사용해보도록 합시다 이미지를 아래사이트에서 받아옵니다 https://opengameart.org/content/jumper-pack Jumper Pack Complete package to create jumping/platforming style games, these games are due their simple nature a great practice for beginning game developers. The sprites contained in this pack can easily be mixed with the Platformer Assets. Files: Separate PNG files (110x) Spritesheets Vector source files Let... opengameart.org 다운받으시면 여러 이미지과 파일이 나옵니다. 그 중에서 저희는 이 두가지 파일만 사용합니다. 스프라이트 시트는 이런식으로 모든 이미지가
[파이썬] pygame으로 게임개발 연습 - 5 (정확한 착지, 길게 누른만큼 높이 점프) [내부링크]
지금까지 만든 게임 동영상을 한번 봅시다 그럴듯한 게임이지만 점프 판정이 뭔가 이상하죠? 제대로 착지하기전에 순간이동하듯이 움직이는데 좀 부자연스럽습니다. 첫번째 문제는 충돌검사에서 생기는데 캐릭터가 발판과 닿을때, 캐릭터의 머리가 발판밑에 닿기만해도 캐릭터가 착지한것으로 판정되어 발판위로 순간이동 하는것입니다 그래서 충돌검사 부분을 수정해줍시다 def update(self): # Game Loop - Update self.all_sprites.update() # check if player hits a platfrom if self.player.vel.y > 0: hits = pg.sprite.spritecollide(self.player, self.platforms, False) if hits: if self.player.pos.y < hits[0].rect.centery: ### self.player.pos.y = hits[0].rect.top + 0.1 self.player.
[파이썬] pygame으로 게임개발 연습 - 6 (소리, 음악 추가하기) [내부링크]
이번에는 게임에 노래와 효과음을 넣어봅시다. 노래는 여기서 다운받았습니다 https://opengameart.org/content/happy-tune happy tune happy! :D opengameart.org http://bfxr.net/ Bfxr. Make sound effects for your games. Download Bfxr Standalone V1.4.1 ( WINDOWS | MAC ) What is this? Bfxr is an elaboration of the glorious Sfxr , the program of choice for many people looking to make sound effects for computer games. Bfxr has moved in the direction of increased complexity and range of expression. All the buttons that... bfxr.net bfxr은 점프소
파이게임 RPG 테스트 [내부링크]
pygame 연습 -Game art by Gothicvania Artwork created by Luis Zuno @ansimuz
[C++] 2018 카카오 1차 코딩테스트 1번 문제 [내부링크]
카카오 신입 공채 1차 코딩 테스트 문제 해설 ‘블라인드’ 전형으로 실시되어 시작부터 엄청난 화제를 몰고 온 카카오 개발 신입 공채. 그 첫 번째 관문인 1차 코딩 테스트가 지난 9월 16일(토) 오후 2시부터 7시까지 장장 5시간 동안 온라인으로 치러졌습니다. 지원자들의 개발 능력을 잘 검증하기 위해 출제 위원들이 한 땀 한 땀 독창적이고 다양한 문제들을 만들어 냈고 문제에 이상은 없는지, 테스트케이스는 정확한지 풀어보고 또 풀어보며 만반의 준비를 기했습니다. 먼저, 가장 궁금해하실 1차 합격 기준부터 알려드립니다. 1차 합격 기준은 총 7 문제 중 4 문제 이상을... tech.kakao.com 그럼 풀어봅시다 문제 해설 우선, 문제를 읽어보면 핵심은 비트연산입니다 매개변수 값 n 5 arr1 [9, 20, 28, 18, 11] arr2 [30, 1, 21, 17, 28] 출력 ["#####","# # #", "### #", "# ##", "#####"] 입출력 예제를 보니 두
[파이썬] 파이썬의 List Comprehension [내부링크]
파이썬을 쓰다보면 리스트가 정말 많은 용도로 활용되지만 이를 무작정 쓰다보면 상당히 속도저하가 발생하는데 이때 List Comprehension을 이용해 속도향상을 시킬수있습니다 for문과 list comprehension 속도비교 우선, 가장 자주 쓰이는 for문과 append를 이용한 리스트 생성입니다 천만개를 돌려봅시다 약 1.6670초가 걸렸네요 이번에는 List Comprehension 을 써봅시다 약 0.7750초가 걸렸습니다 띠용? 코드도 짧아졌는데 시간도 두배가 넘게 단축되었네요 어느 외국사이트에서 통계내린 속도에서도 일반 루프보다 시간이 월등히 빠릅니다 List Comprehension 사용법 [<the_expression> for <the_element> in <the_iterable>] 반복문만 사용시 [<the_expression> for <the_element> in <the_iterable> if <the_condition>] if 문 사용시 [<the_ex
[C++] 2018 카카오 1차 코딩테스트 2번 문제 [내부링크]
ㅎㅇㅎㅇ 안녕하세요 저번에 풀었던 1번 문제에 이어서 2번문제를 풀어봅시다 카카오 신입 공채 1차 코딩 테스트 문제 해설 ‘블라인드’ 전형으로 실시되어 시작부터 엄청난 화제를 몰고 온 카카오 개발 신입 공채. 그 첫 번째 관문인 1차 코딩 테스트가 지난 9월 16일(토) 오후 2시부터 7시까지 장장 5시간 동안 온라인으로 치러졌습니다. 지원자들의 개발 능력을 잘 검증하기 위해 출제 위원들이 한 땀 한 땀 독창적이고 다양한 문제들을 만들어 냈고 문제에 이상은 없는지, 테스트케이스는 정확한지 풀어보고 또 풀어보며 만반의 준비를 기했습니다. 먼저, 가장 궁금해하실 1차 합격 기준부터 알려드립니다. 1차 합격 기준은 총 7 문제 중 4 문제 이상을... tech.kakao.com 문제는 위 링크의 2.다트게임을 참고하시면 됩니다 문제 해설 다트게임의 점수 계산 로직을 짜는 문제입니다 입력이 다음과 같이 점수가 문자와 숫자로 이루어진 문자열로 주어집니다 소스코드 : int myScore(st
[C++] explicit 이란? [내부링크]
이번에는 C++의 explicit 키워드에 대해 알아봅시다 explicit 이란? 간단하게 말하면 자동 형변환을 막는겁니다 프로그래머가 의도하지 않은 형변환이 일어나서 에러가 발생하는 사태를 막는 용도입니다 한번 예를 보죠 이런 클래스가 있습니다 class Egg { public: Egg(int _value) { value = _value; } int getValue() { return value; } private: int value; }; 그리고 이런 함수도 있습니다 void cookEgg(Egg e) { int i = e.getValue(); cout << "Delicious!" << endl; } 이런 코드를 실행해봅시다 Egg myEgg(3); cookEgg(myEgg); ↑ 실행결과 예상대로 위 코드는 잘 작동합니다 그런데 이런 코드는 어떨까요? cookEgg(10); 오잉? cookEgg는 Egg 클래스를 매개변수로 받는데 int 형이 들어가있네? 당연히 에러가 ...
파이게임 탑뷰 테스트 [내부링크]
마우스 관련 처리가 꽤나 힘들다는걸 느끼게해준 테스트 시작배경 Cyberpunk Street Environment by ansimuz 캐릭터 DungeonTilesetII by 0x72
[Python] 파이썬 모듈 순환참조 [내부링크]
순환참조 관련 검색하다 좋은글이 있어서 캡처함.. 원본링크 실수하기 쉬운 Python 코드 이 글은 Buggy Python Code: The 10 Most Common Mistakes That Python Developers Make 을 참고하여 작성되었습니다. 머신러닝 분야에서 선호되는 언어로는 Python 과 R 이 자주 비교대상이 됩니다. 두 언어의 태생의 근원을 생각해 보면 아마도 Python 은 전통적인 소프트웨어 엔지니어 그룹에서… tensorflow.blog
[Python] 파이썬 pickle 간단 사용법 [내부링크]
Pickle 이란? 기본 자료형 데이터들을 저장할때는 텍스트 파일로 많이 하지만 임의의 클래스를 저장할때 텍스트를 사용하기는 번거롭기 때문에 파이썬의 pickle 모듈을 사용합니다 Pickle 모듈 사용 준비 import pickle 피클 모듈을 import 하면 끝입니다 따로 설치할 필요 없습니다 Pickle 모듈 사용하기 다음과 같은 임의의 클래스가 있을때, class MyClass: def __init__(self): self.data = [1, 2, 3] self.num = 3 def print_data(self): print(self.data) 저장할시 save_data = MyClass() with open("myClass.pickle", "wb") as w: pickle.dump(save_data, w) 로드할시 with open("myClass.pickle", "rb") as r: read_data = pickle.load(r) 코드를 실행해봅시다 정상적으로 작동되고
[Python] 공룡 게임 AI 만들어보기 - 1 [내부링크]
이번에는 공룡게임 AI를 만들어보겠습니다 아래 스크린샷이 공룡게임이라고 크롬 브라우저에 있는 미니게임입니다 크롬을 쓰시는 분들은 주소창에 chrome://dino 를 입력하시면 해볼수있습니다 크롬 공룡게임 시작 시작은 직접 크롬 웹브라우저로 접속해서 AI를 만들려고 했지만.. 웹에서 크롤링하기 귀찮아서 파이썬용 공룡게임을 따로 받았습니다 Dino Game In PYTHON With Source Code | Source Code & Projects Download Dino Game In PYTHON With Source Code. Dino Game In PYTHON With Source Code. Free Python projects with source code. code-projects.org 위 링크로 들어가시면 다운받을수있습니다 (실행시 pygame 모듈 필요) 게임파악 공룡이 더 오래 살수록 더 높은점수를 얻습니다 선인장이나 익룡에 닿으면 죽습니다 공룡은 2가지 행동을 할수있
[Python] 공룡 게임 AI 만들어보기 - 2 [내부링크]
안녕하세요 ㅎㅇㅎㅇ 저번에 이어서 공룡 게임 AI를 만들어봅시다 익룡을 피하지 못하는 문제 저번에 발견했던 가장 큰 문제는 세대가 지속되도 익룡을 피하지 못한다는겁니다 혹시 익룡의 리젠률이 문제인가 해서 게임을 약간 바꿨습니다 그래서 익룡이 훨씬 더 많이 리젠되게 수정해봤는데 응 어림도없지 ~ ㅋㅋ ㅋㅋㅋ 그냥 익룡을 피하지를 못합니다 아예 학습이 안되고 있네요 문제를 하나씩 해결해봅시다 Neural Network 단순화 Hidden Layer 수정 구글링 하던중 스택오버플로우에 좋은 답변이 있어서 참고했습니다 (대충 Hidden Layer 사이즈를 설명하는 글) 3줄 요약: 대부분의 문제에 대해 두가지 규칙으로 성능을 향상시킬 수 있습니다. Hidden Layer의 층수는 1입니다 그 층의 뉴런의 수는 Input, Output layer의 뉴런의 평균입니다 (https://stats.stackexchange.com/questions/181/how-to-choose-the-numbe
레딧, 스팀에 올라온 rusty lake 순서 정리 (Cube Escape) [내부링크]
rusty lake 시리즈 다시 정주행 하려는 김에 정리해서 올려봄 출시일 기준 (1회차 추천) Seasons The Lake Arles Harvey's Box Case 23 The Mill Hotel Birthday Theatre Roots The Cave Paradise Paradox https://www.reddit.com/r/rustylake/comments/a74p0w/beginners_guide_to_rusty_lake_order_to_play/ 시간 순서 기준 Paradise Roots (Secret Ending) Roots (The Tree-Masks) Arles Roots (The Clock-The Search) Hotel Roots (The Wedding Photo-End) Seasons (Spring) The Lake (Blue Gem Ending) Harvey's Box Seasons (Summer-Fall) Case 23 (Chapters 1-2) The Mi
[Python] matplotlib으로 그래프 그리기 [내부링크]
파이썬에서 많이쓰는 그래프 라이브러리인 matplotlib을 써봅시다 포물선 운동 공식 초기속도 x벡터와 y벡터가 주어진다고 하면, 시간t 에 따른 수평성분과 수직성분은 다음과 같이 구할 수 있습니다. 그리고 비행시간 flyTime과 비행거리 S는 다음 공식으로 구할 수 있습니다. 이므로 코드 작성 라이브러리를 추가해줍시다 import math from math import pow, ceil from matplotlib import pyplot as plt 상수들을 선언해줍니다 # 중력가속도 GRAVITY, 그래프 표시 시간간격 INTERVAL 선언 GRAVITY = 9.8 INTERVAL = 0.001 이때 시간간격을 배열을 이용해서 저장할건데 그때 쓸 함수를 만듭시다 def timeArray(start, end, step): times = [] while start < end: times.append(start) start += step return times matplotlib
딥마인드의 멀티게임 인공지능 포스트 훑어보기 [내부링크]
예전에 딥마인드에서 DQN을 이용해 아타리2600 게임들을 인공지능을 학습시킨일이 있었다. 벽돌깨기 같은 단순한 게임들이지만 '고득점이 목표다' 라는 것 외에는 아무것도 모르는 인공지능이 게임을 알아서 학습하는것을 보고 굉장한 충격을 받았다. 그런데 최근 딥마인드가 멀티게임까지 학습시켰다는 소식을 들었다. 자기만 잘하면 되는 싱글게임을 넘어서 전략적으로 사람들과 협력해야하는 멀티게임을 인공지능이 한다는것이 가능한일인가?? 이게 어떻게 된 일인지 공부겸 딥마인드의 포스트와 논문을 보고 정리해봤다. 딥마인드 블로그 1. 딥마인드의 퀘이크 3 도전 예로부터 전략적 이해와 팀플레이를 인공지능에게 학습시키는것은 AI 연구에 있어서 중요한 과제였다. 하지만 멀티게임을 제대로 플레이 하려면 각 플레이어들은 독립적으로 생각함과 동시에 다른 플레이어와 상호작용하고 협력해야한다. 이런 멀티게임의 복잡성은 전술, 전략, 눈과 손의 협응 측면에서 많은 AI 커뮤니티의 뜨거운 감자였다. 아무튼 퀘이크 3는
[Unity] 유니티에서 비주얼 스튜디오 연동하기 [내부링크]
유니티를 열고 Edit - Preferences를 누릅니다 External Tools 로 가신다음 비주얼스튜디오를 선택합니다 이제 스크립트를 더블클릭 하시면 비주얼 스튜디오로 열립니다. (끝) 처음 열때는 초기설정때문에 시간이 좀 걸립니다 P.S. 중요한 자동완성기능도 잘 작동합니다
[Unity] 일시정지 만들기 [내부링크]
using System.Collections; using System.Collections.Generic; using UnityEngine; public class PauseManager : MonoBehaviour { private bool isPause = false; private void Update() { if(Input.GetKeyDown(KeyCode.Escape)) { if(!isPause) { SetPause(); } else { Continue(); } } } public void SetPause() { if(!isPause) { isPause = true; Time.timeScale = 0; } } public void Continue() { Time.timeScale = 1; isPause = false; } } 빈 게임 오브젝트를 하나 만들어주시고 (저는 이름을 PauseManager로 함) 위의 소스코드를 붙여주시면 됩니다 ESC를 누르면 일시정지 되고 다시
[Unity] 프로파일러 사용하기 [내부링크]
여는법 : 저기서 profiler 누르시면 됩니다 누르시면 이런식으로 주루루루 뜨는데 저렇게 유독 튀는부분을 잘 살펴보시면 됩니다 제 경우엔 Blur 처리를 할때 그래프가 확 뛰는듯
[Unity] 해상도 고정 [내부링크]
잘 만든줄 알았는데 막상 빌드해보면 에디터랑 디바이스랑 결과 차이가 조금씩 난다.. Screen의 width, height를 써가지고 어떻게 보정을 잘 해보려고 했는데 일단 해상도 고정이 젤 편해서 써본다 private void Awake() { Screen.SetResolution(720, 1280, true); } 꼭 awake 에 있을 필요는 없고 씬을 불러올때마다 호출되면 된다
[Python] YOLO Object Detection (OpenCV) [내부링크]
YOLO 란? https://pjreddie.com/darknet/yolo/ you only look once(YOLO) 라는 실시간 객체 인식 시스템이다 사이트에 가보면 실시간으로 감지도 가능하고 속도도 빠르다고 하는데 감지할 수 있는 물체가 많지 않은 것 같다 아무튼 우리가 필요한 건 트레이닝된 모델이므로 사이트에 가서 다운로드해 보자 coco.names, yolov3.cfg, yolov3.weights 이 세 가지 파일이 필요하다 (coco.names 에 있는 물체들만 YOLO가 인식 가능하다) 앞의 두 개는 https://github.com/pjreddie/darknet/tree/master/cfg 여기서 받을 수 있고 weight 파일은 yolo 사이트에서 저기 here 라고 써진 부분을 누르면 된다 OpenCV 설치 윈도우 명령 프롬프트나 터미널에서 pip3 install opencv-python 이라고 치면 설치가 된다 코드 작성 cv2랑 numpy 클래스를 임포트하고
[Unity] IsPointerOverGameObject - UI 와 게임 오브젝트 클릭을 구분하기 [내부링크]
EventSystem.current.IsPointerOverGameObject() UI 가 클릭되면 참을 반환합니다 괄호안에 매개변수 없이 사용하면 마우스 왼클릭으로 인식합니다 예시) using UnityEngine; using System.Collections; using UnityEngine.EventSystems; public class MouseExample : MonoBehaviour { void Update() { // Check if the left mouse button was clicked if (Input.GetMouseButtonDown(0)) { // Check if the mouse was clicked over a UI element if (EventSystem.current.IsPointerOverGameObject()) { Debug.Log("Clicked on the UI"); } } } }
네이버 블로그
티스토리
커뮤니티