엘리스 SW 엔지니어 트랙 2기

IT융합(컴퓨터공학)과를 졸업하고 군대를 다녀온다고 3년간 코딩을아예 하지못해 전역후 다시 시작해서 취뽀해보자는 다짐으로 코딩캠프를 알아보던중 엘리스 SW 엔지니어 트랙 2기를 모집한다는 글을 보고부랴부랴 엄청난 검색으로 엘리스는 어떤곳인지 알아보고 다른캠프와 뭐가

서울과 다르게 부산은 일주일 밀린 4/11부터 수업을 시작하게 되었다시간이 정해진 온라인 수업이라 출석 실수하지 말아야지 하며 수업을 시작했다!웹 = HTML(뼈대) + CSS(옷) + JS(기능)HTML - Hyper Text Markup Language퍼블리싱 :

실시간 온라인 수업이 아닌 개인적으로 수업을 들어 완료해야한다.실시간 수업보다는 시간에 압박감이 조금 덜했다. HTML HTML 태그 구성요소 : 태그명, 컨텐츠, 속성, 속성값!DOCTYPE html : HTML5라는 신조어로 문서를 선언하는 태그html : HTML

실시간 온라인 수업을 두번째 하는날이다. 오랜시간 앉아서 수업을 듣는것도 슬 적응할때가 되었는데 언제 적응할까 ㅜㅜCSSmargin 병합현상 (형제간) : 두 마진이 겹치면 큰 쪽이 적용됨margin 병합현상 (부모간) : 자식 마진이 부모에게도 영향을 미침, 부모영향

수업 4일차 한주를 마무리 하기전 정신력이 떨어져가는 날이다. 실습 내용은 엘리스의 과제여서 아주 쉬운 것으로 대신 탑재한다. 이론 CSS Transform : 웹사이트의 특정 영역에서 오브젝트의 각도, 위치 변경 rotate : 입력한 각도만큼 회전, 음수도 입력가

첫 주의 마지막 수업날이다. 오늘은 한주간 배운 HTML,CSS가 아닌 새로운 git을 배운다고 했다. 협업을 위해 중요하다고 하니 잘배워 둬야겠다.gitgit : 효율적 협업, 복잡한 파일 대신 하나의 파일로 작업 가능git 장점 : 가지 치기와 병합 가능, 가볍고

2째주 수업이 시작되었다. 이번주는 HTML과 CSS가 아닌 Javascript를 배우기 시작했는데 저번주와 다르게 난의도가 급 상승한거 같다. 수업을 들으면서도 어떤건지 잘몰라서멍해졌던 시간이 많았던거 같다!Javascript자바스크립트 : 웹에서 동작에 대한 부분을

오늘 수업은 이론수업은 없고 엘리스에서 문제 풀이로만이루어져 있다. 문제 풀이 껌이쥐~! 하고 시간 널널하게남을줄 알았는데 나의 실력이 여기서 드러나 버렸다..그래도 오늘치 문제는 전부 성공!1부터 200까지의 소수의 합 결과 값이다.배열에 있는 값중 짝수의 값만 반환

BOM : 문서 이외의 모든 것을 제어하기 위해 브라우저가 제공하는 추각 객체window.innerHeigth : 웹페이지의 높이window.innerWidth : 웹페이지의 너비window.alert() : 브라우저에 알림창 표시window.confirm() : 브라

DOM과 이벤트DOM : 문서 객체 모델, 객체 지향 모델로써 구조화된 문서를 표현하는 형식Core DOM : 모든 문서 타입을 위한 DOM 모델HTML DOM : HTML 문서를 위한 DOM 모델XML DOM : 문서를 위한 DOM 모델Document 객체 : 웹페이

개발자는 하나하나 코딩하는게 아니라 구글과 함께 오픈소스를 찾아 나의 프로젝트에 맞게 사용하는 능력이라고 배웠다.오픈소스 템플릿을 사용하여 자기소개 페이지를 만들어보았다.프로필에 마우스가 올라가면 왼쪽에 얇은 줄로 색상이 채워지게 만들었다. transition 을 사

컴포넌트 : 캡슐화를 통해여 재사용이 가능한 독립된 모듈export : 복사import : 붙여 넣기, 다른모듈에서 내보낸것을 가져올때 사용,"\*"사용하면 모든값 가져옴Arrow function : 기존의 함수를 간단하게 사용할수 있음, this값이 바인딩되지 않음,

컴포넌트 : 재사용이 쉽고 효율적인 관리 가능함수형 컴포넌트 : 덜 복잡한 UI로직, Component 선언이 편함, 클래스형보다 메모리 덜사용클래스형 컴포너트 : Class키워드 필요, Component 상속 받아야함, Render()메소드 반드시 필요템플릿 리터널

스코프 : 참조할수 있는 유효범위를 의미Lexical Scope : 함수 호출이 아닌 함수 선언한 곳을 기준으로 스코프를 결정실행 컨텍스트 : 실행 가능한 코드가 실행되기 위해 필요한 환경, 실행시 생성되고 종료시 소멸됨컨텍스트 종류 : 1. 전역실행 2. 함수 실행

수업 14일차 엘리스 플랫폼에서 수업을 들으면서 문제가 제일 어렵다고 생각한 날이다. 실행 컨텍스트, this, 화살표 함수, 클로저, Rest,Spread operator등 어려운것들이 하루만에 한꺼번에 배우는 날이라 더 머리 속이 복잡했다. 이론 자바스크립트 엔진

수업 14일차 점점 Javascript의 묘미를 알게 되는거같은 기간이다. 이제는 하루에 8시간씩 앉아서 수업듣고 코딩하고 공부하는게 익숙해져가는 것 같다~!

동기 프로그래밍 : 코드가 완료될 때까지 기다리는 방식비동기 프로그래밍 : 코드가 실행되고, 완료 될때까지 기다리지 않고 다음코드를 실행하는 방식javascript는 싱글 쓰레드로 동작비동기는 Call Stack에 쌓여있는 문제들부터 해결후 Task Queue 에서 올

자바스크립트 엔진 : 하나의 메인 스레드로 구성됨, 코드를 읽어 한 줄씩 실행비동기 API : 비동기 코드에서 정해진 함수Promise API : 비동기 API중 하나, task 큐가 아닌 job큐 사용Promise 생성자 : callback 함수는 (resolve,

try / catch : 예외 처리를 위한 문법, try블럭 내에서 에러가 발생하면 catch블럭에서 처리할 수있음async function : 비동기 함수임을 선언 하는 함수, Promise객체를 반환await : async 함수 내에서만 사용 가능, promise가

async/await : Promise를 활용한 비동기 코드를 간결하게 작성하는 문법HTTP : Web에서 서버와 클라이언트 간의 통신하는 방법을 정한것HTTP Message : 서버 주소, 요청 메서드, 상태 코드, target path, 해더 정보, 바디 정보 등이

행맨 게임 : 알파벳을 하나씩 선택하여 주어진 기회 안에 단어를 맞추는 게임초기에는 단어의 길이와 공백 정도의 정보만 주어진다.알파벳을 하나씩 선택할 때마다, 그 알파벳이 들어 있는 위치가 드러난다.단어에 들어있지 않은 알파벳을 선택하면 점차 행맨이 완성된다.총 7번의

수업 21일차 이제는 Javascript를 끝내고 Node.js으로 들어서는 입문의 길이다. 벌써...? 나는 아직 할줄아는게 없는데...? 생각이 드는 날이다 ㅜㅜ 이론 ES6 우선 ES란, ECMAScript 의 약자이며 자바스크립트의 표준, 규격을 나타내는 용

Node.js : 자바스크립트를 어느 환경에서나 실행할수 있게 해주는 실행기브라우저의 js : 브라우저에서 실행, 웹 내부 제한된 동작node.js : 크로스 플랫폼 실행, 제한 없는 동작Node.js의 특징 : 싱글 쓰레드 - 비동기 - 이벤트 기반LTS : Long

타입스크립트 : 자바스크립트를 확장하여 타입을 입힌 스크립트써야하는 이유 : 에러를 방지, 협업에 유리, 100% 호환, 라이브러리가 지원, 개발속도 향상, 점진적으로 변환public : 어디서나 접근 가능 , 필요한 경우에만 사용private : calss 내부에서만

타입스크립트 : 자바스크립트의 상위 집합, 쓰는이유: 정적으로 선언가능, 타입 유추를 통한 타입 제어 가능, 오류포착 가능, js에서 찾을수 없는 추가 코드 제공기본 자료형: string(문자열 저장), boolean(참/거짓 저장), number(숫자 저장), nul

interface: 변수, 함수, 클래스에 타입 체크를 위해 사용, 코드안에 계약을 정의하기 위함properties: 컴파일러는 프로퍼티의 두가지 요소를 검사한다, 필수요소 프로퍼티의 유무,프로퍼티 타입optional Properties: 프로퍼티 선언시 이름 끝에 ?

npm: 패키지 관리 도구, 패키지 저장소 이름, 오픈소스 패키지가 저장되어 있음npm install package: node_modules 폴더 내에 패키지가 저장npm i package: install 축약형npm install --save-dev package:

Npm: Node.js 프로젝트를 관리하는 필수적인 도구package.json: 프로젝트 관련 정보들이 저장되는 파일라이브러리: 특정 기능을 수행하는 코드의 묶음npm init: 프로젝트 생성npm install: 의존성 추가npm remove: 의존성 삭제npm ru

미들웨어: 요청과 응답 사이에 처리되는 함수들postman: get/post/put/delete 같은 호출을 편하게 하기위한 도구데이터베이스: 데이터를 통합 관리하기 위한 개념mongodb: Nosql 데이터베이스의 대표 주자Nosql: 스키마가 없는것, 데이터를 유연

Middleware: Express.js 동작의 핵심, 단계별 동작을 수행하주는 함수오류처리 미들웨어: 일반적으로 가장 마지막에 위치하는 미들웨어, next함수에 인자가 전달되면 실행미들웨어 라이브러리: 이미 만들어져 라이브러리러 제공, 온라인 저장소에서 찾아볼 수 있

MongoDB: 대표적인 NoSQL, Document DBNoSQL: 질의어를 사용하지 않는 DBRDB: 관계형 데이터베이스Mongoose ODM: Object Data Modeling, 모델화 하여 쉽게 사용할수 있도록 도와줌스키마 관리: 스키마를 정의하지 않고 데이

Model: 데이터를 책임지는 부분, DBView: 사용자가 보게 되는 부분Controller: 모델, 뷰 등을 연결하고, 이벤트를 처리하는 부분View engine: express에서 동적인 결과를 HTML로 담기 위해 사용, SSR방식MVC는 Model,View,C

템플릿 엔진: 템플릿 작성 문법과 작성된 템플릿을 HTML로 변환pug: 들여쓰기 표현식을 이용해 가독성이 좋고 개발 생산성이 높음each~in: 주어진 배열의 값으 순환 if,else if, else: 조건을 확인layout: layout을 extends하면 bloc

양방향 암호화: 다시 복호화 할수 있는 암호화 방식단방향 암호화: 암호화 하면 다시 복호화 할수 없는 방식bcrypt: 비밀번호 암호화cookie: 클라이언트에 저장되는 데이터 파일session: 서버에서 관리하는 쿠키 같은 개념JWT: 인증에 필요한 정보들을 암호화

hash: 문자열을 되돌리 수 없는 방식으로 암호화 하는 방법Passport.js: Express.js 어플리케이션에 간단하게 사용자 인증 기능을 구현session: 클라이언트 정보를 서버에 저장하고 클라이언트 요청시 Session ID를 사용해 정보를 다시 확인하는

jwt: 저장소를 이용하지 않고, 전자서명을 이용하는 방법cookie: 클라이언트 정보를 서버에 전달하는 기술, 클라이언트 정보를 브라우저에 저장SMTP: 메일을 전송하는 기능을 구현OAuth: 다른 서비스에게 데이터를 제공하기위한 인증방식 표준Nginx: 최근 프로젝

월요일 팀원들과 처음 만나 프로젝트의 방향성을 정하는 시간이 되었다.나는 모두 다하는 옷 쇼핑몰이 비교대상이 뻔할꺼 같아서 독특하게 여행사 페이지를 구현하자고 제안하였다. 팀원들이 승락을 하여 우리팀은 여행사 컨셉으로 시작하게 되었다.첫날 저녁에 바로 백엔드 코치님과

수업 41~45일차 저번주 부터 계속된 프로젝트를 이어갔다. 만들어진 내용을 보면 우리 이번주까지 다할수 있을까..? 라는 걱정을 연신했다. 하지만 팀원들에게 피해 끼치긴 싫어서 더욱 열심히 하는 한주였다..(힘든 한주.. ㅎ) 내용 꿀만 같았던 주말을 보내고 다시

React: 페이스북에서 개발한 UI자바스크립트 라이브러리CRA: React 팀에서 공식적으로 지원하는 보일러플레이트JSX: Javascript의 확장 문법, 공식적인 문법 아님(React용)JSX 규칙 : 1. 최상단은 단 1개의 태그로 이루어져야 함,

SPA: 페이지에서 변경된 부분만 계산하여 다시 그리게 해줌React: 사용자 인터페이스를 만들기 위한 Javascript 라이이Compoment: 독립적인 단위로 쪼개어 구현Virtual DOM\*: 가상적인 표현을 메모리에 저장하고 실제 DOM과 동기화 하는 개념J

Props: 변수부터 함수까지도 넘겨줄수 있음, 읽기 전용State: 컴포넌트 내부에서 상태를 저장하는 값,useState를 이용해야 React에서 값이 변한 것을 알수 있음Hooks: Class에서 사용하던 React 기능을 Function에서도 쓸 수 있게 해줌us

Props: Compoment에 원하는 값을 넘겨줄 때 사용, Javascript의 요소라면 제한 없음State: Compoment 내에서 유동적으로 변할 수 있는 값을 저장이벤트: 웹브라우저가 알려주는 HTML 요소에 대한 사건의 발생onClick: Element를

Hook: 컴포넌트에서 데이터를 관리하고 데이터가 변경될때 상호작용을 하기 위해 사용State Hook: 컴포넌트 내 동적인 데이터를 관리할 수 있는 HookEffect Hook: 함수 컴포넌트에서 side effrct를 수행할 수 있다.useMemo: 계산된 값을 메

SASS: CSS의 확장 스크립팅 언어, 들여쓰기로 Scope구분SCSS: CSS의 확장 스크립팅 언어, 중괄호로 Scope구분CSS가 복잡한 언어는 아니지만 작업이 크고 고도화 될수록 불편함이 생긴다.이에 Sass는 불필요한 선택자(Selector)의 과용과 연산 기

css module: 하나의 css module 파일 안에 작성한 스타일은 하나의 파일 namespaace로 관리, 두단어 이상 camelCase로 지음CSS-in-JS: 별도의 CSS 파일을 만들지 않고 하나의 컴포넌트 파일 안에서 스타일 작성CSS Box Model

react-bootstrap: bootstrap을 React의 컴포넌트 형태로 사용 가능SPA의 특징: 1. 라우팅, 2. 컴포넌트react-router: React에서 다양한 Routing 기능을 사용하기 위한 라이브러리BrowserRouter: History API

SPA: 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식MPA: 서버에 미리 여러 페이지를 두고, 유저가 네비게이션 시 요청에 적합한 페이지를 전달react-router: React의 JSX를 이용하거나, History API를 사용하여 라우팅을 구현BrowserRo

동기 코드: 해당 코드 블록을 실행할때 쓰레드의 제어권을 넘기지않고 순서대로 실행하는 것을 의미비동기 코드: 코드의 순서와 다르게 실행됨Callback pattern: 비동기 처리후 실행될 코드를 Callback function으로 보내는 것Promise: 객체가 생성

상태관리: 앱 내에서 데이터를 관리하는 방법을 의미지역상태: 각 컴포넌트내 에서 사용하는 state전역상태: 앱 전체에서 사용하는 stateContext: React 내에서 사용할 수 있는 전역 상태Flux Pattern: 단방향 데이터 흐름으로 처리되는 패턴useRe

상태관리: 앱 상에서 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는것Prop Drilling: 컴포넌트가 복잡해지는 경우, 상위 부모와 자식 컴폰넌트 간의 깊이가 커짐Flux Pattern: Facebook에서 제안한 웹 애플리케이션 아키텍쳐

Redux: javascript로 구동되는 앱에서 상태관리를 도와주는 라이브러리Redux Toolkit: Redux를 좀더 쉽게 사용할수 있게 해주는 라이브러리Jest: Facebook에서 개발한 단위 테스트가 가능한 라이브러리리덕스는, 가장 사용률이 높은 상태관리 라

ReDux: 앱 전체 상태를 쉽게 관리하기 위한 라이브러리Action: 상태의 변경을 나타내는 개념Action Creator: Action을 생성하는 함수Store: 앱 전체의 상태를 보관하는 곳Reducer: Action을 받아 새로운 State를 만듦Dispatch

코드 테스트: 코드를 작성하고 나면, 원하는 대로 동작하는지 알기 위해 테스트를 함화이트 박스 테스팅: 컴포넌트 내부 구조를 미리 안다고 가정하고 테스트 코드를 작성블랙박스 테스팅: 컴포넌트 내부 구조를 모른채 어떻게 동작하는지에 대한 테스트Unit Testing: 다

CSR: 초기 로딩은 느리지만, 사용자에게 좋은 사용 경험을 제공SSR: SEO를 손쉽게 적용할 수 있음SSG: SSR처럼 완성된 HTML을 받아오지만, 해당 HTML은 빌드 타임에 생성됨next.js: React에 SSR 개념을 적용한 프레임워크Code Splitti

월요일부터 수요일까지 3일간 프로젝트 안내 받고 프로젝트를 기획하도록 하였다!어떤 주제의 프로젝트를 할것인지, 어떤 기술을 쓸려고 하는지, 어떤 방식으로 구현을 할지 정하는 시간이였다.팀원의 투표결과 음식점을 예약하는 프로젝트를 하기로 하였구이름을 고민하다가 다른거는

나는 1차 프로젝트때 유저정보를 담담했었기 때문에 이번에는 유저정보를 백엔드 다른 팀원에게 넘겨주고 나는 가게정보와 예약정보를 담당하기로 했다.가게 정보와 예약정보의 스키마를 만들고DB에 저장 까지 하였다.Postman으로 가게 정보를 가져올때 등록된 메뉴까지 가져올수

이번주는 너무 아쉬움이 많이 남는 주였다. 큰 이유는 백엔드 파트를 담당했지만 프론트엔드 팀원들이 진전 상황이 너무 적고 만든 기능도 다 못쓰겠다는 말만 하는 분들이 계서서 원하는 만큼 완성을 못했다... 1차때도 잘하지 못한거 같아서 잘만들어보고 싶었는데 아쉬운게 되