미새문지

StrictMode StrictMode는 React 개발 중에 발생할 수 있는 잠재적인 문제를 사전에 감지하고 예방하는 데 도움을 주는 개발도구이며, 프로덕션 빌드에서는 아무 영향을 미치지 않고, 오직 개발 환경에서만 작동한다.비권장 API 및 오래된 라이프사이클 메서드 감지React의 최신 버전에서는 더 이상 사용되지 않거나 비권장 상태인 API를 감지할 수 있다.예: componentWillMount, componentWillReceiveProps, componentWillUpdate와 같은 오래된 라이프사이클 메소드이러한 메소드가 포함된 코드는 콘솔 경고를 통해 개발자에게 알림을 주고, 최신 React API로 전환하도록 유도한다. 의도치 않은 부수효과 감지React는 컴포넌트가 예측 가능한 방식으..

리액트에서 성능 최적화를 위해 적용할 수 있는 방법 컴포넌트 렌더링 최적화React.memo를 사용한 컴포넌트 메모이제이션React.memo는 함수형 컴포넌트를 메모이제이션하여 불필요한 렌더링을 방지한다.사용 예시:const MyComponent = React.memo((props) => { return {props.value};});렌더링 비용이 큰 컴포넌트나, 부모 컴포넌트의 재렌더링이 자식 컴포넌트의 렌더링을 불필요하게 유발할 때 사용된다.useCallback으로 함수 메모이제이션useCallback은 동일한 함수를 재사용하여 자식 컴포넌트가 불필요하게 렌더링되지 않도록 한다.사용 예시:const handleClick = useCallback(() => { console.log('Button c..

백준 1271 파이썬 브론즈5 엄청난 부자2 n, m = map(int, input().split()) print(n//m) print(n%m) post 페이지에서 네비게이션 바가 너무 가독성 떨어지고 밋밋하다고 해서 조금 수정했다. import "../../style/post/postSidebar.scss" import write from "../../img/write.png" import setting from "../../img/gear.png" import cube from "../../img/cube.png" import logout from "../../img/logout.png" import downArrow from "../../img/downArrow.png" import upArrow ..

백준 10815 파이썬 실버5 숫자 카드 import sys input = sys.stdin.readline from bisect import bisect_left, bisect_right def count_by_range(a, left_value, right_value): right_index = bisect_right(a, right_value) left_index = bisect_left(a, left_value) return right_index - left_index n = int(input()) haveCard = sorted(list(map(int, input().split()))) # 정렬 m = int(input()) checkCard = list(map(int, input().split..

백준 2231 파이썬 브론즈2 분해합 import sys input = sys.stdin.readline n = int(input()) i = 1 sum = 0 while True: a = i sum = i while a > 0: sum = sum + (a % 10) a = a // 10 if sum == n: print(i) break if i == n: print("0") break i += 1 오늘 기획한 디자인대로 로그인 페이지와 회원가입 페이지 퍼블리싱을 어느정도 구현했다. 로그인과 회원가입 페이지는 input이나 버튼 등 공통적으로 쓸 부분이 많아서 components 폴더에 common 폴더를 하나 만들어 그곳에서 작성했다. 각 부분별로 컴포넌트를 나눠 만들고 로그인 페이지와 회원가입 페이지..

백준 1269 파이썬 실버4 대칭 차집합 import sys input = sys.stdin.readline def daeching(a, b): zip1 = set(map(int, input().split())) zip2 = set(map(int, input().split())) print(len(zip1-zip2) + (len(zip2-zip1))) a, b = list(map(int, input().split())) daeching(a, b) 백준 11728 파이썬 실버5 배열 합치기 import sys input = sys.stdin.readline a1, a2 = map(int, input().split()) arr1 = list(map(int, input().split())) arr2 = lis..

백준 11653 파이썬 브론즈1 소인수분해 const fs = require("fs"); const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt"; let input = fs.readFileSync(filePath).toString().split("\n"); let n = Number(input[0]); while(n != 1) { for (let i = 2; i

자바스크립트 강의가 끝나고 리액트 강의가 시작했습니다 리액트가 프론트엔드의 메인이라고 할만큼 중요하고 복잡하다고 하여 열심히 따라잡을 예정입니다 리액트란? - 사용자 인터페이스를 만들기 위한 자바 스크립트의 라이브러리 중 하나이며, 모듈형 개발로 빠르게 지원이 가능하고 라이브러리 특성상 붙여 사용하기 때문에 간편하여 프론트엔드의 표준으로 자리 잡았습니다 이러한 리액트를 사용하기 위해 vscode에서 기본적인 설정을 해야합니다 먼저 터미널을 실행할 폴더안에 리액트 파일을 만들어야합니다 npx create-react-app "파일 이름" 으로 폴더를 생성해줍니다 여기서 npx는 npm, yarn과 같은 프로젝트 패키지 관리툴입니다 create-react-app은 CRA라고 부르며 react에서 따로 설치하지..