웹 프론트 6

React JS로 영화 웹 서비스 만들기

출처 : 노마드코더 React.memo() memo는 memorize의 약자로 memo를 통해서 rerender 되고 싶은 부분, 즉 props가 바뀌는 부분만 rerender해주는 함수이다. [옛날 방식] const h3 = React.createElement("span",{ onMouseEnter: () => console.log("mouse enter"), }, "Hello I'm a span"); [JSX 방식 - 요즘 사용하는 방식] 위 코드와 같은 의미 const Title = () => console.log("mouse enter") }>Hello I'm a title createElement("",)에서 "" 안에 있는 말은 html 태그와 동일해야한다. const h3 = React.cr..

웹 프론트 2022.05.20

바닐라 JS 공부_크롬 앱 만들기 실습

출처 : 노마드 코더 - 바닐라 JS 기초 클론코딩 prompt() : 사용자 값 입력 받기 parseInt() : 정수로 바꾸기 NaN : number가 아닌 것 console.dir() : element를 더 상세하게 보여줌 classList : class를 list처럼 관리할 수 있게 도와줌 Document - html과 js를 상호작용할 수 있도록 도와주는 객체 - html element를 가져올 수 있고, 변경할 수 있다. - 사용법 : document.getElementById() document.getElementsByClassName() document.getElementsByTagName() [array로 반환] querySelector , qerySelectorAll const titl..

웹 프론트 2022.05.06

리액트 공부 [voca 앱 만들기 실습]

출처 : 코딩앙마 리액트 강좌 HTML - table 태그 내용 : 표의 제목 내용 : table row 행 만들기 내용 : table data 셀 만들기 map() 컴포넌트를 반복하고 싶을 때 사용하는 함수 map 함수를 사용하여 반복되는 컴포넌트르 렌더링한다. 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후, 새로운 배열을 생성한다. key 설정하기 https://lktprogrammer.tistory.com/121 [React] 리액트 - 배열 내장 함수 map을 통한 Component 반복 안녕하세요. 이번 포스팅에서는 배열 객체에 내장된 map() 함수를 통하여 반복되는 Component를 렌더링하는 방식에 대해서 알아보겠습니다. 1. map() 함수 기본 사..

웹 프론트 2022.04.08

리액트 기초 [component/ css]

강의 출처 : 코딩앙마 리액트 기초 강좌 1강~5강 리액트 시작 방법 컴퓨터 터미널에서 npx create-react-app 파일이름 입력하면 패키지 설치 및 react 파일이 만들어진다. vscode에서 해당 파일을 연다. vscode에서 터미널을 연 후, npm start 를 입력한다. 기초 실습 - 내 블로그로 이동하기 컴포넌트 component 컴포넌트란 프로그래밍에 있어서 재사용이 가능한 각각의 독립된 모듈이다. 레고 블럭처럼 사용할 수 있는 블럭 단위라고 생각하면 된다. 안드로이드의 View랑 비슷한 단위인 것 같다. [World.js] export default function World() { return World! } 이런 식으로 하나의 파일로 만들어 준 후, 다른 파일에서 import..

웹 프론트 2022.04.01

자바스크립트 기초 강좌

강의출처 : 코딩앙마 자바스크립트 기초 강좌, 중급 강좌 codepen.io로 실습 진행 변수 name = "Mike"; 문자열은 따옴표로 감싸주기 (작은, 큰 따옴표 상관 없음) age = 30; 이미 사용중인 예약어들은 변수로 사용 불가능 변수 접근 alert() : 경고창 띄우기 console.log() : log띄우기 let : 한번 선언 후 다른 값으로 변경 가능 , 할당 전 사용 불가 const : 절대로 바뀌지 않는 상수 -> 변경하려고 하면 에러 발생 / 대문자로 선언, 할당 전 사용 불가 var : 한번 선언된 변수를 다시 선언할 수 있다. / 호이스팅 : 할당 전 사용 가능 호이스팅 : 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동 const name2 = `My nam..

웹 프론트 2022.03.24

[HTML/CSS] 자기소개 사이트

지금까지 배웠던 html, css를 활용해서 내가 좋아하는 것들만 모아놓은 사이트를 한번 만들어 보았다! AboutMe.1911909.repl.co About YoonJin 이 사이트는 내가 좋아하는 것들을 모아 놓은 사이트다. 각각의 항목들을 차례대로 눌러보면 내가 좋아하는 것들에 대해 자세히 알아볼 수 있을 것이다!! AboutMe.1911909.repl.co 정말 배운 것들만 간단하게 활용해본거여서, 부가적인 내용을 더 학습한 후에 디자인을 수정해야겠다!! 그래도 사이트라고 할 수 있는걸 처음으로 내 손으로 만들어 봐서 뿌듯하고 기분이 좋다ㅎㅎ

웹 프론트 2021.05.04