엘리스

질문받습니다.

지식을 배우는데에는 순서가 없다.w3school: html, css 등 문법 나와있는 사이트html 태그strong: 굵게u: 밑줄(underline)width = "100" ul: 경계를 나누는 태그ol: 숫자를 자동으로 매겨주는 리스트 태그li: 리스트 태그a: 링

\*\*HTML: 정보 또는 설계도CSS: 디자인 또는 스타일링JavaScript: 기능과 효과웹을 만들때 고려사항 세가지웹 표준: 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격웹 접근성: 장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는

html, css, javascript 라이브코딩 할 수 있는 사이트https://jsbin.com/?html,outputhttps://codepen.io/id는 하나만 지정하고 싶을때, 즉 중복되지 않게 쓴다class는 여러개 묶어서 그룹으로 지정하

rotate(angle): 입력한 각도만큼 회전, 음수입력가능scale(x, y): width가로 x배, height세로 y배만큼 변경skew(x, y): x축, y축을 기준으로 입력한 각도만큼 비튼다.translate(x, y): 선택한 오브젝트의 좌표를 x,y 변경

깃 특징1\. 오픈소스2\. 여러사람이 서로 다른 컴퓨터로 협업할 수 있다3\. 작업한 내용을 커밋으로 만들어 저장한다커밋 순서git add -> git commit -> 커밋 메시지 입력새로운 브랜치 만들기: git branch <브랜치명>특정 커밋으로 되돌리기

자동줄바꿈 word wrap 설정하는법: https://jaeu0608.tistory.com/83vsc 확장프로그램 git graph: git log 대체run.htmljavascript를 html 파일 내부의 script태그 안에 작성하여 사용할 수 있다.

자바스크립트는 숫자 데이터 타입을 정수, 소수 나누지 않고 Number 하나로만 사용한다.자바스크립트에서 숫자 + 문자는 숫자를 문자로 변환시켜 문자계산을 한다.근데 뺄셈은 만약 문자가 '12' 이런식이라면 숫자로 변환시켜서 계산한다.문자열에서 i번째 문자 출력괄호 안

깃명령어 한번에 가능브라우저 내장함수: build-ain function애플리케이션 프로그래밍 인터페이스: api...을 버튼으로 설정하여 누르면 글귀가 펼쳐지게 설정.방법은 두가지이다.1\. 글귀를 span태그 안에 넣어 display:none 해뒀다가 ...을 누르

객체 지향 모델로써 구조화된 문서를 표현하는 형식으로, 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 하는 인터페이스웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 가리키는 말로, 자바스크립트는 이것에 반응하여 특정 동작을 수행할 수 있

오늘은 강의가 없고 지금까지 배웠던 내용을 활용해서 자기소개 페이지를 만들어보는 과제가 주어졌다. 난 디자인쪽에 일가견이없기때문에 보기편한정도로만 만들어서 제출했다. 근데 자바스크립트도 써야하는데 아이디어가 딱히 없어서 html, css로만 만들었다.. http://c

addEventListener로 click 이벤트 속성을 부여할 수 있다.index.htmltype="module" : 외부에서는 접근불가콜백함수: 나중에 실행되는 함수 (내가 아니라 시스템(브라우저)가 호출)브라우저가 첫번째 파라미터로 event객체를 넘겨준다. ta

컴포넌트 특징1\. 컴포넌트는 독립적이고, 재사용이 가능한 작은 UI조각이다.2\. render()를 통해 HTML 요소를 반환하는 함수이다.3\. 자바스크립트 함수와 동일한 용도로 사용된다.4\. 코드를 효율적으로 관리할 수 있게 도와준다.IndexedDb 설명1\.

1. 이고잉님 강의 p5.js 애니메이션을 제어할 수 있는 프레임워크이다. !codepen[mcprotein/embed/OJzdaYB?default-tab=html%2Cresult" ] https://p5js.org/ko/ CRUD (백엔드없이)

스코프(scope): 코드가 현재 실행되는 환경, 맥락을 의미하는 단어실행 컨텍스트(execute context)에 포함되는 것: 스코프 체인, this 포인터, variable objects아무런 코드가 없을경우 this는 window를 가리킨다자바스크립트 엔진은 코

1) 자바스크립트 코드 실행 단계에서 발생하는 일생성 단계 - 실행 컨텍스트 생성실행 단계 - 변수 값 할당, 코드 실행2) (?)에 let을 넣으면 에러가 발생한다.자바스크립트 엔진은 자바스크립트 코드를 읽어 실행하는 프로그램이다.작성한 자바스크립트 코드는 자바스크립

오늘은 비동기를 배웠다.npx json-server --watch db.json 터미널에 이거 치면 그 폴더에 db.json파일이 생성되고 서버가 켜진다.json 파일에 있는 데이터를 전송할 수 있게 되는 것이다.참고: https://redux-advanced

자바스크립트현재 실행중인 코드가 종료되기 전에 다음 라인의 코드를 실행할 수 있다.비동기 작업을 기다리는 동안 메인 스레드에서는 다른 작업을 실행할 수 있다.Promise나 콜백 함수 호출 시에는 비동기적으로 동작한다.PromisePromise API는 비동기 API에

json-server: json-server를 열겠다.\--watch: db.json파일 변경시 서버 재시동을 안해도 json-server에 바로 반영되게 하는 기능db.json: 파일 이름\-p 3001: 3001포트로 서버를 열겠다.콜백함수 안에 콜백함수 -> 복잡

await키워드는 async 함수 내에서만 사용할 수 있다.async 함수는 Promise를 반환한다..catch 대신 async 함수 내에서 try-catch 구문을 사용해 에러 처리를 할 수 있다.Promise를 활용한 비동기 코드를 간결하게 작성하는 문법async

Axios는 웹 브라우저와 Node.js를 위한 HTTP 비동기(작성된 순서대로 실행되지 않는 처리) 통신 라이브러리이다. 쉽게 말해서 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 사용되는 것으로 Ajax처럼 사용되는 것.Axios는 Ajax와 유사하며 API를 이용

싱글스레드장점경쟁상태 (race condition) x멀티스레드 대비 코드 복잡도가 낮음단점여러명이 일하는 병렬처리보다는 평균적으로 성능이 떨어짐멀티스레드장점평균적으로 싱글스레드보다 성능이 매우 좋음단점사용시 경쟁 상태를 고려해야함 (코드 복잡도가 높음)경쟁상태에서는

원래 자바스크립트는 웹상에서만 사용가능한 언어였다.WEB 1.0은 단방향 통신 위주, WEB2.0은 사용자와 상호작용이 가능했는데 고성능의 자바스크립트가 필요했고, V8엔진이 등장했다.이걸 브라우저 외부에서 사용하고자 하는 움직임이 있었고, 그렇게 Node.js가 탄생

한인호님 강의

타입스크립트자바스크립트의 상위 집합자바스크립트의 한계를 해결타입스크립트를 쓰는 이유동적 타입을 정적으로 선언할 수 있다.타입 유추를 통한 타입 제어가 가능하다.컴파일 시점에 오류를 포착할 수 있다.JavaScript에서 찾을 수 없는 추가 코드 기능을 제공한다.동적 타

일반적으로 변수, 함수, 클래스에 타입 체크를 위해 사용된다.직접 인스턴스를 생성할 수 없고 모든 메소드가 추상 메소드이다.추상 클래스의 추상 메소드와는 달리 abstract키워드는 사용할 수 없다.ES6는 인터페이스를 지원하지 않지만, TypeScript는 인터페이스

nodemone과 비슷한 기능\-> lite-servernpm install lite-server --save-devhttps://www.npmjs.com/package/lite-servernodemon vs. lite-server 차이점https:/

00 NPM 설명 1) NPM이란 Node.js 프로젝트를 관리하기 위한 도구이다. 2) 다양한 라이브러리 및 도구 설치나 프로젝트의 의존성을 관리하기 위한 명령어를 제공한다. 3) npm install [package-name] --global명령어를 이용해 패키지

mongoDB 설치예전에 설치했떤거같은데 혹시몰라서 재설치했다.homebrew로 4.4버전을 설치했고, mongodb compass도 설치해주었다.설치참고: https://velog.io/@fcfargo/TIL-MongoDB-Mongoosemongodb 권한

어플리케이션 미들웨어use 나 http method 함수를 사용하여 미들웨어를 연결할 수 있음미들웨어를 모든 요청에 공통적으로 적용하기 위한 방법HTTP 요청이 들어온 순간부터 적용된 순서대로 동작 함라우터 미들웨어router 객체에 미들웨어가 적용되는 것 외에는 어플

Mongoose ODM 사용 순서1\. 스키마 정의2\. 모델 만들기3\. 데이터 베이스 연결4\. 모델 사용mongoDB관련 코드들은 대부분 비동기라서 async/await 처리를 해줘야한다.mongoose.connect 또한 비동기models/post.jsindex

router메소드의 request handler만 따로 controller폴더에 파일을 생성해서 분리할수 있다. 마치 모듈처럼.일반적인 웹 방식의 호출에서는 html 데이터를 반환하지만 브라우저가 아닌 다른 기기 (임베디드, 웹을 사용하지 않는 다른 소프트웨어/하드웨어

utils/async-handlersroutes/posts.jsrequest handler를 asyncHandler 안에 넣어 그 안에서 try catch로 에러를 거른다음 진행하는것이다.이렇게하면 라우팅에서 에러를 잡을 필요가 없다.이 코드는 쿼리로 한페이지에 표시되

app단에서 localhost:3000/users로 연결시켜놨다.models/newuser.jsuserSchema를 만들어준다.간단하게 이메일과 비밀번호만 설정하고, newusers 모델을 만들어준다.views/blog/login.ejslocalhost:3000/use

utils/hash-password.js암호화 라이브러리 crypto를 사용했다.sh1 방식으로.routes/index.jshash-password.js 파일에서 만든 함수로 암호화를 해주고 있는 모습이다.passport는 strategy를 설정해줘야 한다.passpo

JSON Web Token: 인증을 위한 정보를 특별한 저장소를 이용하지 않고, 전자 서명을 이용하여 확인하는 방법header - 토큰의 타입(jwt), 데이터 서명 방식payload - 전달되는 데이터signature - 헤더와 페이로드의 전자서명JWT는 Web To

엘리스 1차 프로젝트를 했다.쇼핑몰 사이트를 만드는 것이였는데, 특이하게도 프론트엔드와 백엔드가 같은 프로젝트앱 안에서 작업한다.폴더구조는 다음과 같다.전체적으로 봐서는 백엔드 앱인데, views폴더 내에서 프론트엔드가 작업한다.백엔드는 express.js, 프론트엔드

create-react-app에서는 index.js를 가장 처음 읽는다.리액트는 사용자 정의 태그를 만드는 기술이다.리액트에서는 사용자 정의 태그를 컴포넌트라고 부른다.컴포넌트를 부품으로 조립해서 완제품을 만드는 것이 리액트를 이용한 개발이다.컴포넌트의 이름은 반드시

React : 사용자 인터페이스를 만들기 위한 JavaScript 라이버르리 중 하나. 페이스북과 인스타그램에서 개발 및 관리하고 있는 오픈소스이다.UI를 구성하기 위해 "컴포넌트"라는 단위로 개발을 진행한다.React는 내부적으로 Virtual DOM(가상 DOM)을

출처: 엘리스 , https://ko.reactjs.org/docsnpx create-react-app@latest .git remote add origin 깃주소package.json에 homepages 추가npm run buildnpx gh-pages -d

Props컴포넌트에 원하는 값을 넘겨주기 위해서 사용한다.함수를 전달할 수 있다.값을 변경할 수 없다.부모 컴포넌트에서 자식 컴포넌트로만 전달이 가능하다.Props가 변경되면 컴포넌트가 다시 렌더링 된다.모든 자바스크립트 표현을 전달할 수 있다.부모 컴포넌트로부터 전달

Hook은 컴포넌트에서 데이터를 관리(State)하고데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다.Deps를 지정하지 않더라도 컴포넌트의 생성/소멸 단계에서 Effect Callback 함수가 호출된다.컴포넌트가 최초로 렌더링될 때, 지정한 State

& : 현재 css요소 가리킴. 여기서는 styled.input 을 의미이거는 css요소가 input창일때 화살표로 증감버튼나오는거 없애는 코드이다.

번들 사이즈에 대한 고려\-> CSS 코드가 차지하는 사이즈는 무척 중요한 요소앱 성능에 대한 고려\-> animation, transition 등 유저와의 상호작용에서 스타일 코드의 성능이 중요 요소사용자에게 유리한 UI/UX 고려\-> 스타일링에 대한 지식으로, 고

immutable : https://pks2974.medium.com/immutable-js-%EA%B0%84%EB%8B%A8%EC%A0%95%EB%A6%AC-bbd5ad20bbdfreact-router-dom : https://reactrouter.

01 SPA와 라우팅 SPA

04 API와 Axios 1 POST GET PUT DELETE