Hoon_developer Hoon_developer

front-end

• React 에서 이미지 가져오기(img태그)

  front-end/React 2023. 8. 7. 16:56

  1. 외부링크 방식 HTML 방식과 동일하다 return ( 외부링크 방식 ) 1. 내부 링크 방식 내부 링크 src 방식 src 폴더 이용하기 import 이미지 변수 from '경로' import 내부링크변수 from '링크주소' /* 중략 */ return ( 내부 링크 src 방식 ) 내부 링크 public 방식 public 폴더는 서버와 계속해서 통신을 진행하고 있기 때문에 폴더 안에 저장하는 것 만으로도 고유주소를 갖게 됨(업로드) 해당 주소 값을 가져와서 사용 ex) http://localhost:3000/img/이미지1.jpg return ( 내부 링크 public 방식 )

  Read More
• React State

  front-end/React 2023. 8. 7. 16:44

  1. 컴포넌트와 프로퍼티 컴포넌트(Component) 리액트를 이루는 앱의 최소단위이다. 대문자로만 시작해야한다. 이유 : 기존 HTML 태그(DOM요소)와 구분을 하기 위해서 내가 직접 커스텀하는 나의 태그 프로퍼티 (Props) 상위컴포넌트가 하위컴포넌트로 값을 전달할때 사용한다. 상위 컴포넌트에서 보낸 데이터를 하위 컴포넌트에서 받는 방법 함수의 형태이기 때문에, 값은 매개변수를 통해서 받는다 매개변수 상위 컴포넌트에서 값을 입력하고 하위 컴포넌트에서 값을 읽어온다. - React Event return 문 안에 DOM 요소에 이벤트 속성 : onClick={함수이름} 만약 함수 이름이 따로 없고, 바로 작성하고 싶은 경우? onClick = { ( ) => { } } DOM 요소에만 이벤트 걸 수..

  Read More
• React 코드 2번 실행 되는 이유(Strict Mode)

  front-end/React 2023. 8. 7. 08:58

  1. StrictMode index.js에 있는 React.strictMode가 켜져 있을 경우 2번씩 실행이 된다. 개발 모드에서만 활성화된다. 프로덕션 빌드에는 영향을 미치지 않는다. 2. 모드 활성화를 통한 장점 레거시 문자열 ref의 사용에 대한 경고 레거시 context API 검사 예상치 못한 부작용 검사 권장되지 않는 findDomNode 사용에 대한 경고 - 자세한 내용에 대한 React 문서 사이트 https://ko.legacy.reactjs.org/docs/strict-mode.html

  Read More
• transform & animation 쓰는 이유

  front-end/HTMI CSS 2023. 8. 6. 14:21

  1. transform의 속성 rotate 회전 translate 좌표 이동 scale 확대 축소 skew 비틀기 .box1 { transform : rotate(10deg); } .box2 { transform : translate(10px, 20px); } .box3 { transform : scale(2); } .box4 { transform : skew(30deg); } - 2개 이상의 속성을 부여하고 싶을 경우 .box1 { transform : rotate(10deg) scale(1.5); } 2. animation 속성 @keyframs 정의하기 x% 애니메이션 x% 동작시 실행 @keyframes 좌우움직임{ 0% { transform : translateX(0px); } 50% { tra..

  Read More
• HTML video 태그 속성(비디오 배경 사용 방법)

  front-end/HTMI CSS 2023. 8. 3. 22:51

  1. video 태그 영상을 보여주는 태그 controls 속성을 넣으면 재생 컨트롤 바가 생성 source 태그를 사용할 경우 조금 더 호환성이 좋아진다. ex) 2. 비디오 태그의 속성 muted 음소거 autoplay 자동재생 단 muted를 적어야 작동 poster 썸네일이미지 preload 영상 다운로드 속성 auto metadata none metadata 초반 부분만 다운로드 3. 비디오를 배경으로 사용하는 방법 autoplay로 자동 재생의 속성을 이용 loop 속성을 이용하여 반복 재생을 하면 가능 안녕하세요 심투의 블로그입니다. .video-box { height: 500px; width: 100%; overflow: hidden; position: relative; } .video-c..

  Read More
• JSX란?

  front-end/React 2023. 8. 3. 17:48

  1. JSX 나의 파일 안에 HTML 문법과 JS 문법을 동시에 작성할 수 있는 파일 확장자 장점 : HTML요소에 접근할 때마다 document 객체에 접근해줘야 하는 JS와 달리 하나의 파일 내에 HTML 요소가 있기 때문에 바로 접근이 가능하다. 가독성이 좋고, 기능별 분류가 쉽다. - 여러가지 요소가 있다면 반드시 부모 요소로 감싸야한다. 이때, 꼭 div 태그가 아니어도 상관없다( 도 가능) SIMTOO의 홈페이지에 오신걸 환영합니다. 오늘은 여름휴가 입니다. 다음에 방문해주세요! - 표현식 사용 가능하다. HTML 문법 내에서 JS 문법을 사용하려면? {표현식} 안에 작성 - {표현식} 안에는 if문을 사용할 수 없음 삼항 연산자로 대체 가능하다. let openState = true; ret..

  Read More
• 리액트(React)란

  front-end/React 2023. 8. 3. 17:22

  1. 리액트란? 자바스크립트 라이브러리 중 하나 사용자의 인터페이스를 만들기 위해 사용 - 리액트가 나온 이유는? 자바스크립트만으로는 부족하기 때문에! ex) 자전거(자바스크립트)로 장거리 여행이 가능하지만, 힘들다. 그러나 자동차(리액트)의 경우 쉽게 장거리 여행이 가능하다. - 자바스크립트가 가지고 있는 단점 HTML과 JS가 가진 분리감 직관적이지만 너무 긴 자바스크립트 문법 새로운 페이지를 들어갈 때 마다 새로고침 피로도를 느끼는 사용자 - 리액트로 해결되는 자비스크립트의 단점 관련 있는 HTML 과 JS 문서를 JSX로 합쳐준다. SPA(Single Page Applocation) 새로운 페이지나 메뉴를 들어갈 때, 새로고침이 되지 않아 사용자의 피로도를 줄여준다. 2. 라이브러리 vs 프레임워..

  Read More
• Sass(Scss)로 css를 간편하게 만들자

  front-end/HTMI CSS 2023. 8. 1. 22:10

  1. 환경 설정 VScode 에디터를 실행한다. extension 메뉴를 눌러서 live sass compile를 설치한다. (파일명). scss으로 만들어서 사용한다. test.scss 파일에 내용을 작성 후 저장을 한다. css 파일에 설정한 값이 저장된 내용이 만들어진다. 이 파일을 HTML에 링크를 걸어서 사용하면 됩니다. map 파일의 용도는 구글 크롬에서 찾기 쉽게 만드는 용도다. - Sass파일과 Scss파일의 차이점 // Sass 방식 .background color : red // Scss 방식 .background { color : red } 2. Sass(Scss) 문법 특징 값을 저장을 하고 쓸 수 있다. $변수명 : 컬러, 폰트사이즈, 높이, 길이 등등 한글이 잘 적용이 된다. 사..

  Read More