본문 바로가기

분류 전체보기

(112)
[ React ] 조건부 렌더링 컴포넌트를 조건부 렌더링하는 부분에 대하여 정리합니다. 코드가 간단하여 굳이 이렇게 안쓰고 더 짧게 쓰는 방법이 있으나 함수형 컴포넌트 작성시 복잡하게 사용할 경우도 있을듯 하여 아래처럼 정리합니다. 1. if문을 사용한 조건부 렌더링 const IsRight = () => { return 맞습니다.; }; const IsWrong = () => { return 틀립니다.; }; function Parent() { const Month = 2; return ( 지금은 2월입니까? ); } function Child({ month }) { if (month === 2) { return ; } else return ; } 2. 인라인 구문 > 삼항 연산자를 사용한 렌더링 const IsRight = () =..
[Javascript] Set객체 정렬하기 Set으로 중복 제거를 한 객체를 정렬하는 경우를 정리해봅니다. 아래처럼 중복 제거 후 sort메서드를 사용하는 경우, 아래와 같이 오류를 만납니다. 위와 같은 경우는 아래처럼 사용합니다. 1. 배열 set 사용 후 정렬 set객체를 array로 만들어서 사용하는 첫번째 방법과, sort로 먼저 정렬 후 set에 사용하는 두번째 방법이 있습니다. 아래의 예시는 배열의 경우에 중복제거 후 정렬하는 방법입니다. const arr = [55,33,22,77,88,11,22,55,33,11,44,33,22,77] // 1 let setArr = new Set(arr) const uniqueArr = Array.from(setArr) uniqueArr.sort() // [ 11, 22, 33, 44, 55, 77..
[ Vue ] 이미지 삽입시 변수, 절대경로 사용하기 ( with v-for ) @로 src내 파일 절대경로로 사용 이미지 경로가 src/assets/images/IMG1.png 일때 vue 에서는 @/assets/images/IMG1.png 로 src를 절대경로로 사용 할 수 있다. 그래서 아래와 같은 방법으로 이미지를 삽입 할 수 있다. 변수를 사용한 절대경로 사용 하지만 변수를 사용하거나 v-for로 index값을 이용하거나 하는 등의 경우에는 위처럼 적용하면 이미지가 제대로 나오지 않는것을 볼 수 있다. 아래의 예제가 위처럼 사용하고 변수만 넣었을 경우이다. 1. 미작동 예시 ​ 사진을 보면 제대로 뜨지 않는것을 확인 할 수 있는데, Element에서 확인해보면 src에 @가 포함된 절대경로 자체가 들어가 버렸다 2. 작동 예시 이럴때는 위의 형태로 require을 추가해 변..
[ REACT ] 컴포넌트, props 사용하기 컴포넌트란? 컴포넌트는 독립적이고 재사용이 가능한 UI를 만들수 있는 단위 이다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 함수형 컴포넌트와 클래스형 컴포넌트의 차이 1. 함수형 컴포넌트 function Welcome(props) { return Hello, {props.name}; } 리액트 공식문서에서 컴포넌트 새로 작성시에는 함수형 + Hooks의 조함으로 만드는것을 추천한다고 한다. 함수형 컴포넌트가 클래스형 컴포넌트보다 선언하기 편하고, 메모리도 덜 사용한다고 한다. (엄청 큰차이는 아니라고) 이전에는 state와 라이프사이클 API의 사용이 불가능했으나, Hooks를 이용하여 사용이 가능하다고 한다. 2. 클래스형 컴포..
[ REACT ]JSX, JSX문법과 예제 정리 JSX는 자바스크립트의 확장 문법이다. React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다. JSX 변환 예제 위와같은 코드를 입력하면, 아래와 같은 자바스크립트 코드로 변환되어 렌더링된다. function App() { return React.createElement("div", null, "Hello ", React.createElement("strong", null, "World")) } JSX 문법 1. 반드시 부모 요소는 한개의 태그로 감싸져 있어야 한다. virtual DOM에서 컴포넌트 변..
태스크 러너, 모듈 번들러, 모듈, 번들링, 웹팩 개념 한번에 정리! 1. 테스크 러너 : Task Runner 프로그램 개발에 수반되는 반복 작업들을 스크립트로 작성해 한 번에 실행되도록 한다. ex ) 번들링이나 불필요한 공백 제거하기, js 파일 난독화 등의 일 등이 있다. npm scripts npm scripts 사용 시 다른 태스크 러너의 환경 설정이나 규칙과 독립적으로 실행된다. 바로 npm 툴을 다룰 수 있으며 사용시 package.json을 통해 중앙화된 패키지 관리 및 번들링 수행이 가능하다. 자주 사용되는 명령어 더보기 npm init: 새로운 패키지나 프로젝트를 만들 때 쓰는 명령어 npm install (package-name) : 루트에 node_modules 폴더가 생성되고 거기에 (package-json)을 설치하는 명령어 npm update ..
[ REACT ] reset css 하는 방법 + npm으로 설치 reset css를 하는 이유 브라우저마다 태그를 렌더링하는 기본 스타일이 다르고, 기본 padding,margin값들 이 적용되어 있는 부분을 초기화 하기위해 style 기본값을 0으로 만들고 list,a태그에 기본적으로 적용된 스타일들의 초기화를 위해 reset css를 해준다. 결론적으로는 크로스 브라우징을 위해 브라우저마다 다른 기본값들에 대한 차이를 없애는것이다 [ 기존에 사용하던 방법 ( css 파일 추가 ) ] https://meyerweb.com/eric/tools/css/reset/index.html /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, ..
[ git ] push오류 ! fatal: no path specified; see 'git help pull' for valid url syntax 이제 리액트 클론하는 강의 따라하면서 리덕스 배워보려고 하는데, git에 프로젝트 만들고 push 하니까 나는 오류 ! 오류 fatal: no path specified; see 'git help pull' for valid url syntax git remote url이 제대로 등록되지 않은 경우 원인 찾아보니 ssh로 시작하는 url을 넣어서 그렇다는데, 사진과 같이 나는 git remote -v 로 확인해보 origin url이 아예 없었다 😅 GUI툴을 사용해서 링크 넣었는데 뭔가 제대로 안되었나보다.. 해결 git remote set-url origin https://github.com// 위의 명령어로 remote의 url을 추가하고나서 push 하니 잘 되었다 : ) ✔️ 참고 https:/..
[ REACT ] CRA로 프로젝트 생성하기 ( Create React App ) CRA : Create React App CRA로 리액트 프로젝트를 생성하면, 웹팩,바벨의 설치 및 설정과정을 생략하고 바로 프로젝트 작업 환경을 구축 할 수 있다. 1. CRA로 프로젝트 생성하기 // yarn $ yarn create react-app 프로젝트이름 // npx $ npx create-react-app 프로젝트이름 ex ) $ yarn create react-app NewProject $ npx create-react-app NewProject --use-npm 옵션 사용하기 yarn이 설치된 컴퓨터에서 npx create-react-app OOO 를 실행하면 자동으로 npm을 패키지 매니저로 사용하는것이 아닌 yarn을 패키지 매니저로 사용하는 형태로 설치가 된다고 한다. 이럴때는 아..
[ REACT ] 작업환경 설정, 설치하기 (node.js | npm | nvm 간단정리) 작업환경 설정하기 제 맥북에는 설정이 다 되어있어 CRA만 하면 됐지만, 혹시 따라 진행하실 분들이 있을까 해서 작업환경설정 순서는 책 내용 보면서 정리했고, 관련해서 설명은 되어있지 않앗지만 간단한 내용도 함께 정리해두었습니다. 1. Node.js , npm , nvm 설치 프로젝트를 개발하는데 필요한 주요 도구들이 Node.js를 사용하기 때문에 설치. Node.js를 설치하면 npm이 같이 설치되고 이로 패키지를 설치하고 설치한 패키지의 버전을 관리 할 수 있다. 또한 node의 version을 관리 할수 있는 nvm을 설치해준다. Nods.js Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임( 프로그래밍 언어가 구동되는 환경)이다. - Node.j..