TIL

위키피디아에서 시맨틱웹을 아래와 같이 설명한다.'시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터

컴퓨터와 컴퓨터가 정보 교환이 가능한 거대한 통신망인터넷을 경유하여 접근할 수 있는 모든 정보매우 정적인 형태단순한 정보제공 기능서버 --> 클라이언트에게 한 방향 소통 (유저 인터렉션이 없다)동적인 웹의 등장웹 기반 JAVASCRIPT 등장HTML과 JAVASCRIP

일반적인 문서의 흐름에 따라 배치기존 본인의 위치에 top bottom left right에 따라 위치를 결정한다.위치를 이동하면서 다른 요소에 영향을 주지 않는다.2번박스에 top:20px; right:20px;를 주어도 다른 박스의 위치에 영향을 주지 않는다.가장

요소들이 줄 바꿈 하지 않고 나란히 배열된다. ex)< a >, < span >\*inline 요소는 width, height가 컨텐츠의 크기 만큼 공간을 차지하게 되어 있어 두 속성의 영향을 받지 않는다. 기본적으로 inline과 같이 줄 바꿈하지 않고 나

반복문 328번째 다시보기.아무래도 난 바보.findSmallestElement 함수를 구현해 주세요.findSmallestElement 의 arr 인자는 숫자 값으로만 이루어진 배열입니다.arr 의 값들 중 가장 작은 값을 리턴 해주세요.만일 arr 가 비어있으면 0

오픈소스 소프트웨어누구나 자유롭게 확인, 수정, 배포 가능한 코드안드로이드 android우분투ubuntu센토스 CentOS 등CLI - Command Line Interface검정화면에 흰글씨GUI - Graphic User Interface우리가 흔히 보는 파일 형식

Git -> Version Control System(vcs)코드 버전관리 하는 이유1\. 수정할 때마다 파일을 새로 만들면 관리가 힘들2\. 언제든 이전 버전 코드로 돌아갈 수 있다3\. 이력을 남기기 위해4\. 하나의 프로젝트를 여러명의 개발자들이 '협업'할 수 있

하특징인 statelessRequest, Response의 구조를 알 수 있다request의 종류를 알고, 서로 차이점대표적인response status code의 종류Hyper Text = 문서와 문서가 링크로 연결되어 있음을 뜻Transfer = 전송하다, html

리팩토링소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록, 내부 구조를 변경하는 것라고 한다..하핫레거시 코드과거에 있던 코드인데, 손 댈 수 없 다...건들면 터지고.. 알 수 없다.. basic \-기본적으로 콘솔로그 지우깅 \-id,

변수가 쓰일 수 있는 범위{}안의 영역 ex) if문 for문 함수 등block으로 지정된 영역 밖의 영역global scope에서 만든 변수, 전역변수{}쌓인 영역의 범위로컬변수, {}밖에서 쓸 수 없는 변수글로벌 변수의 범위글로벌 변수가 다른 변수에 영향을 주는 것

html/css에서 js로 dom을 조작하고 event에 반응웹의 발전에 따라 dom의 조작이 빈번해짐에 따라서 jquery가 등장jquery는 번거로운 dom조작을 단순하고 쉽게 해준다 ->그러나 발전하는 웹에 한계에 도달하면서 Angular, Vue, React가

find_longest_word 함수를 만들어 주세요.주어진 리스트안에 있는 단어중 가장 긴 단어를 찾을수 있도록 함수를 완성해주세요.console.log(find_longest_word("PHP", "Exercises", "Backend")) // --> "Exerc

npm install react-router-dom --save중 자꾸 위와 같은 오류 발생...확인해보니 자꾸 pakage-lock.json으로 가길래 몇번 반복했다ㅜ원인은 pakage.json파일에 오타가 있었다. 수정 후 재다운로드 하니 잘되었땅

1\. SPA가 무엇인지 설명할 수 있다 2\. react-router-dom를 이용해 Routes Component를 구현할 수 있다. 3\. react-router-dom에서 Routing을 하는 방법 2가지와 차이점에 대해 설명할 수 있다. 4\. <

클래스형 컴포넌트와 함수 컴포넌트의 특징 및 Hooks의 필요성에 대해 이해한다.props의 개념에 대해 한 문장으로 설명할 수 있다.state의 개념에 대해 한 문장으로 설명할 수 있다.useState 훅을 사용하여 React 컴포넌트의 상태를 관리할 수 있다.sta

개인이 사용하는 작업환경은 로컬이다 local원격저장소(깃헙)는 리모트다 remote깃헙의 프로젝트 레포지토리 에서 클론을 받는다.git clone 레포주소리모트의 마스터 환경에서 작업을 할 수 없다.그럼 마스터 브랜치가 로컬에 생성된다.로컬 환경의 마스터에도 작업을

CRA 생성npx create-react-app 만들 프로젝트cd 만들 프로젝트npm start 리액트 프로젝트를 시작한다!구성node.modulescra를 구성하는 패키지 소스코드가 존재하는 폴더package.jsoncra패키지 외 추가로 설치된 라이브러리/패키지 정

드디어 ... 난 너무 너무 너무 너무 ..휴자바스크립트로 로그인창을 disabled로 구현했었음.이렇게 쿼리셀렉터로 id,pw, login을 가져왔고 로그인바에는 disabled를 디폴트로 주었다.이벤트리스터로 input이 ㄷ르어오면 activelogin함수가 발동.

인자 2개API주소 , 객체형태로 생긴 통신 형식(ex)method: get, post)키값을 백엔드와 동일하게 해주어야 한다. fetch는 비동기.왜냐면 받아오는 데이터가 너무 방대할 경우 동기방식의 자바스크립트는 비효율적으로 코드를 읽는다. 백엔드에서 받은 응답을

이해가 안된상태로 무언가 하려니 시간만 보내고 어찌어찌 구현해도 진짜 아무고토 모르겠다.그래서,난 아무것도 모르니까 다시 천천히 해보기조금 간단하게 생각해보기내가 만들어논 재사용 할 UI함수형태로 재사용 하거나 자주 바뀔 수 있는 정보를 만든다다른 페이지를 만들 때.

해당 js에만 scss불러오기결국에는 한 페이지에 몰려오기 때문에 이름이 같으면 겹칠 수 도 있다.useState 는 항상 최상단에서 써주기 실수도 ㄴㄴuseNavigte도 마찬가지Body 태그 없어도 될 것 같아서 안 하긴 했는데 이유는 모르겠네index.js에서 라

글로 보면 이해 안된다.사용 ㄲuseNavigate사용방법부터 정리하자면, 이렇게 되면! cardContainer에 클릭이 발생할때 네비게이트를 이용해 해당 페이지로 이동한다 긍데 url에 detail만 걸려있어서 어떤 것을 클릭하던 한 url로 보내줌.ㅜ 전에 카

TIL인데 막상 프로젝트 중에 작성하지 못했다. ㅜㅜ 시간이 부족하더라도 공부하는 입장에서 당일에 작성하는게 잊지 않고 머리에 보관하는 방법인데!분발분발!쓸 때는 길지 않게 느껴져도 반복적으로 사용하기에 마지막엔 방대한 양이 줄어들었다. 머리가 안좋으면 몸이 고생한다는

팀원끼리 휴일에 모였다.첫 프론트끼리 연결시도오늘의 에러 시작..뷰포인트 나는 분명 100%로 작업했다. 왜냐면 만진적이 없기때문에..!!근데 아니었다. 나 홀로 67%로 작업 ㅜ 이게 오류의 일종이라는걸 인지하고 있었고, 심지어 블로그에 적은 적도 있다. 바보다복붙의

오늘 한거 모달/삭제 -> 회원가입페이지 로그인/회원가입에 각 input에 따로따로 value를 담아 state에 저장했는데 한번에 관리하는 방법을 찾아 적용..매우 뿌듯.state를 객체로 받아 각 인풋에 네임을 주고 받았다ex) 오늘의 한줄기획의 중요성/ 자꾸 구현

호우....이게 무슨 일이야 ? 리뷰를 통해 줄일 수 있따는 것을 알아버렸찌 모얌! 그 많던 else if는 어디로 ?이렇게 따로 담아서 정의 !에러의 모듈화 성공!나는 코드만 짜기 급급했기 때문에 이런 리팩토링이 일어날지 몰랐다.뿌듯했고 자신감이 조금 생기기도 한

조금이나마 적응되었던 sass를 뒤로 한채새로운 Styled-component를 사용하기 시작했다.처음에는 도무지 머릿속에 박스들이 그려지지 않아 헤맸는데지금은 쓰는게 익숙해졌다.유지보수에 매우 용이하다고 하는데, 체감이 되지 않아 sass를 그리워했다..근데 계속하다

라이브러리를 사용한 프로젝트 시작..어떻게 할 것인가 보다 무엇을 할 것인가를 생각하라!는 아마도 라이브러리 덕이겠지slick을 사용해 배너를 만들었따.라이브러리는 공식문서가 파헤치기가 진짜 너무 좋았다.npm install부터 띄우기까지 스텝대로 따라가면 성공옵션도

map을 돌리고 있는 컴포넌트들에게 각 다른 배경색을 주고 싶었다.이거 분명 될 것 같은데.... 스타일 컴포넌트에 style응 당연히 되지우리가 쓰는거 스타일'컴포넌트' -> props가능. ssap가능.이렇게 주고, 이렇게...props준다...그리고 map돌고 있

Next.JS를 사용한다고 했다.왜?SEO와 SSR때문에왜?오케이..SSR?Server Side Rendring의 약자사용자가 페이제 접속할 때 보여줄 페이지를 미리 준비해서 보여준다.\-> 사용자 친화적이라고 할 수 있겠다.장점1\. SEO최적화2\. 렌더링 속도가

DTD = Document Type DefinitionHTML의 문서형식을 정의해주는 것DOCTYPE을 선언하지 않을 시 각 브라우저의 기준대로 렌더링을 실행한다 (쿼크모드)다시말해, DOCTYPE을 선언해주어야 모든 브라우저에서 개발자의 의도대로 레이아웃등이 렌더된다

inline, inline-block, block, none태그마다 기본값이 다르게 적용되어 있다.none은 요소를 렌더링 하지 않는다.visibility를 hidden과 영역을 차지하지 않는다는 것에서 차이가 있다.가로 영역을 전부 차지한다. block의 다음 태그는

이벤트 버블링은 이벤트가 특정 요소에 이벤트가 발생했을 때, 이벤트가 발생한 요소보다 상위요소에 전달되는것을 의미한다.상위요소? HTML요소는 트리구조를 갖는다. 트리구조에서 한 단계 위에 있는 요소를 상위요소라 하고, 최상위요소를 body라한다.이벤트 캡쳐는 최상위요

애플리케이션 데이터를 다루기 위한 패턴Action이 일어나면 Controller는 Model이 갖고있는 데이터를 조회/업데이트하고 View에 반영사용자와 상호작용이 view를 통해 일어나기 때문에, input과 같은 입력에 따라 뷰가 모델을 업데이트할 수 도 있다.이런

오케 내가 아는 Redux는 상태 관리 라이브러리 끗.ㅎ이제부터 알아보자다음에 알아보자

프로세스: 운영체제로부터 자원을 할당받은 작업의 단위스레드: 프로세스가 할당받은 자원을 이용하는 실행흐름의 단위프로그램이 뭔지 먼저 알아야하는 것 같다..프로그램 : 파일이 저장 장치에 저장되어 있지만 메모리에는 올라가 있지 않은 정적인 상태, 어떤 작업을 실행할 수

앞에서 스레드에 관해서 알아보았다.싱글스레드와 멀티스레드를 알아보기 위해 프로세스 메모리에 대해 잠깐 살펴보자운영체제는 code, data, stack, heap 영역으로 메모리를 할당한다.앞에서 알아본것과 같이 프로세스는 독립적으로 할당하기 때문에 공유하지 않는다.그

이번 인턴기간에 타입스크립트를 사용해보고 매력적이라 생각이들었기 때문에 조금 정리를 해보고자 한다.타입스크립트는? 타입스크립트는 말 그대로 타입을 지정해준다. 자바스크립트에 타입이 추가된 것이다.그렇기 때문에 코드작성 단계에서 타입으로 인한 오류를 확인할 수 있고, 타

1\. Virtual DOMVirtual DOM(가상 돔)은 어떤 상호작용이 일어났을 때 브라우저 DOM에 접근해서 반영하는 것이 아니라 가상돔(Virtual DOM)에 접근해서 변화가 필요한 곳만 렌더링한다.즉, 가상 돔에서 변화가 필요한 곳만 확인해서 바꾼 후 렌더

프로그램이 실행되기 위해서는 메모리에 로드되어야 한다.메모리에 로드됨은 프로그램을 실행되어 지기 위해 메모리에 공간을 할당하는 것을 뜻한다.프로그램이 운영체제로부터 할당 받는 메모리에는 대표적인 공간은 4가지이다.코드(code) 영역데이터(data) 영역스택(stack

함수 호출 방법에함수 호출시 전달되는 변수의 값을 복사한다복사된 인자는 지역변수로 사용되기 때문에, 함수 내부에서 인자 값이 바뀌어도 외부 값은 바뀌지 않는다.복사하기 때문에,장점 - 원래 값에 영향을 받지 않는다. (안전하다)단점 - 메모리 양이 늘어는다.인자로 받은

자바스크립트 인터프리터가 변수, 함수의 메모리 공간을 선언 전에 미리 할당하는 것\-> 변수의 선언과 초기화를 분리 후, 선언만 코드 최상단으로 옮기는 것 인터프리터 ? 코드를 한 줄씩 위에서 아래로 내려가며 읽는 프로그램, 컴파일러와 대조되는 개념함수가 만들어지기 전

flex는 기본 축은 가로축이다. 세로축으로 정렬해줄 수 있다. 그러나 1차원적 시스템으로 수직, 수평중 하나만 관리할 수 있다.grid는 2차원적 시스템으로 수직, 수평 둘 다 관리 가능하다. 복잡한 레이아웃을 관리하기에 적합하다.두 가지 모두 아이템을 감싸고 있는

가상돔말 뜻대로 가상돔으로 어떤 상호작용이 일어나 웹페이지 구성요소에 변화가 필요할 때 브라우저 DOM에 직접 접근하여 반영하는 것이 아니라 가상돔에서 접근 후 변화가 필요한 곳에 렌더링한다.즉, 가상의 돔에서 변화가 필요한 곳만 확인 후 렌더링하여 DOM의 조작을 최

프로토타입 뜻 -> 원형....?일단 정의말고 이해해보기function machine () { this.a = "커피추출" this.b = "머신청소"}var cafe = new machine()하면 cafe를 찍었을때, 부모인 머신이 가지고 있는 a,b를

jason wen token=모바일, 웹의 사용자 인증을 위해 사용하는 암호화된 토큰header - payload - signature 구조로 이루어져있다.헤더는 토큰의 타입을 지정한다 (JWT)페이로드는 내용으로 name/value 한 쌍으로 이루어져 있다. 이 내용

브라우저에 데이터를 저장할 수 있는 공간이다.로컬스토리지와 세션스토리지의 차이는 영구성이다.사용자가 직접 삭제하지 않으면 영구적으로 저장서로 다른 브라우저 탭이라도 동일한 로컬스토리지사용브라우저를 종료해도 저장사용 예 : 자동로그인탭 단위로 세션스토리지 저장소 생성그렇

GET은 서버로부터 어떤 정보를 요청하기 위한 메쏘드이다.GET의 특징GET은 캐시가 가능하다.GET 요청은 브라우저 히스토리에 남는다.GET 요청은 길이 제한이 있다.:GET 요청은 브라우저마다 길이제한이 다르다.GET요청은 파라미터에 노출되어 보안이 취약하다.GET

함수와 렉시컬 환경의 조합. 함수가 생성될 때 외부함수를 기억해 생성 이후도 접근이 가능하다.외부함수 실행이 종료되어도 내부함수가 외부함수의 변수에 접근이 가능\-> 클로저란, A함수에서 선언한 변수a를 참조하는 내부함수B를 외부로 전달할 경우, A함수의 실행컨텍스트가

undefined 값을 대입하지 않은 변수, 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근객체 내부의 존재하지 않는 프로퍼티에 접근하려할 때return문이 없거나 호출되지 않는 함수의 실행 결과var = a;console.log(a); // undefined

저번에 정리 했던 MVC를 다시 정리하면,model, view, controller 의 약자이다modelmodel은 사용자가 편집할 모든 데이터를 갖고있다.view, controller에 관해서 아무것도 아는게 없다.viewmodel이 제공한 정보를 따로 저장하지 않는

익명함수란 이름이 없는 함수를 뜻 한다.한 번만 사용될 (재사용할 필요가 없는)때 많이 사용한다.다만, 일반함수와다르게 선언부가 호출보다 반드시 위에 있어야한다.일반함수는 함수 전체가 호이스팅되어 호출위치에 상관없이 사용할 수 있지만, 익명함수는 리터럴방식이라 선언부만