TIL

변수 : 상황에 따라 변할 수 있는 값, 이름(Label)이 붙은 값, 동일한 변수를 이용해 대입할 수 있음(이미 할당된 변수에 대입) 변수 선언: 데이터 보관함에 데이터를 넣을 공간을 확보하는 것 (선언은 한번만 할 수 있음) 변수 할당: 선언한 변수명에 = 를

변수에는 다양한 타입이 있음. 숫자(Number) 문자열(String) 불리언(Boolean): true / false 배열(자료형 Array) 객체(자료형 Object) undefined 함수(function) 변수의 타입을 알아보기 위해 사용하는 것: typeo

함수(function) = 코드의 묶음(즐겨찾기 버튼), 작은 기능(function)의 단위, 입력과 출력간의 매핑(mapping) 반드시 돌아옴(return) 함수 선언 함수 호출 반복적으로 실행되는 일이 필요한 경우 -> 함수로 만들 수 있음. 함수(func

ㄱ상,

같거나 비슷한 코드를 여러 번 실행시켜야 할 경우에 쓰는 구문반복할 조건을 초기화, 조건식, 증감문 순으로 넣어줌반복한 조건중, 초기화, 증감문은 따로, 조건식만 괄호 안에 넣어줌Q.(의사코드를 적는 연습을 해야겠다... )

어떠한 조건을 판별하는 기준을 만드는 것 , 조건문에는 반드시 비교 연산자가 필요함(< , > , ===, ...)두가지 조건이 한번에 적용되는 경우 : 논리 연산자(Logical Operator) 사용&& (AND연산자) :두 조건이 모두 true일때만 true

원시 타입의 데이터 (primitive data types, 원시 자료형) :객체가 아니면서 method를 가지지 않는 6가지의 타입 :string, number, bigint, boolean, undefined, symbol, (null) 원시 자료형은 모두 '하

: 변수에 접근할 수 있는 범위바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능 안쪽 스코프에서 선언한 변수는 바깥쪽 스코프에서 사용 불가능스코프는 중첩이 가능하다가장 바깥의 스코프는 특별히 전역 스코프(Global scope)라고 부름 <-> 지역스코

클로저 함수 > "함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다." 여기서 주목할 만한 키워드는 "함수가 선언"된 "어휘적(lexical) 환경". 특이하게도 자

터미널 CLI(Command-Line Interface) CLI 명령어 pwd : 현재경로(현재 위치를 확인할 수 있는 명령어, print working directory) 여기서 directory는 폴더. mkdir : 새로운 폴더 생성하기(make direc

주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용.파라미터를 배열의 형태로 받아서 사용. 파라미터 개수가 가변적일 때 유용.spread 문법은 배열에서 강력한 힘을 발휘함구조 분해 할당은 spread 문법을 이용하여 값을 해체한 후,

JavaScript Koans 문제 풀면서 헷갈렸던 개념이나 잘 몰랐던 개념 다시 정리하기.재할당 금지const로 선언된 배열,객체의 경우 새로운 요소를 추가하거나 삭제할 수 있음scope는 변수의 값(변수에 담긴 값)을 찾을 때 확인하는 곳.반드시 기억하기!!!함수

DOM(Document Object Model) HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model. JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있음.

유효성 검사

고차 함수 일급 객체 JavaScript에도 특별한 대우를 받는 일급 객체(first-class citizen)가 있다. 대표적인 일급 객체 중 하나가 함수. JavaScript에서 함수는 아래와 같이 특별하게 취급. 변수에 할당(assignment) 할 수 있

객체 지향 프로그래밍이라는 패러다임이 등장하기 전엔 절차 지향 프로그래밍이 있었음.우리는 앞서 모든 것을 절차적으로 생각해왔음. 기껏해야 함수로 이동하는 것이 전부.초기의 C, 포트란 같은 언어들은 객체 지향의 개념이 없는 절차적 언어였음."클래스"라고 부르는 데이터

객체 지향 프로그래밍은, 절차 지향 프로그래밍과는 다르게 데이터와 기능을 한곳에 묶어서 처리함. 속성과 메서드가 하나의 "객체"라는 개념에 포함되며, 이는 자바스크립트 내장 타입인 object(이하, object literal)와는 다르게, 클래스(Class)라는 이름

JavaScript는 프로토타입 기반 언어 . 프로토타입(Prototype)은 원형 객체를 의미. OOP 패턴으로 구현한 Human 예시 Human이라는 클래스와 인스턴스, 그리고 프로토타입의 관계 클래스 Human과 인스턴스 steve, 프로토타입의 관계 Ar

객체 지향 프로그래밍의 특성 중 상속을 JavaScript에서 구현할 때에는 프로토타입 체인을 사용함.예시를 들기 위해, 학생(Student)과 사람(Human)이라는 클래스가 각각 존재한다고 가정. 클래스 Human의 메서드와 속성을 객체로 구현한다면, 다음과 같음.

비동기 호출 (Asynchonous call) callback review 다른 함수(A)의 전달인자(argument)로 넘겨주는 함수(B) parameter를 넘겨받는 함수(A)는 callback 함수(B)를 필요에 따라 즉시 실행(synchronously)할수도

Node.js의 경우 많은 API가 비동기로 작성되어 있다. Node.js 소개 문서의 첫 단락은 Node.js의 정의부터 시작한다. Node.js는 "비동기 이벤트 기반 JavaScript 런타임". Node.js 모듈 모듈이 뭔가? 건축으로부터 비롯된 모듈이라는

React는 무엇인가? 리액트는 프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리. React의 3가지 특징 선언형 리액트는 한 페이지를 보여주기 위해 HTML / css / js로 나눠 적기 보다는 하나의 파일에 명시적으로 적성할 수 있게 JSX를

React SPA(Single Page Application) SPA의 등장 배경과 개념 전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했음. 전통적인

React Router React SPA에서는 경로에 따라 다른 뷰를 보여줄 수 있다. 라우팅에 따라 다른 뷰를 보여주기 위해서 React에서는 React Router라는 라이브러리를 많이 사용함. SPA & Router SPA는 하나의 페이지를 가지고 있지만 사실

React State & Props Intro State 변할 수 있는 값. 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값. Props vs State props는 외부로부터 전달받은 값 state는 내부에서 변화하는 값 어떤것이 Props 또는 State

리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍처, 또는 클라이언트-서버 아키텍처라고 부름.리소스를 사용하는 앱이 바로 "클라이언트", 리소스를 제공(serve)하는 곳은 "서버"라고 부름.클라이언트와 서버는 요청과 응답을 주고받는 관계. 클

웹 애플리케이션에서는 HTTP 메서드를 이용해 서버와 통신함.GET을 통해 웹 페이지나 데이터를 요청하고, POST로 새로운 글이나 데이터를 전송하고, DELETE로 저장된 글이나 데이터를 삭제할 수 있음.이처럼 클라이언트와 서버가 HTTP 통신을 할 때는 어떤 요청을

CORS 개요 CORS 에러 CORS가 필요하게 된 배경인 SOP에 대해서 먼저 알아보자. SOP SOP은 Same-Origin Policy의 줄임말로, 동일 출처 정책을 뜻함. = ‘같은 출처의 리소스만 공유가 가능하다’라는 정책. 여기서 말하는 ‘출처(Orig

재귀란?재귀(再歸) : 원래의 자리로 되돌아가거나 되돌아옴.이 recursion 함수처럼 자기 자신을 호출하는 함수를 재귀 함수라고 함.재귀 함수를 잘 활용하면 반복적인 작업을 해야하는 문제를 좀 더 간결한 코드로 풀어낼 수 있음.문제: 자연수로 이루어진 리스트(배열)

JSON

UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미 함.보통 UI라고 하면 떠오르는 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있음.휴대폰

airbnb UI/UX 분석 및 개선유용성(Useful) : 사용 가능한가?: 숙박공유사이트는 검색기능(필터기능)이 중요기능인데, 여러 카테고리들을 세분화한 기능들을 잘 제공하는 것 같음사용성(Usable) : 사용하기 쉬운가?: 글을 주로 사용하기 보단 많은 아이콘과

Component Driven Development (CDD)레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있습니다.CSS 전처리기(CSS Preprocessor)CSS가 구조적으로 작성될 수 있게 도움을 주는 도구SASS(

Redux 상태관리 순서상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다.이 Action 객체는 Dispatch 함수의 인자로 전달됩니다.Dispatch 함수는 Action 객체를 Reducer 함수로 전달해줍니다

웹 표준 웹 표준의 개념 웹 공간 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간이 ‘웹’. 웹 표준 W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’으로, 사용자가 어떠한 운영

TCP/IP 네트워크의 시작 지금 우리가 사용하는 인터넷 프로토콜, 즉 IP 기반의 네트워크는 미 국방성에서 1969년 진행했던 아르파넷(ARPANET) 프로젝트에서 시작되었음. 이 프로젝트는 당시 냉전시대에서 핵전쟁을 대비하기 위한 통신망 구축을 위해 추진되었음. 이

자료구조란?여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의한 것.데이터란?문자, 숫자, 소리, 그림, 영상 등 실생활을 구성하고 있는 모든 값.데이터는 그 자체만으로 어떤 정보를 가지기 힘듬.예를 들어 나이라는 데이터만 알고 있다면, 사람의 나이인지, 강아지의 나

웹 브라우저라고도 하고, 웹 탐색기라고도 하는 브라우저는 웹 서버에서 양방향으로 통신을 하며 HTML 문서 및 그림, 멀티미디어(ex. 동영상) 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램임.브라우저는 페이지를 다운로드 하기 위해 응용 계층의

브라우저 렌더링에서 렌더링(rendering)이란 HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 의미함.현존하는 브라우저마다 다르지만, 브라우저는 기본적으로 렌더링을 수행하는 렌더링 엔진을 가지고 있음.사용자가 브라우저를

번들링 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위 사용자가 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정. 프론트엔드 개발자에게 번들은 “사용자에게 웹 애플리케이션을 제공하기 위

컴퓨터는 단순하게 말하자면 하드웨어와 소프트웨어가 합쳐진 형태.하드웨어: 전자 회로 및 기계 장치로 되어 있어 입출력 장치, 중앙처리장치(CPU), 기억장치 등으로 구성되어 있음.소프트웨어: 그 하드웨어 위에서 하드웨어를 제어하며 작업을 수행하는 프로그램.컴퓨터는 입력

GraphQL은 Facebook에서 처음으로 개발했고, 오픈 소스로 제공된 쿼리 언어.Graph + Query Language의 줄임말로 Query Language 중에서도 Server API 를 통해 정보를 주고받기 위해 사용하는 Query Language를 뜻함.쉽

Optimization > 최적화, 最適化, optimization 주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정. 최적화는 허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정이다. 수익과 관련되는 분야에서는

기존 서버의 방식:흔히 말하는 전산실 등에 컴퓨터를 배치하고 인터넷을 연결하여 서비스를 제공했음.그런데 만약 서버가 요청에 대한 수용 능력이 한계에 도달한다면 어떻게 대처할까?같은 공간에 더 많은 컴퓨터를 제공하여 한 대가 해결할 수 있는 요청을 여러 대가 나누는 방식

알고리즘은 9세기 경 아라비아의 천문학자이자 수학자인 알고리즈미(al-Khowarizmi)의 이름에서 유래되었습니다.알고리즈미는 십진법에 의해 덧셈, 뺄셈, 곱셈, 나눗셈, 제곱근, 원주율을 구하는 방법을 아랍어로 기록해 놓았는데, 이런 식으로 사칙연산 및 다양한 산술

순열과 조합 순열 순열(順列, permutation): 서로 다른 n개의 원소를 가지는 어떤 집합에서 중복 없이 순서에 상관있게 r개의 원소를 선택하거나 혹은 나열하는 것이며, 이는 조합과 마찬가지로 n개의 원소로 이루어진 집합에서 r개의 원소로 이루어진 부분집합을

대부분의 회원 가입이 필요한 서비스는 비밀번호 설정 시 특정 조건에 맞추어 입력하라고 요구합니다. 보통의 비밀번호 조건은 영문 대문자, 소문자를 한 번씩 써야 하며 12 자 이상이어야 하고, 특수 문자는 1 개 이상 들어가야 하는 등 까다롭게 설정되어 있습니다. 사용자

Virtual DOM 가상의 DOM 객체. 실제 DOM의 사본 같은 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용함.

Component와 Hook Function Component와 Class Component Hook은 함수 컴포넌트에서 사용하는 메소드입니다. 함수 컴포넌트 이전에는 클래스(class) 컴포넌트가 있었습니다. 많은 React 개발자들이 이 클래스 컴포넌트를 사용하

📌 그동안 공부했던 recoil, framer-motion 활용해서 타이머를 만들어봤음!구현하고자 하는 타이머 레퍼런스 👉 pomofocus기능 넣기 전에 기본적인 디자인 목업부터 만들고 시작!styled-components를 사용해 줬음!아이콘 가져온 곳 👉

많은 transition이 있음!framer-morion transition코드를 깔끔하게 해줌.많은 애니메이션들을 하나로 연결해줌.애니메이션 값의 상태(state)와 속도(velocity)를 추적MotionValue는 React State가 아니기 때문에 Motion

인풋창잘 보이진 않지만 오른쪽 상단의 Search바를 만들었는데 돋보기 이모티콘을 누르면 인풋 창이 열리고, 다른 곳을 클릭하면 인풋 창이 닫히는 것을 구현해보고 싶었음.기존 코드 👇이렇게 하니까 돋보기 아이콘을 눌러야만 열리고 닫히는걸 확인함. (바깥영역 눌러도 닫