프로그램 2주차

프로그램 2주차 2022/03/10~ 2022/03/20

 

저번주 목요일부터 현재까지의 기간을 정리해보자!

 

2022/03/10 ~ 2022/03/17 기초 알고리즘 걷기반

티스토리  : https://insidelamp.tistory.com/category/%EB%AC%B8%EC%A0%9C%ED%92%80%EC%9D%B4

 

항해99  :

• 컴퓨팅적 사고와 언어 기초 다지기를 위해, 언어를 공부하고 알고리즘 문제를 풀어볼 시간입니다.
• 풀어간 문제가 많을 수록, 내 기초가 탄탄해지는 것을 느낄거예요
• 처음 보는 내 주특기 언어! 어떻게 다루는 지 알고리즘 문제들을 풀어보며 기초를 공부해 봅니다.
• 알고리즘의 기본 개념과 문제를 어떻게 접근하고 해결해야 하는지 차근차근 학습해 보세요!
• 스스로 막힘없이 풀어내는 것 보다, 구현력을 키우는 것이 알고리즘 기간의 목표입니다.
• 프로그래머스에서 총 28+a개의 문제를 풀어봅니다. 적당한 난이도의 문제들로 구성되어 있습니다.

나의 생각

 

익숙하지 않은 자바스크립트를 활용해 문제를 풀어보는 시간이었습니다

처음 시작할때는 어떻게 풀어야 하는지에 대해 감도 안잡히고 어디서부터 시작해야하나 를 엄청 고민하며 시간을 보낸것같습니다

멘토님과 팀원분들 , 지인분들에게 시작을 어떻게해야하는지 ,

어떤방식으로 접근해서 문제를 풀어 나아가야하는지에대해 많은것을 익히고 자신감을 가질 수 있었던것 같습니다

 

이 기간중 많은 것을 배웠는데 이걸 나눠보자면

 

1. 문제에서 요구하는 과정의 풀이 ( 어떻게 답이 나오는지 )

2. 어떤 방식으로 접근해서 차근차근 풀어가야하는지 ( 무엇을 사용해서 풀어가야하는지 )

3. 어떤 기능을 사용하면 조금더 쉽게 접근할수있는지에 대한 사고과정 ( 자바스크립트의 편리기능 )

4. 인터넷에서 내가 필요한 기능들을 찾아 나의 생각에 맞게 적용시키기

 

 

앞으로의 필요한 점

• 지속적인 알고리즘 공부
• 차근차근 생각하며 풀어나가는 과정
• 풀어나가는 과정이 여러가지이며 여러가지 가능성을 열어두기

 

아쉬운점

시험에 대한 긴장감때문에 모의고사에서 차분하게 생각하면서 진행하여 결과를 제출하지 못한점이 아쉽습니다

문제를 자연스럽게 너무 어렵게 접근하여 처음 몇일간 진행된 부분이 느려 더 많은 문제를 못푼것이 아쉽습니다

 

 

2022/03/17 ~ 2022/03/20 React 기초반 진행중

현재 진행중 

 

티스토리 : https://insidelamp.tistory.com/category/React%20Study%20Page

'React Study Page' 카테고리의 글 목록

 

What I Learned

문제 1. JavaScript의 ES란?

문제 2. ES5/ES6 문법 차이

 

문제 1. JavaScript의 ES란?

ES란 ECMAScript 의 약자입니다

 

JavaScript 가 넷스케이프 커뮤니케이션즈로부터 개발되고나서 MS에서 JScript 를 개발하였습니다

두 언어는 서로 호환되지 못하는 경우가 있어 크로스 브라우징 이슈가 발생했다합니다

크로스 브라우징 이슈란?

기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈

이 크로스 브라우징 이슈를 해결하기위해 JavaScript 를 표준화를 했습니다

그게 바로 ECMAScript 라고 합니다

 

JavaScript는 언어이고 ES 규격, 표준을 뜻합니다.

 

JavaScript는 짧은 기간에 만들어진 언어여서 설계상의 미스가 있을 수 밖에 없습니다

그렇기에 지속적으로 버전이 업그레이드 되고, 기능이 늘어 현재 ES6까지 생겨났습니다

 

문제 2. ES5/ES6 문법 차이

ES5와 ES6의 대표적인 차이점은 밑의 6가지라고 볼수있습니다

• 템플릿 리터럴
• 화살표 함수
• this
• 변수선언
• 모듈
• 클래스

위 6가지를 간단하게 설명드리자면 

 

템플릿 리터럴 

문자열 표현이 훨씬 간단해졌습니다

 

템플릿 리터럴이란

 

작은 따음표나 큰 따음표 대신 백틱( ` ` )으로 문자열을 감싸 표현하는 기능을 말합니다

템플릿 리터럴을 사용하면 플레이스홀더 ${variable} 를 사용하여 백틱 내부에 문자열과 함께 표현식을 넣을수있습니다

ES5

var name = "현진";
var age = 25;
console.log("저의 이름은 " + name + "이고, 나이는 " + age + "살 입니다.");

ES6

var name = "현진";
var age = 25;
console.log(`저의 이름은 ${name}이고, 나이는 ${age}살 입니다.`);

 

화살표 함수

함수 선언법이 좀 더 간단해졌습니다

 

ES5
var arg1 = ["철수"]
var arg2 = ["용민"]

function str(arg1, arg2) { 
	console.log("용민"); 
}

ES6
var arg1 = ["철수"]
var arg2 = ["용민"]

var str = (arg1, arg2) => {
  console.log("용민");
};

 

this의 다른동작

ES5는

객체 내에 있는 메소드를 실행시 this 메소드가 선언된 해당 객체를 가리킵니다

하지만 객체 안에서 선언된 함수의 this는 해당 객체가아닌 window 를 바라보고 있기 때문에 함수 안에서 this.name , this.age 를 하여도 아무값이 나오지 않습니다

 

이러한 경우 해결방안으로 innerinfo.call(this) 를 통해 this를 바인딩 시켜주거나

this를 해당 변수에 담아서 var self = this 의 같은 방식으로 접근하여 사용해야했습니다

 

ES6는

ES6에서의 this 는 자신을 둘러싸고 있는 this 를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요가 없습니다

 

변수 선언

ES5는

ES5에서는 변수명으로 var밖에 존재하지 않았습니다.

var는 변수를 선언할때 사용되는 키워드로 재할당과 재선언에 굉장히 자유롭습니다

허나 변수명이 비슷하게 된다면 어디에서 바뀌어 에러가 나는지 찾는것에 대해 오래 걸렸습니다

ES6는

ES6에서는 변수명으로 let 과 const가 추가되었습니다

 

let 은 한번 선언된 변수에 동일한 이름으로 다시 선언 할수 없습니다 하지만 값은 재할당이 가능합니다

 

const는 선언된 변수에 재할당과 재선언이 불가능합니다

즉 이름과 값을 웹사이트를 초기화 하지 않는이상 변경이 불가능합니다

 

표로 가져와 봤습니다

변수 선언 방식	재선언	재할당	Block scope	Function scope
var ( ES5 )	O	O	외부에서 내부 참조 가능	외부에서 내부 참조 불가능
let ( ES6 )	X	O	외부에서 내부 참조 불가능	외부에서 내부 참조 불가능
const (ES6 )	X	X	외부에서 내부 참조 불가능	외부에서 내부 참조 불가능

 

모듈

ES5 이전에는 각 기능별로 JS파일을 나누고 개발 및 관리하는 것 이 불가능했습니다

 

ES5

require 을 통해 모듈화를 할 수 있었습니다

js파일

js / - - -script.js
      |
      ---  slider.js
##############################      
<script>
	src = "slider.js";
</script>
<script>
  src = "script.js";
</script>

html파일

var slider = require(./slider.js)
// 혹은 require(./slider)

위와 같이 함으로써 slider.js 를 임포트할수있었습니다 이러한 방법으로 파일 자체를 사용할수 있었습니다

ES6

ES6부터는 import와 export로 모듈을 관리할수 있습니다

모듈은 실현 가능한 특정 프로그램의 그룹입니다

그리고 이것은 다른 파일의 변수,함수를 참조합니다

클래스와 같은 모듈이 로딩될때 import와 export를 이용해 사용될수 있습니다

 

클래스

객체 생성 방식 중 하나이며 자바스크립트는 프로토타입 기반의 객체 지향 프로그래밍입니다.

new 키워드로 Class 생성이 가능합니다

constructor() 생성자 함수로 속성 설정 가능, 메서드 정의, 상속, 부모 메서드 호출 가능한 class를 사용할수있습니다

프로토 타입과 클래스는 다르지 않으며 프로토타입으로 상속을 구현했을 경우에 클래스 문법을 사용할수 있습니다