전체 글

리액트는 Meta에서 만든 오픈소스 JS 라이브러리이며, 가장 많은 개발자들이 사용하는 프론트엔드 기술이다. 웹 페이지의 UI를 구현하는 JS 라이브러리로 이해하자 [리액트의 특징 2개] 1. 컴포넌트 기반의 UI 표현 같은 코드를 여러 페이지에 중복으로 사용한다면, 하나의 파일에 수정사항이 발생했을 때 중복 코드가 존재하는 모든 파일을 수정해야한다. 리액트는 중복될 요소들을 ‘컴포넌트’ 단위로 모듈화 한다. 해당 요소가 필요한 페이지에서는 모듈 시스템을 통해 불러다가 쓴다. 즉 수정사항이 발생해도 하나의 ‘컴포넌트’만 수정하면 된다. 2. 편리한 업데이트 업데이트는 상호작용(인터렉션)을 의미함 업데이트: 사용자의 행동(버튼 클릭, 메세지 입력)에 웹이 실시간으로 반응하는 것 [Virtual DOM] 프..

React와 Next는 모두 Node.js를 기반으로 구동되는 라이브러리이다. Node는 자바스크립트를 실행시키는 실행 환경(구동기)을 말한다. [js의 역사] JS는 페이지 내부에서 발생하는 아주 단순한 기능을 개발하기 위해 만들어짐 그래서 애초에 웹 브라우저 내부에서만 작동할 것이라 예상하고 설계됨 but Node.js의 등장으로 언제 어디서든 사용할 수 있는 범용적인 언어가 됨 Node.js는 js의 태생적 한계를 넘어설 수 있게 도와줌 Node.js 환경에서는 JS로 어떤 목적이 있는 프로그램을 만들 때 패키지라는 단위로 만든다. 리액트,넥스트도 다 패키지로 만들어진다 npm init 을 통해 package.json이라는 새로운 패키지를 만들 수 있다. node (경로/파일명) 을 입력하면 노드를..

★console.log만 찍어도 기록하자는 마인드★ 고1때 C언어로 트와이스 TT 가사 나오는 프로그램을 만들고 티스토리에 올렸던 적이 있는데, 뭔가 그때로 돌아간 느낌 #include int main(void) { int userNum,hour,min; printf("초 입력 : "); scanf("%d",&userNum); hour = userNum / 3600; userNum -= hour * 3600; min = userNum / 60; userNum -= min * 60; printf("결과 : %d시 %d분 %d초",hour,min,userNum); return 0; }

[상단 태그] DOCTYPE - 문서가 최신 형식인 HTML5로 작성됐다는 것을 의미함 - 선언하지 않을 경우 옛날 브라우저를 모방하여 HTML 문서를 읽는다. - 기계가 읽을 정보인 메타데이터가 담기는 곳이다 (페이지의 제목, 파비콘(아이콘), 기타 메타정보, CSS,JS의 코드 및 링크) - 브라우저의 탭에 표시 - 브라우저 즐겨찾기의 제목으로 표시 - 검색엔진 검색결과의 제목으로 표시 [meta 태그와 속성들] - 페이지가 어떤 문서로 작성되었는지를 명시한다. - UTF-8이란 전세계 거의 모든 문자를 표현할 수 있는(유니코드) 형식이다. - 문서 저장형식도 UTF-8로 맞춘다. - html 태그의 lang 속성은 검색 엔진에서 이 사이트가 어떤 언어로 되어있는지를 알려주는 것이고, charset은..

flex는 요소를 포함하는 부모에게 적용하는 속성과 자식에게 적용하는 속성으로 나뉜다.    [flex 컨테이너 부모에게 적용되는 속성] display를 flex로 지정하면 플렉스 방식으로 자식 요소들을 배치하게 됨  flex-direction에 따라 안에 있는 내용들의 정렬하는 축이 달라진다.  - flex-direction : row   세로 정렬(왼쪽에서 오른쪽으로)- flex-direction : column   가로 정렬 (위에서 아래로)- flex-direction : row-reverse  세로 정렬(오른쪽에서 왼쪽으로)- flex-direction : column   가로 정렬(아래에서 위로) 위의 값에 따라 justify-content, align-items, align-content등의..

border 속성은 요소에 테두리를 줄 수 있다.굵기, 스타일, 색을 지정할 수 있다.ex) border : 2px solid black; box-sizing 속성은 너비와 높이 값에 padding과 border값을 포함시킬지 결정 - box-sizing이 content-box일 때는, 너비와 높이에 padding과 border를 제외시키고, 안쪽의 텍스트 박스부분만 적용- box-sizing이 border-box일때는 너비와 높이에 padding과 border값을 포함시킴 border-radius 속성은 모서리를 둥글게 함      overflow 속성은 부모 요소보다 높이나 너비값이 큰 자식요소를 나타내는방법을 지정할 수 있다. overflow에 x,y축을 함께 주거나, overflow-x, over..