CS (42) 썸네일형 리스트형 [React] 리액트 JS와 JSX파일의 차이점 클론 코딩 강의를 들을 때 js와 jsx 두 파일이 섞여 나올 때가 많았다.한 번 정리하고 넘어가기로! JSX 파일JavaScript XML의 약자자바스크립트에서 XML을 추가한 확장형 문법! 자바스크립트에서 HTML 문법을 사용할 수 있다!리액트나 다른 프론트엔드 프레임워크에서도 사용이 가능하다는 특징이 있음왜 굳이 JSX 파일을 사용할까?스택오버플로우 질문과 답변 참고 결과 .jsx를 사용하면 자바스크립트 내에서 HTML을 사용할 수 있음그러나 그것 빼고는 js와 jsx 간 기능적으로 큰 차이점 없음jsx 관련해서 자바스크립트 내에서 직관적인 UI 작업이 가능하고, 개발이 도움이 되는 에러 메시지를 표시할 수 있게 해주긴 함 프로젝트 팀원들끼리 js를 쓸지 jsx를 쓸지 논의 후에 사용하면 된다! S.. [React] 리액트의 <Link>태그 Link 사용 예시//a tag: 페이지 이동//홈페이지에 링크 설정해서 프로덕트 페이지로 넘어가게 만듦import { Link } from 'react-router-dom';//가려는 경로를 to 프로퍼티로 지정. function HomePage(){ return ( My Home Page Go to the list of products. );}export default HomePage; Link 컴포넌트는 React에서 사용하는 태그라고 할 수 있다. *참고: 태그참고로 태그란 웹 사이트 내에서 다른 페이지, 또는 같은 페이지의 특정 위치, 또는 그 외 다른 웹사이트의 URL로 연결할 수 있는 하이퍼링크.. [React] useEffect() 훅에 대하여 useEffect 목적useEffect는 컴포넌트의 side effect를 처리하기 위한 함수.컴포넌트의 상태 변화에 따라 상태를 이용해 리액트와 관련 없는 부수 작업을 처리하기 위한 것. 첫번째 파라미터로 입력된 함수가 호출되는 시점은 컴포넌트가 첫 렌더링되는 시점과두번째 파라미터로 입력된 dependency 배열의 각 요소 값이 변경되었을 때이다. 각 요소값이 변경되었는지 판단하는 시점: 컴포넌트가 렌더링되는 시점. 사용방법1. useEffect(() => {})//컴포넌트가 렌더링 될 때마다 호출됨. 매우 비효율적. 거의 사용되지 않음2. useEffect(()=> {}, [])//첫번째 렌더링 후에만 호출됨 useEffect 사용 이유: 무한 루프 방지상태를 업데이트할 때,상태 업데이트 함수.. [React] 자바스크립트 배열 배열const hobbies= ["Swimming", "Cooking", "Running"];console.log(hobbies[0]); >>>Swimming const content=[~, ~, ~];내부에 문자열을 저장하거나 하는 식으로 구성 hobbies.push("Walking"); //새 원소 추가console.log(hobbies); //전체 출력const index= hobbies.findIndex((item) => { return item=== 'Swimming'; //각 원소를 스위밍과 비교하고 두 텍스트가 일치하면 함수가 true를 반환하여 스위밍의 인덱스를 가져옴 //그리고 그 값인 0을 index변수에 저장});console.log(index); 다른 언어들이랑 거.. [React] 자바스크립트 import, 함수, 객체와 클래스 import and export export 방법 2가지.util.js에서 export하고app.js에서 import한다고 가정. 1) 변수생성&이름할당하며 export export let apikey= "adfsfe2qw2dd";=> 몇개든 상관없이 export 가능.import {apiKey} from "./util.js"; 2) default exportexport default "adfsfe2qw2dd"; 변수 생성하거나 이름 할당하지 않고 이름 없는 값을 export => 2번째 방법은 하나더 추가하려고 하면 오류.파일별로 하나의 값만 default export 가능.import apikey from "./util.js";//import 파일에서 원하는 이름 할당하면 됨. export시에 이름.. UDEMY React 완벽 가이드 2024: 섹션1 시작하기& 섹션 2 자바스크립트 새로고침 React= Declarative UI Programming -바닐라로 짜면 쓸데없이 복잡하다. 명령형 방식. -리액트는 군더더기 없고 작성할 코드가 비교적 짧다. UI 업데이트도 알아서 해줌. 조건, 목표 상태, 상태 변경 조건만 정의하면 나머지는 리액트가 알아서 해줌 +) CodeSandBox- 개발환경 포함해서 리액트 연습 가능한 사이트. visual studio code에서 작업가능. npm start 리액트 라이브러리(추가 패키지) 설치. npm install npm run dev 이것도 실행. -리액트 프로젝트는 빌드 프로세스를 사용한다. 작성한 코드가 그대로 브라우저에서 실행되는게 아니라는 뜻. 브라우저에 전달되기 전에 내부적으로 코드가 수정됨. 이유1) 처리되지 않은 리액트.. ★ 백준 20920 파이썬 영단어 암기는 어려워- 딕셔너리&람다식 응용 1) 람다식 참고https://velog.io/@euisuk-chung/파이썬-시각화-마스터하기-람다Lambda-함수 파이썬 마스터하기 : 람다(Lambda) 함수람다(lambda) 함수는 함수형 프로그래밍에서 중요한 개념 중 하나로, 익명 함수(anonymous function)라고도 부릅니다.velog.io 2) 딕셔너리 정렬 참고https://velog.io/@yejinleee/파이썬-딕셔너리-정렬 파이썬 딕셔너리 정렬딕셔너리 키값으로 정렬하기, 벨류값으로 정렬하기, 역순으로 정렬하기 / dic.items(), lambda x , reversevelog.io 개수, 길이는 내림차순알파벳순서는 오름차순 sorted는 오름차순 정렬이 default인데이렇게 단어의 개수와 길이는 내림차순, 알파벳순서는 .. 백준 파이썬 13305번 주유소 - 간단한 풀이 N-1까지만 신경쓰기간단하게 생각하는 연습을 더 해야겠다 제일 싼 곳에서 기름 충전해서 가격을 갱신하면서 가도록 짰다import sysN=int(sys.stdin.readline()) #도시개수dist=list(map(int, sys.stdin.readline().split()))price=list(map(int,sys.stdin.readline().split()))result=0nowPrice=price[0] for i in range(N-1): nowPrice=min(nowPrice,price[i]) result+=nowPrice*dist[i] print(result) 이전 1 2 3 4 ··· 6 다음
