유쾌하고, 유익하게

SEB_FE_45 Section1. Unit.9 JavaScript 핵심 개념과 주요문법 1. 스코프(Scope) 스코프란 변수 접근 규칙에 따른 유효 범위를 의미한다. 가. 변수접근 규칙 ① 안쪽 스코프에서 바깥쪽 스코프로는 접근 가능하나, 바깥쪽에서 안쪽으로는 접근 불가능하다. ② 스코프는 중첩이 가능(스코프 === 중첩된 울타리)하다. 가장 바깥쪽 스코프를 전역스코프(Global Scope)라고 하며, 이하 스코프는 모두 지역 스코프(Local Scope)라고 한다. 지역 스코프에서 선언한 변수는 지역변수라고 하면, 전역 스코프에서 선언한 변수는 전역변수라고 한다. ③ 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다. 전역 스코프의 변수와 지역 스코프의 변수의 이름이 동일하다면, 지역 스코프의..

SEB_FE_45 Section.1 Unit.9 JavaScript 핵심 개요와 주요문법 1 - 코드스테이츠 1. 원시자료형과 참조자료형 구분 원시자료형 참조자료형 값(value)의 종류(type) number, string, boolean, null, undefined, Symbol 배열(array), 객체(object), 함수(function) 변수 할당 메모리공간에 값 저장 메모리공간에 주소값 저장 다른 변수에 할당 원시값 자체가 복사됨 주소값이 복사됨 변경가능 여부 변경불가(immutable) 생성된 원시값은 읽기전용 값임 변경가능(mutable)한 값 복사 값 자체를 복사 (대체로 값의 크기가 일정하기 때문에 새로운 공간확보 및 복사 용이) 주소값을 복사 (값의 크기가 일정하지 않기 때문에 매번..

SEB_FE_45 Section.1 Unit.8 배열과 객체 2 1. 객체 가. 객체의 개념 객체란 회원주소록과 같이 하나의 변수(회원 정보)에 의미있는 데이터들(이름, 주소, 연락처, 생년월일 등)을 묶음으로 관리할 수 있는 데이터 타입이다. 객체의 구성은 아래 코드블럭과 같다. //객체의 구조 let object = { property1 : value, property2 : value, ..., propertyn : value } // {} : 중괄호로 묶여있다. // 속성(property)과 값(value)로 나눠져있다. // 속성 : 값의 묶음을 쌍이라 한다. // 속성과 값의 구분은 콜론(:) 으로 한다. // 여러 (속성값)쌍이 있는 경우에는 쉼표(,)로 구분한다. 만약 회원 정보를 배열로 작..

SEB_FE_45 Section.1_Unit.8 배열과 객체 1. 배열 가. 배열의 개념 배열이란 대량의 데이터를 쉽게 다룰 수 있게 해주는 데이터 타입이다. 배열은 순서(index)가 있는 값(요소, element)이다. 요소를 할당할 때에는 [대괄호]를 사용한다. let a = [1, 2, 3, 4, 5] //[1,2,3,4,5] 는 값(element)이다. //각 값에는 순서(index)가 존재하며, index는 0부터 센다. a[1] === 2 // 배열변수[인덱스]로 해당 인덱스의 요소를 조회할 수 있다. a[1] = 1 // 1번째 요소를 1로 바꾼다. // a=[1,1,3,4,5] 가 된다. a.length === 5 // 배열변수의 길이를 확인할 수 있다. 나. 다양한 매서드 매서드 설명 ..

SEB_FE_45 Section1. Unit5. JavaScript 기초(함수) 학습 목표 함수표현식, 함수선언문으로 함수를 정의하고 호출할 수 있다. 매개변수와 전달인자에 대해 설명할 수 있다. 함수에 return문이 필요한 이유를 이해한다. 함수를 이용해 구구단 n단을 출력하는 재사용이 가능한 코드를 작성할 수 있다. 1. 함수 함수란 논리적인 일련의 작업을 하는 하나의 단위이다. 함수의 사용은 코드실행 과정을 하나의 묶음으로 묶어서 필요할 때마다 호출하여 실행하는 것이다. 이때, 특정한 코드실행 과정을 묶어서 함수를 생성하는 것을 '함수를 정의한다.'고 한다. 1) 함수 선언문 2) 함수 표현식 : 함수를 변수에 할당하는 형태 3) 호출 함수 내부에 있는 코드를 실행하기 위해서는 호출이 필요하다. ..

SEB_FE_45 Section1. Unit.5 JavaScript 기초 1. 조건문 가. if문 개요 주어진 조건식의 참(true) / 거짓(false) 여부에 따라 실행이 결정된다. 참과 거짓을 판단하기 위한 자바스크립트 타입은 Boolean(불리언) 타입이다. 조건식은 결과가 불리언타입이 되도록 작성해야 한다. 1) 동치연산자(=== / !==) ===은 두 피연산자가 동일하면 true, 그렇지 않으면 false를 반환한다. !==은 반대로 동일하지 않으면 true, 동일하면 false를 반환한다. let name = 'choco'; if (name === 'choco') { console.log('중복된 이름입니다.'); // '중복된 이름입니다.' } let name = 'banana'; if ..

SEB_FE_45 Section1. Unit5. JavaScript기초 1. JavaScript JavaScript 는 원래 브라우저에서 실행하기 위해 만들어진 프로그래밍 언어이다. 이에 HTML파일과 함께 브라우저에서 실행해야 작동한다. 혹은 Node.js라는 런타임을 컴퓨터에 설치해 실행할 수 있다. 코드스테이츠에서는 학습툴로 StackBlitz을 통해 실습을 진행하였다. ※ 용어 설명 - REPL(Read-Evaluate-Print loop) : 읽고(Read), 평가하고(Evaluate), 출력(Print)을 반복(loop)하는 가장 간단한 개발 환경 - 프로그램 : 작업(task) 수행을 위한 코드모음 - 프로세스 : 프로그램 실행의 결과물 - console.log() : 개발자 도구 콘솔이나 ..

SEB_FE_45 Section1. Unit.4. HTML/CSS 활용 복습 및 페어프로그램 1. HTML/CSS 전반 복습 구조를 만드는 마크업언어인 HTML과 스타일언어인 CSS HTML은 태그들의 묶음이며, CSS는 HTML 요소를 선택자로 불러와 디자인 요소를 입힌다. 태그를 활용하여 HTML 내에서도 CSS 적용이 가능하지만, 권고하지 않는다. 그 이유는 각 언어별 역할이 있기 때문이며, 에러나 수정이 필요한 경우 빠른 피드백을 위해 별도 파일로 관리 및 업데이트 하는 것이 용이하다. HTML 태그 작성시 시멘틱 요소 사용이 권고되고 있다. HTML 또한 언어이기 때문에 데이터를 가장 잘 표현할 수 있는 요소를 선택하기 위한 고민이 필요하다. 이를 통해 개발자와 개발자, 개발자와 컴퓨터가 더 원..

SEB_FE_45 Section1. Unit 4. HTML / CSS 활용 1. 레이아웃 레이아웃이란 각각의 요소를 목적에 맞게 배치하는 것이다. 이를 위해 와이러프레임 작업을 먼저 수행해야 한다. 와이어 프레임이란 레이아웃의 뼈대를 그리는 단계이다. 와이어프레임은 선과 도형을 이용하여 인터페이스를 시각적으로 표현하는 것이며, 레이아웃과 제품의 구조를 단순하게 보여주는 용도이다.(전환효과, 애니메이션, 사용자 경험에 대한 판단은 고려하지 않는다.) 와이어프레임 단계이후에는 목업(Moke-up)을 만들어야 한다. 목업이란 대부분의 산업에서 실물크기의 모형을 의미한다. 와이어프레임과 목업이 없는 HTML은 도면없는 건물과 같다고 볼 수 있다. HTML 구성은 컨텐츠의 흐름 방향에 따라 차례대로 진행한다. 컨..

SEB_FE_45 Section1. Unit3. CSS 기초 1. CSS 기초개요 CSS란 앞선 HTML을 공부할 때 언급되었던 것처럼 HTML 문서의 시각적 효과를 표현해주는 디자인 언어이다. CSS는 웹페이지 스타일과 레이아웃을 정의하는 스타일 언어이기도 하다. CSS는 좋은 사용자 경험을 제공하기 위한 도구이다. 좋은 사용자 경험이란, HTML문서에 작성된 컨텐츠를 사용자가 잘 이해할 수 있도록 돕는 것이다. 사용자 경험(UX)은 사용자 인터페이스(UI)를 통해 구현된다. 사용자 인터페이스(UI)란, 사용자와 컴퓨터가 교류하기 위한 연결고리이다. UI가 발전하지 못했을 때는, 커멘드 입력창에 암호화된 코드를 입력해야 했기 때문에 사용자 접근성이 떨어졌다. 현재는 UI의 발전으로 인해 아이콘으로 애플..

SEB_FE_45 두번째 강의는 HTML 학습이었다. 웹개발 이해하기 HTML 기초 HTML 심화 위 순서로 강의가 진행되었으며, 각 챕터별 목표를 달성하기 위해 노력하였다. 1. 웹개발 이해하기 웹 개발 시 사용하는 언어는 HTML / CSS / JavaScript 가 주로 사용된다. HTML은 기본 구조를 표현하는 마크업 언어이다. CSS는 스타일을 표현하는 디자인 언어이다. 마지막으로 JavaScript는 이용자와의 웹페이지 간의 상호작용을 돕는 프로그래밍 언어이다. 2. Visual Studio Code(이하, VScode) VScode는 마이크로소프트사에서 만든 개발 에디터이다. 장점은 아래와 같다. 운영체제 상관없이 사용가능하다. 위의 세가지 언어 모두 편집할 수 있다. 다양한 확장프로그램(e..

개발자로의 취업을 위한 첫걸음! 비전공자인 나에게.. SNS에서는 너무나도 많은 부트캠프 정보를 전달해주었다. 많은 정보들 중 굳이 코드스테이츠를 선택한 이유는 직접 참여해본 친구가 있었기 때문! 그런데 왠걸? 예비합격자 125번??? 당연히 포기하고 있던 차에 예비합격자들도 체험 강의수강이 가능하다는 문자를 받았다. 그리고 수강을 포기하는 인원이 발생하면 추가합격도 가능하다고 한다. 처음에는 장난을 치는건가 싶었다. 125번인데 추가합격이 가능한가라는 의문이 들었다. 이에 코드스테이츠 고객센터에 전화해서 물어보았다. 답변은 기존 예비합격자들이 많이 포기한 상태라 예비번호가 앞번호라고 한다. 체험 강의는 수강을 해보기로 하였다! 4/11(화) 체험 강의 수강 시작! 첫시간에는 6개월간의 과정 소개와 참가..

웹개발 종합반도 드디어 완주 성공! html, css, javascript 그리고 파이썬, flask, AWS까지 (AWS는 마지막에 에러가 생겨서 배포하는 연습을 해보지는 못했다...) 5주차 강의 마지막에 강사는 웹개발의 A-Z를 모두 배워본 것이라는 말에 고양감이 들었다. 물론, 그저 따라하는 수준이었지만 주차가 진행될 수록 강의에서 하는 말들이 들리는 게 신기했다. 데이터 분석 강의와 마찬가지로 계속 복습이 필요한 부분이라고 생각이 된다. 또한, 실력 향상과 체득을 위해 스스로 구현해보고자 했던 웹페이지를 만들어보고자한다. 우선, 강의를 시작하면서 생각했던 페이지는 '우리동네 맛지도' 페이지를 만들어보는 것이었다. 지도api 활용이 가능한지는 차차 알아보면서, 나만의 페이지를 만들어 가는 과정도 ..

스파르타코딩클럽 파이썬 데이터분석 5주차 강의 완강! Colab 환경부터 주식데이터 백테스팅 작업까지 작업해볼 수 있는 흥미로운 강의였다. 5주차까지 강의를 완주하면서 돌아보니, 코딩의 기초(?)에서 중요하게 생각하는 것들을 알 수 있었다. 우선, 리스트와 딕셔너리 그리고 조건문, 반복문, 함수 이렇게 5가지는 1주차부터 5주차까지 빠짐 없이 등장하였다. 이 외에 부가적으로 Open API에 접근하여 데이터를 내려받는 작업들이 참 흥미로웠다. 사실 말이 5주차강의지 강의를 듣다보면 1주차 당 1~2시간이면 들을 수 있는 내용이었다. 이에, 처음에는 열의에 타올라 2주만에 다듣고, 복습을 해보자라고 하였으나,,, 생각과는 다르게 5주를 꽉 채우고 나서야 끝낼 수 있었다. 반성 또 반성하며, 조금더 J스럽게..

3일을 남기고 일단.. NCS 수료기준은 충족! 남은 2일간 완주하여 100% 수강 완료도전! 4주차에서는 Flask 를 이용하여 서버를 만들고, 프론트엔드와 백엔드를 오가며 코딩을 진행하였다. 프로젝트를 바탕으로 수업이 진행되어, 그저 따라하는 수준이지만 가시적인 성과에 흥분되었다! 주된 작업은 웹페이지에서 입력한 데이터를 mongoDB 클라우드에 저장하고, 이를 불러와서 페이지에 표현해주는 기능을 실습해보는 것이었다. 뭘 받고, 주고 한다는데 이해가 안되더니, 어느 순간 아! 이건가 하는 순간이 있었다. 내일 새로운 프로젝트로 연습을 할 때, 이게 뭔소리지 하겠지만 영어를 배울 때 귀가 트이는 듯한 느낌이 들어서 자신감이 생긴 것 같다. 마지막 주차의 프로젝트는 강사님이 지시하는 부분을 강의보다 먼저..

주식데이터를 활용한 파이썬 강의를 듣고 있어서 3주차 강의는 수월하게 들었다. 클라우드라고 하면 구글 드라이브나, 네이버 드라이브와 같이 파일을 올리고 내리는 기능만을 가진 것이라고 생각했다. 그런데 클라우드를 통해 코드를 통해 만들어진 정보들을 저장하고 불러올 수 있는 것에 대해 흥미가 생겼다. 게으름을 핑계로 많이 늦어지긴 했지만, 4~5주차 강의까지 완강한 후, 복습 또 복습해서 나만의 웹페이지 정도는 만들어봐야겠다!

게으름을 이겨내고 5주차까지 여유있게 들을 수 있을거란 생각은 역시나.. 오산이었다.. 그래도 4주차까지 진행한나 대견해.. 내일 파이썬 강의 완주해보자! 4주차에서는 시가, 종가 등의 가격 데이터를 가지고, 그래프를 그려보았다. 이 외에도 이동평균선을 구하는 방법과 이를 이용하여 최적의 수익률을 찾는 방법을 알아보았다. 우선 그래프를 그리기 위해 사용한 명령어 .plot 이를 이용해 종가 그래프를 비롯하여 두개 종목의 종가 그래프도 그려볼 수 있었다. 이동평균선을 만들기 위해서는 .rolling() 이라는 명령어를 사용하였다. .rolling은 누적 곱하기를 하라는 명령어로, .rolling(3)을 할 경우, (1, 2, 3), (2, 3, 4), (3, 4, 5) ... 와 같이 곱셈을 진행하여 표현..

Dart Open API 를 활용하여 종목 분석하기를 진행하였다. API 자료를 활용하는 것이 처음이었는데, 어려웠지만 흥미로운 작업이었다. 3주차 수업에서는 1~2주차에서 배웠던, 반복문과 함수 그리고 pandas, DataFrame 등를 이용하여 종목에 대한 분석을 진행하였다. 새롭게 배운 내용으로는 오픈API를 불러오는 방법과 와 문자열을 숫자로 변환해주는 코드인 pd.to_numeric( ~ .str.replace(',', '')) 등을 배웠다. 1~2주차에 배운 내용을 가지고 수업이 진행되는데도 왜 하루하루 생소한지 모르겠다.. 이번 주차 강의는 따라가는데 어려움은 없었으나, 숙제가 조금 어려웠다. 강사님께서 힌트 영상으로 숙제 대부분 다 알려 주시지만, 다큐먼트를 만들어서 새롭게 DataFra..