본문 바로가기

개발공부_Blog154

원시값과 객체의 비교 : 값이 할당되고 복사되는 방식의 차이 원시값과 객체의 비교 : 값이 할당되고 복사되는 방식의 차이 자바스크립트의 데이터타입은 크게 원시타입과 객체타입으로 구분할 수 있다. 원시타입 : 숫자, 문자열, 불리언, undefined, null, 심벌 객체타입 : 함수, 객체, 배열 이들은 크게 세 가지 측면에서 다르다. 변경 가능 여부 원시 타입의 값은 변경 불가능한 값이고, 객체 타입의 값은 변경 가능한 값이다 변수에 할당 될 때 원시 타입의 값은 변수에 실제 값이 저장되고, 객체 타입의 값은 변수에 메모리 주소가 저장된다. 다른 변수에 할당(복사)할 때 원시값을 가진 변수는 원본의 값이 복사되어 전달되고, 객체값을 가진 변수는 원본의 참조값이 복사된다. 원시값(1) - 변경 불가능한 값 원시타입의 값은 변경 불가능immutable한 값이다. .. 2022. 9. 18.
객체리터럴 객체란 자바스크립트를 구성하는 거의 모든 것이 객체이다. 원시값을 제외한 나머지 함수, 객체, 정규표현식 등을 말한다. 객체는 다양한 타입을 하나의 단위로 묶어놓은 복합적인 자료구조다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, key와 value로 구성된다. 객체 리터럴에 의한 객체 생성 객체리터럴 : ( { } ) 중괄호로 감싸진 하나 이상의 프로퍼티(속성)와 프로퍼티 값의 리스트 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 프로퍼티값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라고 부른다. let counter ={ num : 0, increase : function(){ this.num++ ; } } 프로퍼티, 메서드 객체는 프로퍼티의 집합이며, 프로퍼티는 k.. 2022. 9. 17.
axios로 API 호출해서 Data받아오기 버튼을 누르면 axios에서 data를 받아서 에 넣어 보여주는 코드를 작성했다. axios를 사용해 data받아오기 get 사용 axios로 해당 url에 get을 사용하여 user 정보를 요청. then 사용 request에 대한 response가 도착했으면 어떤 행동을 취하도록 한다. (위의 코드에서는 response가 잘 도착했으면 console창에 응답으로 온 데이터를 보여줌) import React, { useState } from 'react'; import axios from 'axios'; const App = () => { const onClick = async()=> { try{ await axios.get('https://jsonplaceholder.typicode.com/todos.. 2022. 9. 4.
JSON.stringify() - 객체, 값을 JSON문자열 형태로 JSON.stringify() 객체, 값을 JSON문자열 형태로 2022. 9. 4.
<textarea> value 속성을 사용한다면 textarea ? 여러줄 텍스트 편집 컨트롤을 나타냅니다. 버튼을 누르면 axios에서 data를 받아서 에 넣어 보여주는 코드를 작성했다. (리액트 코드 생략) axios로 API 호출해서 Data받아오기 return ( 불러오기 {data && } ) textarea에 value속성을 사용했다면 readOnly={ true }를 통해 value의 값을 고정할 것인지, onChange={ } 를 통해 수정할 수 있도록 할 것인지 정해주어야 한다. 2022. 9. 4.
try catch 에러핸들링 try catch? 예외를 처리하기 위한 구문이다. 데이터를 받아온 이후 에러가 났을 때 처리할 수 있는 방법 try catch = 에러 핸들링 try catch가 없다면 웹페이지를 사용하던 중에 서버에서 전달받은 데이터가 잘못되어 갑작스런 에러가 발생했다! try catch문을 사용하지 않았다면 사용자는 어떤 상황인지 알지 모른 채 다운된 화면을 보고 있어야 한다. (개발자 콘솔을 열어볼지 않는 이상 절대 원인을 알 수 없다) 그런데 사람들은 에러의 원인을 알지 못한 채 페이지가 멈춰있는 것을 좋아할리 없다. try..catch를 사용해 에러가 발생했을 때의 처리를 해줘야 한다. try catch사용 예 try...catch 문은 실행할 코드블럭을 표시하고 예외(exception)가 발생(throw)할.. 2022. 9. 4.
async - await 비동기 작업 비동기작업 2022. 9. 4.
SCSS 문법 (Nesting) SCSS는 CSS의 부족한 부분을 채줘주기 위한 CSS의 확장언어이다. 중첩 Nesting 변수 Variable 모듈화 Modularity 믹스인 Mixins 확장&상속 Extend&inheritance 연산자Operators 중첩(Nesting) 상위 선택자의 반복을 피해서 편리하고 복잡한 구조를 작성할 수 있습니다. 이것은 선택자나 속성의 관계를 중첩 형태로 표현된 문법입니다. ( 단, 지나치게 중첩된 규칙은 유지하기 어려운 것으로 판명될 수 있고, 나쁜 습관으로 간주되는 CSS를 초래할 수 있음 !) // CSS nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: bl.. 2022. 9. 4.
SASS, SCSS란 scss(sass)란? Syntactically Awesome StyleSheet의 약어이며, CSS를 효율적으로 작성할 수 있도록 도와주는 전처리기 SASS, SCSS에서 기존의 CSS의 기능 부재 단점을 보완한 다양한 기능 추가 .sass란? SASS는 CSS의 전처리기, 즉 해석되어 CSS로 컴파일되는 스크립트 언어이다. SASS는 { }중괄호와 세미콜론 ( ; )은 사용하지 않고, 들여 쓰기+줄 바꿈 형식으로 문법을 사용한다 또한 변수 정의를 허용하는데, 변수는 $ 기호로 시작되고, 변수 할당은 콜론(:)으로 마무리한다. $font-stack : Helvetica, sans-serif $primary-color : #333 body font : 100% $font-stack color : $pri.. 2022. 9. 4.