본문 바로가기

전체 글

(112)

React / map, filter로 반복 렌더링하기 map과 filter map과 filter는 둘다 배열을 다룰 때 자주 사용하는 메서드다. map() : 배열 내의 모든 요소 각각에 대해 주어진 콜백을 호출한 결과를 모아 새로운 배열을 반환filter() : 배열의 각각의 요소에 대해 콜백을 호출한 결과, true를 반환하는 (조건을 만족하는) 모든 요소를 모아 새로운 배열을 반환둘다 원본 배열은 변경하지 않는다. 예시로 일단 다음과 같이 트와이스의 멤버들의 정보가 담겨있는 배열을 하나 만들었다.const twice = [ { name: "나연", birth: 1995, country: "한국" }, { name: "정연", birth: 1996, country: "한국" }, { name: "모모", birth: 1996, country: "일..

React / JSX 문법 JSX(JavaScript XML)React에서 사용되는 Javascript의 확장 문법으로, HTML과 유사한 형태로 Javascript 코드가 작성이 가능하다.무조건 jsx를 쓸 필요는 없지만, 간결하게 작성할 수 있기 때문에 많이 사용된다. 규칙return문 안에 HTML 형태로 작성두 줄 이상 작성할 경우 소괄호로 묶어야 함하나의 최상위 요소로 묶어줘야 함내부적으로는 Javascript 객체로 변환되기 때문에, 하나의 배열로 감싸지 않은 함수에서는 두 개의 객체를 반환할 수 없기 때문에 나 (Fragment : 브라우저상 html 트리 구조에서 흔적 없이 그룹화)로라도 감싸줘야 한다.중괄호를 사용해 Javascript 코드를 작성함 // JSX 문법 사용function App() { return..

React / 컴포넌트 CDD(Component Driven Development) 컴포넌트 기반 개발화면을 독립적이고 재사용 가능한 컴포넌트로 구성하여 개발하는 방법론Class 컴포넌트, 함수형 컴포넌트(많이 권장) 두 종류가 있음 Class 컴포넌트 클래스 문법 ⬇️더보기더보기클래스(Class)는 객체를 생성하는 템플릿 역할로, 붕어빵 틀에 많이 비유되고 있다... (객체 - 붕어빵, 클래스 - 붕어빵 틀) 1) 기본 구조class Person { constructor(name, age) { // 생성자 (객체가 생성될 때 실행됨) this.name = name; this.age = age; } sayHello() { // 메서드 (객체가 사용할 함수) console.log(`안녕하세요! 저는 ${th..

React / 프로젝트 생성 React 프로젝트 생성 방법 CRAVite (권장)모듈 번들러로 Webpack 사용모듈 번들러로 Rollup 사용개발 환경에서도 번들링 진행 O개발 환경에서는 번들링 진행 X서버 시작과 리로딩 시간 느림 (코드를 수정할때마다 번들링 진행)서버 시작과 리로딩 시간 빠름Webpack의 다양한 기능 이용 가능빠른 개발 속도에 유리모듈도 같이 설치(node_modules)모듈은 따로 설치해야 됨npx create-react-app npm create vite@latest * 번들링 : 배포하기 위해 여러 코드와 파일을 한번에 묶어주는 과정 * CRA가 이제 추천되지 않는 이유느린 개발 속도 → Webpack 기반이라 빌드와 HMR 속도가 느려 코드 변경 반영이 늦음.번들 크기 큼 → 기본 설정이 최적화 부족,..

React / Node.js, npm, npx 설치 및 기본 사용법 (Mac) React자바스크립트 UI 라이브러리로 다음과 같은 특징들을 가지고 있다.가상 DOM을 통해 효율적으로 렌더링이 가능컴포넌트 기반의 재사용 가능한 UI를 가짐단방향 데이터 바인딩JSX 문법으로 직관적인 UI 작성SPA(Single Page Application) 개발 지원 React를 사용하는 이유1. 코드 일관성이 높음vanila Javascript (순수 Javascript)는 코드에 정해진 규격(변수 선언, 네이밍, 함수 선언 등)이 없기 때문에 일관성이 떨어져 서로의 코드에 적응하기 어려울 수 있다. 하지만 리액트에서는 컴포넌트 구조, 네이밍 규칙, 파일 구조, 상태 관리 방식 등 일관된 규칙을 적용할 수 있기 때문에 가독성, 유지보수성을 향상시킬 수 있다. 2. SPA 프레임워크리액트는 SPA..

깃 설치 및 기본설정 Git 2005년 리누스 토르발스에 의해 개발된 분산 버전 관리 시스템(DVCS)으로, 과거부터 현재까지의 작업과 변경점을 기록하고 확인할 수 있게 한다. 컴퓨터 파일의 변경사항을 추적하거나 특정 시점의 개발 환경으로 되돌아갈 수 있다. 1. mac에서 설치 git의 공식 홈페이지에서 download for Mac을 누르면 아래와 같은 페이지로 이동된다 git을 설치하는데에는 여러 방법이 있지만 homebrew로 설치하는 방법을 사용했다.물론 그러려면 homebrew를 또 설치해야한다... (이미 설치했다면 패스해도 좋다) + homebrew 설치homebrew 공식 사이트에 가면 또 다양한... 게 많이있어서 당황할 수 있지만맨 위에 Install Homebrew 바로 아래 코드를 복사해주고 터미..

javascript/얕은 복사와 깊은 복사 일단 자바스크립트에서 자료형을 크게 두가지로 나눌 수 있다. 원시 자료형Number, String, Boolean, null, undefined 등... 객체도 아니고 method도 가지지 않는 타입변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장되며, 할당한 변수를 조작하면 실제 데이터 값이 조작된다. 참조 자료형배열, 객체, 함수 등...변수에 참조 자료형을 저장하면 변수에 값이 아닌 주소(객체 참조, 위치 값)를 독립적인 메모리 공간(heap)에 저장하고,그 공간을 참조하기 위해 주소값을 변수에 할당하는 것이다.즉 참조 자료형을 할당된 변수를 조작하는 것은 사실 객체 자체를 조작하는 것이 아닌, 해당 객체의 참조를 조작함=> 객체가 변경되면 해당 객체를 참조하는 모든 속성이 변경..

javascript/chart.js로 그래프 만들기 chart.js📊: 8개의 차트 유형을 지원하는 데이터 시각화를 위한 오픈소스 JavaScript 라이브러리 https://www.chartjs.org/docs/latest/getting-started/ Getting Started | Chart.jsGetting Started Let's get started with Chart.js! Alternatively, see the example below or check samples. Create a Chart In this example, we create a bar chart for a single dataset and render it on an HTML page. Add this code snippet to your page: You shouldw..

이전 1 ··· 4 5 6 7 8 9 10 ··· 14 다음

티스토리툴바