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

엘리스 SW 엔지니어 프리트랙 / 면접 후기 보러가기(https://velog.io/@foureaf/%EC%97%98%EB%A6%AC%EC%8A%A4-SW-%EC%97%94%EC%A7%80%EB%8B%88%EC%96%B4-%ED%8A%B8%EB%9E%99-4%EA%B8

1. HTML 기본 개념과 자주 사용되는 태그 2. CSS 기본 개념과 선택자, 상속 3. 박스모델, 레이아웃과 쇼핑몰 만들기 실습.

이론강의 2. 실습강의모르는것, 새로 배운것, 헷갈리는 것 위주로 정리하기. 문서 작성에서 시작해서 더 많은 기능과 레이아웃을 구현하기 위해 단계적으로 생긴 것div 태그로 레이아웃을 다 만들수 있지만, 의미상 중요도 때문에 태그를 구분해서 작성하는 것이 좋음. 몇개

움직이는 웹사이트 제작 1. Transform transform은 css 최신 버전에만 사용 가능해서 사용하기 위핸 Prefix 접두사가 필요함. -webkit- , -moz-, -ms-, -o-를 transform 앞에 붙여서 사용해야함. transform은

100px의 width인 div를 transform:scale (2,1)과 width = 200px으로 하는것의 차이점은 무엇일까? 결과가 같아보일 수 있지만 사실은 다름.transform은 모든 레이아웃이 그려지고 난 뒤 다시 계산을 하게 되는 것이기 때문에, 잡아서

1. Git이란? 효율적인 협업과 버전 관리를 위한 오픈소스 툴 (깃허브, 깃랩, 비트버켓) 파일의 이름을 더럽히지 않으며 버전을 관리하기 위한 것 가지치기와 병합 SUBVERSION에 비해 가볍고 빠름 분산 작업 데이터 보장 준비

변수 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름, 즉 값의 위치를 가리키는 상징적인 이름임. 변수 이름을 '식별자'라고도 하는데, 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말함. 식별자

Local scope 안에서는 밖을 볼 수 있지만, 밖에서는 안이 안보임 (썬팅처럼) 화살표함수 (Arrow Function) for문 다양하게 쓰는 법 / Filter / map / set

01) DOM 과 EVENT DOM이란 문서 객체 모델(Document Object Model): 객체 지향 모델로써 구조화된 문서를 표현하는 방식 프로그래밍 언어가 문서구조, 스타일 내용 등을 변경할 수 있게 함. core DOM / HTML DOM(HTML문서

일급시민, 일급 객체 콜백함수 : 다른 함수의 입력값으로 전달되어 다른 함수에 의해서 나중에 호출되는 것. array.filter 내부에 있는 부분도 콜백함수. 콜백함수는 한 번만 사용하는 경우가 많고, 떨어져있으면 응집력이 낮아져서 파라미터 내부 안에 익명함수 형태

객체지향 프로그래밍 counsturtor 생성자 new를 사용함으로써, 보다 편리하게 객체를 양산해낼 수 있음. this를 사용하여 new function으로 객체를 생성함. 이를 통해 수정사항이 있을 때 모든 객체를 수정해야하는 비효율성을 개선시킴. var toda

도움 됐던 글 두개 첨부!! 두고두고 봐야지.. https://velog.io/@padoling/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%99%80-this-%EB%B0%94%EC%9D%B8%EB%

1. 자바스크립트 에러처리 에러란? 프로그램 실행 중 발생할 수 있는 예외상황들을 Error 라는 일관된 인터페이스로 제공 try catch 구문 에러 객체를 구성하는 요소 세가지 ( name, message, stack) Error 객체 |생성자 함수|인스

자바스크립트 실행 01. 자바스크립트의 변수 정의 과정 자바스크립트 엔진 자바스크립트 엔진은 자바스크립트 코드를 읽어 실행하는 프로그램 작성한 자바스크립트 코드는 자바스크립트 엔진을 통해 파싱(작성한 코드를 컴퓨터가 실행할 수 있도록 전환하는것)되고 실행된다. 크롬은

강의를 본격적으로 보기 전에, 아래 영상을 먼저 보고 강의를 학습했다! 콜스택과 큐, 이벤트 루프를 도식화해서 애니메이션으로 보여줘서 이해하기 매우 수월했다. 중간에 있는 개발자식 유머는 덤 ㅎ [어쨌든 이벤트 루프는 무엇입니까? | Philip Roberts | J

라우팅은 우리가 네트워크에서 특정 경로로 데이터를 보낼 때 사용되는 과정.인터넷 도메인을 보면.. 기본 도메인 뒤에 뭐라뭐라 뒤에 붙여져있는 것을 볼 수 있음.아 이거 그냥 경로 아니에요? 라고 생각할 수 있는데, 직접 개발하는 개발자 입장에서는 상당히 골치 아픈 문제

Promise를 활용한 비동기 코드를 간결하게 작성하는 문법비동기 코드를 동기 코드처럼 간결하게 활용 가능await은 반드시 async랑 활용해야함. 반대는 상관 없음async선언된 함수는 반드시 Promise를 리턴함awiat 키워드는 then 메서드 체인을 연결한

남은 시간, 남은 기회, 선택한 알파벳, 게임의 진행 상태 등의 데이터를 저장하고 그 정보에 따라 필요한 UI를 화면에 그려야 함.이때 데이터를 앱의 상태라고 함.앱의 상태는 하아늬 State 객체로 관리출처 : 엘리스 SW엔지니어 트랙상태를 관리하는 객체를 변하지 않

1. Node.js 이해 등장 배경 Web의 발전에 의해서 발생. WEB 1.0 > WEB 2.0 > 크롬을 위한 V8엔진 등장 > 고성능 JAVASCRIPT 실행 가능 > 브라우저 외부에서 자바스크립트를 활용해보자! > Node js 탄생 Browser의 JS vs

경쟁상태 :출처 : 엘리스SW엔지니어 트랙교착상태 :출처 : 엘리스SW엔지니어 트랙자바스크립트 : 싱글스레드로 작동하는 언어이며, 효율 극대화를 위해 비동기 처리방식을 채택함. Q. 근데.. 자바스크립트는 싱글스레드인데 왜 동시 작업 가능한가요???.... A.개발자가

타입스크립트는 런타임 단계에서 발생하는 타입 에러를 컴파일 단계에서 미리 확인하고 고칠 수 있음. 동적 타입 정적으로 선언 가능타입 유추를 통한 타입 제어 가능자바스크립트에서 찾을 수 없는 추가 코드 기능 제공stringbooleannumber : 부동 소수값 저장 (

타입스크립트 설정 파일 => 타입스크립트 코드를 ECMAScript버전으로 컴파일할 때 대상으로 할 ECMAScript 버전을 지정함.target : 타입스크립트 코드를 ECMAScript 버전으로 컴파일 할 때 대상으로 할 ECMAScript 버전을 지정compile

일반적으로 변수, 함수, 클래스에 타입 체크를 위해 사용직접 인스턴스 생성 불가, 모든 메소드가 추상 메소드abstract키워드는 사용하지 않음. ES6는 인터페이스 지원 X , TypeScript는 지원함. 타입의 이름을 짓고 코드 안의 계약을 정의객체의 스펙(속성,

Node Package Manager : Node.js프로젝트를 관리하는 필수적인 도구온라인 저장소 + 커맨드라인 도구수많은 오픈소스 라이브러리와 도구들이 업로드됨필요한 라이브러리 도구 손쉽게 검색 가능거대한 생태계프로젝트 관리를 위한 다양한 명령어 제공저장소에서 라이

01. Express.js의 Middleware Middleware : Express.js동작의 핵심, HTTP요청과 응답 사이에서 단계별 동작을 수행해주는 함수. 미들웨어는 HTTP요청이 들어온 순간부터 시작이 됨 미들웨어는 HTTP요청과 응답 객체를 처리하거나, 다

01. MongoDB와 Mongoose MongoDB MongoDB란? 대표적인 NoSQL, Document DB Hyumongous에서 따온 말로, 엄청나게 큰 DB라는 의미 => 대용량 데이터를 처리하기 좋게 만들어짐 NoSQL vs RDB |RDB|NoSQL|

서버에서 클라이언트로 보낼 HTML의 형태를 미리 템플릿으로 저장.동작 시에 미리 작성된 템플릿에 데이터를 넣어서 완성된 HTML 생성템플릿 엔진은 템플릿 작성 문법과 작성된 템플릿을 HTML로 변환하는 기능을 제공 EJS - html과 유사한 문법의 템플릿 엔진Mus

이메일, 이름, 패스워드이메일 형식 확인비밀번호 최소 길이 확인패스워드와 패스워드 확인 문자가 일치하는지 확인 \-> 관리자가 회원의 비밀번호를 모르게 저장하는 방법은? \-> Hash 문자열을 되돌릴 수 없는 방식으로 암호화 하는 방법\-> hash 출력값을

01. JWT 의 이해 JSON Web Token 인증을 위한 정보를 특별한 저장소를 사용하지 않고 전자서명을 이용하여 확인하는 방법 header : 토큰의 타입(jwt : Web Token, 즉 웹에서 사용하기 위한 스펙이므로 웹에서 문제 없이 사용할 수 있는 문자

🍃 엘리스 1차 팀프로젝트 (1) 말하는 감자가 어느새 트랙에 참여한지 8주차에 접어들었고, 대망의 1차 프로젝트를 시작했다. 7주차까지도 아니 이런 내 실력으로 프로젝트를 어떻게 하고 뭘 만든다는거지..? 싶었는데 진짜 닥치니까 그냥 뭐라도 만들고 있는게 신기하다.

1. React 기초 (1) 01. React란? SPA (Single Page Application) 전통적인 페이지 vs SPA 사진 출처 : 엘리스SW엔지니어 4기 트랙 React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 Componen

유저, 카테고리, 주문, 상품 API 명세서 (가안) 구성Data Schema 가안 작성bcrypt, jwt토큰을 이용한 유저 로그인 API 기능 구현유저 삭제, 유저 조회, 유저 정보 수정주문 api (주문 추가, 주문 상세 조회, 주문 수정, 주문 취소) async

컴포넌트에서 데이터를 관리하고 데이터가 변경될 때 상호작용 하기 위해 사용함. useState가 바로 State Hook.기존에는 컴포넌트 내에서 State와 생명주기를 관리하기 위해서 반드시 Class Component를 사용하였어야 함.그러나 클래스컴포넌트는 다소

1. 리액트 스타일링 01. React 스타일링 overview 좋은 앱을 만드려면? 번들 사이즈에 대한 고려 CSS 코드가 차지하는 사이즈는 무척 중요한 요소 앱 성능에 대한 고려 animation, transition 등 유저와의 상호작용에서 스타일 코드의 성

하나의 페이지 요청으로 전체 웹앱을 사용하는 방식유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낌.MPA는 서버에 미리 여러 페이지를 두고 유저가 네비게이션 요청시 적합한 페이지를 전달미리 서버에서 전체 페이지를 빌드해 브라우저로 전송서버에 라우팅을 처리하는 기능

상태관리 기술이란 앱 상에서 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것.한 컴포넌트 안에서 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포함MPA 에서는 서버의 데이터를 이용해 페이지 렌더링. 클라이언트 데이터와 서버

앱 전체 상태를 '쉽게' 관리하기 위한 라이브러리Redux의 많은 개념들이 Flux pattern에서 차용됨.주로 React 앱과 같이 사용redux.js.org에서 수많은 문서를 참고할 수 있고 웹상에 Redux를 활용한 앱 구축 사례가 많음.앱 전체의 상태 관리가

React 테스팅 01. React 테스팅 코드 테스트가 필요한 경우 코드를 작성하고나면 원하는 대로 동작하는지 알기 위해 테스트 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해 테스트를 함 코드를 리팩토링하면 원래대로 동작하는지 테스트 리액트 앱의

1. Server Side Rendering 01. SSR 소개 SSR REact, Vue, Angular 등 JS 프레임워크가 나오기 이전 초기 웹 환경에서는 모든 페이지를 서버에서 빌드 클라이언트는 별도의 처리 없이 웹 페이지 노출 CSR Ajax등의 기술, JS

\- SW엔지니어트랙 / AI트랙 / IoT트랙엘리스에는 이렇게 세가지 트랙이 있는 것으로 알고있다. 나는 웹 개발자가 목표였고, 백엔드와 프론트엔드를 전반적으로 배우고 싶어서 SW엔지니어트랙을 선택했다. (실은 내가 프론트엔드를 좋아할줄 알았는데.. 백엔드가 더 재밌