분류 전체보기 (68) 썸네일형 리스트형 국비지원 47일차 벨로퍼트:react를 다루는 기술 (컴포넌트 import export , props, useState) react에서 컴포넌트를 생성하는 방법 react에서 컴포넌트를 생성하는 방법에는 2가지가있다 1 class형 컴포넌트 2 함수형 컴포넌트 class형 컴포넌트의 장점 함수형 컴포넌트의 장점 1 클래스형 컴포넌트보다 선언방식이 편하다 2 프로젝트 배포시 파일크기가 클래스형 컴포넌트보다 작다 3 메모리 자원이 클래스형 컴포넌트보다 덜 든다 ex) //클래스형 컴포넌트 class App extends Component { render() { return ( MyComponent입니다! ) } } //함수형 컴포넌트 const MyComponent = () => { return MyComponent입니다! } Reactjs Code Snippet 이라는 확장 프로그램을 이용하면 컴포넌트를 쉽게 만들어 낼 수 .. 국비지원 46일차 벨로퍼트:react를 다루는 기술 npm 으로 리엑트 시작 하는법 터미널에서 npm init react-app 위 처럼 입력하면 리엑트에 필요한 환경설정을 간단하게 할 수 있다. jsx란? react에서 html 코드를 작성 할 수 있게 해주는 자바스크립트 확장 문법이다 jsx를 사용할때 규칙이 있다 반드시 하나의 요소로 감싸야 한다. 왜냐하면 리엑트의 가상돔이 변경사항을 감지할때 하나의 DOM트리 구조로 구성되어 있다면 변경사항을 효율적으로 감지 할 수 있기 때문이다 ex) function App() { return ( 리액트 안녕 잘 작동하니? ); } 만약 위 app이라는 함수형 컴포넌트에 div태그가 없다면 에러를 출력하게 된다 삼항연산자 JSX내부에서는 if문은 사용 할 수 없지만 삼항연산자는 사용이 가능하기 때문에 조건에 따라.. front-end 국비과정 일차 37~45일차 학습일지: vue 영화 검색사이트 만들기 실패 vue로 영화검색 사이트를 만드는 프로젝트를 진행하였지만 너무 어려워서 결국 포기하였다 때문에 좀 더 쉬운것을 해보기로 결정하였다 향후 계획 과제 : RESTAPI를 이용해 todo-list 만들기 vue로 진행할 예정 자바스크립트 딥다이브 오전, 오후 분량 확대 todo-list 과제를 진행한후 react 시작 react 계획: 1 리엑트를 다루는기술 (진도는 책 구성을 확인후 결정) 2 코딩애플 리엑트강의로 사이트 만들어보기 3 코딩애플 강의로 사이트 만든후 인프런 제로초 리엑트 게임만들기 부터 커리큘럼 진행 할예정 느낀점: 1 vue를 배우며 vuex에 state,mutation,action,getter,setter 등등과 slot,compositionAPI등등의 많은 개념들을 배웠지만 정작 사용하.. front-end 국비과정 일차 36일차 학습일지 Vue:props,v-slot,emit,(provide,inject),ref 컴포넌트 장점 재활용이 가능하다. props: 부모컴포넌트에서 자식 컴포넌트에게 데이터를 전달하는 기능을 한다 props는부모 자식 간의 데이터 통신이라고도 부른다 props 활용법 1부모 컴포넌트에서 속성과 값을 정의한다 2자식 컴포넌트에 script에서 props를 정의한다 3props안에 부모컴포넌트에서 사용된 속성이름을 정의한다. 데이터 타입과, 기본값을 설정 할 수 있다 4 부모 컴포넌트에서 전달할 데이터가 문자열이 아닌 경우 자식컴포넌트에 props에 데이터를 전달하기위해선 v-bind를 사용해야한다 ex) //부모 컴포넌트 //자식 컴포넌트 props 활용 예시 루트란? 최상위 요소라는 것을 의미한다 template영역에 자식요소를 루트라고 부른다 상속이란? 부모컴포넌트에서 작성한 속성이 자.. front-end 국비과정 일차 35일차 학습일지 :Vue computed, watch, (class,style 바인딩) computed란? 1계산된 데이터라 불린다. 즉 함수 로직을 실행하여 결과를 도출해낸 상태이다 2 methods 처럼 함수 데이터를 정의한다 3 methods 보다 최적화 하기 좋다 4 반복적인 함수 데이터를 사용하기 좋다 5 읽기 전용으로 값을 얻어내는 용도로만 사용한다 computed vs methods 1앞서 말했듯이 computed는 계산된 데이터 이기때문에 호출을 따로 하지않아도 사용 할 수 있다 2 methods는 사용할때마다 함수로직을 실행하여 결과를 도출 해야한다.즉 사용 할때마다 계산을 해야한다. ex) {{ computedMessage }} {{ computedMessage }} {{ computedMessage }} {{ methodsMessage() }} {{ methodsMess.. 모던 자바스크립트 Deep Dive 학습일지 1일차 변수란? 변수란 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 라고 표현 할 수 있다. 참조(reference)란? 변수에 저장된 값을 조회하는 것을 의미한다 할당이란? 변수의 값을 대입 하는 것을 의미한다 식별자란? 1고유한 이름으로써 변수,힘스,Class 등등 이름을 지어 줄 수 있는 것들은 모두 식별자 이다 2식별자는 값이 저장되어 있다기 보다 값이 저장된 메모리 주소를 기억하고 있다 변수 선언이란? 변수를 생성 하는 것을 의미하고 주로 let, const를 사용한다 키워드란? JS엔진이 사용하는 명령어들을 의미한다 실행 컨텍스트란? JS엔진이 코드를 실행하기 위한 환경을 제공하고 결과값을 관리하는 영역이다 변수 선언시 JS 엔진은 변수의 존재를 알게되고, 해당 변수를 undefined로 초기.. front-end 국비과정 일차 34일차 학습일지 :Vue 데이터 바인딩,설치법,v- for, v-if 반응성이란?: 데이터를 수정하면 화면에 렌더링 되는 요소의 값을 변경 시킬 수 있다 디렉티브란?: vue 문법중에 v- 으로시작하는 키워드를 의미한다 vue를 시작하기위해선 우선 설치를 해야하는데 2가지 방법이 있다 1 cdn으로 설치하기 " target="_blank" rel="noopener">https://unpkg.com/vue@next"> 위 태그를 vue를 적용하고싶은 html파일 head태그에 적용하면 사용 가능 주로 학습목적 으로 사용된다 2 npm 으로 설치하기 npm init -y로 npm 패키지를 프로젝트에 설치한다 터미널에서 npm install vue@next라고 명시하여 설치한다 package.json을 이용해 제대로 설치 되 었는지 확인한다 Vue CLI(vue에서 사용되는 명.. front-end 국비과정 일차 26~33일차 학습일지 :과제: OMDB API를 이용해 DATA 화면에 출력 LOTTECINEMA-main-page FEAT - OMDB API를 이용해 데이터를 비동기로 불러와 데이터를 화면에 삽입 - SWIPER 라이브러리를 이용해 영화포스터,공지사항의 내용을 슬라이드화 - SCSS를 이용해 Stylie 작업 - netlify를 이용해 사이트 배포 Netilify로 배포한 사이트 링크 [LOTTE-MAIN-link](https://resonant-bublanina-cb3245.netlify.app/) 깃허브 링크 https://github.com/Jung-Hwan-Kim-97/LOTTECINEMA-MAIN - 검색창에 avengers,Avengers,AVENGERS라고 입력후 SEARCH-icon클릭하면 관련영화 5개 출력 - 검색창에 hunger,Hunger,HUNGER라고.. 이전 1 2 3 4 5 ··· 9 다음
