TIL

웹 서비스는 3가지로 이루어진다.HTML: 뼈대CSS: 꾸밈Javascript: 움직임기억하기그리고는 대체로 세트로 움직인다.줄맞춤을 반드시 생활화하자.실행이 안되길래 한참을 씨름하다가 전체를 드래그하고 줄 한 번 맞췄더니 돌아갔다.반점이 아닌 백틱임을 명심하자.방명록

어제 매니저님으로부터 5주차에 만드는 버킷리스트에 CRUD 기능을 구현하라는 숙제를 받았다.기본적으로 Create, Read, Update 기능은 있었기 때문에 Delete만 구현하면 되었다.먼저 app.py에 pymongo 코드를 추가하고,index.html에 삭제

Git과 Github > Git과 Github 둘 다 많이 들어 본 용어지만 써본 적이 없거니와 그 개념조차 제대로 모른다. 그래도 이제는 확실하게 알 때가 되었다. 본격적인 공부는 내일 할 계획이지만 간단한 개념부터 짚고 가자. Git: 내 로컬 저장소의 소스 코

과제에서 영화를 삭제하는 시도를 했다. movie_delete를 추가하였다. 아래에서 card-title 부분에 id를 추가하지 않고 title자체를 빼서 서버에 보내려다 실패하고 몇 시간을 삽질했다. id를 통해 다 같은 title에 순번을 부여하였다. 기술매니저

오늘은 입학시험이 있었다.문제는 파일을 배포했을 때 발생했다.로컬 환경에서는 잘 구동되었던 파일이 멈춘 것이다.이에 따라 내가 찾은 해결책은 다음과 같다.mongoDB의 Network Access에서 Anywhere 주소를 추가한다.ec2에서 인바운드 규칙의 포트를 확

JavaScript는 '웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어로 웹을 위한 인터프리터 언어이자 객체 기반의 스크립트 프로그래밍 언어이다.HTML의 특정 요소들을 선택하여 다양한 이벤트에 따라 어떤 동작을 하도록 기능을 넣고, 조작을 할 수 있으며,

1.해쉬 자료구조해시(hash)구조란, 키(key)와 값(Value)쌍으로 이루어진 데이터 구조이다.해시 구조에서는 key를 이용하여 데이터(value)를 빠르게 찾을 수 있는 장점이 있다.이 때 key는 해시 함수(hashing function: key값에 대한 연산

자바스크립트 Array.prototype이고, 배열에서 원하는 값 또는 식별자를 찾아내는 메서드이며, 배열을 순차 반복한다는 공통점이 있다.arr.find(callback)판별 함수를 만족하는 첫 요소를 반환한다.arr.findIndex(callback)원하는 요소의

자주 쓴 메서드 몇 개 정리repeat() 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환한다.findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환한다.만족하는 요소가 없으면 -1을 반환한다.reduc

Math.max() 함수는 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를 반환한다.sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다.정렬은 stable sort가 아닐 수 있다.기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른

replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환한다. 그 패턴은 문자열이나 정규식(RegExp)이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있다.pattern이 문자열 인 경우,

조원과 함께 스코프, 호이스팅, 실행 컨텍스트 등에 대한 조사를 한 후 공유를 하는 시간을 가졌다.scope는 우리말로 번역하면 범위. 즉 스코프란 변수에 접근할 수 있는 범위JS에서는 전역 스코프와 지역 스코프대부분의 프로그래밍 언어는 블록 레벨 스코프를 따르지만 J

마침내 React를 배우는 첫 날이 지났다.다음은 오늘 과제로 조사한 내용 중 일부이다.SPA 방식과 MPA 방식은 무엇이고, 어떤 장/단점을 가지고 있나요?SPA(Single Page Application) 혹은 웹 앱(Web App)은 하나의 페이지 안에서 해당되는

props의 개념\-부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터, 다시 말해 컴포넌트 간의 정보 교류 방법.\-props는 반드시 위에서 아래 방향으로 흐른다. 즉 부모 -> 자식 방향으로만 흐른다.(단방향)\-props는 반드시 읽기 전용으로 취급하며, 변경하지

매번 필기를 찾아보며 git을 쓰다보니 불편해서 명령어를 정리해야겠다는 생각이 들었다.cd 폴더 이름: 해당 디렉토리로 이동cd..: 상위 폴더로 이동mkdir 폴더 이름: 디렉토리 생성touch 파일 이름: 빈 파일 생성ls: 현재 디렉토리 폴더, 파일을 보여줌git

DOM의 의미와 특징 -DOM ( The Document Object Model, 문서 객체 모델)은 HTML, XML(Extensible Markup Language) 문서의 프로그래밍 interface이다. -nodes와 objects로 문서를 표현한다. -웹페이지

시멘틱 태그는 div 태그의 기능과 마찬가지로 block element이면서 사이트의 구조(레이아웃)을 설계하기 위한 태그이다.HTML의 구조를 설계하는 데 있어 태그에 의미를 부여함으로써 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어졌다.SEO 최적

오늘 공부한 부분 정리\-일반적인 방법: 배치성으로 처리 (배치 업데이트 = React에서 렌더링을 위해 state를 파악)\-함수형 업데이트: 명령들을 모아서 순차적으로 한 번씩 시행렌더링이 잦다 => 성능 이슈 => React에서는 명령들을 모아 한 번에 처리하는

\-동일한 데이터는 항상 같은 곳에서 가지고 온다.\-즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다.\-리액트에서는 setState 메서드를 활용해야만 상태 변경이 가능하다.\-리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.\-변경은 순수함수로

자바스크립트의 컴파일러는 토큰화(Tokenizing)와 렉싱(Lexing)을 처음에 하는데 이는 코드를 토큰 단위로 분리하여 의미를 매핑시키는 단계이다.Lex-time이란 토큰에 의미를 부여하는 렉싱 과정을 말하며, 이 때 자바스크립트의 스코핑 개념인 렉시컬 스코프가

토요일 0900부터 일요일 0700까지 철야 풀스택 프로젝트를 하느라 TIL이 늦어졌다.로그인이라는 생소한 부분을 자진해서 맡았는데, 팀원들에게 많이 배웠다.여러 사용자가 하나의 서비스를 이용할 때, 서버는 누가 어떤 요청을 보냈는지 파악해야 한다.이 때 프론트엔드는

은 HTML, XML(Extensible Markup Language) 문서의 프로그래밍 interface이다.nodes와 objects로 문서를 표현한다.웹페이지의 객체 지향 표현이며, 웹페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을

현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식, 일반적인 프로그래밍 세계에서는 코드는 모두 동기적으로 실행된다. 즉, 앞선 코드가 끝나야만 그 다음 코드가 수행이 된다.실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식setTimeout, a

새 TodoList를 실행하는데 오류가 났다.Can't resolve 'react-redux'구글링을 해보니 대체로 yarn 이용자는 node_modules 폴더와 yarn.lock, npm이용자는 node_modules 폴더와 package.lock.json파일을 지

useSelector에 대해 다시금 생각해보는 시간을 전 조원들과 함께 가졌다.정리를 하고 나니 원리가 머릿속에 좀 더 명료하게 그려졌다.여러 번 써보면서 익숙해지는 건 별개의 문제지만...

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트이다. 동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있다. 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRe

리덕스 툴킷은 리덕스를 개량한 것으로 생각하면 된다.리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생했고, 리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 가능들을 흡

본격적인 복습을 하는 중이다. 어제 TIL을 못 쓴 핑계를 대자면 복습하느라 피곤했다.'props'가 input, return이 output제목은 대문자로 시작함수가 시작되는 부분부터 return 사이는 JavaScript 영역return문 안쪽은 JSX(JavaScr

keys(), values(), entries()를 사용할 수 있는 자료구조는 다음과 같다.MapSetArray일반 객체엔 다음과 같은 메서드를 사용할 수 있다.Object.keys(obj)-객체의 키만 담은 배열을 반환한다.Object.values(obj)-객체의 값

리덕스에서 dispatch를 하면 action이 reducer로 전달이 되고, reducer는 새로운 state를 반환한다.미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣어서 할 수 있다.보통 Redux 미들웨어를 사용하는 이유는 서버와의 통신을 위해

REST(Representational State Transfer) API는 다음의 구성으로 이루어져 있다.자원(Resource): URL행위(Verb): HTTP METHOD표현(Representations)Uniform (유니폼 인터페이스)Uniform Interf

브라우저를 통해 무언가를 보기 위해서는 tag로 표현되어야 함.웹페이지라는 것은 결국 html을 통해 표현이 된다.html이 결국 웹페이지를 통해 전달하고자 하는 모든 컨텐츠의 집합체이다.문서의 구조와 정보 위계가 명확하게 보이고, SEO에 도움이 된다.코드를 짜는 것

blockquote cite='인용 사이트': 내용 전체가 하나의 인용문일 경우 사용q(quotation): 문장 내에 들어가는 인용문일 경우 사용cite: 인용 출처div(division): 의미가 없으나 css 스타일링에 유용span: 의미가 없고, text lev

: attr controls, attr (loop) autoplay 사용 형태도 가능, src 사용 시 type도 추가해주면 좋음\*audio와 video 치환 가능<iframe src='' frameborder=''></iframe>: HTML 문서

console.log('로그 - 기본적인 출력')console.info('로그 - 기능적으로는 log와 같음. 사용하기에 따라 용도 구분 가능')console.warn('경고 - 문제가 될 수 있는 부분')console.error('오류 - 에러 발생 상황')let은