인간은 어떻게 배울까43 [VScode] React 코드 VS code 사이드 창으로 바로 확인하기 React 작업 VS code 사이드 창에서 바로 확인하기 리액트 작업을 하면서 코드 결과물을 VS 코드의 내부창에서 바로 확인하고 싶어서 찾아봤습니다. 브라우저 새 창을 띄우지 않고 옆에서 확인하고 싶었어요. 익스텐션 설치 메뉴로 갑니다. 그리고 react live 로 검색합니다. 아래 노란 사각형으로 표시한 Web Preview를 설치해줍니다. Install을 클릭하면, 금방 Uninstall로 전환되면서 설치가 끝났습니다. 이제 이 탭을 닫고 코드 창으로 돌아와서 맥 기준 컨트롤 + 옵션 + P 를 누릅니다. 윈도우는 컨트롤 + 알트 + u 입니다. 커맨드 + shift + P(맥 기준)를 눌러 preview open을 입력합니다. 윈도우는 컨트롤 + shift + P 네요. 아래처럼 사이드 창으로.. 2023. 7. 26. [JS/React] useContext로 맥락 찾아주기 리액트 훅 useContext 1. 왜 사용할까? React에서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 props를 이용합니다. 그러나 코드가 길어지고 컴포넌트들이 많아져서 구조가 복잡해지면 props로 데이터를 전달하는 과정이 꽤 복잡해질 수 있습니다. props는 데이터를 부모에서 자식으로 건네줍니다. 그런데 자식이 또 자기 자식에게 전달해야 할 경우도 생깁니다. 컴포넌트의 트리 구조가 깊어져서 자식의 자식의 자식의 자식... 에게 전달해야 한다면, props를 가지고 삼만리를 가는 기분... 그렇게 땅굴파듯 깊이 깊이 내려가는 것보다 좀 더 손쉽게 관리하는 방법이 있으면 좋겠습니다. 이럴 때 useContext를 사용합니다. 간단히 말해서, 복잡하고 다층적으로 쌓여있는 컴포넌트들 사.. 2023. 7. 22. [CSS] Flexbox 정렬 배우기 좋은 사이트 - 플렉스 박스 개구리 헷갈리기 좋은 CSS의 FlexBox 정렬 완전 쉽게 배우기 https://codepip.com/games/flexbox-froggy/#ko Flexbox Froggy - A game for learning CSS flexbox Help Froggy and friends by writing CSS code! In this game, you must bring the frogs home to their lilypads by mastering CSS flexbox, a powerful new module that makes layout a breeze. With it you can control alignment, spacing, and wrapping of elements on t codepip.com 진.. 2023. 7. 21. [Python] 파이썬이 함수의 매개변수에 값을 전달하는 방식 함수의 매개변수에 값을 전달하는 데는 두가지 방식이 있다. 첫째 pass by value, 값에 의한 전달. def test(a): return a * 10 x = 1 test(x) 이런 함수 실행문이 있다고 할 때, x값 자체를 복사해서 a에게 넘기는 방식이 '값에 의한 전달'이다. 이 방식으로는 위 함수를 실행해도 x는 여전히 1이다. x 값 자체는 변경되지 않는다. 두번째 pass by reference, 참조에 의한 전달이 있는데, 위와 동일한 함수에서 x 에 저장된 값의 메모리 주소를 전달한다. 그럼 위에서 매개변수 a도 x와 동일한 메모리 영역을 사용하기 때문에, 함수를 실행하여 a값을 바꾸면 x값도 바뀐다. 파이썬은 이 참조에 의한 전달방식을 택하고 있다. But, 변수의 자료형에 따라 다르.. 2023. 7. 15. [Mac] 터미널에서 환경변수 잘못 입력해서 기본 명령어도 실행이 안될 때 .zshrc 파일을 건드리다가 환경변수를 잘못 건드려서 기본 명령어조차 실행이 안됐습니다. 예를 들어, .zshrc파일을 복구하기 위해 nano .zshrc를 하려고 해도 실행이 안되는 것입니다!!! 아래 명령어를 실행시키니 해결이 되었길래 적어둡니다. export PATH=%PATH:/bin:/usr/local/bin:/usr/bin 다시 nano .zshrc를 실행해서 원래대로 되돌렸습니다. 성공. 환경: Mac OS Ventura V13.4, zshell 사용 2023. 7. 13. [html/js] onclick 이벤트 처리하는 세가지 방법 onclick 이벤트 처리하기 vanilla js 예시입니다. 리액트 X 1. 의 onclick 속성에 직접 코드 전달하기 클릭 2. 의 onclick 속성에 함수 실행문 전달하기 클릭 3. 을 DOM으로 조작하기 버튼을 getElementById로 객체로 받아와서 javascript .onclick 메서드로 함수 할당해주기 클릭 4. 를 javascript 이벤트 리스너로 조작하기 클릭 쓰고 보니 4가지네요. : P 2023. 7. 13. [크롬] 브라우저 주소창에서 검색 안되게 막기 Node.js로 서버 띄우기 중에 브라우저에 http://localhost.8000 입력해서 서버 실행 결과를 확인하고 싶은데 문제가 있네요. 주소창에 http://localhost.8000 입력했더니 서버 실행화면을 보여주는 게 아니라 그걸 검색하고 있는 크롬... ㅠㅠ 해결책은 다음과 같습니다. (23년 7월 기준) 1. 크롬 브라우저의 오른쪽 상단에서 ... 점세개를 찍고 설정창에 들어갑니다. 2. 왼쪽 사이드바에서 검색엔진 클릭합니다. 3. 검색엔진 및 사이트 검색 관리를 클릭합니다. 4. 저는 이미 수정을 해서 아래와 같이 뜨는데, 맨 위에 기본값으로 '구글'이 설정되어 있습니다. 연필 아이콘을 클릭해서 수정해줍시다. 5. 다음과 같이 입력해줍니다. 검색엔진: null 복사하기 바로가기: htt.. 2023. 7. 7. [백준-파이썬] 1676번 팩토리얼 0의 개수 (실버5) https://www.acmicpc.net/problem/1676 1676번: 팩토리얼 0의 개수 N!에서 뒤에서부터 처음 0이 아닌 숫자가 나올 때까지 0의 개수를 구하는 프로그램을 작성하시오. www.acmicpc.net def facto(n): if n == 0: return 1 return n * facto(n - 1) arr = list(map(int, list(str(facto(int(input())))))) arr = arr[::-1] c = 0 for i in arr: if i == 0: c += 1 else: break print(c) 숏코드 t=int(input())//5 print(t+t//5+t//25) 어떻게 해서 위와 같은 코드가 나왔나 했더니... 1부터 50까지 차례로 숫자를.. 2023. 7. 3. [백준-파이썬] 10870번 피보나치 수 5 (브론즈2) https://www.acmicpc.net/problem/10870 10870번: 피보나치 수 5 피보나치 수는 0과 1로 시작한다. 0번째 피보나치 수는 0이고, 1번째 피보나치 수는 1이다. 그 다음 2번째 부터는 바로 앞 두 피보나치 수의 합이 된다. 이를 식으로 써보면 Fn = Fn-1 + Fn-2 (n ≥ 2)가 www.acmicpc.net a, b =0, 1 exec("a, b = b, a+b;" * int(input())) print(a) 2023. 7. 3. 이전 1 2 3 4 5 다음
