본문 바로가기

전체 글402

002. [코딩애플] [part1] 리액트 React 설치와 개발환경 세팅 개발환경 세팅Node.js 설치구글 검색 후 LTS 버전 설치.VSCode 에디터 설치따로 사용하는 에디터가 있으면 그거 써도 됨.프로젝트 생성CRA로 프로젝트 세팅하기React 프로젝트를 만들기 위한 파일들을 직접 설치해서 작업 환경을 만들 수 있겠으나 파일이 너무 많고 복잡하므로 Create React App이라는 라이브러리의 도움을 받을 것이고,이 라이브러리는 Node.js를 설치하면 자동으로 딸려 오기 때문에 Node.js도 설치한 것.그리고 아래 npx 명령어를 사용하면 리액트 프로젝트가 한 번에 구축이 됨.작업용 로컬 디렉토리 생성폴더를 shift 우클릭여기에 PowerShell 창 열기 클릭, 맥은 터미널 열기터미널에 아래 코드 입력npx create-react-app 허가 되지 않은 권한... Programing/React 2024. 5. 14.
001. [코딩애플] [part1] React란? React란?Single Page Application을 만들기에 유리한 라이브러리이다.SPA는 인스타그램과 같이 페이지가 전환되었음에도 새로고침이 되지 않고 부드럽게 모바일 앱과 같은 사용성을 보이는 웹 페이지를 말함.물론 바닐라 JS로도 가능하지만 코드가 길어지기 때문에 이를 도와주는 라이브러리가 많이 생겼고, 그 중에서 가장 인기가 많은 것이 react임.특징대규모 웹 애플리케이션에서도 빠르다.동적인 애플리케이션을 더 쉽게 만들 수 있다.재사용 가능한 컴포넌트를 사용하여 뷰를 구성하기 때문에 복잡한 UI를 쉽게 구성할 수 있다.JSX(일명 작스)를 사용한다. HTML과 유사한 구문을 코드에 직접 포함시킬 수 있다.React Native 사용하면 iOS와 안드로이드 모바일 모두 통하는 애플리케이션을 .. Programing/React 2024. 5. 14.
React-Create-App 환경과 Vite 환경에서 각각 실행하는 법 React는 웹 브라우저에서 실행시키기 위해서는 터미널을 이용해야 한다.Create-React-App 환경Create-React-App을 이용한 경우, 터미널에 npm start를 작성 후 엔터.Vite 환경Vite를 이용한 경우, npm install 이후 npm run dev를 작성 후 엔터.터미널에 로컬호스트 아이피가 뜨면 그것을 ctrl + 클릭하면 웹 브라우저에서 열림.만약 vite의 경우, 여기까지 했는 데도 실행이 안 되면 package.json 파일 확인.// 아래와 같이 작성이 잘 되어 있는지 확인하고 안 되어 있다면 수정해주고 다시 하면 됨."scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview"} Programing/React 2024. 5. 13.
2024-05-13 내배캠 스탠다드 1일차 JS 문법 확인 문제풀이문제 1 (for문)문제다음 문자열 배열에서 stop 문자를 만났을 때 반복을 중지하고, skip 문자를 만났을 때 해당 반복을 건너뛰고 나머지 문자열들을 출력하세요.let words = ['apple', 'banana', 'skip', 'cherry', 'stop', 'date', 'elephant'];풀이// Pseudo Code// 1. words 배열을 순회하면서 stop을 만나면 break;// 2. 순회하면서 skip을 만나면 continue;// 3. [apple, banana, cherry] -> "apple, banana, cherry"let words = ['apple', 'banana', 'skip', 'cherry', 'stop', 'date', 'elepha.. Programing/TIL 2024. 5. 13.
HTML 화면에서 반복되는 리스트 한 번에 추출하기 상황강의를 듣다 강의 전체의 이름을 가져와서 작업을 해야 하는 상황이다.한 줄 한 줄 li 태그로 묶여 있고, unit 이라는 클래스로 지정되어 있는 듯하다.해결웹 브라우저에서 개발자 도구를 연다콘솔에 아래 명령어를 입력한다.const listItems = document.getElementsByClassName('unit');// 임의의 변수를 만들고 해당 클래스명을 가진 요소를 전부 찾아온다.const texts = Array.from(listItems, item => item.textContent);// 여러 개이니 배열로 반환되었을 건데, arr.from 메서드로 textContent만 순회하면서 가져온다.// 이를 다시 새로운 배열에 할당한다.console.log(texts);// 최종 완료된 .. Programing/JavaScript 2024. 5. 13.
자바스크립트 이벤트 객체 공부한 이유사용자가 키보드를 눌렀을 때 특정 코드를 실행시키고 싶어 아래와 같이 작성했다.그런데 작성하면서도 이벤트 리스너의 콜백 함수로 event라는 매개 변수가 들어가는데, 무엇을 의미하는지 알지 못하고 그냥 외워서 사용했다.이것 말고도 이 event 객체는 부트캠프에서 두 번이나 썼다. 리로드 되는 페이지에서 버튼에 달린 이벤트 리스너가 풀리는 것을 방지하기 위해 리로드 되지 않는 상위 부모 태그에 이벤트 리스너를 다는 이벤트 위임을 할 때, 영화 카드를 눌렀을 때 현재 누른 카드의 ID 값을 찾아올 때.document.addEventListener('keydown', function(event) { // 13은 enter의 keyCode if (event.keyCode === 13) { .. Programing/JavaScript 2024. 5. 11.
HTML 요소에 단축키로 이벤트 주기 (input으로 포커스 옮기기, 버튼 클릭하기) 상황간단하게 위와 같이 지출번호를 입력하고 버튼을 클릭하면 이벤트 리스너가 동작하여 문서를 만들어주는 웹 페이지를 만들었다.하단으로 쭉 HTML이 작성되는데, 끝까지 확인한 후 다시 위로 가서 다른 지출번호를 입력해서 다른 문서를 확인하는 이 과정 자체를 줄이고 싶다.해결 방법top 버튼을 만들어 하단에서 최상단으로 버튼 클릭 한 번에 이동한다. --> 그런데 스크롤은 위로 한 번에 올라가더라도 어쨌든 input 클릭 한 번 하고 버튼을 또 눌러야 하기 때문에 이벤트가 크게 줄진 않을 것 같다.단축키를 만들어서 한 번에 포커스를 input으로 옮기고, 지출번호를 타이핑한 뒤 단축키를 또 만들어서 버튼을 눌러 이벤트 리스너를 동작시킨다. --> 이벤트 횟수 자체는 줄지 않았지만 적어도 마우스를 안 잡아도 .. Programing/JavaScript 2024. 5. 11.
2024-05-10 리액트 입문 오늘 배운 것은 아래 포스트로 정리한다.https://infistudy.tistory.com/206 [내배캠] 001. [JS] 변수 (let, const, var) 와 스코프, 호이스팅변수란?변수의 필요성데이터를 저장하고 관리하기 위해. 데이터를 저장해서 다른 코드에서 재사용할 수 있다.let numberOfusers = 50;numberOfusers = numberOfusers + 5;console.log(numberOfusers); // 55위의 예제에서infistudy.tistory.comhttps://infistudy.tistory.com/207 [내배캠] 002. [JS] 객체와 배열 - 값 접근하기, 수정하기, 삭제하기객체란?개념key : value로 이루어진 데이터의 집합.리액트에서는 JS.. Programing/TIL 2024. 5. 10.
[내배캠] 004. [JS] 객체와 배열 - 템플릿 리터럴, 구조 분해 할당 ES6 업데이트 이후 제공된 핵심 기능 세 가지에 대해 학습한다.Template LiteralsDestructuringSpread Operators템플릿 리터럴 (Template Literals)개념변수와 표현식을 문자열 안에 삽입할 수 있게 해주는 문법.사용법`` 백틱을 이용한다.const customer = { name: '장원영',};const item = { name: '커피', price: 4000,};console.log( '감사합니다. ' + customer.name + '님!' + item.name + ' 을(를) ' + itme.price + '원에 구매하셨습니다.');// '감사합니다. 장원영님! 커피을(를) 4000원에 구매하셨습니다.'위와 같이 출력할 수도 있겠지만 .. Programing/React 2024. 5. 10.
[내배캠] 003. [JS] 객체와 배열 - 수정중 Programing/React 2024. 5. 10.

티스토리툴바