본문 바로가기

분류 전체보기328

[웹개발/한줄정리] 프로그래밍 질문할때 포함해야할 내용 타이틀 1. 문제 상황의 긴급정도 (정말 긴급할 경우) 2. 문제상황 요약 내용 1. 목적: 내가 하려는 작업 2. 에러 내용: 에러 메세지, 에러 발생 화면, 코드번호 등 3. 시도한 내용, 참고 자료 4. 문제 상황의 긴급정도 2022. 3. 21.
[리액트 에러] yarn start시 error Command failed with exit code 127 해결방법 ⚠️ 에러 내용 yarn start 명령어로 리액트 프로젝트를 실행했을 때 에러 메시지 "error Command failed with exit code 127"가 나타난다. ❓ 에러 이유 리액트 프로젝트를 깃허브에서 처음 클론해올때 node_modules는 다운로드 되지 않아 리액트 프로젝트가 제대로 실행되지 않는다. ❗️ 해결 방법 $ yarn install 패키지 매니저(npm, yarn)을 통해 설치한 모듈을 yarn install 명령어로 다운로드해준다. 이때 설치한 모듈의 정보는 package.json에 명시가 되어 있다. 🙂 결과 node_modules가 설치되면 yarn start 명령어를 입력해 프로젝트를 실행하면 에러메세지가 나오지 않는다. 2022. 3. 19.
[자바스크립트] 배열에서 데이터를 추가, 삭제, 복사하는 함수 6가지 (push, pop, unshift, shift, splice, concat) 목차 push: 뒤에서부터 데이터 추가 pop: 뒤에서부터 데이터 삭제 unshift: 앞에서부터 데이터 추가 shift: 앞에서부터 데이터 삭제 splice: 인덱스번호로 데이터 삭제, 추가 concat: 두 배열을 합쳐서 새로운 배열을 생성 배열에서 데이터를 추가, 삭제, 복사하는 함수 1. push() 배열 뒤에서부터 데이터를 추가해주는 함수로 배열의 새로운 길이가 리턴된다. 기존 배열 값이 변한다. Array.push(뒤에서 추가할 데이터); 👉 예제 const alphabet = ['a', 'b', 'c']; const result = alphabet.push('d'); console.log(alphabet); // ["a", "b", "c", "d"] console.log(result); //.. 2022. 3. 18.
[자바스크립트] 배열안에 있는 원소 모두 출력하는 3가지 방법 (for문, for of문, forEach 함수) 배열안에 있는 원소 모두 출력하는 3가지 방법 1. for문 반복문 for문을 사용해서 배열 안에 있는 전체 원소를 출력해준다. const animals = ['Blue whale', 'Elephant', 'Penguins', 'Giant panda', 'Cat']; for(let i = 0; i < animals.length; i++) { console.log(animals[i]); } // "Blue whale" // "Elephant" // "Penguins" // "Giant panda" // "Cat" 2. for of문 변수 i가 배열에 첫번째 원소부터 마지막 원소까지 순서대로 돌아가며 할당해준다. const animals = ['Blue whale', 'Elephant', 'Penguins'.. 2022. 3. 18.
[자바스크립트] 배열 정렬하기 sort(), 오름차순, 내림차순 정리법 1. 배열 기본 문법 1 배열 안에 있는 원소를 문자열로 바꿔 유니코드의 순서대로 오름차순 정렬해준다. 기존 배열을 변경해준다 Array.sort() 👉 문자정렬 예제 알파벳 순서대로 months 배열안에 있는 데이터가 정렬된다. const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); console.log(months); // ["Dec", "Feb", "Jan", "March"] 👉 숫자정렬 예제 sort() 함수는 배열안에 있는 원소를 문자열로 바꿔서 정렬해주기 때문에 숫자크기대로 정렬이 되지 않는다. const numbers = [25, 13, 1, 6, 59] const result = numbers.sort(); console.log(res.. 2022. 3. 18.
[자바스크립트] 객체 키 접근방법의 차이점 (중괄호 vs 마침표) 객체에 접근하는 방법 2가지 1. 중괄호 obj['key'] 2. 마침표 obj.key 👉 예제 const planets = { 수성: "Mercury", 금성: "Venus", 지구: "Earth", 화성: "Mars", 목성: "Jupiter", 토성: "Saturn", 천왕성: "Uranus", 해왕성: "Neptune" }; const name = "지구" // []로 접근하면 동작한다 console.log(planets[name]); // Earth // .으로 접근하면 동작하지 않는다 console.log(planets.name); // Undefined // .으로 접근하려면 key값으로 직접 접근해야한다 console.log(planets.지구); // Earth 결론 객체의 key에 직접.. 2022. 3. 18.
[Visual Studio] Live Server 포트 번호 자동으로 렌덤 설정해주기 1. Live Server 익스텐션 설치 2. 라이브 서버를 켰을때는 기본 포트 번호 5500이 나옴 3. 설정파일에 아래의 코드를 추가한다 "liveServer.settings.port": 0 4. 라이브 서버를 돌릴때마다 포트 번호가 랜덤하게 바뀐다 2022. 3. 17.
[Sass/Scss] Live Sass Compiler를 사용해 컴파일된 css파일 경로 자동으로 바꾸기 1. VS code > settings로 이동하기 2. live sass compile 검색 > Edit in settings.json 클릭 3. 아래의 코드를 { } 안 가장 마지막 줄에 추가 (위에 줄에 , 잊지 말기) 컴파일된 css파일을 sass파일과 같은 폴더에 위치시키고 싶을때: savePath는 null 값 "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": null } ] 컴파일된 css파일을 루트폴더에 위치시키고 싶을때: savePath는 "/" "liveSassCompile.settings.formats": [ { "format": "expanded", "exte.. 2022. 3. 16.
[Sass/Scss] Scss 프로젝트 시작하기 1. Visual Studio > Extension > Live Sass Compiler 설치 2. scss 파일안에 스타일 코드 작성 후 하단에 Watch Sass 버튼 누르기 3. Watch Sass가 진행된 후에는 css, css.map 파일이 생성 4. css, css.map 파일은 scss파일을 css파일로 만들어 웹브라우저가 읽을 수 있게 만들어준것 2022. 3. 16.
[파이썬] 반복문 for문 (range 함수, continue문, break문) ⚠️ 이 포스팅은 인프런님의 프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 섹션 4. 파이썬 흐름 제어 for구문(2-1) for구문(2-2) for구문(2-3) 1. for문 기본문법 for 변수 in : 연속적으로 나열된 반복할 수 있는 데이터 형태 (문자열 "", 리스트 [], 튜플 (), 딕셔너리 {}) 의 첫 번째 요소부터 마지막 요소까지 차례로 변수에 대입되어 를 실행한다 1.1 이 문자열일때 stringType = "hello" for s in stringType: print(s) # h # e # l # l # o 1.2 이 리스트일때 listType = ['Pooh', 1921.. 2022. 3. 14.
[파이썬] if문 (True, False 로 취급되는 값, if else문, 다중 조건문, 중첩 조건문) ⚠️ 이 포스팅은 인프런님의 프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 섹션 4. 파이썬 흐름 제어 if 구문(1-1) if 구문(1-2) if 구문(1-3) 1. True, False로 취급되는 값 1.1 True 1.1.1 0이 아닌 수 x = 1 print(bool(x)) # True 1.1.2 "문자열" x = "hello" print(bool(x)) # True 1.1.3 데이터가 담겨있는 리스트 [data...] x = [1, 2, 3] print(bool(x)) # True 1.1.4 데이터가 담겨있는 튜플 (data...) x = (1, 2, 3) print(bool(x)) .. 2022. 3. 14.
[파이썬] 산술연산자, 비교연산자, 논리연산자 정리 (+ 연산자 우선순위) ⚠️ 이 포스팅은 인프런님의 프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 1. 산술 연산자 + 더하기 - 빼기 * 곱하기 / 나누기 2. 비교 연산자 A > B: A가 B보다 크다 A >= B: A가 B보다 크거나 같다 A =, 2022. 3. 14.
[리액트/한줄정리] A || B와 A && B의 차이 A || B A가 false면 B를 실행해라 A의 값이 있으면 A를 넣고 A의 값이 없으면 B를 넣어라 A && B A가 true면 B를 실행해라 A의 값이 있으면 B를 넣는다 2022. 3. 11.
[파이썬] 집합 (집합 선언, 집합에서 자주쓰이는 함수) ⚠️ 이 포스팅은 인프런님의 프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 섹션 3. 파이썬 기초 자료형 집합(6-1) 1. 집합 선언 1.1 { }안에 원소 넣어 선언 a = {1, 2, 3} print(a, type(a)) # {1, 2, 3} 1.2 함수 set()으로 선언 a = set({1, 2, 3}) print(a, type(a)) # {1, 2, 3} a = set([1, 2, 3]) print(a, type(a)) # {1, 2, 3} 2. 딕셔너리 vs 집합 딕셔너리는 key와 value가 한쌍인 값들의 집합으로 이루어진 데이터 형태 dataDict = { 'key': 'va.. 2022. 3. 9.
[파이썬] 딕셔너리 (선언, 출력, 수정, 추가, 관련 함수, in 메소드) ⚠️ 이 포스팅은 인프런님의 프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 섹션 3. 파이썬 기초 자료형 딕셔너리(5-1) 딕셔너리(5-2) 1. 딕셔너리 선언 1.2 선언하는 3가지 방법 1) {}안에 key와 value로 이루어진 데이터를 넣는다 key와 value의 값은 작은따옴표('')나 큰따옴표("")로 감싸준다 a = { 'key': 'value' } 2) dict() 함수로 리스트 안에 튜플 형태로 넣는다 a = dict([ ('key', 'value') ]) 3) dict() 함수 안에 더 간단히 넣는 방법 a = dict( key = 'value' ) 한 딕셔너리 안에 key .. 2022. 3. 8.
[파이썬] 튜플 (튜플 선언과 팩킹 & 언팩킹, 튜플에서 자주 쓰이는 함수 ) ⚠️ 이 포스팅은 인프런님의 프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 섹션 3. 파이썬 기초 자료형 튜플(4-1) 1. 튜플 리스트와 유사한 특징을 가진 파이썬의 데이터 형식 튜플 자료형은 수정과 삭제가 불가하다 변경하고 싶지 않은 데이터를 튜플 자료형으로 사용한다 2. 튜플 선언 2.1 튜플 선언하는 방법 1) 소괄호로 묶는다 a = () 2) 괄호가 없어도 여러 데이터가 있으면 튜플로 간주한다 (소괄호를 쓰는것이 권장된다) a = 1, 2, 3 3) 원소가 하나일때는 컴마로 끝나야 튜플로 인식한다. a = (1) print(type(a)) # a = (1, ) print(type(a).. 2022. 3. 8.
[파이썬] 리스트 (리스트 선언, 연산, 값 추출, 수정, 삭제, 메소드) ⚠️ 이 포스팅은 인프런님의 프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 섹션 3. 파이썬 기초 자료형 리스트(3-1) 리스트(3-2) 1. 리스트 여러 데이터 타입을 [ ] 안에 담을 수 있다 리스트는 시퀀스형으로 순서가 존재한다 리스트 자료형은 중복, 수정, 삭제가 가능한 데이터 형식이다 다른 언어에서는 일반적으로 배열이라고 많이 불린다 주로 알고리즘을 풀기 위해 많이 사용된다 2. 리스트 선언 2.1 [ ]를 변수에 할당한다 a = [] print(type(a)) # 2.2 list( ) 함수를 변수에 할당한다 b = list() print(type(b)) # 3. 리스트 특징 서로 다.. 2022. 3. 8.
[파이썬] 문자열 (이스케이프 코드, 문자열 연산, 문자열을 다루는 함수) ⚠️ 이 포스팅은 인프런님의 프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 섹션 3. 파이썬 기초 자료형 문자형(2-1) 문자형(2-2) 문자형(2-3) 1. 문자열 생성 변수 선언 후 문자형 데이터를 할당한다. 작은 따옴표, 큰 따옴표 모두 사용 가능하고 따옴표를 중첩해서 사용할 수도 있으나 권장하지 않는다. str1 = 'peaches' str2 = "strawberry" str3 = '''fig''' str4 = """banana""" print(type(str1), type(str2), type(str3), type(str4)) # 2. 빈 문자열을 선언하는 2가지 방법 2.1 내용없이.. 2022. 3. 8.
[파이썬] 숫자형 데이터 (연산자, 연산하기, 형 변환하기) ⚠️ 이 포스팅은 인프런님의 프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 섹션 3. 파이썬 기초 자료형 숫자형(1-1) 숫자형(1-2) 1. 숫자형 데이터의 종류 숫자형 데이터는 정수, 실수 복소수형이 있다. 1.1 init (정수형) 1, 2, 3, 4처럼 소수점이 없는 숫자. 정수에는 양의 정수, 0, 음의 정수가 있다. 즉 -1, 0, 1 모두 정수형이다. a = 1 print(type(a)) # 1.2 float (실수형) 정수와 달리 소수점이 포함된 숫자 (분수도 가능). 3.14, 1.65등 소수점을 포함한 숫자가 실수형이다. a = 3.14 print(type(a)) # b = .. 2022. 3. 8.
[파이썬] 파이썬에서 지원하는 자료형 정리 ⚠️ 이 포스팅은 인프런님의 프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 1. number (숫자형) 1.1 init (정수형) 1, 2, 3, 4처럼 소수점이 없는 숫자. 정수에는 양의 정수, 0, 음의 정수가 있다. 즉 -1, 0, 1 모두 정수형이다. a = 1 print(type(a)) # 1.2 float (실수형) 정수와 달리 소수점이 포함된 숫자 (분수도 가능). 3.14, 1.65등 소수점을 포함한 숫자가 실수형이다. a = 3.14 print(type(a)) # b = 1 / 2 print(type(b)) # 1.3 complex (복소수형) 실수와 허수의 합으로 이루어지는 수. 복소수형은 실수 + 허수j 또는 실수 .. 2022. 3. 8.