전체 글 111

Frontend/전체
React 프로젝트에 ESLint와 Prettier 적용하기

yarn berry 프로젝트 생성하기yarn berry를 사용하는 이유💡 yarn berry를 사용하는 이유에 대해서 알아보자! NPM을 안쓰는 이유?🙋 무겁고 복잡한 node_modules프로젝트의 node_modules 폴더의 용량이 20기가나 차지하는 매직을 볼 수 있dpdnjs402.tistory.com yarn berry로 프로젝트를 생성해보았다.이제 ESLint와 Prettier를 적용해보겠다. 플러그인 설치VSCode 플러그인을 설치해준다. ESLint 설정하기yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-react eslint-config-react-app패키지들을 설치해준다...

Frontend/전체
yarn berry 프로젝트 생성하기

yarn berry를 사용하는 이유💡 yarn berry를 사용하는 이유에 대해서 알아보자! NPM을 안쓰는 이유?🙋 무겁고 복잡한 node_modules프로젝트의 node_modules 폴더의 용량이 20기가나 차지하는 매직을 볼 수 있다...회사 컴퓨터의 용량dpdnjs402.tistory.comyarn berry를 사용하는 이유에 대해 알아봤으니yarn berry를 이용해 프로젝트를 생성해보자. yarn을 global로 설치해준다npm install -g yarn CRA 기반 프로젝트를 생성해준다.yarn create react-app --template typescriptCRA(보일러 플레이트)기반 타입스크립트 프로젝트를 생성한다.node_modules 폴더는 필요가 없으니 삭제해주도록한다...

Frontend/전체
yarn berry를 사용하는 이유

💡 yarn berry를 사용하는 이유에 대해서 알아보자! NPM을 안쓰는 이유?🙋 무겁고 복잡한 node_modules프로젝트의 node_modules 폴더의 용량이 20기가나 차지하는 매직을 볼 수 있다...회사 컴퓨터의 용량이 256기가여서 매번 용량이 부족하면 node_modules를 지워줘야한다. 😱 🙋 비효율적인 의존성 검색 & 비효율적인 설치 npm은 여러 패키지들이 동일한 라이브러리의 의존성을 가지고 있다.그 라이브러리들이 각각 다른 버전을 사용한다고 했을 때 npm은 중복된 라이브러리를 설치한다.이는 디스크 공간을 많이 차지하게 되고, 설치나 업데이트에 많은 시간이 들게 한다.  🙋 유령의존성npm은 중복된 패키지 의존성을 최소화하여 공간을 절약하고 패키지 설치시간을 줄이기 위해..

코딩자율학습단/12기 (파이썬)
[코딩자율학습단] 파이썬 4일차 (문자열 다루기)

4장 문자열 다루기4.1 문자열이란sentence1 = '나는 소년입니다.'print(sentence1) 문자열 여러줄 작성하는 방법sentence3 = """나는 소년이고,파이썬은 쉬워요."""print(sentence3) 4.2 원하는 만큼 문자열 자르기: 슬라이싱jumin = "990229-1234567"print("성별 식별번호 : " + jumin[7])print("연 : " + jumin[0:2]) # 0부터 2 직전까지(0, 1)print("월 : " + jumin[2:4]) # 2부터 4 직전까지(2, 3)print("일 : " + jumin[4:6]) # 4부터 6 직전까지(4, 5)print("생년월일 : " + jumin[:6]) # 처음부터 6 직전까지 -> jumin[0:6]과 같..

코딩자율학습단/12기 (파이썬)
[코딩자율학습단] 파이썬 3일차 (연산자의 종류)

3장 연산자의 종류3.1 연산자의 종류3.1.1 산술 연산자더하기, 빼기, 곱하기, 나누기print(1 + 1) # 2print(3 - 2) # 1print(5 * 2) # 10print(6 / 3) # 2.06 나누기 3 => 2.0 정수가 아닌 실수로 표시된다.정수가 나오길 원한다면print(6 // 3) # 2// 연산자를 사용하는 방법이 있다./ : 연산자 왼쪽을 오른쪽으로 나누기// : 연산자 왼쪽을 오른쪽으로 나눈 몫 3.1.2 비교연산자등호화 함께 값의 크기를 비교 > 결과는 Boolean 값으로 출력 3.1.3 논리연산자and : 좌, 우 모두 참일 때 Trueor : 좌, 우 둘 중 하나라도 참이면 Truenot : 값이 참이면 False, 거짓이면 True 단축평가print(5 > 4 ..

Frontend/JavaScript & Jquery
JavaScript 단축 속성명 & 속성 계산명

📚 단축속성명이란? 단축 속성명(Shorthand Property Names)은 ES6에서 도입된 JavaScript 객체를 더 간단하게 정의할 수 있는 문법 // 기존 방식const name = "철수";const age = 20;const obj1 = { name: name, age: age};// 단축 속성명 사용const obj2 = { name, age};위와 같이 단축해서 잘 사용은 하고 있었는데, 해당 기능의 명칭을 몰랐었다"단축 속성명" 이라는 문법이라고 한다. 단축 속성명은 객체의 키(key)와 값(value)이 동일한 경우, 한 번만 작성하여 객체를 생성할 수 있게 해준다. 변수 사용 조건단축 속성명은 변수가 미리 선언되어 있는 경우에만 사용 가능문자열, 객체, ..

코딩자율학습단/12기 (파이썬)
[코딩자율학습단] 파이썬 2일차 (자료형과 변수)

2장 자료형과 변수2.1 숫자 자료형따옴표 없이 숫자만 입력시 숫자 자료형print(5) print(-10) print(3.14) print(1000) print(5 + 3) print(2 * 8) print(6 / 3)print(3 * (3 + 1)) 2.2 문자열 자료형숫자를 따옴표로 감싸면 문자열 자료형print('풍선')print("나비")print("abcdefg")print("10")print("파이썬" * 3) # 문자열 반복 2.3 Bool 자료형not 연산자 사용가능print(5 > 10) print(5 10)) 2.4 변수변수 : 어떤 값을 저장하는 공간변수명 = 값변수를 만들고 값을 대입해 저장하는 과정을 변수를 정의한다고 표현 변수명 규칙- 소문자, 대문자, 숫자, 언더바(_) 사..

코딩자율학습단/12기 (파이썬)
[코딩자율학습단] 파이썬 1일차 (Hello, 파이썬!)

1장 Hello, 파이썬! 1.1 개발 환경 설정하기https://github.com/gilbutITbook/080357 소스 코드 저장소" data-og-description=" 소스 코드 저장소. Contribute to gilbutITbook/080357 development by creating an account on GitHub." data-og-host="github.com" data-og-source-url="https://github.com/gilbutITbook/080357" data-og-url="https://github.com/gilbutITbook/080357" data-og-image="https://scrap.kakaocdn.net/dn/bxobMv/hyXWsLd1e6/G4l..

코딩자율학습단/12기 (파이썬)
[코딩자율학습단] 학습 안내

코딩 자율학습단 시작! 학습 일정 커리큘럼 학습 미션1) 학습인증 주 1회 => 총 4회 작성2) 후기미션 총 2회 - 코딩자율학습도서 후기 작성 (~1/12 일)학습하고 있는 도서사진 1장 + 도서 자체에 대한 리뷰 및 총평 (온라인 서점에 리뷰 남기기)작성한 내용을 후기작성게시판에 링크 또는 캡쳐 이미지 올리기- 코딩자율학습단 후기 (~2/7)4주간 학습 후, 내용 정리하면서 지금까지 공부한 내용 종합하여 후기 작성 / 도서 사진 최소 1장 이상 + 후기 100자이상나도코딩 소스코드https://github.com/gilbutITbook/080357 소스 코드 저장소" data-og-description=" 소스 코드 저장소. Contribute to gilbutITbook/080357 develop..