분류 전체보기

TIL] props와 state

state state는 컴포넌트가 가지고 있는 데이터이고 props는 컴포넌트가 부모 컴포넌트로부터 받아온 데이터입니다! state는 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 수정하는 데이터이며, 생성도 수정도 오직 컴포넌트 내에서만 이루어집니다! props props는 컴포넌트가 부모 컴포넌트로부터 받아온 데이터입니다! props의 데이터는 부모 컴포넌트로 받아온 것이기 때문에 읽기 전용이라고 생각하시면 편합니다. 상속받은 컴포넌트 내에서 수정이 불가능한 이유는 무엇일까요? 리액트에서는 부모 > 자식의 단방향성 데이터흐름이라는 특징 때문입니다! 만약 props의 데이터를 변경한다고 하면 부모 컴포넌트에서 변경을 하셔야 합니다! 오늘은 리액트 심화 강의를 들었습니다! 로그인을 하여 세션이 존재할 ..

TIL] Prototype

자바 스크립트 자바스크립트는 동적 언어이며 클래스가 없는 언어입니다! 자바스크립트에서의 클래스는 클래스 기반 언어가 말하는 클래스를 자바스크립트가 흉내 낸 것입니다. 자바스크립트의 클래스는 ES6부터 지원하는 키워드입니다! 자바스크립트는 프로토타입 기반 동적언어입니다.! 클래스 기반 언어와의 차이점은 클래스 기반 언어 같은 경우 클래스를 정의하고 이를 통해 객체를 생성하는데 반면 자바스크립트는 클래스 없이 객체를 생성할 수 있습니다. Prototype 자바스크립트의 모든 객체는 자신의 부모 객체의 원형과 연결되어있습니다. 객체 지향에서의 상속 개념처럼 부모 객체의 프로퍼티나 메서드를 상속받아 쓸 수 있지만 이것은 실제로는 상속보다 위임에 가깝습니다! 이러한 부모 객체를 프로토타입 객체, 혹은 그냥 프로토..

TIL] 라이프사이클 복습

라이플 사이클은 전에 공부를 하고 TIL에 포스팅을 한 적이 있지만 아직 이해도가 부족한 것 같아 오늘 복습을 했습니다. 라이플 사이클이란 트리구조인 DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고 수정할걸 찾고 수정을 하면 필요없는 연산이 너무 많이 일어나기 때문에 가상 돔이 등장하게 되는데 가상 돔은 메모리 상에서 돌아가는 가짜 DOM입니다. 가상 돔 가상 돔의 동작 방식에 대해 살펴보자면 기존 돔과 어떠한 행동 후 새로 그린 돔을 비교해서 바뀐 부분을 갈아 끼워주기 때문에 돔 업데이터 처리가 간결해집니다. 하지만 그렇다고해서 가상 돔이 일반적인 돔보다 성능이 좋다고 말할 순 없습니다. 돔은 사이트 구조에 따라 가상 돔을 쓰는 것보다 성능이 좋을 수도 나쁠 수도 있기 때문에 상황에 따라서 ..

TIL] 스타일 컴포넌트

스타일 컴포넌트 스타일 컴포넌트는 컴포넌트 스타일링 기법 중 하나입니다. 스타일 컴포는 터는 CSS-in-JS 라이브러리 중 하나이며 컴포넌트에 스타일을 직접 입히는 방식이라고 생각하시면 됩니다! 스타일 컴포넌트의 장점 스타일 컴포넌트를 사용하면 클래스 이름을 짓지 않아도 괜찮습니다. 또한 컴포넌트에 스타일을 적기 때문에 간단하면서 직관적입니다. 스타일 컴포넌트 패키지 설치하기 yarn add styled-components 위의 코드를 입력하시면 패키지가 설치됩니다. 패키지를 설치하시고 임포트를 해주시면 됩니다. import styled from 'styled-components'; 스타일 컴포넌트 사용하기 const Example = styled.div` display: flex; flex-direc..

TIL] Switch

라우터 스위치는 라우터의 내장된 컴포넌트 종류 중 하나입니다! 스위치를 알기 전에 라우터를 먼저 알아보았습니다! 라우터는 path속성으로 자신이 원하는 URL 주소를 만들고 해당 URL에 들어갈 컴포넌트를 지정할 수 있기 때문에 브라우저 이동 없이 컴포넌트만 바꿔서 새 로고 침 없이 페이지 전환이 가능합니다. 싱글 페이지 애플리케이션은 새로고침을 하지 않고 컴포넌트만 바꾸기 때문에 싱글 페이지 애플리케이션이 어떻게 새로운 페이지를 그려주는지 알게 되었습니다! 바로 라우터를 통해 그려줍니다! Switch 스위치는 라우터로 생성된 자식 컴포넌트 중 매칭 되는 첫 번째 라우터를 렌더링 해줍니다. 통상적으로 메인 라우트의 경로를 "/"로 지정하고 다른 라우터에는 "/nerd" 이런 식으로 지정하는 경우가 많은데..

TIL] 리액트

SPA SPA란 Single Page Application을 뜻합니다! 말 그대로 서버에서 주는 html이 1개뿐인 애플리케이션입니다. 보통 웹사이트는 페이지를 이동할 때마다 서버에서 정적 자원을 내려준다면 SPA는 딱 한번 정적자원을 받아옵니다. 기존 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다 보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러와 비효율적이었습니다. SPA는 위의 전통적인 웹사이트의 단점을 보완했습니다! SPA의 단점은 어떤 것이 있을까요? SPA의 단점은 딱 한 번 정적 자원을 내려받아 처음에 모든 컴포넌트를 받아옵니다. 따라서, 컴포넌트가 많다면 첫 로딩 속도가 느리다는 단점이 있습니다. 라우팅 html은 딱하나를 가지고 있지만 SPA도..

TIL] 리액트 기초

SCSS SCSS, SASS 둘 다 CSS를 편하게 쓰도록 도와줍니다. 기본 문법은 CSS와 동일합니다. 다른 점이 있다면 각 하위 태그들에 스타일을 줄 때 각각 다른 블럭을 만들어 쓸 필요가 없습니다! //scss div{ p{ color: 원하는 색; font: { family: 글씨체; size: 사이즈; } } div { background-color : 원하는 색 &:hover { background-color: 원하는 색 } $defaultSize: 원하는 사이즈 p{ font-size: #{$defaultSize}; } styled-components class 이름 짓는 것을 안 할 수 있습니다! 컴포넌트에 스타일을 적기 때문에 비교적 간단하고 직관적이라 할 수 있습니다! 내용 const ..

TIL] 리액트 기초

웹의 동작 개념 웹페이지는 서버에서 미리 준비한 것을 받아서 그려주는 것입니다. 1. 요청을 보냅니다 -> 2. 받은 HTML 파일을 그려줍니다. 1에서 요청은 서버가 만들어 놓은 API에 정해진 약속대로 요청을 보냅니다! 서버와 클라이언트 클라이언트 : 웹사이트를 보는 도구는 전부 클라이언트입니다. 서버 : 우리가 보는 웹사이트에 뿌려줄 것을 만들어서 클라이언트에 전달합니다. 서버리스 서버리스는 서버가 없는 것이 아닌 서버를 내가 만들 필요가 없단 것입니다! 서버리스는 백엔드 리스가 아닙니다! Component(컴포넌트) 컴포넌트는 클래스형과 함수형이 있습니다. 리액트가 레고라면 컴포넌트는 블록이라 할 수 있습니다! State와 Props state는 컴포넌트가 가지고 있는 데이터입니다. state는 ..

TIL] 자바스크립트 기초 문법

출력하기 자바스크립트에서는 출력을 할 때 console.log()를 사용합니다! console.log('안녕하세요!') 변수 선언과 데이터 할당 자바스크립트에서는 변수를 선언할 때 let이라는 키워드를 사용합니다! let name = 'Nerd' console.log(name) // 결과 : Nerd name = 'JongHyuk' console.log(name) // 결과 : JongHyuk 자바스크립트에서는 파이썬과 다르게 const라는 키워드도 있는데 const는 let과 달리 변수에 값을 재할당할 필요가 없을 때 사용합니다! 해당 변수가 고정된 값을 가지고 있어야 할 때 사용합니다! const name = 'Nerd' console.log(name) // 출력 : Nerd 데이터 타입 자바스크립트..

TIL] 알고리즘 공부

오늘의 알고리즘 공부 오늘도 어제와 마찬가지로 프로그래머스의 알고리즘 문제를 풀었습니다! 프로그래머스 오늘 푼 문제 ( level 1) 하샤드 수 콜라츠 추측 문자열을 정수로 바꾸기 서울에서 김서방 찾기 수박 수박 수박 수박수? 소수 찾기 내적 음양 더하기 백준 예제 백준 1316 ( 그룹 단어 체커)(복습) 오늘도 프로그래머스 문제를 중점으로 공부를 하였습니다! 백준 예제에서 푼 문제는 처음에 풀지 못한 문제여서 해석을 했었던 문제인데 다시 접근을 해보았습니다! 하지만 이번에 풀었을 때도 조금 어려웠고 풀이를 보고 해석을 했을 때 처음 공부했을 때 이해 안 되었던 부분이 이해되어서 의문점이 풀렸습니다! 알고리즘은 아직 어렵고 지금 내가 하는 공부법이 맞는지 알 수 없어서 여러 가지 공부방법을 찾아보고 ..