SUE 개발 블로그

zep에서 동기들과 각자 학습을 진행하던 중 혼자 뜬끔없이 그래프를 만들어보고 싶다고 얘기했습니다.그러면 각자 그래프의 길이 값 상태를 어떻게 관리해야할까 했는데 객체로 만들어서 한다는 얘기를 듣고 시도해보고 싶어졌습니다.자바스크립트를 강의를 시작한지 1주차 상태라 그냥 시각적으로 표현하는 것에 일단 의의를 두었습니다.( 어려워요 자바스크립트 😹 ) 어떻게 코드를 작성해보았냐면const graphWidths = { button1: 0, button2: 0, button3: 0,};graphWidths 라는 객체에 각각 button1, 2, 3 이라는 key와 value를 property로 작성해 사용할 그래프의 값을 만들어 주었습니다.function increaseValue(button) { g..

삼항 연산자는 참/거짓에 따라 선택적으로 실행되는 조건문이다. 직접 작성한 예제를 보며 삼항 연산자에 대해 알아보자 🙄 예시1 ) let a = 3; if (a >= 0) { console.log("양수"); } else { console.log("음수"); } // 를 삼항연산자를 이용하면 더 짧고 간단하게 표현가능하다. let a = 3; a >= 0 ? console.log("양수") : console.log("음수"); // 가장 처음에는 조건식. 그 다음 물음표 키워드(앞에가 조건식이다를 명시) // 그 후에는 참일 때 수행할 식과 거짓일 때 수행할 식이다. 예시2 ) let a = []; if (a.length === 0) { console.log("빈 배열"); } else { console..

let a = ""; if (a) { console.log("TRUE"); } else { console.log("FALSE"); } // FALSE가 출력된다. // 조건식에 a처럼 변수를 입력했다. // a는 true도 false도 아닌 string 이란 자료형으로 이루어져있다. // 빈 문자열 string을 가진 a라는 변수를 if문의 조건식에 넣으면 거짓으로 인지한다. let a = []; // TRUE let a = undefined // FALSE // 위와 같은 값이 나오는 특이한 성질을 가지고 있다. // 자바스크립가 자신만의 특정한 기준으로 갑슬 참이나 거짓으로 분류하는 // Truthy 와 Falsy 개념을 알아보자. ( 그 자신만의 기준이란? ) let a = []; // = {}; ..

대부분의 개발 질문에서 항상 중복되는 답변은 아래와 같다. 공식문서는 읽어보셨어요 ? 공식문서 읽고 활용하는 습관을 기르기 위해서 진행 중인 부트캠프 과정 중 자바스크립트를 시작하기전에 자바스크립트를 시작으로 공식문서를 읽는 습관을 키워보려 한다. 매번 "이거해야 해, 저거해야 해" 하느라 "공식문서는 뭐 나중에..." , "chatGPT 한테 묻지 뭐" 라는 생각을 가지고 게을러진 것 같다. 사실 이미 여러 곳에서 공식문서의 중요함을 어필하는 말들을 많이 들어봤을텐데 말이다. 공식 문서를 읽고 이해하는 과정의 경험 또한 읽지 않는 사람과의 차이가 생길꺼라 생각한다. 또한 이런 습관을 통해서 React 라던가 React-Query, React-Recoil, TailwindCSS 외 등 모르는 것을 처음 ..

let a = 3; if(a >= 5){ console.log("5이상 입니다."); } else { console.log("5이하 입니다."); } // 조건문은 if로 시작하며 조건과 맞을시 출력과 아닐시 출력을 작성할 수 있다. // 이분법이 아닌 더 많은 경우를 두려면 if (a >= 7) { console.log("7이상 입니다."); } else if (a >= 5) { console.log("5이상 입니다."); } else { console.log("5미만 입니다."); } // 이런식으로 사용할 수 있으면 else if는 여러개를 사용할 수 있다. 위에서 순차적으로 내려가며 확인한다. let country = "ko"; if(country === "ko") { console.log("한국..

대입 연산자 let a = 1; 산술 연산자 let a = 1; let b = 2; console.log(a + b); // 3 더하기 console.log(a * b); // 2 곱하기 console.log(a - b); // -1 빼기 console.log(a / b); // 0.5 나눈 후 몫 구하기 console.log(a % b); // 1 나눈 후 나머지 구하기 연결 연산자 let a = "1"; let b = "2"; console.log(a + b); // 3이 아닌 12가 나온다. // 이렇게 두개 이상의 문자열을 이어 붙이는 것을 연결 연산이라고 부른다. // 만약 a가 문자열이 아닌 let a = 1; 이여도 자동으로 연결 연산자로 바뀐다. 묵시적 형변환 ! 복합 연산자 let a =..

자료형이란 값을 성질에 따라 분류한 것. 지금은 원시타입 자료형을 우선 학습하고 뒤의 비원시적 자료형은 추후에 더 자세히 정리할 것이다. 차근 차근 🧐 ! 원시 타입 let number = 10; 한번에 하나의 값만 가질 수 있음 하나의 고정된 저장 공간 이용 비 원시 타입 let array = [1,2,3,4]; 한번에 여러 개의 값을 가질 수 있음 여러 개의 고정되지 않은 동적 공간 사용 숫자형 let age = 25; // 정수 let tall = 178.5 // 실수 let inf = Infinity // 무한대 let minusInf = -Infinity // 음의 무한대 let nan = NaN; // 연산이 잘못되었을 때. // 숫자형은 물론 사칙연산도 가능하다 console.log(age ..

console.log('Hellow World!') 우리는 자바스크립트를 하면서 console.log 로 값을 확인하면서 코딩을 한다. 그 중 흔하게 발생하는 에러를 짚고 넘어가자. console is not defined : console 입력 중에 오타가 나면 발생하는 에러, 대소문자도 구분하므로 소문자로 작성. cosole.log is not a function : console은 제대로 입력했으나 log에서 오타가 나면 발생하는 에러. after argument list : 따옴표를 사용하지 않을 때 발생하는 에러. 'Hellow, World!' 같은 문자는 `(백틱)이나 '(작은 따옴표) 또는 "(큰 따옴표)로 감싸줘야한다. Invalid or unexpected token : 따옴표의 짝을 맞..

프로그램을 만들 시 잠시 특정한 값을 저장해야 하는 상황이 자주 발생한다. 이때 변수를 사용한다. 변수를 사용하면 아래와 같이 값을 저장할 수 있다. let total = 500 + 300 + 1000; total; > 1800 더하기 연산자의 결과 1800을 total이라는 이름으로 저장했고 콘솔에 total을 입력하면 저장된 1800이 출력된다. 또 는 cosole.log(변수)로 변수의 값을 콘솔에 출력할 수도 있다. cosole.log(total); >1800 위와 같이 total처럼 값을 저장하고 저장한 값을 불러오는 것을 변수(variable) 라고 하며 변수를 만드는 행위를 선언( declaration) 한다고 표현하므로 변수를 선언한다고 한다. 변수를 만드는 식은 ( var, let, co..

자바스크립트 (JavaScript) 자바스크립트의 사용 목적 = HTML 을 조작하는 것. 서버와의 통신기능, 클릭 및 타이핑 감지, 비동기처리, 자료다루기 등 이 있지만 가장 큰 이유는 이쁘고 동적인 UI 를 만드는 것 입니다. 자바스크립트의 특징은 객체 기반의 언어 허나 상속과 클래스 개념은 없다. 인터프리터 언어로 클라이언트의 웹 브라우저에 의해 해석되고 실행. HTML 문서내에 기술되고 HTML 문서와 함께 수행됨. HTML에 연산제어 등 프로그래밍적 요소를 추가하고 클라이언트의 자원을 활용가능하게 함. 인터프리터 : 소스코드를 한줄 한줄 읽어들이면서 실행 = JS, HTML, SQL 등 ... 컴파일 : 소스코드에서 목적코드로 옮기는 것 ( 기계어 ) = C, C++, JAVA, C# 등 .....