차곡차곡

구현한 것 컴포넌트 구성 궁금한 것 : 요소의 주 콘텐츠(main content)를 정의할 때 사용 css 처음 보는 거 짱 많음 background VS background-color : background-color는 색깔만 지정할 수 있는 반면에 background는 색깔 이외에 image, repeat, attachment, position 등 다른 옵션들도 지정해줄 수 있다. rgba : red, green, blue, alpha(= 투명도로 0에 가까울 수록 투명) em 단위 : 상위 요소 크기의 배수 rem 단위 : 문서의 최상위 요소, 즉 html 요소 크기의 배수 cursor : 마우스 커서 모양 지정 transition : CSS 프로퍼티의 값이 변화할 때 프로퍼티 값의 변화가 일정 시..

컴포넌트는 SPA를 지향하는 React에서 사용하는 앱을 이루는 최소 단위이다. MVC 방식으로 관리되는 기존의 웹 프레임워크는 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있다. 반면 컴포넌트는 MVC의 view를 독립적으로 구성하여 재사용할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다. ☝🏻 MPA vs SPA MPA(Multiple Page Application) : 여러 개의 페이지로 구성된 웹 어플리케이션으로, 사용자가 요청할 때마다 서버에 다른 페이지를 요청해서 받아온다. 전체 페이지를 불필요한 부분까지 다시 렌더링 해야 하기 때문에 상태 유지의 어려움 + 불필요한 로딩이 발생한다는 단점이 있다. SPA (Single Page Application) : 한 개 페이지로 구성된..

props는 properties의 줄임말로 컴포넌트의 속성값이다. 한 컴포넌트에서 다른 컴포넌트로 데이터를 넘길 때, 즉 컴포넌트 간 데이터를 넘겨주는 수단으로 사용된다. 일반적으로 부모 컴포넌트에서 넘겨준 값을 자식 컴포넌트에서 인자로 받아서 사용한다. 받아온 값은 읽기 전용으로 컴포넌트 내부에서 전달 받은 그대로 사용된다. props 값은 컴포넌트에 객체 형태로 전달되어 매개변수를 통해 조회 가능하며, 객체의 비구조화 할당을 통해 축약된 문법으로 객체 속성값을 추출하여 사용할 수도 있다. Props 값 전달 방법 부모 컴포넌트에서 자식 컴포넌트 import 자식 컴포넌트 태그에 속성=”속성값” 할당 ⇒ {속성: 속성값}을 인자로 하여 자식 컴포넌트 호출 자식 컴포넌트에서 매개변수로 값 받아와서 사용 ..

1. JSX란? JSX는 리액트에서 생김새를 정의할 때, 사용하는 문법으로 얼핏보면 HTML 같이 생겼지만 실제로는 JavaScrip의 확장 문법이다. 리액트 컴포넌트의 return문 내에 이러한 형태로 코드를 작성하면, 반환된 내용이 번들링 과정에서 babel을 통해 JSX에서 일반 JavaScript 형태로 변환된다. (* 번들링은 코드가 브라우저에서 실행되기 전, import한 모듈들을 연결하여 합쳐진 파일로 만든 후 브라우저에 최종 렌더링해준다.) (* Babel은 JavaScript의 문법을 확장해주는 도구로서 아직 지원되지 않는 최신 문법이나 편의상 사용하거나 실험적인 JavaScript 문법들을 정식 JavaScript 형태로 변환해준다.) function App() { return ( He..

const 변경 불가능한 상수를 선언할 때 사용하는 키워드 scope 블록 단위 (* scope : 해당 값을 사용할 수 있는 코드 영역) let 동적인 값을 담을 수 있는 변수를 선언할 때 사용하는 키워드 scope 블록 단위 var scope가 함수 단위 let은 한번 선언한 후 값이 유동적으로 변할 수 있을 때만(예: for 문) 사용하고, const는 한번 설정한 후 변할 일이 없는 값에 사용한다. 기본적으로 const를 사용하고, 해당 값을 바꾸어야 할 때는 let을 사용하면 되는 것! 참고 자료 : https://thebook.io/080203/ch02/04/02-01/

#include int main(void) { printf("Hello World!"); return 0; } #include #로 시작하는 문장 : 전처리기 지시자 #include : 소스 코드 안에 특정 파일을 포함시키라고 지시하는 명령어 : 컴파일러가 필요로 하는 정보(입출력 함수에 대한 정보)를 갖고 있는 헤더 파일 (*컴파일러 : 고급 언어를 기계어로 변환해주는 일종의 번역 프로그램) 함수 함수의 시작과 끝은 { 과 }로 나타낸다. C 프로그램에서 main 함수는 반드시 하나만 존재한다. return 0; 이 실행되면 main 함수가 작업을 끝내고 운영 체제로 0 값을 반환한다. 보통 0의 값은 프로그램이 정상적으로 종료했음을 나타낸다. 문장 모든 문장은 ;(세미콜론)을 찍어 문장이 끝났음을 나..

백준 #18115 카드 놓기 18115번: 카드 놓기 수현이는 카드 기술을 연습하고 있다. 수현이의 손에 들린 카드를 하나씩 내려놓아 바닥에 쌓으려고 한다. 수현이가 쓸 수 있는 기술은 다음 3가지다. 제일 위의 카드 1장을 바닥에 내려놓는다. www.acmicpc.net from collections import deque import sys input = sys.stdin.readline n = int(input()) # 카드 수 skill = list(map(int, input().split())) # 기술 card = deque() num = 1 for i in range(n-1, -1, -1): if skill[i] == 1: card.insert(0, num) elif skill[i] == 2..

백준 #13022 늑대와 올바른 단어 13022번: 늑대와 올바른 단어 첫째 줄에 단어가 주어진다. 단어는 w, o, l, f로만 이루어져 있으며, 길이는 50을 넘지 않는다. www.acmicpc.net import sys input = sys.stdin.readline word = input().strip() now = 0 # 현재 문자 인덱스 next = 1 # w: 1, o: 2, l: 3, f: 4 cnt = 0 cnt2 = 0 while now < len(word): if word[now] == "w": if next == 1: while now < len(word) and word[now] == "w": cnt += 1 now += 1 next = 2 else: print(0) exit() ..