본문 바로가기

전체 글203

[React] React에서 서버에게 동일한 요청을 보낸 후 동일한 응답을 받았을 때, 상태가 바뀌는가? Q. React에서 서버에게 동일한 요청을 보낸 후 동일한 응답을 받을 때, 상태가 바뀌는가? 면접에서 이런 질문을 받는다고 생각해보자. 이 질문의 답변부터 얘기하자면, 💡 React에서 서버에게 동일한 요청을 보낸 후 동일한 응답을 받았을 때, 일반적으로 상태는 자동으로 변경되지 않는다. (하지만, 참조 형식의 객체를 다룰 때는 참조의 동등성을 비교할 수 있다.) Why? 왜 상태가 변경되지 않는가? React에서 상태의 변경 여부는 참조가 아닌 값의 동등성(equality)을 기준으로 판단된다. 상태를 업데이트할 때, setState 또는 useState를 사용하는 경우 React는 이전 상태와 새로운 상태의 값을 비교한다. 이를 통해 React는 변경된 상태만 업데이트하고, 변경되지 않은 상태는 무.. 2023. 6. 21.
[Spring boot] Lombok - Annotation 자동 작성 라이브러리, 언제 쓰이고, 어떻게 쓰이는가 Lombok Annotation목차0. Lombok 이란?1. 접근자/설정자 자동 생성 - @Getter/@Setter2. 생성자 자동 생성 - @NoArgsConstructor/@AllArgsConstructor / @RequiredArgsConstructor3. ToString 메소드 자동 생성 - @ToString4. equals, hashCode 자동생성 - @EqualsAndHashCode5. @Data 들어가기에 앞서..강의를 통해 spring을 접하는게 아니라 단기간에 빠르게 코드를 이해해야하는 상황이 왔다.spring 새내기 필자는 일단 spring boot에서 java 코드가 아닌 자바 어노테이션(@)을 이해하는 부분부터 알아야겠다는 생각을 했다.  해당 프로젝트의 Dependencies.. 2023. 6. 19.
[Intellij] .(점)으로 구분되는 디렉토리 구조 - Compact Middle Packages 해제 Spring 새내기로서 Spring의 파일 구조를 익히기 위해 일단 계층별 디렉토리 구조를 살펴보고자 했다.Intellij에 익숙하지 않는 필자... 디렉토리 만드는 것부터 헤매는 모습을 보았다.Intellij 폴더 만드는 법1. 마우스 오른쪽 클릭2. New > Package.(점)으로 구분되는 디렉터리 구조 해제하는 법그런데 여기서 문제점은 폴더별 구조를 나누기 위한 작업을 하려고 했는데 아래 폴더로 만들어지지 않고다음과 같이 .(점)으로 구분되게 끔 만들어지는 것이다.  해결방법은 프로젝트 윈도우 우측 상단에 보이는 톱니바퀴 세팅을 누르고, Compact Middle Packages 세팅을 해제해주면 디렉터리 구조가 풀어진다.   하지만, 이 경우 프로젝트 규모가 커지면 불편해질 수 있기 때문에 S.. 2023. 6. 12.
[React] React Fragment 사용이유 및 사용법 (Adjacent JSX elements must be wrapped in an enclosing tag 해결) 목차 1. React.Fragment, Fragment의 차이점은? 2. 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 감싸야하는가? 1. React.Fragment, Fragment의 차이점은? 와 는 동일한 기능을 수행하는 React의 기능이다. 는 JSX에서 단축 구문으로 사용되며, 는 완전한 형태의 React 요소이다. React에서는 컴포넌트에서 여러 요소를 반환하거나, 부모 요소로 감싸지 않고 여러 요소를 렌더링해야 할 때가 있다. 아래 두 예시는 동일한 결과를 생성한다. 와 는 컴포넌트가 렌더링될 때 실제 DOM에는 나타나지 않고, 여러 요소를 그룹화하는 역할을 수행한다. JSX에서 는 축약된 표현으로 사용되며, 는 명시적인 형태로 사용된다. 하지만 기능적으로는 완전히 동일하다. //.. 2023. 6. 5.
[Typescript] Typescript란? Typescript가 Javascript로 변해야하는 이유는? 목차 1. Typescript가 만들어진 배경과 정의 2. ES5, ESNext와 Typescript의 차이가 무엇인가 3. Typescript가 Javascript로 변해야하는 이유 Typescript(타입스크립트) 1. Typescript가 만들어진 배경과 정의 요즘 대부분의 회사에서 자바스크립트가 아닌 타입스크립트를 사용한다. 타입스크립트란, 자바스크립트가 가진 여러 문제를 해결하고 보완하기 위해 만들어진 언어이다. 여기서 여러 가지 문제라고 한다면 아래를 살펴보자. 더보기 동적 타입: 자바스크립트는 동적 타입 언어이므로 변수의 타입을 선언하지 않고 사용할 수 있다. 이는 개발자가 변수의 타입을 실수로 잘못 사용하거나, 의도치 않은 타입 변환으로 인한 오류가 발생할 수 있음을 의미합니다. 타입 체크.. 2023. 5. 24.
[Javascript] 문자열의 마지막 문자 가져오기 문자열의 마지막 문자 가져오기 파이썬에서 문자열의 마지막 요소를 가져오려면 배열 a의 a[-1]를 가져오면 됐었다. (아주 간편한 친구였다..!) 자바스크립트에서는 배열 마지막 요소를 -1의 인덱스로 가져오게 된다면, 아래와 같이 오류가 발생한다. 문자열의 마지막 문자를 가져오는 방법은 여러가지가 있겠지만, 기록하고자 하는 총 4가지 방법이 있다. 1. charAt()으로 마지막 문자 가져오기 charAt(index)는 index의 문자를 가져온다. 문자열의 마지막 index는 str.length - 1으로 계산 가능하다. '문자열 str의 길이를 length로 계산하고, index는 0으로 시작하기 때문에 -1을 해주면 마지막 문자열의 index이다. const str = "Hello, World"; .. 2023. 5. 20.
[MYSQL] code: 'ER_BAD_FIELD_ERROR', errno: 1054, code: 'ER_BAD_FIELD_ERROR', errno: 1054 해결법 mysql은 ""만 문자로 인식한다. 테이블의 컬럼이 VARCHAR 혹은 CHAR로 문자열을 받아야한다면 ""(따옴표)를 추가해줘야한다. 나의 경우 ${this.name}과 ${this.location}은 문자열로 전달해줘야했기에 오류가 발생했고, "${this.name}"과 "${this.location}"로 따옴표를 추가해줬더니 해결됐다. 2023. 4. 26.
[Git] 깃 커밋 컨벤션 종류 git commit과 push는 이제 눈 감고도 할 수 있지만, 커밋 메시지에 [FEAT] 만이 난무한 나의 깃로그를 보았다.. 분명 수정사항과 추가사항이 섞였음에도 불구하고 "[FEAT] abstract class의 추상 메서드와 하위 클래스 구체적 구현" "[FEAT] materialCheck 수정" 그저 feat 밭이다... 그러던 와중 깃 컨벤션을 발견했다. git 커밋 컨벤션 feat: 새로운 기능 추가 fix: 버그 수정 build: 빌드 관련 파일 수정, 패키지 매니저 수정 chore: 그 외 자잘한 수정에 대한 커밋 ci: CI 관련 설정 수정에 대한 커밋 docs: 문서 수정 style: 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 refactor: 코드 리팩토링 test: 테스.. 2023. 4. 26.
[용어] deprecated / obsolete 의 의미는? 프로젝트 코드를 수정하다가 deprecated를 발견했다.  (이 글은 deprecated의 의미를 기억 및 기록해두기 위해 !) deprecated앞으로 지원되지 않을것이므로 사용을 자제 해달라는 의미이다.  그렇다면 완전히 없어져서 더이상 지원하지 않을 경우는?⇒ obsolete 를 쓰면 된다. 사전적인 의미[deprecated] ⇒ like 폐지예정: 중요도가 떨어져 더 이상 사용되지 않고 앞으로는 사라지게 될 (컴퓨터 시스템 기능 등) [obsolete] ⇒ like 폐지됨: 더 이상 쓸모가 없는, 한물간, 구식의 (지우기는 애매하고 쓰지 않을 코드에 써먹어봐야겠다.) 2023. 4. 26.
[Javascript] 문자열을 숫자 배열로 변환하는 방법 - split(",").map(Number) 문자열을 숫자 배열로 변환하는 방법 여러 숫자를 입력 받고 배열로 만들어야하는 과정이 있었다. 예를 들어, 1, 2, 3, 4 를 입력하면 [1, 2, 3, 4]로 저장되게끔 만들어지게끔. split()으로 값 분리 - split() 함수 내 인자로 구분 | map(Number) - 배열 내 원소 숫자로 변환 문제 1 ','(콤마)를 구분점으로 값을 분리하기에 split(",")을 활용한다. split으로 숫자들을 분리하면 원하는 값처럼 숫자가 아닌 문자열로 들어가게 된다. 해결 1 이때 split 함수뒤에 .map(Number)만 써주면 자동으로 문자가 숫자로 바뀌어 배열로 들어가게 된다. 문제 2 모든 사용자가 1, 2, 3, 4와 같이 ','(콤마)와 띄어쓰기를 온전하게 입력하지 않을 수도 있다. .. 2023. 4. 20.
[Typescript] JSON 파일 수정 불가 해결방법 - fs.writeFileSync JSON 파일 내의 값이 변동이 안 됩니다. 어떻게 해결해야하죠? Typescript로 자판기를 구현하는 과제가 주어졌고, 상태관리라는 문제에 마주쳤다. React를 사용했더라면 React-Hooks의 useState를 이용하여 컴포넌트의 상태 관리를 하면 된다고 떠올렸지만 이 과제는 only Typescript로 구현해야하기 때문에 다른 방법을 생각해야했다. 전반적으로 관리해야할 것들은 가격, 재료 등의 존재 여부를 알고 있어야하기 때문에 machine.json이라는 "데이터베이스" 역할을 하는 객체를 하나 만들었다. machine.json 파일 내에 각 key 값은 재료, value 값은 재료의 남은 양을 뜻한다. // machine.json { "resource": { "cup": 17, "wate.. 2023. 4. 18.
[MYSQL] No database selected ERROR 해결법 No database selected ERROR 해결법 No database selected ERROR는 말그대로 내가 사용하고자 할 데이터베이스를 선택하지 않았기 때문에 발생하는 에러이다. 어떤 데이터베이스를 사용하겠다고 선택하지 않은 상태에서 테이블을 만드려는 시도를 하였기 때문에 에러가 발생했다. "해결방법은 데이터베이스를 선택하면 되겠지?" 1. 먼저, 어떤 데이터베이스가 있는지 확인한다. show database; 2. 사용하고자 할 데이터베이스를 선택한다. use 데이터베이스명; (만약 데이터베이스를 선택한다면 use vending_machine; 로 데이터베이스를 선택하면 된다.) 3. 만약 mysql>을 나가고 싶다면 exit를 입력하면 된다. 2023. 4. 18.