민희의 코딩일지

https://www.acmicpc.net/problem/4446 4446번: ROT13 간달프는 여러 종족의 언어를 꽤 오랜 시간 동안 공부했다. 최근에 간달프는 해커들이 사용하는 언어인 ROT13을 공부했다. 이 언어는 영어와 문법이 같지만, 알파벳의 순서를 어떤 규칙을 이용해 www.acmicpc.net 이 문제 완전 어이없다. 함정이 숨어있다. 풀이 모음과 자음 목록을 list로 만들어준다. charisLower: 현재 알파벳이 소문자이면 True 대문자라면 소문자로 바꿔주고 알파벳을 ROT13에 맞게 바꿔준 후 다시 대문자로 바꿔준다. 처음 시도를 했는데 틀렸습니다가 떴다. 틀린 코드는 다음과 같다. # 백준 4446번 ROT13 string = input() vowels = ["a", "i",..

https://www.acmicpc.net/problem/15721 15721번: 번데기 예를 들어 7명이 있고, 16번째 등장하는 “뻔”을 부른 사람의 번호를 알고 싶다면 입력은 7 16 0이다. 4명이 있고 6번째 등장하는 “데기”를 부른 사람의 번호를 알고 싶다면 입력은 4 6 1이며, 이 www.acmicpc.net 이 문제는 브루트포스 알고리즘을 이용하여 풀었다. 풀이 A: 게임을 진행하는 총 인원 T: 구하고자 하는 번째 (T 번째로 뻔 / 데기 를 부른 사람) N: 입력 값이 0인 경우 '뻔', 1인 경우 '데기' * 뻔과 데기가 불리는 수는 동일하므로 뻔과 데기의 횟수를 뻔의 횟수로 작성하였다. 뻔 데기 게임 1회차 뻔 - 데기 - 뻔 - 데기 - 뻔 - 뻔 - 데기 - 데기 (총 8번, ..

1- TailWindCSS란? HTML 안에서, CSS 스타일을 만들 수 있게 해주는 CSS 프레임 워크이다. CSS 프레임 워크란? 레이아웃 및 여러 컴포넌트 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹 개발/디자인 프로젝트에 적용할 수 있는 CSS 파일 모음이다. CSS 프레임워크 for React JS Tailwind CSS Material UI React Bootstrap Semantic UI Ant Design Materialize Tailwind CSS의 장점 https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentatio..

구조 분해 할당이란? (ES6) 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식이다. Clean Code를 위해서 사용한다. 1- 객체 구조 분해 할당 function buildAnimal(animalData) { let accessory = animalData.accessory, animal = animalData.animal, color = animalData.color, hairType = animalData.hairType; } let obj = { accessory: 'horn', animal: 'horse', color: 'pupple', hairType: 'curly' } function buildAnimal(animalData){ let ..

1- Component ‘props’라는 입력을 받은 후, 화면에 어떻게 표시되는지 기술하는 React Element를 반환한다. Class Component React.Component 클래스를 상속 클래스는 return 문을 사용할 수 없으므로, 클래스형 컴포넌트에서는 JS를 반환하기 위해 render() 함수를 사용한다. Function Component props로 받을 객체 인자를 정의하고, JSX를 반환하는 것을 기본 형태로 갖춘다. return 문에서 JSX를 반환할 수 있다. Props, State는 데이터를 다룰 때 사용한다. 2- Props (properties) 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이다. 부모 컴포넌트로부터 받는 데이터이기 때문에 자식 컴포넌트에서느 변경할..

1- React Hooks란? React Hooks란 ReactConf 2018에서 발표된 class 없이 state를 사용할 수 있는 새로운 기능이다. React Hooks 는 Class Component로 사용된 React에서 느낀 불편함과 문제점을 개선하기 위해 개발되었다. 1. 이전방식 (Class Component) import React, { Component } from 'react' export default class Hello extends Component { render () { return ( hello my friends! ) } } 더 많은 기능 제공 더 긴 코드 양 더 복잡한 코드 더딘 성능 2. React Hooks (Functional Component) import Re..

React 생명주기란? 컴포넌트의 생성, 업데이트, 제거 과정을 뜻한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝난다. 컴포넌트를 처음으로 렌더링 할 때, 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 수도 있다. → 컴포넌트의 라이플사이클 메서드를 사용한다. 라이플사이클 메서드는 클래스 컴포넌트에서만 사용할 수 있고, 함수형 컴포넌트에서는 Hooks 를 사용하여 비슷한 기능을 처리할 수 있다. LifeCycle Method 라이플사이클 메서드 종류는 총 9가지이다. will 접두사가 붙은 메서드: 어떤 작업을 작동하기 전에 실행 Did 접두사가 붙은 메서드: 어떤 작업을 작동..

1- 반응형 웹이란? 다양한 디바이스에서 접속했을 때 기기의 viewport 규격에 반응하여 레이아웃이 자동으로 변경되는 웹페이지이다. 2- 미디어 쿼리 viewport의 너비에 따라 웹사이트의 스타일 시트를 수정할 수 있게 해주는 CSS의 기능이다. @media screen and (max-width: 500px) { /* 스크린의 너비가 500px 이하일 경우 적용시킬 스타일 시트를 작성한다. */ } @media: 미디어 쿼리를 사용한다. screen: 미디어 타입이다. 이 페이지가 디지털 화면, 즉 screen에 노출되었을 때 중괄호 안에 입력한 스타일 시트를 적용한다. max-width: 500px: viewport 너비가 500px 이하일 경우 해당 스타일 시트를 적용한다. and: scree..