양씨

웹의 규모가 커지다 보면 css로만 작업하는게 힘든경우가 많은데 이때 css 전처리기를 사용하곤한다. css 전처리기란? css는 매우 원시적인 언어로 웹에서는 표준 css만 동작을 한다. 따라서 사람들은 css에 변수, 함수등을 쉽게 사용하기 위해 전처리기를 이용한다 대표적으로 Sass, less, postcss 등이 있으며, 전처리기로 작성하고 css로 컴파일하여 css 포맷으로 변환한다 결국, Sass는 css 전처리기 중 하나이고 Sass를 통해 작성하고 이를 css로 컴파일하여 이용한며 css에 프로그래밍적 요소를 쉽게 사용하기 위해서 사용하는 것이다 Sass 컴파일방법 앞서 말했듯이 웹은 표준 css만 이해하기 때문에 Sass를 사용하려면 css로 컴파일을 해줘야한다 그럼 컴파일을 어떻게 시킬..

거의 모든 프로그래밍 언어에서 + 는 2개의 피연산자가 있을 때, 그 둘의 합한 결과를 반환한다 js에서는 + 를 단항연산자로도 사용할 수 있는데 이는 Number()과 같은 역할을 한다 let a = -2; console.log( +a ); // -2 console.log( +true ); // 1 console.log( +"" ); // 0 아래와 같이 응용 가능하다 let apples = "2"; let oranges = "3"; console.log( +apples + +oranges ); // 5 단항 연산자일 경우 말고 2개 이상의 피연산자가 있을 경우에는 문자열로 변환된다 console.log( '1' + 2 ); // "12" console.log( 2 + '1' ); // "21"

js는 ==, === 2개의 동등 비교 연산자가 있다 == : 동등연산자 === : 엄격한 일치연산자 로 부른다 다음과 같이 ==는 값만 같으면 true, ===는 값과 데이터 타입까지 같아야 true를 반환한다 console.log('1' == 1) //true console.log('1' === 1) //false console.log(null == undefined) // true console.log(null === undefined) // false console.log(0 == "") // true, 빈문자열과 0은 false이기 때문 console.log(0 === "") // false, 위와 같지만 데이터 타입이 다름 배열과 객체의 경우에는 어느경우에도 해당하지 않는다 왜냐하면 배열이나 ..

프로그래밍을 막 처음 배우기 시작하던 시절부터 많이 봤던 &&와 ||이다 전통적인 프로그래밍 관점에서 이 둘은 논리연산자로 AND와 OR을 의미한다 AND연산자는 2개의 값이 모두 참이면 true 반환하고 아니면 false, OR연산자는 2개의 값중 어느 한 값만 참이면 true 반환하고 아니면 false이다 AND연산자 console.log(true && true) //true console.log(true && false) //false console.log(false && false) //false OR연산자 console.log(true || false) //true console.log(true && false) //true console.log(false && false) //false 이렇게..

항상 똑같은 실수를 여러번 하는 것 같다 리액트에서 버튼을 클릭하는 이벤트를 만들 때 onClick 안에 이벤트 핸들러 함수를 설정한다 하지만, 내가 생각하지 못한 무한 콜백오류가 뜨거나 작동이 안될 때가 있다 간단한 실수?이지만 간단한 문제를 자주 범해 글로 남겨 보려 한다 1. 잘못된 방법XXXXX import './App.css'; function App() { const test = () => { console.log('hi') } return ( 테스트 버튼 ); } export default App; 위 코드와 같이 onClick 이벤트 핸들러에 알림창을 띄우면 버튼을 누르지 않아도 랜더링 되는 순간 알림창이 뜬다 이는 리액트가 랜더링시 모든 함수를 실행시키기 때문이다. 버튼을 눌러서 작동되는..

지금까지 리액트를 이용하여 프로젝트 진행 경험이 여러번 있었다 다만, 나한태 왜 리액트를 이용해? 라고 물어본다면 2가지 정도의 답변을 할 것 같다 가장 많이 사용하니까,,? 이걸로 밥벌어 먹고 살아야하니까! -> 많은 기업에서 요구하는 스펙이다 솔직히 마음에 들지 않는 답변이다 따라서, 리액트란 무엇이고, 이걸 왜 사용하며, 특징 및 장점이 무엇인지 이번 글을 통해 다시 복기하려한다 먼저 리액트란 무엇인가? 리액트란 간단하게 자바스크립트 라이브러리 라고 간단하게 설명할 수 있다. 기본 html, css, js를 이용해서도 웹페이지를 개발할 수 있지만, 동적인 웹페이지를 보다 효율적으로 유지 보수하고 관리하기 위해 사용한다 리액트 외에도 vue, angular와 같은 자바스크립트 프레임워크가 있지만 이 ..

Recoil은 2020년에 Facebook에서 발표하였으며, React의 상태관리를 지원하는 유일한 상태 관리 라이브러리이다 redux toolkit만 사용하다가 새로운 프로젝트를 들어가며 새로운 상태 관리 라이브러리를 써보자 했다가 알아보았는데 사용법은 굉장히 간단한듯하다 요즘 블로그들을 보면 recoil을 사용하는 사람들이 어느정도 많이 있는것을 볼수 있는데 이는, 단순한 사용방법 React를 만든 Facebook에서 직접 만든 것이라 호환성이 좋다 정도로 볼 수 있을 것 같다 먼저, recoil을 사용하려면 //npm npm install recoil 로 설치를 해준다 Recoil을 사용하기 위해서는 애플리케이션의 최상위 컴포넌트에 컴포넌트를 사용해야한다. 따라서, index.js 에 다음과 같이 ..

자바스크립트의 특징이자 단점인데 하나하나 뜯어보면 알아보기 직관적이지만 코드 자체가 매우 길고 더럽다... vue나 react같은 프레임워크 쓰는거와 마찬가지로 jquery를 써보자 jquery는 간단하게 설치 후 사용할 수 있다 이렇게 스크립트 태그를 쓰고 이 밑에서 jquery 문법을 사용하면 된다 jquery 써서 html 변경하고 싶을 때 안녕 jquery 써서 스타일 변경하고 싶을 때 안녕 등 이런식으로 jquery 문법을 사용 가능하다 정리하면 $() 를 사용할수 있게 되고 이것은 querySelector와 동일한 기능을 한다 $를 사용하면 이 뒤는 jquery 함수를 붙여야된다( $('hi').innerHTML이런식 안된다는 소리 ) 아래 예시와 같이 $()는 querySelector와 다르..

콜백 함수는 다른 함수에 매개변수로 전달되어 그 함수의 실행이 끝난 후 호출되는 함수이다주로 비동기 작업을 처리하거나, 특정 이벤트가 발생했을 때 주로 사용된다 function func(callback) { callback();}function callback() { console.log("hello");}func(callback); //hello  콜백함수는재사용성비동기 처리에서 장점이 나타난다  재사용성 예시function repeat(count) { for (let idx = 0; idx  이렇게 유사한 함수를 아래와 같이 콜백함수를 이용하여 재사용성있게 사용할 수 있다function repeat(count, callback) { for (let idx = 0; idx console.l..

변수에 배열과 객체를 저장하는 방식과 기본 데이터 타입을 저장하는 방식은 js에서 차이가 있다 이는 값이 직접 저장되는가, 참조에 의해 저장되는가 에 대한 차이이다 기본 데이터의 저장 기본 데이터 타입을 변수에 저장하면 js는 실 제 값을 변수에 직접 저장한다 다른 변수에 할당할 때, js 는 값을 복사한다 let a = 10; let b = a; a = 20; console.log(a) // 20 console.log(b) // 10 위와 같이 a의 값을 변경해도 b에 영향을 주지 않는다, 이는 값을 복사했기 때문 배열과 객체의 저장 객체와 배열은 변수에 참조로 저장된다. 객체나 배열을 생성할 때, 실제 데이터는 메모리 어딘가에 저장되고 변수는 실제 데이터가 아닌 그 메모리 위치를 가르키는 주소를 가지..