전체 글

[CSS]다크모드 구현

다크모드는 소프트웨어에서 하얀 배경화면 대신에 검은 또는 어두운 배경화면을 지원하는 것을 말한다. 어두운 곳에서 눈의 피로를 줄이기도 하고 사람들의 선호에 맞게 다크모드를 사용한다. Prefers-color-scheme 다크모드를 prefers-color-scheme CSS미디어쿼리를 사용하여 적용할 수 있다. Theme .themed { display: block; width: 10em; height: 10em; background: black; color: white; } @media (prefers-color-scheme: light) { .themed { background: white; color: black; } } CSS 변수 선언하기 CSS로 변수를 선언해서 다크모드를 만들면 더 편한다. ..

[CSS] 반응형 웹의 미디어 쿼리 (Media Query)

미디어 쿼리에 대해 간략히 알아 보겠습니다. 반응형 웹(Responsible Web) 반응형 웹이란? 태블릿, 스마트 폰 등 다양한 모바일 기기들이 생겨 나면서 웹에서 보여지는 컨텐츠를 PC에서와 똑같이 모바일 기기에서도 보기 위한 방법이다. 즉 반응형 웹은 디바이즈 종류에 따라 웹페이지의 크기가 자동적으로 조정되어 어떠한 환경에서도 사용자가 편리하게 보는 웹을 말합니다. 미디어 쿼리(Media Query) 반응형 웹에서 각각의 화면에 CSS를 적용하여 사용되어지는 것을 미디어 쿼리 이다. 화면의 사이즈를 인식해 서로 다른 CSS를 적용시켜준다. 화면의 사이즈에 따라 크게 PC, 태블릿, 스마트폰 3개로 구분하여 만든다. PC - 1024px 초과 태블릿 - 768px 이상, 1023px 이하 모바일 -..

[프로그래머스]카카오커머스 개발자 영입 - 프론트엔드 개발 챌린지 1차 코딩테스트

1월 23일 토요일 14시~16시 카카오커머스 프론트엔드 개발 챌린지 1차 코딩 테스트가 진행되었습니다. 총 3문제로 모두 바닐라 자바스크립트로 푸는 문제 였고 문제의 난이도를 말해보자면 1,2번째 문제는 프로그래머스 1~2단계, 마지막 3번째는 프로그래머스 3단계의 난이도였다. 1,2번째 문제는 무난하게 풀었지만 역시나 3번째 문제에서 효율성은 하나도 못 맞췄다. 하지만 오늘 1차 코딩테스트 합격 통보를 받았다. 2차 코딩테스트는 과제 테스트 라는데 결과에 상관없이 공부한다는 마인드로 준비해 봐야겠습니다. programmers.co.kr/competitions/779/2021-kakaocommerce-fe-recruitment 카카오커머스 개발자 영입 - 프론트엔드 개발 챌린지 접수 21년 01월 04..

[백준 6630, NodeJS] 로또

www.acmicpc.net/problem/6603 6603번: 로또 입력은 여러 개의 테스트 케이스로 이루어져 있다. 각 테스트 케이스는 한 줄로 이루어져 있다. 첫 번째 수는 k (6 6)개의 수를 골라 집합 S를 만든 다음 그 수만 가지고 번호를 선택하는 것이다. 예를 들어, k=8, S={1,2,3,5,8,13,21,34}인 경우 이 집합 S에서 수를 고를 수 있..

[ReactJS]노마드코더 리액트 기초-04. State

노마드코더-"ReactJS로 영화 웹 서비스 만들기"강의를 수강하며 공부한 내용입니다. state React.js에서는 유동적인 데이터를 사용하기 위해 state 객체를 사용한다. props는 매개변수처럼 컴포넌트에 전달되지만 state는 컴포넌트 내에서 관리된다. props와 다르게 state 값을 변경할 때는 직접 조작해서는 안되며 setState 메서드를 사용해야 한다. setState 메서드를 사용하는 이유는 React는 state가 변경될 때마다 변경된 부분을 감지하여 리렌더링 하기 때문에 직접 state를 조작하면 React는 변경된 부분을 감지하지 못한다. state를 사용하여 버튼을 누르면 카운트 되는 예제 import React from "react"; class App extends R..

[ReactJS]노마드코더 리액트 기초-03. JSX & PROPS

노마드코더-"ReactJS로 영화 웹 서비스 만들기"강의를 수강하며 공부한 내용입니다. 컴포넌트 란? 리액트의 기본 단위는 컴포넌트이다. 컴포넌트는 사용자가 보는 뷰이자 기능을 단위별로 캡슐화 하여 자바스크립트 함수 혹은 클래스로 정의한다. 즉 컴포넌트는 props를 argument로 input 받고 UI가 어떻게 보여야 하는지 정의하는 React 요소를 output 하는 함수이다. 각각의 컴포넌트는 내부에서 상태를 관리하며, 컴포넌트의 이름은 항상 대문자로 시작해야 한다. function Welcome(props) { return Hello, {props.name}; } class Welcome extends React.Component { render() { return Hello, {this.pro..

[ReactJS]노마드코더 리액트 기초-02.리액트 Set up

노마드코더-"ReactJS로 영화 웹 서비스 만들기"강의를 수강하며 공부한 내용입니다. 우선 개발 환경을 세팅하기 위해 1. Node JS 설치(node를 설치하면 npm도 같이 설지 된다.) 2. npx 설치, 터미널에 npm install npx -g 입력 3. git 설치 각각 설치 유무는 터미널에 node -v, npm -v, npx -v, git --version을 입력 하면 알 수 있다. 리액트 프로젝트 만들기 터미널에 npx create-react-app 입력 npx create-react-app my-app 완료가 되면 이렇게 리액트 프로젝트를 설정을 끝내고 vsc 에디터로 프로젝트 파일을 open한다. creat-react-app 란? creat-react-app 에 대한 내용은 아래 링..

[백준 1759, NodeJS] 암호만들기

www.acmicpc.net/problem/1759 1759번: 암호 만들기 첫째 줄에 두 정수 L, C가 주어진다. (3 ≤ L ≤ C ≤ 15) 다음 줄에는 C개의 문자들이 공백으로 구분되어 주어진다. 주어지는 문자들은 알파벳 소문자이며, 중복되는 것은 없다. www.acmicpc.net 백준 1759번 암호 만들기 풀이입니다. 저는 브루트포스 알고리즘, 순열로 풀었습니다. 바로 어제 최백준 조교가 방 열쇠를 주머니에 넣은 채 깜빡하고 서울로 가 버리는 황당한 상황에 직면한 조교들은, 702호에 새로운 보안 시스템을 설치하기로 하였다. 이 보안 시스템은 열쇠가 아닌 암호로 동작하게 되어 있는 시스템이다. 암호는 서로 다른 L개의 알파벳 소문자들로 구성되며 최소 한 개의 모음(a, e, i, o, u)..