TIL

변수 타입 함수

string()은 숫자를 문자열로 변환하는 함수이다.let txt=~라는 문자열 변수 가정txt.length() indexOf()왼쪽에서 오른쪽으로 검색lastIndexOf() 오른쪽에서 왼쪽 방향으로 검색zero based index system 없으면 -1 반환to

반복할 조건을 초기화 , 조건식 , 증감문 순으로 넣어준다반복할 조건 중, 초기화,증감문은 따로, 조건식만 괄호 안에 넣어준다

터미널은 CLI(Command-Line-Interface)이다터미널 프로그램에서 키보드의 입력을 확인하고 편집할 수 있는 공간을 Prompt라고 부른다pwd 현재위치 확인하기print working directorymkdir 새로운 폴더 생성하기make director

removeChild와 remove의 차이remove() 는 노드를 메모리에서 삭제하고 종료합니다. 하는데 반해, 반면 removeChild()는 노드를 삭제하는 것이 아닙니다. 메모리에 해당 노드는 그대로 존재하며, 부모 노드와의 부모-자식관계를 끊어 DOM 트리에서

함수를 리턴하는 함수함수를 인자로 받을 수 있는 함수인자로 받아지는(들어가는,불러진) 함수

매개변수(parameter)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미합니다.인자(argument)란 함수가 호출될 때 함수로 값을 전달해주는 값을 말합니다.\--> 매개변수는 함수를 선언할 때 주는 값이고 인자는 함수를 호출할때

자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받는다.함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.함수의 상위 스코프를 결정하는 방식인 렉시컬

자바스크립트에서 원시 자료형과 참조 자료형이 무엇인지 알 수 있다.원시자료형 : string, number , boolean , undefined , null , symbol참조자료형 : 함수 , 객체 , 배열타입마다 다른 속성과 메소드가 있다는 것을 이해할 수 있다.

문자열의 속성과 메소드를 이용해 원하는 형태로 만들 수 있다.문자열의 length라는 속성을 활용해 길이를 확인할 수 있다. str.length문자열의 글자 하나하나에 접근할 수 있다. str1문자열을 합칠 수 있다. word1 + " " + word2문자열을 원하는

for와 while의 차이에 대해서 설명할 수 있다.반복문에 조건문을 적용하여 특정 조건에서만 코드가 실행되도록 할 수 있다.이중 포문이 무엇인지 이해하고 활용할 수 있다.

조건문 안에 처음 변수를 선언하면 scope때문에 나중에 그 변수를 사용할 수 없다. 웬만하면 변수선언은 전역에다가 하자.

CSS의 사용목적을 이해할 수 있다.콘텐츠의 배치와 위치 (레이아웃 디자인)텍스트를 강조하거나 밑줄을 치는 등, 최소한의 타이포그래피 (Typography)위의 요소를 갖추고 있으면 더 나은 사용자 경험(UX, User expirenece)을 제공할 수 있습니다. CS

🙆‍♀️ 리눅스 터미널에서 기본적인 명령어를 사용할 수 있다.pwd: 현재 위치를 확인하는 명령어mkdir: 새로운 폴더를 생성하는 명령어nautilus: 현재 폴더를 파일 탐색기로 여는 명령어cd: 폴더에 진입하는 명령어touch: 새로운 파일을 생성하는 명령어c

while문은 조건문이 참일 때 실행되는 반복문이다. 조건은 문장안이 실행되기 전에 참, 거짓을 판단한다.<조건>반복이 시작되기 전에 조건문은 참,거짓을 판단받게 된다. 만약 조건문이 참이라면, while문 안의 문장들이 실행된다. 거짓이라면, 문장은 그냥 whi

문자열과 배열의 타입 변환을 돕는 메소드를 알고 있다.띄어쓰기 (" ")로 문자열을 구분하여, 배열로 변경할 수 있다. str.split(" ").join(" ")문자열을 요소로 가지는 배열을 띄어쓰기 (" ")로 구분한 문자열로 변경할 수 있다.배열 요소(elemen

객체 18번 객체 19번 객체 21번

객체의 key는 보기엔 ""가 없지만 string 타입이다.

🙆‍♀️ 다양한 CSS 셀렉터 규칙을 이해할 수 있다.🙆‍♀️ 후손 셀렉터와 자식 셀렉터의 차이는 반드시 알아야 합니다.🙆‍♀️ 레이아웃을 위한 HTML을 만들 수 있다.🙆‍♀️ Flexbox를 이용해 레이아웃을 만들 수 있다. (다음 속성에 대한 이해가 있어야

🙆‍♀️ 원시 자료형(primitive type)과 참조 자료형(reference type)의 구분이 왜 필요한지에 대해서 영상을 보고 이해할 수 있다.🙆‍♀️ 원시 자료형과 참조 자료형의 차이를 이해하고, 각자 맞는 상황에서 사용할 수 있다.🙆‍♀️ 원시 자료형

호이스팅

🙆‍♀️ DOM의 개념을 이해할 수 있다.🙆‍♀️ DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다.🙆‍♀️ HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다.🙆‍♀️ <script> 태그가 적용되

🙆‍♀️ 기초적인 event를 알고, event handler를 element에 적용할 수 있다onclick eventonclick 에 직접 할당하는 것과 addEventListener의 차이eventHandler 함수를 만들고, eventHandler의 첫번째 인자

🙆‍♀️ 일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다.🙆‍♀️ 고차 함수(higher-order function)에 대해 설명할 수 있다.🙆‍♀️ 고차 함수를 자바스크립트로 작성할 수 있다.🙆‍♀️ 배열 내장 고차함수 fil

🙆‍♀️React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.🙆‍♀️JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.🙆‍♀️React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.🙆‍♀️create-reac

🙆‍♀️SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다.🙆‍♀️SPA의 장, 단점에 대해 이해하고 설명할 수 있다.🙆‍♀️와이어프레임을 보고 어느 부분을 컴포넌트로 구분할 지 스스로 정할 수 있다.🙆‍♀️React에서 npm으

🙆‍♀️ state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.🙆‍♀️ React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다.🙆‍♀️ Re

useState 자체가 HOOK 이며, HOOK은 특별한 함수이다.useState의 특별한 기능은, state를 function component 내부에서 사용할 수 있도록 해준다는 점이다.useState는 현재의 state 값(count)과 이 값을 업데이트하는 함수

section2의 시작이다!🙆‍♀️ 클래스와 인스턴스라는 용어를 이해할 수 있다.하나의 모델이 되는 청사진 객체 = class클래스를 바탕으로 한 객체 = instance🙆‍♀️ new 키워드의 사용법을 이해할 수 있다. instance를 만들때 사용한다.🙆‍♀️

🙆‍♀️JSON 구조가 재귀 함수를 사용할 수 있는 Tree 구조임을 이해할 수 있다. (stringifyJSON)🙆‍♀️JSON.stringify 와 JSON.parse 가 seriealize, deserialize라는 것을 이해할 수 있다.JSON.stringi

🙆‍♀️자료구조가 무엇인지 설명할 수 있다.🙆‍♀️Stack, Queue, Tree, Graph 자료구조에 대해 이해할 수 있다.🙆‍♀️알고리즘 문제에서 Stack, Queue 자료구조를 배열로 대체하여 흉내낼 수 있다.🙆‍♀️각 자료구조의 개념과 구조를 파악하

🙆‍♀️BFS와 DFS의 개념을 이해하고 알고리즘 문제에서 사용할 수 있다.🙆‍♀️자료구조를 활용하여 알고리즘 문제에 접근할 수 있다.🙆‍♀️Array.prototype에는 Stack, Queue 사용을 위해 어떤 메서드가 존재하나요?

재귀함수는 함수의 호출이 반복적으로 이루어지기 때문에 성능에 좋지 않다고 한다. 자칫 스텍 오버플로우를 일으킬 수 있다.그렇다면 우리는 왜 재귀함수를 사용할까?알고리즘 자체가 재귀적으로 표현하는게 가독성이 좋을 때변수 사용량을 줄일 수 있다.여기서 변수 사용량을 줄인다

🙆‍♀️어떤 경우에 중첩된 callback이 발생하는지 이해할 수 있다.🙆‍♀️중첩된 callback의 단점, Promise의 장점을 이해할 수 있다.🙆‍♀️Promise 사용 패턴을 이해할 수 있다.🙆‍♀️resolve, reject의 의미와, then, ca

이벤트루프

🙆‍♀️클라이언트-서버 콘셉트를 이해할 수 있다.🙆‍♀️클라이언트-서버 아키텍처를 이해할 수 있다.🙆‍♀️HTTP를 이용한 클라이언트-서버 통신을 이해할 수 있다.🙆‍♀️API의 개념을 이해할 수 있다.🙆‍♀️브라우저의 작동 원리를 이해할 수 있다.🙆‍♀️보

🙆‍♀️REST API에 대해 이해할 수 있다.🙆‍♀️REST API 문서를 읽을 수 있다.🙆‍♀️REST API에 맞춰 디자인할 수 있다.🙆‍♀️Open API와 API Key에 대해 이해할 수 있다.🙆‍♀️Postman이 무엇인지 이해하고 사용할 수 있다.

🙆‍♀️React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.🙆‍♀️어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.🙆‍♀️State 끌어올리기의 개념을 이해할 수 있다.🙆‍♀️상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하

JSON객체를 자바스크립트 객체로 파싱해주는 역할이다.반대로 알고있었다 흑흑 ㅜ마음이 급할땐 될 코딩도 안된다. 마음을 가라앉히고 코딩을 해야한다는 점을 새삼스럽게 느꼈다 ㅜ

HTTP 요청/응답을 브라우저를 통해 확인할 수 있고, 해당 내용을 읽을 수 있다.HTTP 다양한 요청 방식과, 응답 코드에 대해 이해할 수 있다.node.js의 내장 http 모듈을 사용할 수 있다.http 모듈 사용시에 서버에 CORS 설정을 할 수 있다.Commo

미들웨어가 뭐지공식문서링크텍스트링크텍스트

balanced brackets요즘 매일 늦게 자서그런지 몸도 마음도 너무 지쳐버렸다. 운동을 꾸준히 하고 적어도 2시엔 자러가야 다음날 지장이 없을 것같다.

상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다

하나의 집합을 의미하는 문자열을 입력받아 각 문자를 가지고 만들 수 있는 모든 부분집합을 리턴해야 합니다.전에도 도저히 이해가 안되었는데 그림을 그리고 나니까 이해가 되었다.

🙆‍♀️파일의 소유자와 파일에 적용된 사용 권한을 확인하고 이해할 수 있다. ls -l🙆‍♀️파일에 적용된 사용 권한을 변경할 수 있다. chmod맨 앞에 d는 폴더라는 뜻이다. 파일이면 -로 나타난다.user:user는 파일의 소유자입니다. 기본적으로 파일을 만든

3 Tier Architecture 를 이해한다.영속성의 개념을 이해하고, 데이터베이스의 필요성을 인지한다.데이터베이스 종류를 이해한다.관계형 데이터베이스와 NoSQL의 차이를 이해한다.관계형 데이터베이스 및 NoSQL이 어떤 경우에 적합한지 이해한다.Learn SQL

🙆‍♀️ 통계를 위한 쿼리를 만들 수 있다.🙆‍♀️ 앱에 필요한 테이블과 필드, 그리고 관계를 부여할 수 있다.🙆‍♀️ 1:N, N:N 관계를 이해하고, 데이터베이스에서 테이블을 조작할 수 있다.🙆‍♀️ Foreign Key, Primary Key에 대해 이해할

GROUP BYJOIN

자꾸 sql 사용할때 처음에 USE 사용하는걸 까먹는다. 잊지말자.npm run test는 사실 npm t로 작성해도 적용된다.sql에서 나가고싶으면 exit 명령어를 쓰면 된다.어떤 스프린트는 서버를 키고 test를 돌리고 어떤 스프린트는 서버를 끄고 test를 돌려

여기서 -Dcmarket이 뭘까? 생각했다.\-D는 옵션으로 database를 가리킨다.\-Dcmarket은 cmarket이란 이름의 데이타베이스에 스키마로 테이블을 넣겠다는 의미가 된다.만약 나의 db에 test라는 이름의 데이타베이스가 있으면 -Dtest해주면 되겟

해당 유저의 주문 요청을 데이터베이스에 생성하는 함수를 작성하세요order_items테이블을 보면id는 자동생성이되고, order_id, item_id, order_quantity가 있다.그런데 order에는item_id와 order_quantity는 있지만 order

🙆‍♀️ 기본적으로 development, test, production 환경 중 어떤 환경을 사용하고 있나요?development 환경

🙆‍♀️ 암호화와 hashing, salting 등의 개념을 이해할 수 있다.🙆‍♀️ HTTP와 HTTPS의 차이점을 이해할 수 있다.🙆‍♀️ 권한 부여(Authorization)와 인증(Authentication)에 대해 이해할 수 있다.🙆‍♀️ 쿠키의 작동

토큰

oauth

a는 stack에 저장되어있고 10은 heap에 담겨있다.a는 10의 주소를 참조하고있다.하나의 js파일이 끝나는 순간 안쓰는 변수들을 stack에서 지운다.stack에서 주소가 없어지면 heap안의 변수 값이 가비지컬렉션에 의해서 없어진다.캐시는 임시데이터이다. 쿠키

git checkout -b 새로운 브랜치 이름git switch -c 새로운 브랜치 이름git checkout 새로운 브랜치 이름git branch브랜치b를 브랜치a에 병합할 것이다. 현재 위치가 브랜치b라면 git checkout 브랜치a로 브랜치 a로 이동한다.

오랜만에 또 이미 포트를 사용중이라는 에러를 만났다.listen EADDRINUSE: address already in use :::80error

Math.floorMath.ceilparse.intArray.from 배열 얕은 복사

왜 해당 id값의 url모델을 찾지 못해야 성공일까 생각했었다.1\. 클라이언트가 서버로 요청을한다.2\. 서버가 리다이렉트 시킨다.3\. 서버가 리다이렉트 시킨 응답값으로 다시 요청을 보낸다.요청을 두번 보낸다는 것이다. 처음 보냈던 요청이 found인데, 리다이렉트

history.push / 쿠키확인 2가지 방법/ url과 uri 그리고 endpoint

req.session쿠키설정

보안 인증 서버는 왜 비동기로 쓸까? 토큰에서 로그인 시에 database를 확인하는 이유는 뭘까?

웹브라우저(응용프로그램) 위에서 자바스크립트 코드가 읽혀진다.node.js코드를 v8엔진이 읽는다.운영체제 위에서 돌아가는 운영체제와 v8의차이v8은 node.js코드가 없으면 안돌아간다웹 브라우저가 js파일을 실행해준다.node.js코드가 v8엔진을 실행시킨다.운영체

특정 패턴의 문자열을 찾기위한 표현 방식이다. 형식은 /패턴/플래그 이다.

.env 파일에 환경변수를 저장하면, js 파일에서 바로 사용할 수 없다..env파일 자체는 OS의 환경변수를 변경할 수 없다.

부모에 display:flex 적용부모에서 flex-direction으로 방향 지정하기 row(기본값)

css 가운데 정렬 3가지 방법1\. text-align: center;2\. margin: 0 auto;3\. transform:translate(X,Y)

react-router 위로 스크롤

회원정보 수정 페이지 구현회원정보 수정 페이지 라우터 연결vh / vw는 현재 실행중인 스크린 크기에 따라 반응한다(스크롤바 포함o)반면 %는 부모 요소에 반응한다(스크롤바 포함x)참고

참고

요약: action객체는 dispatch 메서드에 전달되고 dispatch 메서드는 reducer를 호출해서 새로운 state 생성Redux 작동원리action은 store의 state를 어떻게 바꿀지 적어둔 정보가 담긴 객체이다.action객체는 정보를 dispatc

드디어 mypage 카테고리가 변하는 부분과 component가 달라지는 부분을 구현했다.마이페이지 유저프로필사진 변경 기능게시물/ 명언 바뀌는 토글 작동 구현\-충돌때문에 렌더링이 안되는 오류가 있었다.참고

나의 명언 불러오기 기능내가 쓴 댓글 불러오기 기능나의 명언 삭제하기 기능내가 쓴 댓글 삭제하기 기능참고

참고

참고

참고

typescriptsass

TS도 Sass도 처음 써봐서 초기 세팅이 전반적으로 오래 걸렸다.npx create-react-app my-app --template redux-typescripttsconfig.json 파일에서 컴파일옵션 "outDir" : “./dist” 을 보았다. 검색해보니

반응형에 대한 이야기가 wiki에 전혀 써있지 않다는 피드백을 받고 모바일 사이즈 프로토타입을 만들었다가장 먼저 해주어야 할 것은HTML파일 내부의 ... 안에 다음과 같이 설정해 주어야 한다<meta name="viewport" content="width=de

css 중앙정렬...

git add .은 만능이아니다. add가 안된 것들은 +를 눌러서 직접 add해주어야 한다. 소스트리를 보자. 소스트리에 변경점이있어서 숫자가 떠있으면 add와 commit을 다시 써주자

@include를 비효율적으로 사용하고 있었다.나는 mobile-only먼저 쭉 쓰고 lg도 복사해서 전부 붙여서 넣었다.앞으로는 전체 다 복붙하지말고 변하는 부분만 include를 써서 변환시켜야겠다.

@extend 를 사용해서 특정 선택자를 상속할 수 있다.참고

css에서 hover시 transition을 줄 수 있고, hover안할 때(hover했다가 마우스를 뗄 때)도 부드럽게 효과가 빠지길 원한다면 원래의 것도 transition을 주어야 한다.type오류맨날 js로 만들땐 조건이 틀리면 id를 그냥 null로 넣었는데

reducer에 객체가 담긴 배열 allConcerts를 담는데 생각처럼 되지 않았다. typescript에서 props 전달하기 방법들

객체 배열은 indexOf를 못쓴다는 걸 잊고있었다. map함수를 사용해서 해결할 수 있고 findIndex 메서드를 써서도 해결할 수 있다.참고

useEffect에다가 함수를 모조리 다 쑤셔넣는 경향이 있었는데, 하나의 함수에 실행될 다른 함수들을 다 집어 넣었다. 모조리 쑤셔넣는 걸 고쳤더니 또 다른 나의 useEffect 사용 문제점을 알아냈다. 의존성배열에 어떤걸 넣고 어떤함수가 변하는지 계획적으로 생각하

아마 내가 onClick에 삼항연산자를 너무 많이 써서 그런게 아닐까 하는게 첫번째 의심이다.그리고 5개로 포스터 정해둔걸 지우니까 작동을 했다.

HTMLDivElement 인터페이스는 HTMLElement를 확장해 div요소를 조작할 때 사용할 수 있다고 한다.참고

carousel button 위치 수정 + 모바일 점보트론 위치 수정✅ 메인카카오 모달 background누르면 나갈 수 있게 수정✅ GSAP(GreenSock Animation Platform) 사용해서 랜딩페이지 애니메이션 주기

참고

랜딩페이지 탭사이즈, 모바일 사이즈 css 조정 (fade - react reveal 라이브러리 사용)랜딩 & 메인 점보트론 - css조정해서 반응형 사이즈별로 타이밍 맞게 하기새로 알게된 것

참고

css조정해서 반응형 사이즈별로 이쁘게 배치 (30분) 메인카카오 모달 지도아이콘 (사이즈별로 보고 크기 줄이기) (5분)랜딩페이지 3번째사진이랑 마지막꺼 간격 벌리기, 마지막꺼 scroll 조금 넓게 scroll 주기탭사이즈, 모바일 사이즈 css 조정 (fade -

mobile 사이즈로 줄이면 랜딩페이지가 뭉개졌었다. 그 원인은 이미지와 요소들의 위치를 하나하나 정해준게 아니라 그냥 flex를 쓰고 justify-content:space-between으로 둬서 애니메이션을 주면 뭉개졌던 것이다.새로 알게된 것

새로 알게된 점

mainKaKao모달 수정targetIdx가 0번일때 마이너스 인덱스 포스터 누르면 가운데로 안가는거 수정새로 알게된 것

dispatch를 쓰면 일반적으로 리렌더링이 된다. useEffect 내부에서는 최초 렌더링 이후엔 api요청함수와 dispatch를 넣으면 안될 것같다. 대신 useEffect 내부에서 지역state로 바꾸어서 사용해야 한다.컴포넌트 내부에서는 전역state를 받지말

새로운 div element만들기const tweet = document.createElement('div')append를 해주지 않으면 div엘리먼트 tweet이 만들어지긴 했지만 연결되어있지 않아서 실제로 보이지가 않는다. append 메소드를 이용해 변수 twee

alias 이용해 상대경로 줄여서 사용