분류 전체보기 79

React 스터디노트 #3. 이벤트

this.state = { mode: 'welcome', subject: //... //... } render() { if(this.state.mode === 'welcome'){ //... } else if(this.state.mode === 'read'){ //... } } - props의 값이나 state의 값이 바뀔 때마다 그 컴포넌트의 render()함수가 다시 호출되고, 그리고 그 하위에 있는 컴포넌 트들의 render()도 호출되기 때문에 화면이 싹 다시 그려진다. - console.log('...'); 하면 콘솔에 프린트를 할 수 있다. - debugger; 를 만나면 브레이크 포인트 쓰듯이 실행 시 저 부분에서 멈춘다. - HTML로 보이지만 이건 유사 HTML이다. 규칙을 따라야한다. ..

Study note/React 2020.11.30

React 스터디 노트 #2. State

- state는 props와 함께 가장 헷갈리는 부분 - component가 실행될 때 초기화를 담당하는 부분: constructor() constructor(props){ super(props); this.state = { subject:{title:'WEB', sub:'World Wide Web'} } } - 외부에서 볼 수 없게 은닉하는 방법이다. - 상위 component의 state 값을 하위 component의 props로 전달할 수 있다. - state는 바꿀 수 있지만 props는 전달 받기만 하고 직접 바꿀 수는 없다. // App의 consturctor 안 this.state = { contents: [ {id:1, title: 'HTML', desc: 'HTML is blar blar..

Study note/React 2020.11.27

React Study Note #1. egoing 이고잉님 강의로 시작하기

[Component 만들기] - App.js에 있는 class App에서 시작한다. 마치 main() 같은 건가? - html과 js처럼 작동을 하지만 굉장히 가독성이 좋다. - create-react-app이 알아서 변환해준다고 생각하면 된다. 깔끔히 정리해주는 역할. - 다들 props와 state에서 절망을 많이 하는 것 같다. 헷갈리는 부분인 것 같으니 집중해야겠다. {this.props.title} {this.props.sub} - 이렇게 하면 customize한 나만의 props를 속성으로 사용할 수 있다. 오픈튜토리얼스 이고잉님 강의 https://opentutorials.org/module/4058/24737 컴포넌트 제작 - React 수업소개 React의 핵심 기능인 컴포넌트를 제작하는..

Study note/React 2020.11.25

The breakpoint will not currently be hit 에러 해결방법

The breakpoint will not currently be hit. No executable code is associated with this line. Possible causes include: conditional compilation or complier optimizations. 디버깅 중에 이런 메시지가 뜨면서 breakpoint가 잡히지 않았다. 그래서 원하는 동작을 하지 않고 프로그램이 이상하게 동작했다. Debug 모드는 괜찮은데 Release 모드에서만 왜 이렇지? 하고 Property pages에서 하나 하나 검토해봤다. 그 중 의심스러웠던 Optimization! 사실 지난 번에도 한 번 이것 때문에 고생했었다. 이젠 좀 잊지 말자. Project Property Pages..

etc. 2020.11.16

Sourcetrail 사용하기 - 소스파일 전체 flow 그래프 보기 (feat. Visual Studio)

일단 Sourcetrail을 다운 받아 설치를 한다. https://www.sourcetrail.com/documentation/#Installation Sourcetrail - Documentation Sourcetrail does two things with the data collected during indexing: The data is stored in the .srctrldb file which is in the same directory as the .srctrlprj file. This database file is used by Sourcetrail to serve its purpose of letting you navigate your www.sourcetrail.com 다른 사이트들..

etc. 2020.11.13

[OpenGL 3] 그림이 왼쪽 아래에만 그려질 때 해결 방법 / viewport 위치 이상할 때

크로스플랫폼 개발을 하고 있는데, 문제가 OS마다 다르다. 그 중 하나가 macOS에서 갑자기 왼쪽 아래쪽에만 viewport가 나타나는 현상이었다. 4.3 - Why is my output in the lower-left corner of the window? You are passing the window size, which is in screen coordinates, to glViewport, which works with pixels. On macOS with a Retina display, and possibly on other platforms in the future, screen coordinates and pixels do not map 1:1. Use the framebuffer s..

etc. 2020.11.09

git push가 안 될 때 / detached HEAD 문제 해결 방법

git을 아직도 잘 못 다루는 것 같다. 맨날 하는 add/commit/push/pull은 쉽게 사용하지만, 과거 commit으로 checkout했다가 다시 불러오고 하다보면 꼭 문제가 생긴다. 오늘의 문제는 detached HEAD라면서 remote repository에 push가 되지 않았다. 이미 commit은 해버렸는데..? 그럴 때 해결 방법은 임시로 branch를 만드는 방법이다. git branch temp git checkout temp 이렇게 하면 temp라는 branch가 만들어지고, temp로 checkout을 하게 된다. git branch -f master temp git checkout master -f 옵션은 force를 하겠다는 이야기, 즉 강제로 실행하라는 것이다. 이런 메..

etc. 2020.11.09

Windows 10 시작메뉴 옆 알림센터가 열리지 않을 때 해결방법

갑자기 알림센터에 숫자는 떠있는데 눌르면 숫자는 없어지는데 알림센터가 열리지 않을 때가 있다. 그럴 땐 당황하지 말고 딱 한 가지만 하면 금방 해결된다. 명령어 치고 엔터 치면 끝! 그럼 어디서 명령어를 치면 되나? 1. Windows PowerShell을 관리자 모드로 연다. 시작메뉴(윈도우 키) - 검색창에서 Windows PowerShell 검색 - 관리자 모드로 실행 2. 다음 명령어를 입력하고 EnterGet-AppXPackage -AllUsers | Foreach {Add-AppxPackage -DisableDevelopmentMode -Register "$($_.InstallLocation)\AppXManifest.xml"} 사실 마이크로소프트에서 제안하는 방법은 뒤에 더 있는데, 내 경우에..

etc. 2020.11.05

MacOS에서 icon 변경하기 | customized icon | ICNS

macOS에서 아이콘 썸네일을 바꾸는 방법은 쉽다면 쉽다. 옵션에서 아이콘 파일을 드래그 앤 드롭 하면 끝! 그런데 그 중간 과정이 조금 귀찮다. 1. 준비하기: png 등 사진 파일로 된 아이콘 파일 주의할 점은 macOS에서 요구하는 아이콘 크기가 정해져있다. 물론 다른 OS도 마찬가지겠지만, 자동으로 사이즈가 resize되는 것 같지만 mac은 아닌 것 같다. http://www.img2icnsapp.com/how-to-create-the-best-mac-icons/ 이 사이트를 참고해보자면, 16px × 16px 32px × 32px 128px × 128px 256px × 256px 512px × 512px 1024px × 1024px 사이즈로 제작하기를 권장하고 있다. 2. 변환하기: png -..

etc. 2020.10.30