티스토리

muntari Log
검색하기

블로그 홈

muntari Log

codermun-log.tistory.com/m

성실과 기본기를 중요시하는 주니어 개발자입니다.

구독자
9
방명록 방문하기
공지 공지사항 모두보기

주요 글 목록

  • [혼자 공부하는 컴퓨터구조 + 운영체제] 2회독 정리_3 08. 입출력장치8-1 장치 컨트럴러와 장치 드라이버장치 컨트롤러입출력 장치는 CPU, 메모리보다 다루기 더 까다롭다. 1. 입출력장치에는 종류가 너무나도 많다.프린터, 카메라, 키보드, 헤드셋, 스피커 등등 다양한 입출력 장치와 정보를 주고 받는 방식을 규격화하기 어렵다2. 일반적으로 CPU와 메모리의 데이터 전송률을 높지만, 입출력 장치의 데이터 전송률은 낮다.1초에 1000마디 하는 사람과 1초에 1마디 하는 사람은 제대로 대화하기 어렵다. 이와 같은 이유로 입출력 장치는 직접 컴퓨터에 연결하지 않고, 장치 컨트롤러라는 하드웨어를 통해 연결한다.하드 디스크를 뒤집어보면 볼 수 있는 하드웨어이다.장치 컨트롤러의 역할CPU와 입출력 장치간의 통신 중개오류 검출데이터 버퍼링이 중 데이터 버퍼링은 전송률이.. 공감수 1 댓글수 0 2024. 5. 19.
  • [혼자 공부하는 컴퓨터구조 + 운영체제] 2회독 정리_2 05. CPU 성능 향상 기법5-1  빠른 CPU를 위한 설계 기법클럭 (Clock)컴퓨터의 모든 부품을 일사불란하게 움직 일 수 있게하는 시간 단위라고 했다.클럭 신호가 빠르게 반복되면 CPU를 비롯한 컴퓨터 부품들을 그만큼 빠른 박자에 맞춰 움직인다. 클럭 속도가 높을 수록 CPU의 명령어 사이클은 더 빠르게 반복하고 동작한다. 실제로 클럭 속도가 높은 CPU가 일반적으로 성능이 좋다. 그래서 클럭 속도는 CPU 속도 단위로 간주되기도 한다.클럭 속도는 Hz 단위로 측정한다. 1Hz 1초에 1번, 100Hz는 1초에 100번 반복됨을 의미한다.그렇다면 현대 CPU의 클럭 속도는 얼마일가?Base : 2.5GHz Max : 4.9GHz1초에 클럭이 기본적으로 25억 (2.5 x 10^9)번, 순간적으.. 공감수 2 댓글수 0 2024. 5. 15.
  • [혼자 공부하는 컴퓨터구조 + 운영체제] 2회독 정리 01 . 컴퓨터 구조 시작하기1-1 실력 있는 개발자가 되기 위해 컴퓨터 구조를 알아야 하는 이유 문제 해결의 실마리를 다양하게 찾을 수 있다. 단순 코드 개발뿐만이 아닌 다양한 문제를 스스로 해결 할 수 있다.성능, 용량, 비용을 결정 할 수 있게 된다. 단순 입출력을 넘어서 성능, 용량, 비용까지 고려하며 개발할 수 있다.1-2 컴퓨터 구조의 큰 그림컴퓨터 구조 지식은 크게 두 가지이다.컴퓨터가 이해하는 정보컴퓨터의 네 가지 핵심 부품 컴퓨터가 이해하는 정보컴퓨터는 0과 1로 표현된 정보만을 이해한다. 이 정보에는 크게 데이터와 명령어가 있다.컴퓨터가 이해하는 숫자, 문자, 이미지 등 정적인 정보를 데이터라 부른다.이러한 데이터를 움직이고 컴퓨터를 작동 시키는 정보를 명령어라 부른다.명령어가 없으면 .. 공감수 1 댓글수 1 2024. 5. 6.
  • useState 인자로 함수 전달하기 (+useReducer) useState 인자로 함수 전달하기 이상하게도 지금까지 한 번도 useState에 인자로 함수를 전달하는 것을 생각하지 못하였다. 그러던 중 리액트 성능 테스트를 하기 위해 많은 양의 데이터를 화면에 출력해야 하는 상황이 생겨 useState 인자로 많은 데이터를 생성하는 함수를 넣어보았다. useState의 인자로 함수를 전달하는 경우 + 추가로 useReducer의 인자로 함수를 전달하는 경우를 정리해보자! (해당 내용 출처 : 리액트를 다루는 기술 개정판/ 지은이: 김민준) useState 인자로 함수를 전달하는 경우 useState 초기값으로 함수를 전달할 수 있는데 아래 2가지 경우에 따라 다르게 동작시킬 수 있다. const testFuc = () => { ... } // #1 const [.. 공감수 0 댓글수 0 2022. 4. 28.
  • JAM Stack JAM Stack JavaScript API MarkUp Stack 웹 서비스를 만드는 하나의 설계 방식, 프로그래밍 기법이라 할 수 있다. 일반적인 프로그래밍 기법이고 매우 익숙하게 느낄 수 있다. 실제로는 이러한 개념을 모르고 현재까지 이와 비슷한 방식으로 개발을 해오고 있었을 수도 있다. (LAMP, MEAN Stack과 같은 개념을 떠올리면 된다.) 더 나아가서 JAM Stack은 정적 사이트 생성기를 사용한 서비스의 설계를 의미하기도 한다. 여기서 정적 사이트 생성기란 (SSG) Next, Hugo, Gastby 등을 의미한다. 아래에서 SSG에 대해서도 다뤄보자. JAM Stack 공식 문서에서는 아래와 같이 정의한다. 웹 애플리케이션에서 렌더링 할 화면을 Pre-render 하고 이를 CDN.. 공감수 0 댓글수 0 2022. 4. 15.
  • CDN 이해하기 JAM Stack에 대해 알아보기 전에 CDN에 대한 이해가 선행되어야 했다. 이후 포스팅에서 JAM Stack에 대해 정리하기 위해 CDN을 따로 포스팅한다. 해당 포스팅과 이후 업로드할 JAM Stack을 함께 본다면 JAM Stack에 대해 조금은 더 잘 이해하게 되지 않을까 생각된다. 틀린 부분이 있다면 마구마구 지적해주신다면 감사할 것 같다. CDN ( Content Delivery Network ) CDN은 Content Delivery Network의 약자로서 지리적인 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠 전송을 할 수 있고, 콘텐츠 전송에 특화된 기술을 말한다. CDN은 요청을 분산시킨다에 초점이 맞추면 이해하기 어렵지 않다. 예를 들어 유투브, 페이스북과 같은 서비스들에 .. 공감수 0 댓글수 0 2022. 4. 12.
  • [TS] fetch API return type 타입스크립트로 개발을 해오면서 매개변수는 어떤 타입을 받아야하고, 함수는 입력에 따른 출력으로 어떤 타입을 리턴해야하는지 명시하여 코드의 안정성을 높히며 사용을 한다. 이번 포스팅은 컴포넌트 내에서는 당연하게 생각하였던 부분들이 API 로직을 사용하는 부분에서는 별도로 return type을 명시하지 않았던 지난 날을 반성하며 잊어 먹지 않기 위해 포스팅하려 한다. 간단하게 어떤 value 값을 받아 http 요청을 보내고 이에 대한 응답을 받는 async/await을 사용한 fetch api 기본 로직이다. const testAPI = async (value: string) => { try { const res = await fetch( `blabalURL...key=${value}`, ); if (r.. 공감수 0 댓글수 0 2022. 4. 8.
  • 브라우저 랜더링 이전 DOM에 관해 글을 남긴 적이 있다. 면접을 보게 되면서 무언가 깔끔하고 장황하지 않게 정리한 점과 몰랐던 부분에 대해 기록으로 남겨보자 한다. 알고 있는데, 듣기 쉽고 알아듣기 쉽도록 말하는 것도 능력이지 않을까 싶다. 브라우저 랜더링 정리 브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 랜더링에 필요한 리소스를 서버에 요청하고 응답을 받는다. 브라우저의 랜더링 엔진인 서버로 부터 응답받은 HTML, CSS를 파싱 하여 DOM과 CSSOM 트리를 생성하고 이 둘을 결합해 랜더 트리를 생성한다. 브라우저의 자바스크립트 엔진은 서버로 부터 응답받은 JS를 파싱 하여 AST(Abstract Syntax Tree)를 생성하고 바잍트 코드로 변환하여 이를 실행한다. 이때 js가 DOM API를.. 공감수 1 댓글수 0 2022. 2. 14.
  • TypeScript + Webpack + Babel 을 사용하는 이유 프런트엔드 개발을 하면 자연스럽게 따라오는 것들이 있다. TypeScript, Webpack, Babel 이전 프로그래머스 교육을 받으며 사용했던 것들이다. (이것 말고도 많겠지만...) 그런 느낌이 있다 개발을 하다 보면 이래서 이걸 사용하는구나?라고 느낄 때가 있지만 누군가 물어본다면 속 시원하게 대답할 수 없을 것 같은 느낌적인 느낌 말이다. 다른 사람에게 설명을 하지 못하면 진짜 내 지식이 아니지 않을까 생각한다. 이 기회에 왜 이것들을 사용해야 하는지에 대한 이유를 나름 정리해보려 한다. 혹시라도 잘못된 내용이 있다면 가감 없이 피드백 해주시면 감사하겠습니다. 왜 TypeScript를 사용하는가? JavaScript는 동적 타입의 인터프리터 언어이다. 동적 타입이라는 의미는 number, str.. 공감수 1 댓글수 2 2022. 1. 27.
  • [프로그래머스 웹 데브코스] 금나와라 뚝딱 프로젝트 회고 웹 데브 코스 마지막 팀 프로젝트 금 나와라 뚝딱! 회고 금 나와라 뚝딱! 해당 프로젝트를 끝으로 짧다면 짧고, 길다면 긴 프로그래머스 KDT 과정이 마무리되었다. 이전과 동일하게 아래 목차 순서대로 나만의 회고록을 작성해보고자 한다. - 프로젝트를 통해 배운 점 - 아쉬운 점 - 이번 프로젝트에서 이루고자 했던 목표?! - 전반적인 프로젝트 후기 1. 프로젝트를 통해 배운 점 1.1 프런트 입장에서의 협업! 이전 프로젝트에서는 공통 API를 제공받아 사용하였다. 따라서 API 협의 과정이 없이 만들어진 API 내에서 최대한 활용을 해야 했었다. 하지만, 이번 금 나와라 뚝딱 프로젝트에서는 프로그래머스 KDT 백/프 수강생끼리 함께 팀을 이뤄 프로젝트를 진행하였고 API 협의라는 것을 프런트 입장에서 해.. 공감수 0 댓글수 0 2022. 1. 5.
  • React 프로젝트 JS -> TS로 변환하기 React JS에서 Ts로 변환하기 배포까지 마무리한 React 애플리케이션을 Javascirpt ==> Typescript로 변환해보자. 먼저, Private 레포를 우리 팀만의 ORG를 하나 만들어서 Public으로 전환해서 우리 팀만을 위한 연습용 레포를 하나 만들고 시작한다. 아래 문서에서 권장하는 방법을 살펴보자. https://create-react-app.dev/docs/adding-typescript/ Adding TypeScript | Create React App Note: this feature is available with react-scripts@2.1.0 and higher. create-react-app.dev 기존 프로젝트에서 TypeScript를 추가하는 경우니 아래 cl.. 공감수 2 댓글수 0 2021. 11. 20.
  • [프로그래머스 웹 데브코스] ReacTree 프로젝트 회고 웹 데브 코스 14주 차 첫 번째 팀 프로젝트 Reactree 회고 프로그래머스 웹 데브코스 과정 중 첫 번째 팀 프로젝트가 끝났다. 이제 아래 목차 순서대로 나만의 회고록을 작성해보고자 한다. - 프로젝트를 통해 배운점 - 아쉬운 점 - 다음에 또 프로젝트를 한다면 어떻게 할 것인가? - 전반적인 프로젝트 후기 1. 프로젝트를 통해 배운 점 프로젝트를 많이 진행해보진 않았지만, 매번 프로젝트마다 배운 점이 정말 너무나도 많다고 생각한다. 개발자로서, 사람으로서 스스로 학습하고 배우는 것도 분명 있지만, 다른 사람들과 함께하면서 배우고 깨닫게 되는 것들이 많다. 그중 이번 프로젝트에서 배우고 깨달은 점을 내 나름의 정리를 통해 기록으로 남겨보려 한다. 1.1 토론하는 습관 우리 팀의 경우 각자 자신이 맡.. 공감수 3 댓글수 0 2021. 11. 8.
  • webpack 이란 무엇인가? 웹사이트를 구성할때 .js .css .images 파일등 수 많은 들이 모여 웹사이트를 구성하게 된다. 따라서 웹사이트에 접속했을때 굉장히 많은 파일이 다운로드될 수 있는데 이것에 비례하여 서버의 자원을 소모하고 웹사이트가 느리게 로딩이 된다. 또한, 많은 자바스크립트 패키지등을 사용하다보면 각각의 서로 다른 패키지들이 서로 같은 이름이나 함수를 사용하게 되면서 애플리케이션이 깨지게 되는데 이러한 현상을 해결하기 위해 나온 개념이 묶는다는 개념의 번들러가 등장하였다. Weppack, Broserify, Parcel 과 같은 도구들이 번들러에 속한다. 그 중에서도 가장 인기 있는 번들러가 웹팩이다. 웹팩의 정의 webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 이다. 모듈 번들.. 공감수 0 댓글수 0 2021. 9. 17.
  • 프론트엔드 코드 길잡이 이제 갓 한달이 지났지만 많은 것을 배웠다고 생각한다. 첫번째 Toto App 과제를 진행했을때는 어렵지 않게 배운내용을 적용하며 순조롭게 진행을 했다면 두번째 노션 클로닝 과제는 굉장히 어렵게 느껴졌다. 다행히 기본 요구사항 구현은 성공하였지만, 보너스 요구사항과 기타 추가 기능등 완벽하게 해내지 못한 부분이 있어 굉장히 찝찝하다. 일단 구현하고 배포도 해보았지만, 데브코스 수료하기 전 조금 더 성장한 상태에서 코드를 들여다보고 리팩토링을 꼭 진행해보려 한다. 나만의 프론트엔드 코드 길잡이 키워드 ==> 일관성 프론트엔드 프로젝트를 처음해보는 입장으로써 나에게 맞는 앞으로의 프론트엔드 코드 길잡이?를 내려볼까 한다. 이번 두번째 과제를 진행하면서 왜 어려웠는지 생각해보자면 아래 단 한마디로 정의할 수 .. 공감수 2 댓글수 1 2021. 9. 8.
  • 3주차 데브코스 회고록 프로그래머스 데브 코스 프론드 엔드 과정 회고록을 작성해보고자 한다. 아직 마무리까지는 4개월이 넘는 시간이 남았지만 생각보다 시간이 너무 빨리 지나갔다. 벌써 3주 차라니 그만큼 내가 집중하고 있다는 의미라고 생각한다. 저번 주까지의 나 2주 차까지는 함수형 프로그래밍 강의가 굉장히 밀렸었다. 원인을 파악해보자면 한 강의를 보며 실습 내용들을 내가 볼 포스팅으로 정리하는데 시간을 생각보다 많이 쏟았던 것 같다. 3주 차부터는 강의의 총개수가 줄기는 하였으나 내가 모르는 것 위주 + 내가 나중에 참고할 만 내용들을 짧게 짧게 디자인, 내용 등을 생각하지 않고 메모장과 같이 작성하며 포스팅에 걸리는 시간을 단축했다. 이제는 강의가 밀리지 않고 복습하고 혼자서 생각하는 시간을 여유롭게 가질 수 있는 점이 제.. 공감수 4 댓글수 2 2021. 8. 20.
  • 자바스크립트 엔진과 이벤트 루프 대표적으로 자바스크립트는 '단일 스레드' 기반의 언어이다. 스레드가 하나라는 말은 동시에 하나의 작업만을 처리할 수 있다는 의미이다. 하지만 모두 알다시피 자바스크립트에서는 비동기 처리가 가능하다. 우리는 특정 웹 페이지에서 애니메이션 효과를 보여줌과 동시에 마우스나 키보드의 입력을 받아 처리하고 웹 페이지상에서 여러 개의 작업을 동시에 할 수 있다는 것을 잘 알고 있다. 또한, Node.js 기반의 웹 서버에서 동시에 여러개의 HTTP 요청을 처리하기도 한다. 이는 브라우저 위에서 동작하는 자바스크립트라는 언어가 HTML과 CSS를 핸들링하며 동적인 웹 페이지를 만들기 때문이라 생각한다. 위에서 단일 스레드로 동시의 하나의 작업만을 처리 할 수 있다고어떻게 이러한 비동기 처리가 가능한 걸까? 결론부터 .. 공감수 0 댓글수 0 2021. 8. 18.
  • JS_명령형 프로그래밍과 선언형 프로그래밍 명령형 프로그래밍과 선언형 프로그래밍 명령형 프로그래밍은 우리가 익히 해왔던 방식과 같이 컴퓨터가 수행할 명령들을 순서대로 기술해 놓은 것이다. 즉, "어떻게 구현하는가"를 디테일하게 기술하는 관점에 중점을 두는 프로그래밍 기법이다. // 명령형 // "어떻게" 처리하는지에 대한 묘사 function double(arr){ let res = []; for (let i = 0; i < arr.length; i++){ res.push(arr[i] * 2) } return res // } 선언형 프로그래밍은 대표적으로 SQL Query 문과 HTML이 있다. 우리가 약속된 태그들을 쭉 나열하면서 실제로 어떻게 랜더링 되느냐에 대해서는 크게 신경 쓰지 않아도 된다. 무엇을 나타내야 하는지만 선언하면 브라우저가 .. 공감수 0 댓글수 0 2021. 8. 17.
  • JS_잘 틀리는 예제 this 관련하여 잘 틀리는 예제 1 function Cat(name, age){ this.name = name; this.age = age; } const A = Cat('nana', 7); console.log(A.name) 이 결과는 에러가 발생함 이유는 this 때문이다. 자바스크립트에서는 this는 함수가 실행될 때 결정되는 부분이 있다. 따라서, Cat 함수를 실행을 하면 놀랍게도 this는 window를 가리키게 된다. 또한, Cat 함수는 결과를 리턴하는 로직이 없기 때문에 A는 undefined가 되고 undefined.name에 접근하기 때문에 에러가 나는 것이다. 따라서 window.name 을 할 경우 아래와 같이 출력되며 의도치 않게 전역 윈도우 객체를 수정하는 상황이 발생한다. .. 공감수 0 댓글수 0 2021. 8. 16.
  • JS_Promise Promise가 특별하게 callback과 다른 차이를 가지는 점은 than 메서드를 통해 결과를 꺼내 보는 것이 아니라!! 비동기 상황을 일급 값으로 다룬다는 점이 가장 중요한 차이이다. 프로미스는 프로미스라는 클래스를 통해서 만들어진 인스턴스를 반환한다. 그 프로미스라는 값은 대기, 성공, 실패를 다루는 일급 값으로 이루어져 있다는 게 핵심이다. 대기와 일을 끝내는 것들을 코드, 컨텍스트로 만! 다루는 게 아니라 대기되어지고 있다는 어떤 값을 만든다는 점에서 콜백과 가장 큰 차이를 가지며 이점이 정말 정말 정말 정말 핵심이다. 콜백 비동기적인 상황을 다루는것이 오직 코드로만 표현이 되며 function addCall(a, callback){ setTimeout(() => callback(a + 10).. 공감수 0 댓글수 0 2021. 8. 14.
  • JS_코드를 값으로 다루는 go, pipp, curry 함수 자바스크립트에서는 코드를 값으로 다루는 go, pipe, curry라는 함수들 있다. go 함수 함수를 위에서부터 아래로, 왼쪽에서부터 오른쪽으로부터 평가하면서 연속적으로 함수를 실행하고 이전에 실행된 함수의 결과를 다음 함수에 전달하는 함수 인자들을 받는데, 인자들을 통해서 하나의 값으로 축약을 해나가는 로직으로 구현되어 있다. 이 인자들을 이용해서 인자의 1번째 인자를 그 다음 인자(함수) 에게 전달을 하고 그 함수의 결과를 또 다음 함수의 인자로 전달을 해야한다. 즉, 해당 로직은 reduce이다. args를 축약해서 하나의 값으로 만드는 과정이다. 앞서 알아보았듯 초기값을 전달하지 않고 args를 그대로 전달해도 첫번째 값이 뽑혀 초깃값으로 사용이 될 것이다. const go = (...args).. 공감수 0 댓글수 0 2021. 8. 12.
  • JS_Virtual DOM Virtual DOM 앞서 DOM에서는 자바스크립트를 이용해 DOM 객체를 제어하고 이를 통해 클라이언트와 상호작용을 할 수 있는 웹 페이지를 구현할 수 있다고 하였다. DOM이 있는데 굳이 Virtual DOM이라는 개념이 나오게 된 배경을 먼저 살펴보자. jQuery가 등장하면서 JS를 이용해 AJAX 개발을 용이하게 하고 DOM을 동적으로 조작해 많은 기능을 수행할 수 있는 웹 페이지들이 등장하였다. 하지만, 트위터, 페이스북과 같이 스크롤을 조금만 조작해도 몇 천개의 elemennt 들이 생성되는 거대한 서비스들에게 DOM을 처음부터 다시 그리는 것은 극심한 성능 저하를 야기시켰고, 모바일 브라우저 환경에서는 더욱 취약했다. 또한, 당시 jQuery를 이용한 개발 방법이 MVC 등의 데이터 모델들.. 공감수 0 댓글수 1 2021. 8. 10.
  • JS_제너레이터 Generator 이터레이자이자 이터레이터를 생성하는 함수를 말한다. 즉, 제너레이터는 이터레이터를 리턴하는 함수이다. 이때 이터레이터는 Well formed Iterator이다. 또한, 제너레이터는 순회할 특정 값을 문장으로 표현하는 방법이자 함수라고 부르기도 한다. 자바스크립트에서는 이터러블이면 순회할 수 있다. 그런데, 제너레이터는 이러한 문장을 순회 할 수 있는 값으로 만들 수 있기 때문에 제너레이터를 통해서 어떠한 상태나 어떠한 값이든 순회 할 수 있게 만들 수 있다고 한다!!! 제너레이터 함수를 사용하면 Iteration protocol (이터레이션 프로토콜 = 이터레이터/이터러블 프로토콜)을 준수하며 보다 더 간편하게 이터러블을 구현할 수 있으며, 비동기 처리시 유용하게 사용된다. 제너레이터.. 공감수 0 댓글수 0 2021. 8. 10.
  • JS_Iterable 사용자 정의 Iterable을 구현하면서 Iterable을 더 자세히 알아보자. 3, 2, 1 순서로 출력되는 Iterable을 만들어보자. Iterable은 Symbol.iterator Method를 구현하고 있어야 하며 Iterable이 가지고 있는 Symbol.iterator Method는 iterator 를 반환해야한다. 반환하는 iterator는 next Method를 가지고 있으며 next는 {value, done}을 가지고 있는 객체를 반환해야 한다 아래와 같은 Iterable은 Symbol.iterator Method를 통해서 iterator를 반환 할 수 있고 next를 통해서 내부의 값을 조회할 수 있게 된다. 내부의 값을 조회할 수 있다는 이야기는 아래와 같이 순회를 할 수 있다는 의.. 공감수 0 댓글수 0 2021. 8. 10.
  • JS_리스트 순회_Array, Set, Map 자바스크립트의 리스트 순회 ES6의 이전/ 이후 방식으로 크게 변경이 된 부분이라고 한다. 먼저, ES6 이전의 리스트 순회는 아래와 같이 for문을 사용하여 요소를 출력하였다. const list = [1, 2, 3]; for (var i = 0; i 주로 배열반복에 사용되며 for in .. ==> 주로 객체 반복에 사용된다. - for of 문법 const list = [1, 2, 3]; for (const a of list){ console.log(a); } - for in 문법.. 공감수 1 댓글수 0 2021. 8. 9.
  • CSS_ID, CLASS 그리고 selector CSS에서 ID와 CLASS의 차이점은? id : 한 요소에만 사용하며 class : 여러 요소에 중복으로 사용이 가능한 스타일 정의법이다. 예를 들어 id를 사용하여 Tag 스타일을 정의할 경우 특정 한가지 특정 요소에 스타일을 적용하지만 class를 사용하여 스타일을 정의할 경우 동일한 class 명을 가지고 있는 모든 요소에 스타일을 적용할 수 있다. 즉, 아래와 같이 정리 할 수 있다. id : "유일"한 요소에 스타일을 적용. class: "복수"의 요소에 스타일을 적용. 만약 id가 여러개라면??? ㅁㅁㅁㅁㅁ 메뉴1 메뉴2 메뉴3 id는 한개의 태그에 독립적으로 존재해야하기 때문에 div 태그에는 어떠한 스타일도 적용되지 않는다. id = "menu"의 경우 문제 없이 스타일이 적용된다. li.. 공감수 0 댓글수 0 2021. 8. 9.
  • 가장 큰 수_정렬_Javascirpt JS 파이썬처럼 생각하면서 JS로 풀면 더 어려웠음 function solution(numbers) { var answer = ''; // a = 6. b = 10 인경우를 생각 // 숫자로 정렬하면 [10, 6, 2] 가 되는데 문자열로 정렬하여 [6, 2, 10]가 되도록 만들어야함 answer = numbers.sort((a, b) => `${b}${a}` - `${a}${b}`).join('') // 0 인 경우 예외처리 && 문자열로 정렬햇기에 내부 번호들이 문자로 변경됨에 따른 "0"비교함 return answer[0] === "0" ? "0" : answer } Python 풀이 def solution(numbers): answer = '' # numbers의 원소인 1000이하 숫자 비교를.. 공감수 0 댓글수 0 2021. 8. 8.
  • DOM(Document Object Model) DOM 설명하기 전에 앞서 브라우저에 대해 간단히 알아보자. 브라우저 브라우저의 사전적 정의는 인터넷상에서 웹에 연결시켜주는 윈도 기반의 소프트웨이이다. 흔히 크롬, 파이어폭스, 사파리, 오페라와 같은 것들이다. 브라우저의 핵심 기능 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹 페이지를 서버에 요청을 하고 서버로부터 응답을 받아 브라우저에 표시해 주는 것이다. 브라우저는 서버를 통해 HTML, CSS, JS, 이미지 파일 등을 응답받고 HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다. 이런 과정을 랜더링이라 표현한다. 위와.. 공감수 0 댓글수 0 2021. 8. 6.
  • JS_JS로 알아보는 자료구조 배열 자바스크립트에서 배열은 사실 진짜 Array가 아니다. 즉, 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며 연속적으로 이어져 있지 않을 수도 있다. 배열의 요소가 연속적으로 이어져 있지 않는 배열을 희소 배열(sparse array)이라 한다. 자바스크립트에서의 배열은 파이썬의 리스트와 마찬가지로 추상 자료형이다. 추상자료형이란 어떻게 구현되었는지 크게 신경쓰지 않고 기능에만 집중하여 사용할 수 있는 자료형이다. https://codermun-log.tistory.com/267?category=927598 자바스크립트의 배열은 배열이 아니다. 위에서 언급하였듯 정적/동적 배열의 경우 메모리의 특정영역에 연속적으로 공간을 할당하고 저장되는 특징이 있는데 자바스크립트의 배열에.. 공감수 0 댓글수 0 2021. 8. 5.
  • JS_정규표현식 기초 문법 정리 https://regexone.com/ RegexOne - Learn Regular Expressions - Lesson 1: An Introduction, and the ABCs Regular expressions are extremely useful in extracting information from text such as code, log files, spreadsheets, or even documents. And while there is a lot of theory behind formal languages, the following lessons and examples will explore the more prac regexone.com 정규표현식 연습 사이트! JS RegExp Reg.. 공감수 0 댓글수 0 2021. 8. 4.
  • JS_객체와 프로토타입 자바스크립트의 객체 클래스 기반 언어처럼 속성과 행동으로 정의할 수 있다. 자바스크립트에서는 기본 데이터 타입을 제외한 모든 것이 객체이다. JS 객체 생성 방법 기본적인 생성방법이다. 정확하게 JS에서는 객체를 생성할때 프로토타입을 사용해 객체를 생성하는게 효율적이다. 1. 객체 리터럴 객체를 직접 정의 const person = { name: 'ㅁㅁㅁ', age: 99, move: function(des){ console.log(`이동 : ${des}`); }, eat: function(food){ console.log(`Eat : ${food}`); } } console.log(person.name); console.log(person.age); person.move('우리집'); person.ea.. 공감수 0 댓글수 0 2021. 8. 4.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.