전체 글97

• 

  [자료구조] Stack, Queue, Graph, Tree 자료구조 여러 데이터들의 묶음을 저장하고 효율적으로 사용하는 방법을 정의한 것 *특정한 상황에 놓인 문제를 해결하는 데에 특화 데이터 : 문자, 숫자, 소리, 그림, 영상 등 실생활을 구성하고 있는 모든 값 *데이터는 분석하고 정리하여 활용해야만 의미를 가질 수 있으며, 사용 목적에 따라 형태를 구분하고 분류하여 사용 Stack 데이터를 순서대로 "쌓는" 구조 입력과 출력이 하나의 방향으로 이루어지는 제한적 접근 (일방통행) *이러한 Stack 자료구조의 정책을 LIFO(Last In First Out) 혹은 FILO(First In Last Out)이라고 부르기도 함 재귀 함수와 활용도가 높음 const stack = [] stack.push(1) // [1] stack.push(2) // [1, 2].. CodeStates/JavaScript 2022. 3. 14.

• 

  [JSON] JavaScript Object Notation JSON 서로 다른 프로그램 사이에서 데이터 교환을 위해 만들어진 객체 형태의 포맷 JSON포멧 : 자바스크립트를 포함한 많은 언어에서 범용적으로 사용하는 포멧 수신자(reciever)와 발신자(sender)가 다른 프로그램을 사용하더라도 객체를 범용적으로 읽을 수 있는 문자열 형태로 만들어 줌 객체는 타입 변환(message.toString())을 통해 String으로 변환할 경우 객체 내용을 포함하지 않기 때문에 JSON의 형태로 변환 필요 JSON.stringify let myMessage = { sender : 'Despair', receiver : 'Monkey', date : '22.03.14', num : 1, } console.log(JSON.stringify(myMessage)) // '.. CodeStates/JavaScript 2022. 3. 14.

• 

  [JavaScript] 재귀함수 재귀는 언제 사용하는게 좋을까? 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우 중첩된 반복문이 많거나 반복문의 중첩 횟수(number of loops)를 예측하기 어려운 경우 function recursive(인자) { // 조건이 충족될 때 까지 자기 자신을 호출 if(조건 충족) { return 결과 } else { return recursive(작업된 인자) } } 재귀 : 문제를 해결할 때 동일한 구조의 더 작은 문제를 해결함으로써 주어진 문제를 해결하는 방법 *모든 재귀는 반복문으로 표현 가능 재귀 함수 : 스스로를 호출하는 함수 재귀 호출 : 재귀 함수는 실행 과정 중에 자기 자신을 호출하게 됨 *모든 재귀 함수는 함수의 호출 없이 while / for loop로 표현 가능 .. CodeStates/JavaScript 2022. 3. 14.

• 

  [JavaScript] 객체 지향 프로그래밍 Object-Oriented Programming 하나의 모델이 되는 청사진(blueprint)을 만들고 (Class),그 청사진을 바탕으로 한 객체를(object) 만드는 (instance) 프로그래밍 패턴 속성과 메소드가 하나의 "객체"라는 개념에 포함 *자바스크립트 내장 타입인 object(이하, obj literal)와는 다르게 Class라는 이름 사용 instance : 청사진을 바탕으로 만들어진 인스턴트 객체 (instance object) 절차 지향 프로그래밍과 달리 데이터와 기능을 한곳에 묶어서 처리 *절차적 언어 : 순차적인 명령의 조합 자바스크립트 : 객체 지향 언어는 아니지만 객체 지향 패턴으로 작성 가능 OOP의 특징 1. 캡슐화(Encapsulation) 데이터(속성)와 기능(메소.. CodeStates/JavaScript 2022. 2. 28.

• 

  [JavaScript] 고차함수 고차함수의 개념 1. 일급 객체(first-class citizen) 자바스크립트에서 일급객체는 함수가 대표적 변수에 할당 가능 //함수 표현식 let 변수1 = function() { return '함수를 변수1에 할당가능' //함수 선언식 function 변수2() { return '이렇게도 할당 가능' } //console.log를 찍어보면? console.log(변수1) ƒ () { return '함수를 변수1에 할당가능' } console.log(변수1) function 변수2() { return '이렇게도 할당 가능' } //함수 실행 값(함수를 실행시킨 형태)과 구분해서 헷갈리지 말자 변수1() '함수를 변수1에 할당가능' 변수2() '이렇게도 할당 가능'​ 다른 함수의 인자로 전달 가능 (.. CodeStates/JavaScript 2022. 2. 27.

• 

  [React] State & Props Props 외부로부터 전달받은 값 즉, 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값 1. Props 특징 props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용 가능 props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가짐 함부로 변경될 수 없는 읽기 전용(read-only) 객체 2. Props 사용방법 1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의 2. props를 이용하여 정의된 값과 속성을 전달 3. 전달받은 props를 렌더링 props 속성의 이름을 임의로 지정 가능 props .. CodeStates/React 2022. 2. 21.

• 

  [React] Single-Page Application SPA 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통 전통적 웹사이트는 페이지 이동 시 html 파일로 된 페이지 전체를 렌더링 *서버와의 불필요한 트래픽 발생, 느린 속도로 사용자 경험 저하 SPA는 필요한 부분만 새로 렌더링, 중복되는 부분은 불러오지 않음 *업데이트에 필요한 데이터만 전달받아 자바스크립트가 동적으로 html 요소를 생성해서 화면에 보여줌 장점 사용자와의 interaction에 빠르게 반응 가능 서버에서 요청받은 데이터만 넘겨주면 되기에 서버 과부하 문제 해결 전체 페이지를 렌더링할 필요가 없어 높은 사용자경험 제공 단점 html 파일을 읽는 과정에서 자바스크립트 태그를 만나면 ht.. CodeStates/React 2022. 2. 21.

• 

  [일간 회고] React SPA Today I Learned Facts. 객관적인 사실 알고리즘 코플릿 풀이 React SPA & Router [ Pair program ] React Twittler Intro Feelings. 주관적인 느낌 Activated. 배운 것 deActivated. 개선해야 될 것 Affimation. 자기 선언 Retrospective CodeStates/TIL & 회고록 2022. 2. 17.

• 

  [일간 회고] React Intro Today I Learned Facts. 객관적인 사실 React Intro JSX를 활용하여 리액트 기초 구성을 만들 수 있다. React app 리액트를 이용하여 모바일 앱을 만들 수 있다. [ Pair program ] React Twittler Intro 삼항연산자와 map을 사용하여 트위터 클론 제작 Feelings. 주관적인 느낌 React Intro 리액트가 진짜 기본중의 기본이라는데.. 왜 이렇게 어려운지 모르겠다. React app app은 사실상 무작정 따라하기라 이런게 있구나~ 정도로 넘어갔다. [ Pair program ] React Twittler Intro 이번 페어분은 친화력이 장난아니셔서 시간 가는줄 모르고 프로그래밍을 진행했다. 저번과는 달리 이번엔 어드밴스드를 목표로 하긴.. CodeStates/TIL & 회고록 2022. 2. 16.

• 

  [React] React 기초와 프로젝트 시작방법 React란? 프론트앤드 개발을 위한 자바스크립트 오픈소스 라이브러리 오픈소스 소스가 공개되어 있어서 누구나 자유롭게 사용, 복제, 배포, 수정이 가능한 소프트웨어 라이브러리 다른 프로그램에서 호출하여 사용할 수 있도록 제공하는 일종의 함수 집합 React의 특징 1. 선언형(Dexlarative) 무엇(What)에 집중하여 프로그래밍 하는 것으로 선언형 프로그래밍은 JSX 표현식으로 작성함 *삼항연산자, map, 태그(JSX만 가능, JS는 불가) 등 선언형의 반대는 명령형 프로그래밍으로 어떻게(How)에 집중하여 프로그래밍 반복문, 조건문 등은 명령형에 해당 *변수에 할당되지 않는 것들이 명령형, 변수에 할당되는 것들은 선언형 JSX를 활용한 선언형 프로그래밍 : 한 페이지를 보여주기 위해 html,.. CodeStates/React 2022. 2. 16.

• 

  [일간 회고] JavaScripe 고차함수 Today I Learned Facts. 객관적인 사실 1. Algorithm Basic 풀이 문제 풀이 및 나만의 언어로 해설 2. 고차함수 이해하기 동작 구조 및 메서드 3. 고차함수 코플릿 풀이 solo section & Pair program Feelings. 주관적인 느낌 1. Algorithm Basic 풀이 어제와는 다르게 술술 풀렸다. 2. 고차함수 이해하기 모르겠는 부분은 콘솔로그로 찍어보면서 동작구조를 확인하면 이해하기 더 쉽다. 3. 고차함수 코플릿 풀이 막히는 부분은 다시 해도 또 막히는데 이번엔 다른 경우의 수를 대입하다가 막혔다. 답이 나왔다고 해서 그냥 넘어가지 말고 이 방법으론 풀릴까? 저 방법은 어떨까? 하면서 경우의 수를 산정하고 여러가지 풀이방법으로 풀다보면 멘탈도 터진.. CodeStates/TIL & 회고록 2022. 2. 15.

• 

  [DOM] Document Object Model 문서 객체 모델 DOM(Document Object Model) 1. DOM의 개념 HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model HTML의 구조와 관계를 객체로 표현한 모델로 document라는 전역변수를 통해 HTML에 접근 가능 자바스크립트를 이용해 DOM에 접근하여 엘리먼트의 속성값을 얻거나 변경할 수 있음 2. DOM의 구조 자바스크립트의 객체와 같이 트리 구조이기 때문에 자바스크립트의 DOM이 브라우저에 접근하기 가장 용이 *다른 언어도 DOM을 가지고 있지만 자바스크립트가 가장 안정적 3. console.dir()로 콘솔에서 엘리먼트 조회하기 console.log(document): html문서 형식으로 보여줌 conso.. CodeStates/React 2022. 2. 14.