본문 바로가기

FrontEnd

 (96)
백준(BOJ) 4344: 평균은 넘겠지 우선 정답코드는 아래와 같다. const fs=require('fs'); const filepath=process.platform==='linux'?'dev/stdin':'./input.txt'; let input=fs.readFileSync(filepath).toString().split("\n"); let T=input[0]*1; for (let i=1;iitem*1) let length=arr.shift(); console.log("function call") solution(length, arr); } function solution(length, arr){ let count=0; let sum=arr.reduce((acc, ele)=>acc+=ele, 0); let avg=sum/length; ..
자바스크립트에서 값 입력받기 참고: https://www.youtube.com/watch?v=myDEDaaOd30&t=854s 참고: https://velog.io/@bomida/JS-%EC%BD%94%EB%94%A9-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%A4%80%EB%B9%84-%EA%B0%92-%EC%9E%85%EB%A0%A5-%EB%B0%9B%EA%B8%B0 코테에서 자바스크립트 사용시 값 입력받기. 백준에서 Node.js로 입력값을 받기 위해선 readline 모듈 또는 fs 모듈을 사용하면 된다. 이 둘 중 fs모듈이 더 빠르므로 fs를 사용하도록 한다. 단, 문제를 풀다보면 fs로는 컴파일 에러가 나는 경우가 있다. 그럴땐 readline을 사용해야 한다. fs는 FileSystem의 약자로 파일 처..
기초문법 with Algorithm (ing) Sol1. parseInt에 대해서. parseInt는 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환하는 함수이다. 즉, 여기서는 인자가 애초에 문자열이 아니므로 어색한 해결책이 된다. 만약 문자열이 아닐 경우에는 와 같이 추가적 연산이 들어가므로 적절한 해결책이라 보기 힘들다. 이문제에서 parseInt를 사용하므로써 낭비되는 비용 1. number를 string으로 바꾼다. 2. 10진수 추론을 위해 string 앞 2글자가 0x 혹은 0X인지 비교한다. Sol2. Math.floor ==>>주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다. 따라서 이 문제는 아래와 같이 코드를 작성하는 것이 Sol1보다 효율적이다.
브라우저 동작 원리에 대하여 출처: https://velog.io/@wlwl99/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC-%EA%B5%AC%EC%A1%B0 출처: https://www.youtube.com/watch?v=Mqh13dNI8jc 출처: https://poiemaweb.com/js-browser 브라우저 엔진이란? 사용자 인터페이스와 렌더링 엔진의 교두보 역할. 예를들어 인터페이스로 뒤로가기 버튼 눌렀다면 이전의 페이지를 가져오라는 명령을 하는 것이 브라우저 엔진이고 그 명령을 실행하는 것이 렌더링 엔진! UI백엔드: 사용자와 소통하는 부분. 예를들면 사용자 입력, 마우스 움직임, 클릭을 핸들링 자료저장소? 브라우저가 필요한 정보..
자바스크립트 실행환경(브라우저와 Node.js)에 대하여 출처: https://poiemaweb.com/js-hello-world 자바스크립트 언어를 실행시킬수 있는 환경은 두가지가 존재한다. 브라우저와 Node.js이다. 두개 모두 자바스크립트엔진을 가지고 있어 자바스크립트의 코어인 ECMAScript를 실행할 수는 있지만 브라우저와 Node.js에서 ECMAScript 이외에 추가적으로 제공하는 기능은 호환되지 않는다. 즉, 자바스크립트엔진을 가지고 있다는 것이 브라우저와 Node.js의 공통점이다. 차이점은 이렇다. 브라우저는 그 주된 목적이 HTML, CSS, Javascript로 작성된 웹페이지를 브라우저 화면에 랜더링하는 것이 주목적이라면 Node.js는 그 주된 목적이 서버사이드 개발 환경을 제공하는 것이 목적이다. 예를들어 브라우저는 HTML요소..
From the scratch 참조: https://www.youtube.com/watch?v=TTLHd3IyErM 반응형 웹페이지란? 사이즈에 따라 컨텐츠의 배치가 달라지는 것. 프론트엔드의 대부분의 프래임워크는 자바스크립트를 기반으로 하기 때문에 잘 알고 있어야함. HTML, CSS는 프레임워크와 상관없이 계속쓰임. HTML:모든 태그 알수 있다. 찾아가면서 해결해 나가야함. 따라서 태그정보 어디서 찾아야 하는지 소스 알아두기. Page Structure: HTML에서 정말 중요한 Point 페이지의 구조를 어떻게 어떻게 잡아나갈것인가 Semantic Tags:어떨때 어떤 태그쓰는지 SEO: Search Engine Optimization: 사용자가 검색엔진에 검색했을때 내 웹페이지가 나오게 만드는 것. 이 모든것을 꼼꼼히 공부하..
Typescript란? 참고: https://www.youtube.com/watch?v=tP4apCtkqy8&list=PLcqDmjxt30Ru7uSbzi28capKJKIeaOwH9 Javascript의 슈퍼셋이기 때문에 Javascript를 알아야 배울수 있음. Javascript의 변수, 함수의 매개변수, 함수의 리턴값의 타입이 명시적으로 붙은 것이 타입스크립트이다. 물론 타입을 안붙여주어도 되지만 타입을 붙이지 않으면 그냥 자바스크립트가 되는것임. TypeScript는 언엉이면서 라이브러리임. 엄격한 문법을 지원한다. 자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작한다. 자바스크립트의 실행기는 브라우저와 노드이다(노드는 서버가 아님). 브라우저는 타입스크립트의 실행기가 아니기..
css 선택자(selector) 개념 정리 출처: https://velog.io/@rimu/css-css-%EC%84%A0%ED%83%9D%EC%9E%90selector-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC [css] css 선택자(selector) 개념 정리 CSS(Cascading Style Sheets)는 HTML 요소(Element)의 스타일을 주는 역할을 하는데요, 그러려면 스타일을 적용하고자하는 HTML 요소를 특정할 필요가 있기 때문에 선택자(selector)에 대해 잘 알아둬야 합니다. velog.io CSS selector에 대해 CSS(Cascading Style Sheets)는 HTML 요소(Element)의 스타일을 주는 역할을 하는데요, 그러려면 스타일을 적용하고자하는 HTML 요소를 특정할 ..

티스토리툴바