Up There

JSX(JavaScript XML) React에서 사용하는 React 전용 HTML 이다. React에서는 HTML 대신 JSX를 사용한다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 JS문법은 아니다. 💡 웹브라우저는 HTML, CSS, JAVASCRIPT 만 읽을 수 있지 않나요?? 정확합니다! 우리는 React에서 사용하도록 만들어진 HTML인 JSX를 코딩합니다. 하지만, 최종적으로 소스코드가 실행될 때는 JSX가 HTML로 자동으로 변환되어 실행됩니다! const element = Hello, world!; 위에 문법은 문자열도, HTML도 아니다. JSX라 하면 JS를 확장한 문법. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JS의 모든 기능이 포함된다. JSX란? R..

리펙토링이란 무엇인가?? 외부 동작을 바꾸지 않으면서 내부 구조를 개선하는 방법이다 코드가 작성된 후에 디자인을 개선하는 작업 이미 작성한 소스코드에서 구현된 일련의 행위들을 변경없이, 코드의 가독성과 유지 보수성을 높이기 위해 내부구조를 변경하는 것이다. 기능을 유지하되 읽기 좋고 지속적으로 관리하기 편하게 소스코드를 재작성하는 것 리펙토링은 가독성과 유지보수성을 목표로하며 성능을 최적화하는 것은 다른 문제이다 리펙토링을 하는 이유 읽기 어려운 프로그램은 수정하기 어렵다 중복된 로직을 가지고 있는 프로그램은 수정하기 어렵다 코드의 구조가 망가지는 효과는 누적된다. 소프트웨어의 디자인을 개선 + 이해하기 쉽게 만든다 버그를 찾도록 도와준다! 그렇다면 언제 리펙토링을 해야할까? Tip : 삼진규칙(3번의 ..

다이나믹 프로그래밍을 활용한 대표적인 최단경로 탐색 알고리즘. 특정한 하나의 정점에서 다른 모든 정점으로 가는 최단 경로를 알려줌. 음의 간선을 포함 X 현실 세계에 사용하기 매우 적합한 알고리즘 중 하나이다. 최단 거리는 여러 개의 최단 거리로 이루어져 있기 떄문에 다익스트라 알고리즘은 다이나믹 프로그래밍이다. 하나의 최단 거리를 구할 때 그 이전까지 구했던 최단 거리 정보를 그대로 사용한다는 특징이 있다. 현재까지 알고 있던 최단 경로를 계속해서 갱신해 나간다. 작동과정 출발 노드설정 최단 거리 테이블 초기화 방문하지 않은 노드 중에서 최단 거리가 가장 짧은 노드 선택 해당 노드를 거쳐 다른 노드로 가는 비용을 계산하여 최단 거리 테이블 갱신 위 과정 반복. 다익스트라 알고리즘의 특징 그리디 알고리즘..

Emmet -자동완성 ! + tab : HTML 양식 작성 div + tab : div 태그 작성 div.클래스 이름 : .클래스 이름 + tab div#아이디 이름 : #아이디이름+ tab div > ul > li +tab : 자손 태그 만들기 div > ul + li +tab : 형제 태그 만들기 ul > li*5 +tab : 5번 반복하기 div > ul > li ^ ol : li의 부모인 ul의 형제 노드에 태그하는법 div >(header>ul>li*2) +footer>p +tab : 빠르게 그룹화하기 p{hello} +tab = hello : 빠르게 텍스트 작성하기 p.class${item $}*5 : 자동 번호 넣어보기. p>lorem : 더미용 텍스트 생성. P>lorem4 : 4개의 단어..

# 8 - 조건문 (switch) switch 문은 if / else 문과 마찬가지로 주어진 조건 값에 따라 프로그램이 다른 명령을 수행하도록 하는 조건문입니다. 이러한 switch 문은 if / else 문보다 가독성 측면에서 더 좋습니다. var x = 10; switch (typeof x) { case "number": document.write("변수 x의 타입은 숫자입니다."); break; case "string": document.write("변수 x의 타입은 문자열입니다."); break; case "object": document.write("변수 x의 타입은 객체입니다."); break; default: document.write("변수 x의 타입을 잘 모르겠네요..."); break;..

# 7- 조건문 제어문(control flow statements) 프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문을 제어문이라고 합니다. 이러한 제어문에는 조건문, 반복문 등이 포함됩니다. 조건문(conditional statements) 조건문이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문입니다. 조건문 중에서 가장 기본이 되는 실행문은 if 문입니다. if 문 if 문은 표현식의 결과가 참(true)이면 주어진 실행문을 실행하며, 거짓(false)이면 아무것도 실행하지 않습니다. var x = 10, y = 20; if (x == y) { document.write("x와 y는 같습니다."); } if (x < y) { document.write..

: 증감 연산자는 피연산자를 1씩 증가 혹은 감소시킬 때 사용하는 연산자입니다. 이 연산자는 피연산자가 단 하나뿐인 단항 연산자입니다. 증감 연산자는 해당 연산자가 피연산자의 어느 쪽에 위치하는가에 따라 연산의 순서 및 결과가 달라집니다. x++ : 먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 증가시킴. ++x : 먼저 피연산자의 값을 1 증가시킨 후에 해당 연산을 진행함. 마이너스도 마찬가지. 증감 연산자의 연산 순서 증감 연산자는 피연산자의 어느 쪽에 위치하는가에 따라 연산의 순서가 달라집니다. var x = 10; var y = x-- + 5 + --x; // x = 8, y = 23 ① : 첫 번째 감소 연산자(decrement operator)는 피연산자의 뒤쪽에 위치하므로, 덧셈 연산..

⭐️border-radius border-radius 프로퍼티는 테두리 모서리를 둥글게 표현하도록 지정한다. 프로퍼티 값은 길이를 나타내는 단위(px, em 등)와 %를 사용한다. 각각의 모서리에 border-radius 프로퍼티를 개별적으로 지정할 수도 있고 4개의 모서리를 short-hand로 한번에 지정할 수도 있다. 하나 혹은 두개의 반지름을 설정하여 각각의 모서리 굴곡을 설정할 수 있기 때문에 원 혹은 타원의 모양으로 정의가 가능하다. 참고자료 https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics https://poiemaweb.com/css3-box-model MDN: border-radius