타코벨코딩

인라인이냐 블록이냐 display & border 블록 레벨 요소 VS 인라인 요소 블록 레벨 요소 인라인요소 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다. [div, p,h1] 자기에게 필요한 만큼의 공간만 차지한다 [span,a] 만약 반대로 인라인 요소가 a태그가 블록을 형성하고 싶어 그럴 때 사용하는 방법은? display 속성 (사용하기) : display 에는 미리 정의되어 있는 키워드를 속성값으로 지정한다. display 속성은 요소를 블록과 인라인 요소 중 어느쪽으로 처리할지 정의한다. div{ display: block} a{display:block} inline : 인라인으로 처리한다. [필요한영역] block : 블록레벨로 처리한다. [전체영역] inline-block: ..

텍스트 꾸미기 속성 font-family : 글꼴을 정의한다 font-size: 글자 크기를 정의 text- align : 텍스트 정렬 방식을 정의 color: 글자 색상을 정의 💊font-family : 글꼴을 정의한다 *{ font-family : Time, monospance,serif} 폰트 페밀리: 요소를 구성하는 텍스트의 글꼴을 정의한다. 글꼴명을 속성값으로 지정한다. 여러개의 글꼴을 연달아 기입하여 우선순위를 지정할 수 있다. 💊font-size: 수치와 단위를 지정해 글자의 크기를 정의할 수 있다. px rem em px : 모니터 상의 화소 하나 크기의 대응하는 절대적인 크기 rem :html 태그 폰트 사이즈에 대응하는 상대적인 크기 배수 만큼 크기 조절한다! em :부모 태그 (상위태..

Css란?(Cascading Style Sheets ) Html 문서를 아름답게 꾸며주는 css 언어이며, 계단식 멋을 내다 (종이) 한장 -> 계단식으로 스타일을 정의하는 문서 이다 Css는 Html 문서에 스타일을 더해준다. HTML 문서는 태그가 태그를 포함하는 계단식 구조를 지니고 있다. Html 문서 + css 문서 => 문서 열기 => 코드 해석 문서 자체는 독립적으로 존재할 수 잇지만, 그 목적이 구조화된 html 문서의 스타일을 정의하는데 있으므로 Html 문서가 없는 css 문서는 사실상 의미가 없다. [정의] HTML : 웹 문서의 콘텐츠를 구성하는 언어 CSS : 웹 문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치) => HTML과 함께 사용되지 않는 CSS는 단순 텍스트일..

문제설명 : 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다. 제한 조건: n은 1이상 8000000000 이하인 자연수입니다. n return 118372 873211 function solution(n) { return parseInt(n.toString().split('').sort((a, b) => b - a).join('')); } 차차! 문자열 parseInt 함수를 사용해 문자열을 정수로 ! 변환해야한다! 주어진 정수 n을 먼저 문자열로 변환합니다. (toString() 함수 사용) 문자열을 문자 배열로 분할합니다. split 문자 배열을 큰 순서에..

리액트에서 컴포넌트를 선언하는 방식은 두 가지다. 클래스형 컴포넌트 함수형 컴포넌트 클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇일까? 특징 클래스형 컴포넌트 - state 기능 및 라이프사이클 기능을 사용할 수 있다.- 임의 메서드를 정의할 수 있다.- render함수 가 꼭 있어야한다. - render함수 내에서 보여주어야 할 JSX를 반환해야한다. 함수형 컴포넌트 - 클래스형 컴포넌트 보다 선언하기가 훨 씬 편하다.- 클래스형 컴포넌트보다 메모리자원을 덜 사용한다.- 프로젝트 완성 후 빌드하여 배포할때 클래스형 컴포넌트보다 결과물의 파일크기가 작다.- state와 라이프사이클 API의 사용이 불가능하다. (리액트 16.8v. 업데이트 이후 Hooks 기능 도입으로 사용가능해짐)

번들러란? import 로 모듈을 불러왔을 때 모듈을 모두 합쳐서 하나의 파일을 생성해주는 것 읻가. 리액트에서 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되며, 프로젝트 생성 과정에서 node_modules디렉토리에 react모듈이 설치된다. → 그러면 import구문을 통해 리액트를 불러와서 사용할 수있는데 여기서 한가지 알아야 할 점이 있다.!! 모듈을 불러와서 사용하는 것은 원래 웹 브라우저에서는 없던 기능인데 이러한 기능을 브라우저에서도 사용하기 위해 번들러 개념이 탄생한 것이다.😈 번들러는 파일을 묶듯이 연결하는 것을 의미하며**, 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js가 지원해준다.** (참고로 Node.js에서는 impor..

Props Drilling 이란 무엇인가요? 리액트의 컴포넌트 트리에서 데이터를 전달하기 위해서 필요한 과정을 의미합니다. 예를 들어 우리가 App.js에서 데이터를 하위컴포넌트까지 쭉 전달하면 데이터가 변경되었을 때 일일히 고쳐야하는 불편함이 있습니다. 이를 해결하기 위해 전역 상태 관리 라이브러리인 Redux, Mobx를 이용하여 해당 값이 필요한 컴포넌트에게 직접 불러서 사용하는 해결하는 방안이 있습니다. 이렇게 상위 컴포넌트에서 또 하위 컴포넌트로, 또 하위, 또 하위로.. 컴포넌트가 드릴처럼 밑으로 뚫고 내려간다. 이래서 생긴 props drilling이란 단어입니다. 결과를 보면 다음과 같이 잘 출력될겁니다! 정도 props로 넘겨받는 정도라면 상관이 없겠지만.. 과연 이게 네 번, 다 섯번 ..

자바스크립트는 현재 웹 어플리케이션에서 가장 혁신적인 역할을 하고 있다 . 영역을 확장하여 서버 사이드는 물론 모바일 , 데스크톱 어플리케이션에도 적용이 가능하다. 이렇게 자바스크립트만으로 규모가 큰 애플리케이션을 만들기위해 여러 프레임워크 들이 등장하게 되웠다. 주로 MVC, MVVM 아키텍처를 사용한다. 페이스북 개발 팀은 이를 해결하기 위해 어떤 데이터가 변화 할 때마다 어떤 변화를 줄지 고민하는것이 아니라 기본 뷰를 버리고 처음부터 새로 렌더링하고자 하였다 그런데 변화에 따라 렌더링을 계속하면 cpu 점유율도 크게 증가하고 메모리도 많이 사용하게 된다. 그래서 성능을 최대한 아끼면서 사용할 수 있도록 개발한 것이 리액트 이다. 리액트 이해 리액트는 MVC MVW 등인 프레임워크와 달리 오직 Vie..

배열에서 height 보다 큰 숫자의 개수를 반환 하는 함수 filter 배열의 filter() 메소드를 사용하여 주어진 조건(a > height)을 만족하는 숫자만을 필터링하고, 필터링 된 배열의 길이(length)를 반환합니다. 즉, 이 함수는 주어진 배열에서 height보다 큰 숫자의 개수를 세는 것입니다. 예를 들어, 다음과 같은 배열이 주어졌다고 가정해 봅시다. 머쓱이보다 키 큰 사람 function solution(array, height) { return array.filter(a => a > height).length } 함수는 4개의 매개변수를 받는다 매개 변수는 각 2개의 분수를 나타내며, 첫번째 분수는 분자가 num1이고 분모가 denom1이며 두번째 분수는 분자가 num2 이고 분모..

어떤 세균은 1시간에 두배만큼 증식한다고 합니다. 처음 세균의 마리수 n 과 경과한 시간 t 가 매개변수로 주어질 때 t 시간 후 세균의 수를 return하도록 solution 함수를 완성해주세요. 👇🏻내가 풀고 싶었던 방식 function solution(n, t) { for (let i = 0; i < t; i++) { result *= 2; } return result; } 해당 문제는 각 시간마다 2배 씩 증가하는 지수 함수의 값을 계산하는 것으로 이해하면 된다 따라서 주어진 시간에 따라 2를 몇 번 곱해야하는지를 계산하여 최종 값을 도출 할 수 있다. 입력값 (n,t) 2개의 위 코드는 주어진 입력값 n 과 t 에 대하여 해당 문제의 해답을 반환하는 함수 **solution**을 구현한 것입니다..