[TIL] D+46 / JavaScript / 기본문법(2)
2024_12_24 화요일
+ 코딩 12일차
📝 Yesterday I Did
JavaScript가 무엇인지와 기본문법 중, 변수와 상수 그리고 데이터 타입에 대해 배웠다.
그리고 UX집중반에서 우리팀은 현대카드를 맡게되어 목요일까지 제출할 리서치를 사다리 타기를 이용해 역할을 분담했다.
💫 Today I Did
→JavaScript의 기본적인 문법중 어제에 이어 타입과 형변환, 연산자, 함수에 대해 배웟다.
UX집중반에서 맡은 역할은 유저 리서치(타켓유저)를 진행했다 🙆♂️
✅ 배운점
어제에 이어 JavaScript의 데이터 타입의 객체와 배열에 대해 이어서 배웠다.
• 객체(object)는 항상 key와 value의 pair로 사용된다.
• 배열(array)
여러개의 데이터를 순서대로 저장하는 데이터 타입으로, 콤마(,)를 기준으로 요소들을 나열한다.
요소들은 하나하나 인덱스를 가지고 있는데, 이는 자기 위치에 대한 데이터를 가지고 있다는 말이라고 볼 수 있다.
예를 들어 아래와 같이 1은 첫번째에 있고, 2는 두번째에 위치해 있다는 데이터를 가지고 있다는 말이다.
여기서 위치는 항상0부터 시작하기 때문에 1과' apple'의 위치 값은 0
그리고 2와 'banana'의 위치값은 1이 된다!
형변환
형변환이란 데이터 타입을 바꾸는 방법이다.
바꾸는 방법은 암시적 형 변환과 명시적 형변화가 있다.
1. 암시적 형 변환
의도하지 않았지만, 자동적으로 바뀐다.
• 문자열
➡️ 문자열과 다른데이터 타입이 만나면 문자열이 우선시 된다!
숫자(1)와 문자열("2")를 결합하면 12라는 문자(string)이 된다!
문자열("1")와 불리언(true)타입을 결합하면 문자(string)이 된다
• 숫자
➡️ 더하기 연산자가 아닌 다른 연산자(빼기, 곱하기, 나누기)는 숫자가 우선시 된다!
2. 명시적 형 변환
일부러 개발자가 의도적으로 바꾼다.
불리언(Boolean), 문자열(String), 숫자(Number) 모두 아래와 같은 방식으로 적용한다.
연산자
연산자에는
산술연산자, 할당 연산자, 비교 연산자, 논리 연산자, 삼항 연산자, 타입 연산자가 있다.
(연산자가 너무 많아요,,,,🥲)
• 산술연산자(+, -, *, /, %)
더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지 연산자(%)가 있고,
이중 더하기 연산자를 빼고 모두 숫자(number)이 우선시 된다.
더하기 연산자는 문자열(String)타입이 들어가면 문자열이 우선시 된다.
이중 나머지연산자(%)는 처음듣는 개념인데,
나누기 연산자(/)와는 다르게 말 그래도 몫을 뺀 나머지를 값을 반환한다.
아래를 예시로 보면 5에서 2를 나누면 2가 몫이 되고 나머지는 1이 됨으로 값은 1이다!
• 할당연산자(assignment)
우에서 좌로 값을 할당하는 것으로, 원래 할당된 값을 연산자를 통해 재할당하는 것이라고 이해했다.
할당연산자에는 등호연산자(=)
현재값에 얼마를 더해줘와 같은 더하기 등호 연산자(+=)
현재값에 얼마를 빼줘와 같은 빼기 등호 연산자(-=) 가 있다.
• 비교 연산자(comparison operators)
좌랑 우 혹은 어떠한 값을 비교해서 true 또는 false의 값을 내는 연산자
프로그래밍에서 조건을 제시할 때, 상당히 중요한 역할을 하며 비중이 높다!
타입까지 일치해야 true를 반환하는 일치 연산자(===)
타입까지 일치해야 false를 반환하는 불일치 연산자(!==) → 일치 연산자와 반대의 개념!
작다 연산자(<), 작거나 같다 연산자(<=)
크다 연산자(>), 크거나 같다 연산자(>=) 가 있다.
• 논리 연산자(logical operators)
불리언 타입 연산자로 true와 false를 비교하는 연산자
두값이 모두 ture일때만 ture를 반환하는 논리곱 연산자(&&)
두값이 하나라도 true일 경우 ture를 반환하는 논리합 연산자(||)
값을 반대로 바꾸는 논리부정 연산자(!) → 실제로 빈도가 높게 사용된다!
• 삼항 연산자(ternary operators)
3개의 항으로 이루어진 연산자로 조건에 따라 값을 선택한다.
활용 빈도가 아주 많고 그 만큼 중요!!!!!
밑의 예시 이미지에서 1의 조건일때 true면 2가 되고 false면 3이된다!
ex) let x = 10;이라면 아래의 조건에서 true의 값인 "크다"가 반환된다.
이런식으로도 사용이 가능하다!
• 타입 연산자(type operators)
앞에서 계속 사용했던 것과 같이 값의 타입을 알수 있다.
함수
함수란 Function 즉 기능을 말한다.
input과 output을 가지고 있는 기능의 단위이다.
자바스크립트 내에서 기능 단위로 묶어서 재활용한다.
함수를 잘 만들면 효율적인 코드를 짤 수 있기 때문에 아주 중요하다
함수의 기본 구조
( input ) : 매개변수 - 매개체가 되는 변수
{ output } : 반환값 - return문 뒤에 오는 값
함수를 선언하는 방법(만드는 방법)
1. 함수 선언문
2. 함수 표현식
변수를 선언할 때와 유사하다.
하지만 소괄호() 앞에 함수이름을 쓰지 않는다. 앞에서 정의하기 때문!
함수를 호출하는 방법(사용하는 방법)
첫번째
예시)
두번째
예시)
⭐️ 느낀점
오늘 강의를 들으면서 연산자가 뭐가 이렇게 많나 싶다
그리고 나머지 연산자(%)는 처음들어 보는 개념이였다.
함수는 내가 진즉 대학에서 코딩을 포기하게끔 만들었던 녀석이였다.. 또 보게 될 줄 그때는 몰랐겠지🥲
알았더라면 그때 좀 열심히 배워둘 껄 그랬다
UX집중반은 리서치를 오늘 8시 반까지 진행했다
우리팀은 현대카드를 맡게되었는데 전원이 현대카드가 없는 상황이다.
물론 앱은 카드가 있어야 사용이 가능한 상황🥺 (KDT를 진행하고 있다는 것은,,,신용카드를 만들수 없다는것)
근데 리서치를 진행하면서 점점 드는 생각이 우리 이거 앱을 실제로 보면서,
문제를 우리가 파악을 해봐야할 것 같다는 생각이 들었다.
그래서 튜터님을 찾아가서 현재 상황을 말씀드리니 튜터님들 긴급회의가 열렸고,
모든상황을 고려하지 못하고 현대카드가 선택됬다고 전달받았다.
그래서 대안은 '카카오 페이'로 프로덕트를 변경하는 것 인데,
그렇다면 우리 여태 리서치 이렇게나 많이 했는데.........................
이걸....버려야한다니........!!!!!!!!!!😭😭😭😭😭😭😭😭😭😭😭😭😭
그리고 제출은 조금 늘려주신다고 했지만, 모두 같이 제출일이 늘어난다면 사실상 다른 프로덕트를 맡은 팀과 퀄리티 차이가 날 수 밖에 없는 상황이다..
그래서 사실 착잡한 상황이지만, 장기적으로 봤을때 앞으로 문제 정의도하고 솔루션을 찾고 하는 과정을 미뤄봤을때
조금이라도 빨리 프로덕트를 변경하는 것이 맞고, 초기인 지금이 적격이라고 볼 수 있다!
그래도 너무 아깝고... 어제도 팀원들과 이런말이 조금 나오긴했었는데, 그때 까지만해도
앱설치 없이 서칭으로 커버해봐야지 하고 넘겼는데 그때 얘기할 껄 하는 후회도 들었다😢
여튼 그래서 우리팀은 깔끔하게 현대카드를 포기하고, 카카오 페이로 넘어가기로했다
크리스마스를 잘 쉬고 이제 26일부터 다시 열심히 해봐야지! 이미 상황은 벌어졌고 어쩔수 없다! 앞으로의 일을 생각하자 😤