본문 바로가기
반응형

전체 글

 (83)
튀어나오는 레이아웃 구현(css, position, transform) 오늘은 간단하게 튀어나오는 레이아웃을 구현해보도록 하겠습니다. 간단하게 결과는 다음과 같이 나옵니다. 먼저 저는 마크업을 다음과 같이 진행하였습니다. header 바로 옆에 div 태그를 만든 후에 id가 root인 컨테이너에 position: relative를 적용하였습니다 (position:absolute를 사용하기 위해서) 그리고 header 옆의 div에 다음과 같이 작성해주었습니다. animation은 transform을 적용하여 translateX로 x좌표를 이동하도록 구현하였습니다. 이렇게하면 390px에서 0만큼 이동하게 됩니다. export const InfoMenu = styled.div` z-index: 1000; background-color: #f6f8fa; border: 1px ..
프로그래머스 level1 두 정수 사이의 합 오늘은 프로그래머스 level1 두 정수 사이의 합 문제를 풀어보겠습니다. 문제는 다음과 같습니다. https://programmers.co.kr/learn/courses/30/lessons/12912 코딩테스트 연습 - 두 정수 사이의 합 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다. 제한 조건 a와 b가 같은 경우 programmers.co.kr * 풀이 방법 - a와 b의 대소비교를 하고, 큰 값을 b, 작은 값을 a로 설정한 후에 a부터 b까지 값을 더해주면 됩니다. * 소스 코드 function solution(a, b) { let..
자바스크립트 - 빌트인 객체(표준 빌트인 객체, 원시 값, 래퍼 객체, 전역 객체) 자바스크립트에서 빌트인 객체란 ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통 기능을 제공합니다. 자바스크립트 실행 환경(브라우저 또는 Node.js 환경)과 관계없이 언제나 사용할 수 있습니다. * 표준 빌트인 객체 - 자바스크립트는 Object, String, Number, Boolean, Symbol, Date, Math 등 40여 개의 표준 빌트인 객체를 제공합니다. const strObj = new String('Lee'); // String { "Lee" } console.log(typeof strObj); const numObj = new Number(123); console.log(typeof numObj); const boolObj = new Boolean(tr..
프로그래머스 level2 - 프린터(javascript) 오늘은 프로그래머스 level2 문제인 프린터를 풀어보겠습니다. 문제는 다음과 같습니다. https://programmers.co.kr/learn/courses/30/lessons/42587 코딩테스트 연습 - 프린터 일반적인 프린터는 인쇄 요청이 들어온 순서대로 인쇄합니다. 그렇기 때문에 중요한 문서가 나중에 인쇄될 수 있습니다. 이런 문제를 보완하기 위해 중요도가 높은 문서를 먼저 인쇄하는 프린 programmers.co.kr * 풀이 방법 - 이 문제는 우선순위 큐를 이용하면 됩니다. - 우선순위 큐는 배열이나 객체 배열에 우선순위를 따져서 우선순위가 높은 것을 우선적으로 꺼내는 방식으로 진행됩니다. - 먼저 각 경우마다 가장 우선순위가 높은 값을 추출한 후에 - some 메서드를 이용해서 현재 값..
두 개 뽑아서 더하기 (프로그래머스 level1 월간 챌린지 시즌1) 오늘은 프로그래머스에서 두 개 뽑아서 더하기 문제를 풀어보겠습니다. 문제는 다음과 같습니다. https://programmers.co.kr/learn/courses/30/lessons/68644 코딩테스트 연습 - 두 개 뽑아서 더하기 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. 제한 programmers.co.kr * 풀이 방법 - 이중 포문을 돌려서 값이 다른 것만 더해줍니다. - 더해준 값을 정렬해주면 끝! * 소스 코드 function solution(numbers) { const set = new Set(); for(let i..
타입스크립트(TypeScript) 객체와 타입 오늘은 타입스크립트(TypeScript)의 객체와 타입에 대해서 살펴보겠습니다. * 타입 주석 - 타입스크립트는 자바스크립트 변수 선언문을 확장해 다음과 같은 형태로 타입을 명시할 수 있습니다. let 변수 이름: 타입 [= 초깃값] const 변수 이름: 타입 = 초깃값 let n: number = 1; let b: boolean = true; // 혹은 false let s: string = 'hello'; let o: object = {}; * 타입 추론 - 타입스크립트는 자바스크립트와 호환성을 위해 타입 주석 부분을 생략할 수 있습니다. - 타입스크립트 컴파일러는 다음과 같은 코드를 만나면 대입 연산자 = 오른쪽 값에 따라 변수의 타입을 지정합니다. let n = 1; // n의 타입을 numbe..
타입스크립트 프로젝트 만들기 타입스크립트를 만들기 전에 노드제이에스 프로젝트는 디렉터리를 하나 만들고 package.json이란 이름의 파일을 만드는 것으로 시작합니다. npm init 명령을 실행해서 생성합니다. package.json은 노드제이에스가 관리하는 패키지 관리 파일로서 프로젝트 정보와 관련 패키지가 기록됩니다. { "name": "ch02-1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } - 프로젝트 구현에 필요한 다양한 오픈소스 패키지를 npm ..
React - 컴포넌트(함수형 컴포넌트, 클래스형 컴포넌트, props, propTypes, state) 오늘은 React 컴포넌트에 대해서 알아보겠습니다. 컴포넌트를 선언하는 방식은 두 가지입니다. 하나는 함수형 컴포넌트이고, 다른 하나는 클래스형 컴포넌트입니다. * 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const name = '리액트'; return {name}; } export default App; * 클래스형 컴포넌트 import React, {Component} from 'react'; class ClassApp extends Component { render() { const name = 'react'; return {name} } } export default ClassApp; 함수형 컴포넌트의 장점 ..

티스토리툴바