본문 바로가기

전체 글

(45)
[리액트 공식문서] 주요 개념 1 ~ 4 정리 1. Hello React - React는 사용자 인터페이스(User Interface)를 만들기 위한 JavaScript 라이브러리이다. - 선언형: 어떤 로직으로 어떻게 코드를 짜야 페이지가 그려질 수 있을까 생각하는 것보다 < 컴포넌트나 데이터 등의 배치를 통해 무엇이 렌더링 될지 생각하는 것이 선언형 UI 핵심이다. 2. JSX - JavaScript 를 확장한 문법이다. - React element 를 생성한다. const element = Hello, World! - 위에 희한한 태그 문법은 문자열도, HTML도 아닌 JSX 문법이다. 1) JSX에 표현식 포함하기 - JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다. - 유효한 JavaScript 표현식에는 2 ..
[프로그래머스] 스택/큐 > 프린터 1. 문제 정보 2. 손코딩 3. 어려웠던 부분 4. 코드 5. 다른 사람의 풀이 6. 어떤 부분이 / 스택/큐 로직과 연결되는지? 1. 문제 정보 1) 출처: https://school.programmers.co.kr/learn/courses/30/lessons/42587 2) 문제 설명 일반적인 프린터는 인쇄 요청이 들어온 순서대로 인쇄합니다. 그렇기 때문에 중요한 문서가 나중에 인쇄될 수 있습니다. 이런 문제를 보완하기 위해 중요도가 높은 문서를 먼저 인쇄하는 프린터를 개발했습니다. 이 새롭게 개발한 프린터는 아래와 같은 방식으로 인쇄 작업을 수행합니다. 1. 인쇄 대기목록의 가장 앞에 있는 문서(J)를 대기목록에서 꺼냅니다. 2. 나머지 인쇄 대기목록에서 J보다 중요도가 높은 문서가 한 개라도 존..
[프로그래머스] 스택/큐 > 기능개발 문제 1. 문제 정보 2. 손코딩 3. 어려웠던 부분 4. 코드 5. 다른 사람의 풀이 6. 어떤 부분이 / 스택/큐 로직과 연결되는지? 1. 문제 정보 - 출처: 코딩테스트 연습 - 기능개발 | 프로그래머스 스쿨 (programmers.co.kr) - 문제 설명 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다..
[4주차] Step3(JavaScript Part3) * 이 자료는 제가 복습하기 위해서 작성한 내용입니다. 제대로 공부하시려면 바닐라코딩에서 공유한 스타터키트를 참고하시길 바랍니다. 1. 7월 27일 / 4주차 2. 알고 있는 내용 - template literals: 내장된 표현식을 허용하는 문자열 리터럴이다. function find(arr) { for (let i = 0; i < arr.length; i++) { if (arr[i] === "answer") { return `정답은 ${i}에 있다`; } }; } - 나머지 연산자(%)를 활용하여 홀수 짝수를 구별할 수 있다. - 객체에 새로운 속성을 추가할 때는 Dot notation 또는 Bracket Notation을 이용할 수 있다. 3. 알고 있다고 생각했지만 모르는 내용 - Array.pr..
[3주차] Step2(JavaScript Part2) * 이 자료는 제가 복습하기 위해서 작성한 내용입니다. 제대로 공부하시려면 바닐라코딩에서 공유한 스타터키트를 참고하시길 바랍니다. 1. 7월 20일 / 3주차 2. 알고 있는 내용 - 함수: 여러 개의 코드 구문들을 하나의 단위로 묶어 실행할 수 있는 것을 의미한다. - 함수는 두 가지 방법, 1) 함수 선언식 2) 함수 표현식 으로 선언할 수 있다(기능적인 차이 有). 선호하는 방식으로 선언하여 사용해도 무관하지만, 프로젝트 내에서 일관된 스타일을 유지하는 것이 중요하다. // Function Declaration (함수 선언식) function foo () { // function body.. } // Function Expression (함수 표현식) const foo = function () {..
[2주차] Step2(JavaScript Part1) * 이 자료는 제가 복습하기 위해서 작성한 내용입니다. 제대로 공부하시려면 바닐라코딩에서 공유한 스타터키트를 참고하시길 바랍니다. 1. 7월 13일 / 2주차 2. 알고 있는 내용 - 자바스크립트의 역할: 웹페이지가 동적으로 움직이도록 만들어줄 수 있다. => 자바스크립트는 HTML의 특정 요소(들)을 선택하여 "이벤트"(마우스 클릭, 키보드 입력 등)에 따라 어떤 동작을 하도록 기능을 넣어줄 수 있다. 자바스크립트는 이벤트에 따라 HTML이나 CSS를 조작할 수도 있고 그 외에도 여러가지를 할 수 있다. (예를 들면 아래와 같이 스크롤 이벤트에 따라 화면에 다른 글자, 다른 이미지가 나오게끔 할 수 있다) - 한 줄 코멘트는 // 로, 한 줄 이상의 코멘트는 /* */ 로 작성하기 // 한 줄 코멘트..
[1주차] Step1 + Step2(Introduction to Programming) * 이 자료는 제가 복습하기 위해서 작성한 내용입니다. 제대로 공부하시려면 바닐라코딩에서 공유한 스타터키트를 참고하시길 바랍니다. 1. 7월 6일 / 1주차 2. 알고 있는 내용 - HTML은 Hypertext Markup Language의 줄임말로, 웹사이트를 만드는 가장 기초가 되는 마크업 언어(프로그래밍 언어 X)다. 모든 웹 페이지는 HTML을 이용하여 그 구조가 결정된다. - HTML을 구성하는 기본 단위는 태그이다. 여는 태그와 닫는 태그를 이용하여 만든 것들을 하나의 element(요소)라고 부른다. , , 는 HTML 문서의 전반적인 구조를 정의하기 위해 사용된다. - 몇몇 HTML 태그는 attribute(속성)를 이용하여 추가적인 정보나 명령을 받을 수 있다. 태그는 src 속성을 통..
[IT 지식] 04. 운영체제 0. 지난 포스팅에서 컴퓨터의 주요 구성 부품인 CPU, 메모리, 보조기억장치가 무엇을 하는지 배웠다. 저장된 한글 문서 작업을 한다고 했을 때, 보조기억장치에서 저장된 한글 파일을 찾아다가 메모리 위에다 올리고 CPU가 메모리 위에서 작업을 하는 것이다. 우리는 실제로 이렇게 컴퓨터를 사용하고 있었던 것이다. 그런데 우리는 컴퓨터의 이런 동작이 왜 이렇게 낯선걸까? 우리는 컴퓨터를 사용할 때 위와 같은 작업을 고민해본 적이 없기 때문이다. 한글 문서 작업을 하기 위해선 그냥 한글 문서 파일을 더블클릭만 해서 실행만 시키면 됐다. 이 말은, 우리가 원래는 해야만 했던 위와 같은 복잡한 작업을 대신 해주는 프로그램이 있다는 얘기다. 그 녀석이 바로 운영체제(Operating System, OS)이다. 1...