본문 바로가기

분류 전체보기51

[React] React를 사용하는 이유? 1. Single Page Application 만들때 사용 - 모바일 앱과 사용성이 유사하여 앱처럼 페이지가 부드럽게 이동함 - js로도 만들 수 있는데 생으로 짜게 된다면 코드가 길어지고 복잡해져서 react를 사용함 2. html 재사용이 편리하다. 3. 같은 문법으로 앱개발이 가능하다. => React Native 2023. 9. 3.

리액트, 트리플 사이트 배너 컴포넌트 만들기 2023. 8. 28.

[React] react css 충돌, 같은 클래스명을 쓰면 안된다고? 2023. 8. 21.

브라우저의 기본 css 스타일 값 초기화 reset.css link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.css"> 2023. 8. 19.

DOM API DOM API (Document Object Model, Application Programming Interface) ㄴ> document : div, span, input .... //HTML 요소(Element) 1개 검색/찾기 const boxEl = document.querySelector('.box'); //HTML 요소에 적용할 수 있는 메소드! boxEl.addEventListener(); //인수(Arguments)를 추가 가능! boxEl.addEvenetListener(1,2); //1 - 이벤트 (Event, 상황) boxEl.addEventListener('click', 2); //2 - 핸들러 (Handler, 실행할 함수) boxEl.addEventListener('click'.. 2023. 8. 16.

Nodejs 개요 및 설치 nodejs란? chrome v8 javascript 엔진으로 빌드된 javascript 런타임(프로그래밍 언어가 동작하는 환경) 이다. babel, sass, stylus, ejs, less,,,, 1. nodejs 다운받기 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org - LTS(Long Term Support) 는 장기적으로 안정되고 신뢰도가 높은 지원이 보장되는 버전, 유지/보수와 보안(서버 운영 등)에 초점을 맞춰 대부분 사용자에게 추천되는 버전이다. - 현재 버전은 가장 최신 버전이지만 아직 기능이 불안전하고 기능이 언제든 수정이 될 수 .. 2023. 8. 16.

Javascript 자바스크립트 함수, 조건문 함수 function 특정 동작(기능)을 수행하는 일부 코드의 집합(부분) //함수 선언 function helloFunc() { //실행코드 console.log(1234); } //함수호출 helloFunc(); //1234 function returnFunc() { return 123; //123을 밖으로 반환, 이걸 누가 받아? {}밖으로 내보낼 수 있음 } let a = returnFunc(); //여기서 returnFunc이 호출(실행)되면 a라는 함수에 담는다 console.log(a); //123 //함수 선언! function sum(a, b) { //a와 b는 매개변수(parameters) return a + b; } //재사용 let a = sum(1, 2); //1과 2는 인수(Ar.. 2023. 8. 16.

[React] 오늘의 할일, 오늘의 일기 프로젝트 ing 2023. 8. 16.

css transition, easing function transition : 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성 속성명 지속시간(단축형으로 작성할 때, 필수 포함 속성) 타이밍함수 대기시간; = transition-property transition-duration transition-timing-function transition-delay 쉼표를 통해 단축 속성값 구분 할 수 있음 transition-property : 전환 효과를 사용할 속성 이름을 지정all : 모든 속성에 적용속성이름 : 전환 효과를 사용할 속성 이름 명시ex) transition: width 1s; => 배경색이 확 바뀌면서 트렌지션 효과 적용된다transition-duration : 전환 효과의 지속시간을 지정, 필수로 넣어주어야 함0s : 전환 효과 없음시간 .. 2023. 8. 15.

npm_parcel, 개발서버 실행과 빌드 에러 https://velog.io/@developer-jyyun/npmparcel-%EA%B0%9C%EB%B0%9C%EC%84%9C%EB%B2%84-%EC%8B%A4%ED%96%89%EA%B3%BC-%EB%B9%8C%EB%93%9C npm_parcel, 개발서버 실행과 빌드npm프로젝트 시작parcel, 개발서버 실행과 빌드npm init -y package.json 생성npm install 설치할 패키지 패키지 설치npm install parcel —save-dev 패키지 dev 설치npm install -D parcel savelog.io 2023. 8. 15.

css position relative, absolute, fixed, sticky, z-index, display, flex, 수평, 수직 정렬 레이아웃 position : 요소의 위치 지정 기준으로 position과 같이 사용하는 css속성들은 모두 음수를 사용할 수 있다. (top, bottom, left, right, z-index..)static : 기준 없음, 포지션 없음relative : 요소 자신을 기준absolute : 위치 상 부모 요소를 기준 (위치 상 부모 요소를 꼭 확인해야함!), 붕뜨면서 겹쳐짐fixed : 뷰포트(브라우저)를 기준sticky : 스크롤 영역 기준top, bottom, left, right : 요소의 각 방향별 거리 지정auto : 브라우저가 계산단위 : px, em. rem 등 단위로 지정 relative와 absoulte 요소 쌓임 순서 (stack order) 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는.. 2023. 8. 13.

Javascript 자바스크립트 변수, 예약어 변수 (var, let, const) 데이터를 저장하고 참조(사용)하는 데이터의 이름 //재사용 가능 //변수 선언! let a = 2; let b = 5; console.log(a + b); //7 console.log(a - b); // -3 console.log(a * b); // 10 console.log(a / b); // 0.4//값(데이터)의 재할당 가능! let a = 12; console.log(a); //12 a = 999; console.log(a); //999 //값(데이터)의 재할당 불가! const a = 12; console.log(a); //12 a = 999; console.log(a); //TypeError : Assignment to constant variable. /.. 2023. 8. 13.

이전 1 2 3 4 5 다음

티스토리툴바