본문 바로가기

분류 전체보기

 (644)
State VS Ref State(상태) - 컴포넌트의 내부 데이터를 나타낸다. - 업데이트 함수를 통해 변화가 이루어졌을 때 컴포넌트들의 재실행을 야기한다. => UI에 바로 반영되어야 하는 값들이 있을 때 사용한다. => 시스템 내부에 보이지 않는 쪽에서만 다루는 값들이나 UI에 직접적인 영향을 끼치지 않는 값들을 갖고 있을 경우에는 상태를 사용하지 말아야 한다. Ref(참조) - 리액트 요소에 대한 참조를 나타낸다. - 컴포넌트들이 재실행되게 하지 않는다. => 리액트의 렌더링 주기와는 관련 없는 데이터를 관리할 수 있다. (DOM 조작이나 애니메이션, 포커스 관리 등) => DOM 요소에 직접적인 접근이 필요할 때 혹은 외부 라이브러리를 통해 관리하기 어려운 상태를 관리할 때 사용한다.
Attribute props VS Children props Attribute props import TabButton from "./components/TabButton"; function App() { return ( ... ... ); } export default App; - App.jsx에서 TabButton 컴포넌트에 label이라는 props를 정의하고 "Components"라는 값을 할당했다. export default function TabButton({ label }) { return ( {label} ); } // 또는 export default function TabButton(props) { return ( {props.label} ); } - TabButton.jsx 에서의 사용은 위와 같다. Children Props import Tab..
Database Transaction & ACID Transaction 단일한 논리적인 작업 단위(a single logical unit of work) 논리적인 이유로 여러 SQL문들을 단일 작업으로 묶어서 나눠질 수 없게 만든 것 transaction의 SQL문들 중에 일부만 성공해서 DB에 반영되는 일은 일어나지 않는다. J가 H에게 20만원을 송금하는 트랜잭션 > SELECT * FROM acount; > START TRANSACTION; > UPDATE account SET balance = balance-200000 WHERE id='J'; > UPDATE account SET balance = balance+200000 WHERE id='H'; > COMMIT; COMMIT 지금까지 작업한 내용을 DB에 영구적으로 저장 + 트랜잭션을 종료한..
[Node.js] import와 require() 함께 사용하기 ES6 모듈만 지원하는 패키지와 그렇지 않은 패키지를 함께 사용하는 경우, 아래의 1단계인 package.json에 "type" : "module"을 추가하거나 js 확장자를 mjs 확장자로 변경하면 import만 사용할 수 있게 된다. require() 표현도 사용해야 하는 경우, 아래의 2단계 코드를 추가해주면 동시 사용이 가능해진다. 1) package.json 추가 { ... "type": "module", // 추가 "dependencies": { ... } } 2) 하나의 파일에서 import와 require() 함께 사용하기 import { franc } from "franc"; // ES6 모듈만 지원하는 경우 import { createRequire } from "module"; cons..
제대로 이해하는 REST API https://youtu.be/7LbylTMlj8M?si=w1AGt3jfRwc6yRmv REST API - RESTful한 API를 말하며 일련의 특징과 규칙 등을 지키는 API를 일컫는다. REST API의 특징 1. Uniform-Interface : API에서 자원들은 각각의 독립적인(서로 종속적이지 않은) 인터페이스를 가지며 각각의 자원들이 url 자원 식별, 표현을 통한 자원 조작, Self-descriptive messages, HATEOAS 구조를 가지는 것을 말한다. * url 자원 식별 : 자원은 url로 식별되어야 한다. * 표현을 통한 자원 조작 : url과 GET, DELETE 등 HTTP 표준 메서드 등을 통해 자원을 조회, 삭제 등 작업을 설명할 수 있는 정보가 담겨야 한다. *..
[프로그래머스/자바] 푸드 파이트 대회 class Solution { public String solution(int[] food) { StringBuilder sb = new StringBuilder(); for (int i = 1; i < food.length; i++) { for (int j = 0; j < food[i] / 2; j++) { sb.append(i); } } return sb.toString() + "0" + sb.reverse().toString(); } }
[프로그래머스/자바] 쿼드압축 후 개수 세기 class Solution { private static int[] answer = new int[2]; public int[] solution(int[][] arr) { dq(0, 0, arr.length, arr); return answer; } private static void dq(int dx, int dy, int size, int[][] arr) { if (check(dx, dy, size, arr)) { answer[arr[dx][dy]]++; return; } dq(dx, dy, size / 2, arr); dq(dx + size / 2, dy, size / 2, arr); dq(dx, dy + size / 2, size / 2, arr); dq(dx + size / 2, dy + siz..
[프로그래머스/자바] 신규 아이디 추천 class Solution { public String solution(String new_id) { new_id = new_id.toLowerCase(); new_id = new_id.replaceAll("[^0-9a-z\\-_.]", ""); new_id = new_id.replaceAll("\\.+", "."); new_id = new_id.replaceAll("^\\.+|\\.+$", ""); if (new_id.isEmpty()) new_id = "a"; if (new_id.length() >= 16) new_id = new_id.substring(0, 15); new_id = new_id.replaceAll("\\.+$", ""); while (new_id.length() < 3) { new_..

티스토리툴바