리액트에 대한 입문자들의 착각 리액트를 뭔가 특별한 것이라고 생각한다. 그것은 엄청난 착각이다. 결국에는 웹브라우저는 html,css,js밖에 못읽는다. 특히 화면을 구성하는것은 html,css 이여야 하고, 그에 대한 동작은 js여야 한다. 여기서 리액트라는게 뭔가 새로운 존재가 아니라 리액트도 결국은 자바스크립트일 뿐이고, 자바스크립트로 html,css를 만들어내는 그런 존재일뿐이다. 그래서 우리는 리액트로 프로그래밍을 하더라도 결과물은 html,css,js가 나와야지만 브라우저가 파일들을 읽고 화면에 표시 할 수 있다. 리액트가 특별한게 아니라 자바스크립트라는점 이부분을 꼭 명심하자! create-react-app 을 하면 초반에 셋팅이 쫙 되고 그걸 실행하면 "hello world"같은 앱이 딱 ..
리액트를 사용하는이유 - 복잡한 웹앱에서 데이터와 화면일치 문제를 쉽게 해결 해준다. 리액트를 사용한다고해서 무조건 장점만 있는것이 아님(무지성 리액트 ❌) 리액트를 사용하는 이유는 복잡한 웹앱에서 데이터와 화면의 일치 문제를 리액트가 쉽게 풀어주기 때문에 쓰는것이다. 그럼 고전적인 문서같은 웹 사이트들은 리액트를 굳이 쓸 필요가 없다. 하지만 요즘 트렌드는 문서같은 웹 사이트들도 싱글 페이지 애플리케이션으로 만드는 추세이긴 하다. 대신에 리액트를 도입한다고 해서 무조건 장점만 있는것이 아니다. 페이지 깜빡임 새로고침없이 자연스럽게 넘어가는 그런효과, 데이터와 화면일치문제 이런것들을 해결하기 쉽지만 데이터들이 자바스크립트로만 이루어져 있다 보니까 검색엔진 노출에 어려움이 있을수 있다. 검색엔진 노출 때문..
웹 애플리케이션(SPA)은 웹사이트에 비해서 데이터가 많음 -> 복잡하고 어려움 -> 프론트엔드 개발자가 나온 이유 데이터가 바뀌면 화면도 바뀌어야 하기 때문에 javascript로만 구현하기 힘듬 이러한 문제를 해결하기 위해서 angular, react, vue, svelte 같은 싱글 페이지 어플리케이션 프레임워크들이 나오기 시작함 (참고) 리액트는 라이브러리이기는 하지만 Redux나 MobX, react-router와 함께 프레임워크처럼 사용된다. 이런 것들의 주목적은 프론트에서 데이트를 갖고 있고 데이터를 바꾸면 화면도 알아서 데이터와 일치되게 바뀌는 것 페이스북은 기존의 mvc 패턴으로 만들었던 웹사이트를 버리고 react를 만들어서 데이터와 화면의 불일치 문제를 해결함. → 복잡한 웹앱에서 데..
조건식 ? 참일 때 실행되는 식 : 거짓일 때 실행되는 식 조건부 연산자는 문이 아니라 식이므로 결괏값이 나온다. let value; value = 5 < 0 ? '참입니다' : '거짓입니다'; // '거짓입니다' 조건부 연산도 중첩해서 사용할 수 있다. let condition1 = true; let condition2 = false; let value = condition1 ? condition2 ? '둘 다 참' : 'condition1만 참' : 'condition1이 거짓'; console.log(value); // condition1만 참 조건부 연산자를 두 번 연이어 썻더니 가독성이 떨어진다. 이럴 때는 좀 더 읽기 편하게 소괄호 연산자로 감싸주면 좋다. let value = conditio..
else를 사용해 두 방향으로 분기하기 if (조건식) { // 조건식이 참인 값일 때 실행 실행문; } else { // 조건식이 거짓인 값일 때 실행 실행문; } let value = '사과'; let condition = false; // else 문이 실행됨 if(condition) { value = '바나나'; } else { value = '포도'; } console.log(value); // 포도 else if를 사용해 여러 방향으로 분기하기 if (조건식) { 실행문; } else if (조건식) { 실행문; } else { 실행문; } if문은 if만 필수 else와 else if는 선택 const score = 90; if (score >= 90) { console.log('A+'); ..
조건문은 조건에 따라 코드를 실행하거나 실행하지 않는 문 분기, 판단 하는게 조건문이다. if (로그인한 사용자) 정보를 보여준다; if (조건식) 동작문; 조건문은 조건식과 실행문으로 구성된다. if (조건식) { 실행문1; 실행문2; 실행문3; } 만약 실행문이 하나 이상이면 실행문들을 중괄호로 감싼다. 🌈 실제로 조건식 true, false를 넣으면 분기하는 이유가 없다. 그래서 조건(식)에 보통 변수를 넣어서 코드의 흐름을 제어하는 것이 if문 이다. let condition = true; if (condition) { console.log('Hello, if!'); } true, false만 올 수 있는건 아니다. if (0) { console.log('Hello, if!'); } ▲ 0을 불 ..
상수 만들기 const(constant) 상수의 줄임말이다. 변수는 변하는 수이다. 상수는 변하지 않는 수이다. const는 엄밀히 상수는 아니다. const를 변수라고 해도 틀린말은 아니다. const는 객체의 내부 값에는 적용되지 않는다. 상수를 왜 사용할까? 코딩을 하다 보면 실수로 값을 수정하는 일이 생긴다. 그걸 막기위해 상수를 사용한다. // 크롬 개발자도구 콘솔 환경 const value = '상수입니다.'; // undefined // ▲ const도 식이 아니라 선언문이기 때문에 콘솔에 undefined가 출력된다. value = '바꿀 수 없습니다.'; // Uncaught TypeError: Assignment to constant variable. // ▲ 다른 값을 대입하면 에러가..
변수의 값 수정하기 변수는 변하는 수라는 의미지만 수는 숫자가 아니라 값이라고 생각하자. 변하는 값이기 때문에 나중에 바꿀 수 있다. // 크롬 개발자도구 콘솔 환경 let change = '바꿔 봐'; // undefined change = '바꿨다!!!'; // "바꿨다!!!" change; // "바꿨다!!!" change = “바꿨다” 에서 결과값이 있는 이유는? let으로 변수를 선언할 때는 콘솔의 결과값이 undefined 이지만, 변수의 값을 바꿀 때는 결과로 바꾼 값이 나온다. 같은 대입 연산자를 사용했는데, 결과가 다르다. 왜 그럴까?? 👉 이는 let의 역할 때문이다. let이 없을 때는 코드가 식이라서 대입한 값이 결과값으로 출력되지만, let이 앞에 붙는 순간 선언문이 된다. 여기서..
프로그래머가 제일 어려운 하는게 변수명 짓는거다. 변수명은 최대한 자세하고 명확하게 그 값이 뭔지 알 수 있게 지어야 한다. 변수 네이밍 규칙 1.특수문자는 $, _ 만 가능 let $ = '달러'; $; // '달러' let _ = '언더바'; _; // '언더바' let er^ror = 'No!'; // Uncaught SyntaxError: Unexpected token '^' 2.숫자 첫글자로는 안됨 let 2error = 'No!'; // Uncaught SyntaxError: Invalid or unexpected token let button2 = 'OK!'; button2; // 'OK!' 3. 띄워쓰기 안됨 let zerocho is babo = ‘hahaha’; // Uncaught S..
1. 현실에 있는것을 컴퓨터 속으로 옮기는것 2. 옮겨놓은걸 통해서 자유롭게 기능을 만들고 다시 현실에 있는 문제를 해결하는 프로그램을 만드는 것 변수를 다룰줄 알면 자료형과 값을 활용해 현실의 문제를 해결 할 수 있다. 변수 - 잠깐 동안 특정한 값을 저장할 수 있음 - 변수를 활용하면 컴퓨터가 기억하게 할 수 있음 - 값을 저장하고 저장한 값을 불러올 수 있게 하는 것이 변수이다. 컴퓨터에서는 값을 저장해두는게 매우 중요하다. 저장을 해놔야 활용 가능하기 때문이다. 다음과 같이 복잡한 숫자를 저장하고 변수를 사용하면 쉽게 그 자료에 접근 할 수 있다. 앞으로 프로그래밍 할때 대부분의 경우에 값들을 변수에 저장해놓고 저장한거끼리 계산을 하는 경우가 많을 것이다. console.log(string)는 되..
