본문 바로가기

전체 글328

[웹개발/한줄정리] 레거시 코드(Legacy Code)란? 레거시 코드란 누군가 떠나면서 남겨둔 코드를 의미한다. 주로 2가지 의미로 해석된다: 1. 테스트 코드가 없어 검증이 힘들거나 불가능한 코드 2. 코드의 변경이 어려운 코드 2022. 4. 21.
[리액트/한줄정리] 라이프 사이클(Life Cycle)이란? 라이프 사이클이란 컴포넌트가 우리 눈에 보이게된 그 순간부터 사라지는 순간까지 즉, 컴포넌트의 생애주기를 말한다. 2022. 4. 21.
[웹개발/한줄정리] 비즈니스 로직(Business Logic)이란? 비즈니스 로직이란 웹사이트가 동작하는데 필요한 핵심 데이터 처리를 수행하는 알고리즘을 말한다 2022. 4. 20.
[웹개발/한줄정리] 프론트엔드 개발이란? HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고 그것으로 사용자와 상호 작용할 수 있도록 하는 것. 2022. 4. 20.
[리액트] 리덕스 정리 (전역상태관리란?) ⚠️ 이 포스팅은 스파르타코딩클럽 리액트 기초반을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 리액트 기초반 3-7 리덕스를 통한 리액트 상태관리 3-8 리덕스 살펴보기 3-9 리덕스 써보기 3-10 리덕스와 컴포넌트를 연결하자 3-11 컴포넌트에서 리덕스 데이터 사용하기 리덕스란? 리덕스란 전역 상태 저장소다. 상태란 데이터를 의미하므로 리덕스는 전역적(global)으로 관리하는 데이터 저장소를 말한다. 리덕스를 사용하지 않는 리액트 프로젝트는 컴포넌트 내부에서 상태를 설정하고 업데이트해주는 지역적(local)인 방식으로 상태관리를 해주었다. 하지만 리덕스를 사용하면 상태를 저장해주는 데이터 저장소가 따로 생겨 컴포넌트 내부에서는 상태관리를 해주지 않아도 된다... 2022. 4. 20.
[Sass/Scss] parcel 번들러로 Scss 프로젝트 시작하기 1. npm init으로 프로젝트에 package.json 파일 생성하기 여기서 y 플래그는 default 값으로 설정된package.json을 바로 설치하고 싶을때 사용한다. 참고로 -y는 yes를 의미한다. npm npm init -y yarn yarn init -y 2. npm i -D parcel-bundler로 parcel 번들러 설치하기 여기서 -D 플래그는 parcel이라는 번들러를 브라우저에 올리지 않고 개발용으로만 사용하도록 설치한다는 의미다. 설치가 완료되면 package.json에 parcel-bundler가 올라가고 node_modules 폴더, package-lock.json 파일이 생성된다. parcel 번들러는 Scss파일을 CSS로 변환시켜 웹브라우저가 해석할 수 있도록 도.. 2022. 4. 20.
[Sass/Scss] Sass/Scss란? Sass란 CSS 문법을 더 쉽게 사용할 수 있게 도와주는 CSS 전처리기(CSS Preprocessor) 도구다. 웹브라우저에서는 Sass 코드를 해석할 수 없으므로 Sass를 CSS로 변환하여 웹브라우저에 전송해야한다. Sass는 CSS로 변환하기 전에 사용하기 때문에 CSS 전처리 도구라고 부른다. CSS 전처리도구는 Sass 이외에도 less, stylus도 있다. 2022. 4. 20.
[Sass/Scss] 외부에 있는 다른 Scss 파일 불러오기 @import "./sub" sub.scss라는 파일이 같은 파일 경로에 위치해 있다면 아래의 코드와 같이 해당파일을 import 해준다 이때 확장자(scss)는 명시하지 않아도 된다 파일이름, 파일이름 으로 여러개의 파일을 한번에 import 할 수 있다 2022. 4. 20.
[Sass/Scss] 주석처리하기 Scss 코드를 주석처리하는 두가지 방법 1. /* ... */ 사용하기 2. // ... 사용하기 .container { h1 { color: royalblue; /* background-color: orange; */ // font-size: 60px; } } /* ... */와 //... 의 차이점 /*...*/로 주석처리를 하면 Scss 파일이 CSS로 컴파일이 된 후에도 해당 코드가 주석처리된채로 남아있다 //...로 주석처리를 하면 Scss 파일이 CSS로 컴파일이 된 후에 Scss파일에서 주석처리한 코드가 사라진다 2022. 4. 20.
[Sass/Scss] 사스의 데이터 타입 7가지 1. 숫자 데이터(number) 단위가 붙어 있는 숫자도 숫자 데이터로 취급을 한다 예) 100px, 1em 숫자 데이터 예시: 1, 0.5, 100px, 1em $number: 1; 2. 문자 데이터(string) 문자 데이터 예시: bold, relative, ".../img/profile.png" $string: bold; 3. 색상 데이터(color) 색상의 이름은 문자 데이터가 아닌 색상 데이터 타입이다 예) green 16진수 색상과 rgba도 색상 데이터다 예) #FFFF00, rgba(0, 0, 0, .1) 색상 데이터 예시: green, #FFFF00, rgba(0, 0, 0, .1) $color: green; 4. 불리언 데이터(boolean) 불리언 데이터 예시: true, false.. 2022. 4. 20.
[Sass/Scss] Scss 문법 정리 1. 셀렉터 중첩 (Nesting) 부모 셀렉터가 후손 셀렉터를 감싸고 있는 형식 Scss nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } CSS nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } 2. 속성 중첩 아래 코드에 있는 .box 셀렉터는 속성값으로 font.. 2022. 4. 20.
[Node.js/한줄정리] package.json과 package-lock.json package.json 현재 프로젝트에 관한 정보와 패키지 매니저(npm, yarn)를 통해 설치한 패키지를 관리해주는 파일 package.json에 작성되는 정보는 크게 2개로 나눌 수 있다: 프로젝트의 정보: 현재 프로젝트에 관한 정보를 명시 패키지 버전 정보: 패키지 매니저(npm, yarn)를 통해 설치한 패키지의 목록과 버전 명시 package-lock.json package.json에 명시된 패키지들이 동작하기 위해 필요한 다른 패키지들에 관한 정보가 명시된 파일 yarn을 통해 패키지를 설치했다면 yarn.lock 파일이 생성된다 package.json 파일은 직접 관리하지만 package-lock.json 파일은 package.json에 명시된 패키지를 설치하고 삭제할때 자동으로 업데이트(.. 2022. 4. 20.
[Node.js/한줄정리] npm init이란? npm init은 프로젝트에 package.json 파일을 생성하는 명령어다. 2022. 4. 20.
[웹개발/한줄정리] 네임스페이스(Namespace)란? 네임스페이스란 이름을 통해 구분 가능한 범위를 만들어내는 것으로 일종의 유효범위를 지정하는 방법을 말한다. 2022. 4. 20.
[웹개발/한줄정리] 번들러(Bundler)란? 번들러란 여러개로 나눠진 파일을 하나로 합쳐주는 도구를 말한다. 참고할 포스팅 [리액트] 리액트에서 자주 나오는 용어 정리 (컴포넌트, 모듈, 번들러, 웹팩, 바벨, 렌더링) [JavaScript] 번들러(Bundler)란? 2022. 4. 20.

티스토리툴바