본문 바로가기

Study-Note32

05. 자바스크립트 함수의 매개변수와 인수, 어떻게 동작할까? 안녕하세요! 좋아요요정입니다. 지난 게시글에서는 자바스크립트 함수의 정의와 함수 리터럴, 표현식과 선언문의 차이, 함수 호이스팅에 대하여 작성했습니다. 이번 게시글에서는 함수의 매개변수와 인수에 대하여 알아보고 어떻게 동작하는지, 사용하는 방법에 대해 알아보겠습니다! 매개변수와 인수 함수를 호출할 때 함수를 가리키는 식별자(함수이름)과 소괄호를 활용해 호출합니다. 함수이름(인자 목록) 함수가 호출되면 현재의 코드 실행 흐름을 중단하고, 호출된 함수로 실행 흐름을 옮깁니다. 이때 소괄호를 통해 입력한 값 인자 목록을 함수의 매개변수에 순서대로 할당이 되어 함수 실행 컨텍스트에 복제되어 매개 변수로 할당되어 집니다. 그리고 할당된 매개변수는 함수가 종료될 때 실행컨텍스트가 제거되고 콜스택이 제거되며 함께 제.. Study-Note/JavaScript 2021. 12. 31.
04. 자바스크립트 함수 리터럴, 표현식, 선언, 함수 호이스팅 안녕하세요 좋아요요정입니다. 코딩을 하다보면 숨을 쉬듯 함수를 생성하고, 사용하게 됩니다. 너무 자연스럽게 같은 모양으로 생성하며 사용하고 있었죠. 그런데 함수의 선언에도 기본 선언문, 표현식, 익명 함수 등 종류가 다양하다는 사실 알고 계셨나요? 함수의 생성 시점과 메모리는 이를 어떻게 저장하는지, 매개변수와 인수, 반환, 즉시 실행함수, 재귀 함수, 화살표 함수가 무엇인지! 오늘은 자바스크립트에서 가장 중요한 핵심 개념인 함수에 대해 작성해보겠습니다! 자바스크립트의 함수 함수란? 프로그래밍에서 함수란 실행 로직의 작업을 수행하기 위해 독립적으로 설계된 프로그램 코드의 집합으로 정의할 수 있습니다. 입력되는 값으로 특정 로직을 실행하고, 그에 대응하는 값, 결과물을 출력하는 코드 블록입니다. 위의 이미.. Study-Note/JavaScript 2021. 12. 31.
03. 원시 값과 객체는 메모리에 어떻게 저장되는가? 객체의 복제란? 안녕하세요. 좋아요요정입니다! 지난 스터디에서 자바스크립트의 자료형은 크게 원시 타입과 참조 타입으로 구분되고, 참조 타입의 객체에 관해 자세하게 알아보았습니다. 이번에는 원시 타입과 객체 타입의 차이점과 메모리에 어떻게 저장이 되어지는지 구체적으로 살펴보겠습니다. 그리고 객체가 메모리에 저장되는 특징으로 인한 객체의 얕은 복제, 깊은 복제에 대해 이해해보는 시간을 갖겠습니다. 원시타입과 객체타입의 가장 큰 차이점을 말하자면 변경이 가능한지에 대한 여부입니다. 원시 타입은 변경이 불가능한 값, Immutable type이고, 객체 타입은 변경이 가능한 가변성을 가진 mutable type입니다. 원시 값은 메모리에 어떻게 저장될까요? 먼저 원시 값이 메모리에 어떻게 저장되는 지 살펴보겠습니다. let n.. Study-Note/JavaScript 2021. 12. 26.
02. 객체 리터럴, 프로퍼티 접근과 갱신, ES6 활용 방법 객체 리터럴 객체 리터럴에 의한 객체 생성 리터럴(literal)이란 단순하게 우리가 특정 데이터의 모양을 직접 구현해 만든 데이터를 뜻합니다. 자바스크립트는 literal 또는 initializer 표기법으로 객체를 생성할 수 있습니다. 중괄호 안에 프로퍼티를 갖는 객체를 빠르게 생성할 수 있습니다. 중괄호{} 안에 넣고 콤마로 구분해 key: value의 목록을 작성하면 됩니다. 객체 리터럴은 특정한 지표 없이 우리가 직접 만들어낸 객체를 뜻합니다. 객체 리터럴은 자바스크립트 개발자들에게 상당히 편리한 개발을 할 수 있게 도와줍니다. 클래스 기반의 언어인 경우(C++, Java) 객체를 활용하기 위해서 해당 객체가 어떤 모양일지 사전에 필수로 설명서를 작성해야 합니다. 객체를 생성하기 위한 클래스를 .. Study-Note/JavaScript 2021. 12. 24.
01. 자바스크립트의 필수! 객체와 프로퍼티, 메서드의 정의 안녕하세요. 좋아요요정입니다. 프로그래밍 언어에는 다양한 자료형이 존재합니다. 자료형은 크게 원시 타입(Primitive Data Type)과 참조 타입(Reference Data Type)으로 구분됩니다. 자바스크립트는 원시값( string, Number, Bigint, Booliean, Undefined, Symbol, Null )을 제외한 모든 것은 값의 메모리 주소를 참조하는 참조 타입의 객체로 이루어져 있습니다. 자바스크립트에 필수인 객체와 메서드가 무엇인지, 프로퍼티가 무엇이고 또 어떻게 사용하는지 알아보겠습니다. 객체 객체란? const cat = { name : 'cookie', color : '삼색이', age : 2, } 객체(Object)란 키와 값들을 그룹으로 묶은 데이터 모음입니다.. Study-Note/JavaScript 2021. 12. 24.
00. 컴퓨터 프로그램이 실행될 때 CPU와 메모리의 역할 안녕하세요. 좋아요요정입니다! 우리가 열심히 자바스크립트 코드는 배우고 있는데, 코드가 어디에 저장되고, 어떻게 입출력이 되는가? 메모리는 어떻게 저장이 될까? 변수, 함수들은 어디에 저장이 되는지, 어떻게 실행이 되는지 이해하기 위해서 컴퓨터 구조에 대해 먼저 살펴보겠습니다. 컴퓨터 구조 컴퓨터란? 고대의 컴퓨터 - Fixed Program Computer라는 컨셉을 적용 특정 목적을 위해 만들어진 컴퓨터로 추가적인 프로그래밍 적용이 불가능했었음. (예. 빠른 수학연산을 위한 계산기) - 컴퓨터에 프로그램 기능을 추가하거나, 수정하는 등의 작업은 할 수 없었음 현대의 컴퓨터 - Stored Program Computer는 다양한 작업을 위한 프로그래밍이 가능. 어플리케이션을 저장하여 실행할 수 있다는 .. Study-Note/JavaScript 2021. 12. 23.
[JavaScript] 자료형 이해하기 자료형 이해하기 원시 타입(Primitive Data Type) 고정된 공간에 보관된 원시 타입의 값. 변경이 불가능한 값, 불변값(Immutable Value) Number, Boolean, String, Symbol, null, undefined 참조 타입(Reference Data Type) 값의 메모리 주소를 참조 Object (키:값 형태로 이루어진 속성들의 집합, 내부에는 순서도 크기도 고정되어 있지 않음, 키는 반드시 String형) 자료형 확인하는 방법 typeof true/false로 반환 원시자료형과 객체형을 구분하기 위해 활용하는 것이 좋음. 사용법 : typeof str === 'string' 내장 객체 String, Number, Bollean, Function, 원시 자료형, n.. Study-Note/JavaScript 2021. 12. 22.
[react] module styles.className 2개 사용 & 조건값으로 사용하는 패키지 classnames 안녕하세요! 좋아요요정입니다. className을 두개 이상 사용하고 싶을 때, 조건 결과값에 맞게 출력하고 싶을 때 사용하는 패키지를 소개합니다. 결과 미리보기 💕 - 동일한 card 컴포넌트인데 상단 3개는 main 클래스를 적용함. - 설정된 클래스명이 있을 경우 적용됨 1. 설치하기 Yarn add classnames //혹은 npm i classnames - 사용할 프로젝트에 설치해주세요! 2. 간단한 사용 방법(git에 작성되어 있는 내용) import classNames from 'classnames'; ... classNames('foo', 'bar'); // => 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames.. Study-Note/react 2021. 12. 20.
[react] 타이핑치는 효과 컴포넌트 안녕하세요! 코딩이 즐거운 좋아요요정입니다. 오늘은 재사용가능한 타이핑치는 효과 컴포넌트를 가지고 왔습니다. 포트폴리오를 만들면서 하나씩 정리해서 기록해보려고 합니다. :) (아잣아잣!) 오늘 소개하는 함수는 타이핑치는 효과 컴포넌트 입니다! 결과 미리보기💕 ① 인자값으로 test , speed, fontSIze, color를 받습니다. ② 기본값으로 speed = 100, fontSIze= 1em, color: 'black'을 가지고 있습니다. import React, { useState, useEffect } from 'react'; const TypingText = ({text, speed, fontSize, color}) => { TypingText.defaultProps = { fontSize:.. Study-Note/react 2021. 12. 18.