티스토리

A Developing Developer
검색하기

블로그 홈

A Developing Developer

icepri3535.tistory.com/m

성장을 위한 개발일지

구독자
0
방명록 방문하기
공지 Hello World 모두보기

주요 글 목록

  • Prettier 1. 작업 표시줄 [확장] 탭에서 "Prettier - Code formatter" 설치 2. 설정 (Ctrl + ,) 에서 "format on save" 검색 3. Editor : Format On Save 체크 4. 설정 (Ctrl + ,) 에서 "default formatter" 검색 5. Editor : Default Formatter 에서 Prettier - Code formatter 로 설정 공감수 0 댓글수 0 2024. 3. 27.
  • 리액트 2일차 2. 첫번째 프로젝트: 가위바위보 게임 - 프로젝트 생성 npx create-react-app *** - onClick 사용 시 주의할 점 play("scissors")}>가위 ------------------------- 콜백함수 형태로 함수를 전달해 줘야 바로 실행시키지 않는다. - UI 를 바뀌가 하고 싶으면 state 에 만든다 - react 로 FE 개발 중 주의할 점 ------------ props.item이 있을 때만 props.item.img를 참조하도록 (가드) 위의 예시 처럼 props.item 이 있을 경우 그러니까 사용자가 선택을 했을 경우에 만 props.item.img 를 불러오도록 해서 선택하지 않았을 경우 발생하는 에러를 사전에 방지해야한다. (가드값!) - 랜덤한 값 뽑는.. 공감수 0 댓글수 0 2024. 2. 27.
  • 리액트 1일차 1. 리액트 기초 - 프로젝트 생성 npx create-react-app first-react - 프로젝트 열기 code . - 프로젝트 후 설치! ES7 React-Native snippets - SPA : Single Page Application 웹사이트에 페이지 단 하나 - 리액트 컴포넌트 자동생성 rafce (React Arrow Functionexport ComponEnt) - component (컴포넌트) : 내가 필요한 태그를 만들어서 쓰는것 (원하는 태그들을 모아서 하나의 태그로) [재활용] 관련있는 HTML 과 JS 를 함께 둔다 - props : 함수의 매개변수와 같은 역할 - state : UI 에 보이는 값은 무조건 state 로 만들어야한다. 변수는 새로 랜더 될 때마다 초기화 .. 공감수 0 댓글수 0 2024. 2. 26.
  • [JavaScript] .concat() 주로 배열에서 사용되며, 두 개 이상의 배열이나 값을 합쳐 새로운 배열을 만드는데 사용된다. 주어진 인수를 기존 배열에 연결하여 새 배열을 생성한다. 원래 배열은 변경되지 않는다. [Ex] const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [7, 8, 9]; // 배열 연결 const result = arr1.concat(arr2, arr3); // 결과 출력 console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8, 9] concat 메소드는 문자열에서도 사용할 수 있지만, 문자열에서는 '+' 연산자를 사용하여 문자열을 연결하는 것이 좀 더 일반적이다. [Ex] const string1 = 'Hello, '; con.. 공감수 0 댓글수 0 2023. 8. 13.
  • [JavaScript] shift() 배열의 첫 번째 요소를 제거하고 그 값을 반환한다. 이 메소드는 기존 배열의 길이를 줄이며, 배열이 빈 경우 undefined를 반환한다. [Ex] let array = [1, 2, 3]; let firstElement = array.shift(); // firstElement는 1, array는 [2, 3]이 된다. 공감수 0 댓글수 0 2023. 8. 3.
  • [JavaScript] [...new Set()] 배열에서 중복 요소를 제거할 때 사용된다. Set 객체는 고유한 값을 보유하는 컬렉션으로, 이를 사용하여 고유한 요소만 포함하는 새 배열을 생성할 수 있다. [구문의 각 부분을 설명] new Set(): Set 객체를 생성. 이 컬렉션의 고유한 특징 때문에 중복된 값을 포함하지 않는다. new Set(array): 배열을 Set 객체의 인수로 전달하여 중복을 제거하고 고유한 요소들만 포함하는 Set 컬렉션을 생성 [...new Set(array)]: 스프레드 연산자(...)를 사용하여 Set 객체의 요소를 새로운 배열로 변환. 이렇게 하면 중복이 제거된 새로운 배열이 생성된다. [Ex] const uniqueArray = [...new Set([1, 2, 2, 3, 4, 4, 5])]; // 결과: [1.. 공감수 0 댓글수 0 2023. 8. 2.
  • [JavaScript] Map, set(), get() - Map Map 객체는 키-값 쌍으로 이루어진 데이터를 저장하는 자료구조이다. 여기서 키는 중복되지 않으며 값은 중복이 가능하다. - set() set() 메소드는 Map 객체에 새로운 키-값 쌍을 추가하거나 이미 있을 경우 값을 업데이트하는데 사용된다. [사용법] map.set(key, value); key는 Map 객체에 추가될 키를 나타내며, value는 해당 키와 관련된 값을 나타낸다. 만약 key가 이미 존재하면, 기존의 값은 새로운 value로 대체된다. 이를 이용하여 원하는 키-값 쌍을 지정하거나 이미 있는 키-값 쌍을 수정할 수 있다. - get() get() 메소드는 Map 객체에서 지정된 키와 연관된 값을 가져온다. [사용법] map.get(key); key는 가져올 값과 연관된 키를.. 공감수 0 댓글수 0 2023. 7. 5.
  • [JavaScript] [...arr] 펼침 연산자 (Spread Operator)를 사용하여 배열 arr의 모든 요소를 새로운 배열에 펼쳐 분리시킨 것을 의미한다. 펼침 연산자는 배열이나 객체의 모든 요소를 복사하여 새로운 컨테이너에 펼쳐 넣는 역할을 한다. 이를 통해 기존 배열의 요소를 새로운 배열에 얕은 복사(Shallow Copy)하여 생성할 수 있다. [Ex] arr이 [1, 2, 3]이라면 [...arr]의 결과는 [1, 2, 3]이 되며, 이 새로운 배열은 기존 arr 배열의 복사본이다. 이렇게 만든 새로운 배열은 원본 배열과 독립적이므로, 새로운 배열의 요소를 변경해도 원본 배열에 영향을 주지 않는다. 이를 주로 사용하여 배열을 병합하거나 내용을 수정할 때 원본 배열에 영향을 주지 않을 수 있다. 공감수 0 댓글수 0 2023. 7. 5.
  • [JavaScript] .reduce() 주어진 배열의 모든 요소에 대해 함수를 실행하고, 단일 결과 값(누적값)을 반환하는데 사용된다. 이 메소드는 배열 요소 각각에 대해 주어진 리듀서(reducer) 함수를 왼쪽에서 오른쪽으로 적용하며, 배열을 단일 값으로 줄인다. [사용법] arr.reduce(callback, initialValue); arr: 원본 배열 callback: 배열의 각 요소에 대해 실행할 리듀서 함수를 제공 callback에서 반환하는 값을 다음 누적값으로 사용합니다. 리듀서(reducer) 함수는 4개의 인수를 허용합니다. accumulator: 이전 반복에서 반환한 값 또는 initialValue currentValue: 현재 처리 중인 배열 요소 currentIndex(옵션): 현재 처리 중인 배열 요소의 인덱스 ar.. 공감수 0 댓글수 0 2023. 7. 4.
  • [JavaScript] new Set(), has() new Set() : 중복되지 않은 유일한 값(value)들의 집합(collection)으로 구성된 객체이다. 리스트와 비슷하지만 중복 된 값을 압축해주기 때문에 중복을 허용하지 않는 데이터 구조를 원할 때 유용하다. 이 메소드는 새 Set 객체를 생성한다. 이때, 초기화 할 때 배열 또는 다른 이터러블 객체를 전달할 수 있다. (※ 이터러블 객체 : 요소들이 하나씩 순회 가능한 객체, Ex. 배열, 문자열, Map, Set) 만약 이터러블 객체를 전달하면, 객체의 각 요소가 새로운 Set의 요소가 된다. 중복된 요소는 자동으로 제거된다. [Ex] let mySet = new Set(); // 빈 Set 생성 let mySetWithArray = new Set([1, 1, 2, 3, 4, 4, 5]); .. 공감수 0 댓글수 0 2023. 6. 29.
  • [JavaScript] indexOf(), lastIndexOf(), slice() 아래 설명 할 메소드들은 JavaScript 메소드로 배열이나 문자열을 다룰 때 유용한 도구이다. - indexOf() 배열이나 문자열에서 특정 요소 또는 문자열을 찾고, 해당 요소 또는 문자열이 처음 발견되는 인덱스를 반환한다. 찾고자 하는 값이 없으면 -1을 반환한다. [Ex] const array = [1, 2, 2, 3]; console.log(array.indexOf(2)); // 출력: 1 const str = "Hello, World!"; console.log(str.indexOf("World")); // 출력: 7 - lastIndexOf() 배열이나 문자열에서 특정 요소 또는 문자열을 찾는다. 다만, 이것은 해당 요소 또는 문자열이 마지막으로 발견되는 인덱스를 반환한다. 찾고자 하는 값이.. 공감수 0 댓글수 0 2023. 6. 12.
  • [JavaScript] 정규식 정규식(Regular Expression)은 문자열에서 특정 패턴을 찾거나 교체하는 기능을 제공하는 강력한 도구이다. JavaScript에서는 RegExp 객체를 활용하여 정규식을 사용할 수 있다. 정규식의 기본 구성은 다음과 같습니다: 1. 패턴(Pattern): 찾거나 매치 문자열의 패턴을 정의합니다. 2. 플래그(Flags): 패턴 검색에 사용할 옵션을 설정합니다. // 정규식 리터럴로 생성하기 const regex = /ab+c/; // RegExp 객체 생성자로 생성하기 const regex2 = new RegExp('ab+c'); // 문자열의 match 메서드를 사용하여 정규식과 매치하는지 확인하기 const str = 'abcde'; const result = str.match(regex).. 공감수 0 댓글수 0 2023. 6. 2.
  • [JavaScript] match() match() 메소드는 JavaScript에서 문자열 객체의 메소드이다. 이 메소드는 주어진 정규 표현식과 일치하는 부분 문자열을 찾기 위해 사용된다. 일치하는 하나 이상의 결과가 있으면 배열로 반환하고, 일치하는 결과가 없으면 null을 반환한다. str.match(regexp); - 일치하는 결과일 경우, 일치하는 부분 문자열이 포함된 배열을 반환 - 아무것도 일치하지 않으면 null 반환 ! 정규식 https://icepri3535.tistory.com/206 [JavaScript] 정규식 icepri3535.tistory.com 공감수 0 댓글수 0 2023. 6. 2.
  • [JavaScript] 제곱 수 여부 확인 & 비트 연산 function isPowerOf2(num) { return (num & (num - 1)) === 0; } 'num' 과 'num - 1 ' 을 '&' 비트 연산자를 사용하여 비교한다. 비트연산 결과가 0 이면 'num' 은 2의 제곱수 이므로 'true' 를 반환, 그렇지 않으면 'false' 를 반환 ※ 비트 연산 JavaScript에서 비트 연산자는 숫자 데이터를 비트 단위로 조작하는 데 사용된다. 이러한 연산자는 32비트의 정수형 숫자를 다루며, 주로 비트 단위의 조작, 비트 필드 조작, 비트 플래그 확인 등에 활용된다. [JavaScript에서 사용되는 주요 비트 연산자] 1.비트 AND(&) : 두 비트의 각 자리를 AND 연산하여 해당 자리의 비트가 모두 1일 경우 1을 반환한다. 예를 들.. 공감수 0 댓글수 0 2023. 6. 1.
  • [JavaScript] 필터링 함수 filter((el) => el) 필터링 함수 filter((el) => el) 분할된 문자열들을 필터링하는데 사용된다. => 위 필터링은 비어있지 않은 경우에만 유요한 문자열로 간주한다. [Ex] let fruits = ["", "", "", "apple", "banana", "ornage"]; fruits = fruits.filter((el) => el); console.log(fruits); // [ 'apple', 'banana', 'ornage' ] 공감수 0 댓글수 0 2023. 5. 31.
  • [JavaScript] 이진수의 합 javascript 에서 이진수의 합을 구하는 방법은, 이진수 값을 parseInt() 해서 숫자로 변환하고, 변환한 값을 더한 다음 toString(2) 해서 이진수로 변환해 주면 된다. [Ex] 프로그래머스 알고리즘 문제 이진수를 의미하는 두 개의 문자열 bin1과 bin2가 매개변수로 주어질 때, 두 이진수의 합을 return하도록 solution 함수를 완성해주세요. function solution(bin1, bin2) { let answer = ""; let num1 = parseInt(bin1, 2); let num2 = parseInt(bin2, 2); answer = (num1 + num2).toString(2); return answer; } - parseInt() : 이진수를 정수로 바.. 공감수 0 댓글수 0 2023. 5. 25.
  • [JavaScript] 분할 할당 분할 할당(destructuring assignment)은 JavaScript에서 배열이나 객체를 해체하여 변수에 개별적으로 할당하는 기능이다. 이를 통해 배열 또는 객체의 값들을 편리하게 추출하고 변수에 할당할 수 있다. 배열 분할 할당 배열 분할 할당을 사용하면 배열의 각 요소를 개별 변수로 추출할 수 있다. 배열의 각 요소는 배열에서 해당 위치에 있는 변수에 할당된다. 배열 분할 할당은 대괄호([])를 사용한다. const arr = [1, 2, 3, 4, 5]; const [a, b, c, d, e] = arr; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 console.log(d); // 4 console.log(e); // 5.. 공감수 0 댓글수 0 2023. 5. 22.
  • [JavaScript] indexOf() JavaScript의 indexOf() 메소드는 문자열에서 특정 문자 또는 부분 문자열의 첫 번째 발생 위치를 찾는 데 사용된다. 이 메소드는 해당 문자열에서 첫 번째로 일치하는 위치의 인덱스를 반환하며, 일치하는 문자열이 없으면 -1을 반환한다. indexOf() 메소드는 문자열에만 적용되며, 배열에는 사용할 수 없다. 메소드의 기본 구문은 다음과 같다. str.indexOf(searchValue[, fromIndex]) searchValue: 찾고자 하는 문자열 또는 문자. fromIndex (선택적): 검색을 시작할 인덱스, 이 매개변수를 생략하면 검색은 문자열의 시작부터 수행된다. 음수 값을 사용할 경우, 검색은 문자열 끝에서부터 역으로 수행된다. indexOf() 메소드는 대소문자를 구분한다. .. 공감수 0 댓글수 1 2023. 5. 12.
  • [JavaScript] substring() substring() 메소드는 문자열에서 지정된 시작 인덱스에서부터 지정된 종료 인덱스 직전까지의 부분 문자열을 반환한다. substring() 메소드는 두 개의 인자를 받는다. 첫 번째 인자는 시작 인덱스이며, 두 번째 인자는 종료 인덱스이다. 시작 인덱스는 포함되고, 종료 인덱스는 제외됩니다. 만약 substring() 메소드가 인자를 받지 않으면, 문자열 전체를 반환한다. [Ex] const str = "Hello, world!"; const substr1 = str.substring(0, 5); // "Hello" const substr2 = str.substring(7); // "world!" 위의 예제에서 substring(0, 5)는 문자열 str의 0번째 인덱스부터 5번째 인덱스 직전까지의.. 공감수 0 댓글수 0 2023. 5. 6.
  • [JavaScript] Number.isInteger() Number.isInteger() 메소드는 주어진 값이 정수(integer)인지 아닌지를 판별하는 메소드이다. 이 메소드는 주어진 값이 정수일 경우 true를 반환하며, 아닐 경우 false를 반환한다. 주어진 값이 숫자가 아닌 경우에는 항상 false를 반환한다. [Ex] Number.isInteger(5); // true Number.isInteger(5.0); // true Number.isInteger(5.1); // false Number.isInteger("5"); // false Number.isInteger(NaN); // false 여기서 주목해야 할 점은 Number.isInteger() 메소드는 Math.floor()와 다르다는 점이다. Math.floor()는 주어진 값에서 소수점 .. 공감수 0 댓글수 0 2023. 5. 5.
  • [JavaScript] endsWith JavaScript의 endsWith() 메소드는 문자열이 특정 문자열로 끝나는지 여부를 확인하는데 사용된다. 이 메소드는 boolean 값을 반환한다. endsWith() 메소드는 문자열 인스턴스에서 사용할 수 있다. 메소드는 두 개의 매개변수를 가지는데, 첫 번째 매개변수는 끝나는 부분 문자열을 나타내며, 두 번째 매개변수는 선택적으로 검색을 시작할 문자열의 인덱스를 나타낸다. (Ex) const str1 = "Hello World"; console.log(str1.endsWith("World")); // true const str2 = "Goodbye"; console.log(str2.endsWith("World")); // false const str3 = "Goodbye World"; conso.. 공감수 0 댓글수 0 2023. 5. 3.
  • [JavaScript] startsWith startsWith 메소드는 JavaScript 문자열 객체의 메소드 중 하나이다. 이 메소드는 어떤 문자열이 다른 문자열로 시작하는지 확인하는 데 사용된다. 이 메소드는 두 개의 매개변수를 가진다. 첫 번째 매개변수는 비교하고자 하는 문자열이고, 두 번째 매개변수는 비교 대상이 되는 문자열이다. startsWith 메소드는 비교 대상 문자열이 비교하고자 하는 문자열로 시작하는지 여부를 판단하고, 그 결과를 불리언 값(true 또는 false)으로 반환한다. [Ex] const str = "Hello, world!"; console.log(str.startsWith("Hello")); // true console.log(str.startsWith("hello")); // false 위 코드에서, star.. 공감수 0 댓글수 0 2023. 5. 2.
  • Docker 적용 시 'Error response from daemon: error creating temporary lease: read-only file system: unknown' 에러 발생 최종 프로젝트에 Docker 를 적용시키다가 마지막에 명령어 docker-compose up 를 입력해서 'docker-compose.yml' 파일에서 정의된 서비스들을 실행하던 중 발생했다. 에러 문구 'Error response from daemon: error creating temporary lease: read-only file system: unknown' 에러 원인 100% 확실한 건 아니지만, 이런 저런 시도 끝에 노트북 용량 부족으로 인한 이슈로 확인했다. 에러 문구에서는 용량과 관련된 내용은 없었지만, 검색하다가 'Stack Overflow' 에서 용량의 여유를 두고 Docker 재설치 시도를 해결법으로 알려줘서 진행 해봤다. 시간이 좀 걸렸지만, 잘 적용 되었다. 공감수 0 댓글수 0 2023. 3. 24.
  • DAY90. 최종 프로젝트 18일차 문제발생 Docker 시도 최종 프로젝트에 Docker 적용 및 공부 해결방안 팀원들과 협의 알게 된 것 Docker : 컨테이너 기반의 오픈소스 가상화 플랫폼, 개발 및 테스트 환경의 구축, 빠른 배포, 확장성 등의 이점을 제공 Docker 사용시 해야할 것 1. wsl 2 를 세팅한다. 2. ubuntu 를 다운 받는다. 3. docker desktop 을 다운 받는다. 4. 코드에 docker 세팅을 한다. (.env, module, .dockerignore, docker-compose.yml, Dockerfile) 5. Dockerfile에서 정의된 이미지를 빌드한다. (이미지를 빌드하는 이유는 서비스를 시작하기 전에 독립적으로 이미지를 만들어 두어야 하기 때문) >>>docker-compse b.. 공감수 0 댓글수 0 2023. 3. 24.
  • DAY.87 최종 프로젝트 15일차 문제발생 최종 프로젝트 중간 결과물 관련 튜터님 예상 기술 면접 질문 타임 시도 - 해결방안 - 알게 된 것 Q1. refresh token을 레디스에 저장함으로서 얻을수 있는 장점은 무엇인가? rt 을 저장하는 장소가 FE 냐 BE 냐로 구분 할 수 있는데, 우선 BE 에 저장할 경우 mySQL과 NoSQL 을 나눠서 저장 할 수 있다. mySQL 에 비해서 NoSQL 인 Redis 에 저장하는 것이 비교적 빠른 엑세스 속도를 제공한다. Q1-1 그렇다면 refresh token 을 왜 레디스 (BE) 에 저장하는가? rt 을 백엔드에 저장하는 이유는 특정인물을 강제로그아웃 시키기 위해서 필요하다. 강제로그아웃 기능이 필요 없을 경우 굳이 rt 을 백엔드에 저장할 필요는 없다. [※ 강제로그아웃 시키기.. 공감수 0 댓글수 0 2023. 3. 20.
  • DAY 82. 최종 프로젝트 10일차 문제발생 로그인 시 Local Storage 에 JWT 를 저장하는 방식으로 로그인을 인증했는데, 이때 JWT 에 들어있는 로그인 정보를 가져오는 방법을 모름. 시도 JWT 를 Javascript 에 불러오는 방법 구글링 해결방안 1. LocalStorage 에 저장되어있는 key 값 at 을 가져온다. const token = localStorage.getItem('at'); 2. 가져온 값을 payload 해준다 (실질적인 데이터는 [1] 에 있음) const tokenPayload = token.split('.')[1]; 3. jwt 토큰의 [1] 값을 decode 해준다. const decodedPayload = atob(tokenPayload); 4. decode 한 값을 JSON 문자열을 Ja.. 공감수 0 댓글수 0 2023. 3. 13.
  • DAY 77. 최종 프로젝트 5일차 문제발생 - 시도 - 해결방안 - 알게 된 것 - [결론] 오늘 한 것! 1. 개인회원 회원정보 RUD 코드를 참고해서 사업자 회원정보 RUD 작성 2. 업체별 사용자 데이터 불러오기 BE 작성 (진행 중) 오늘은 시간만 많이 들었지 특별한 에러 발생은 없었다. 공감수 0 댓글수 0 2023. 3. 6.
  • DAY 76. 최종 프로젝트 4일차 문제발생 - 파일 업로드 어떻게 하지? 시도 - AWS S3 + Multer 활용 해결방안 - multerOptionsFactory 를 설정하고, .env 에 AWS 접속 정보 주입하고, aws S3 를 사용하기 위한 패키지를 npm 으로 다운받는다. - AWS S3용 스트리밍 멀티 스토리지 엔진 : S3를 호출하는 Multer 스토리지 엔진 문서의 기존 코드 샘플에 대한 통합 부분 npm i @aws-sdk/client-s3 multer-s3 - multer s3 패키지 npm i -D @types/multer-s3 알게 된 것 - AWS 공부하자... [결론] AWS S3 파일 업로드도 팀원의 도움으로 구현은했다. 만... 내걸로 만들 수 있을까? 내배캠에서 지급된 AWS 강의를 참고해서 더 공부해야.. 공감수 0 댓글수 0 2023. 3. 3.
  • DAY 75. 최종 프로젝트 3일차 문제발생 nest.js 에서 entity 설정하고 컬럼 추가하는 방법을 모름 시도 팀원들에게 물어봄 해결방안 1. entity 에서 추가 수정할 코드 작성 2. global/config 의 ormConfig.ts 에서 TypeOrmModuleOptions 속성 중 synchronize: false => true 로 변경 3. 서버 실행 테이블 컬럼 변경 완료 알게 된 것 nest.js 에서 entity 를 활용해서 테이블을 생성했다면, entity 를 수정해서 테이블 컬럼을 추가 할 수 있다. [결론] 뭔가 진행은 되는데 아직 백엔드만 어느정도 완료되어서 눈에 보이는게 없다. 내일은 파일 업로드 + 프런트 조금 해보자 공감수 0 댓글수 0 2023. 3. 2.
  • DAY 74. 최종 프로젝트 2일차 문제발생 - 시도 - 해결방안 - 알게 된 것 - Transaction 트랜잭션(Transaction)은 데이터베이스(Database)에서 수행하는 작업의 논리적 단위를 말한다. 트랜잭션은 데이터베이스에서 안전하게 데이터를 관리하기 위한 기능 중 하나이다. 예를 들어, 한 번에 여러 개의 계좌에서 돈을 이체하는 작업을 수행할 때, 이체하는 과정에서 일어나는 문제로 인해 중간에 작업이 멈추게 되면, 일부 계좌에서만 이체가 이루어졌을 가능성이 있다. 이러한 문제를 방지하기 위해 트랜잭션을 사용하여 작업이 완료되거나 모두 취소되도록 하여 데이터 일관성을 유지한다. https://icepri3535.tistory.com/183 Transaction 트랜잭션(Transaction)은 데이터베이스(Database).. 공감수 0 댓글수 0 2023. 2. 28.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.