새싹 프론트엔드

오늘은 웹(Web)과 HTML에 대해 배웠다. > 웹(Web) 월드 와이드 웹(World Wide Web)이란 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간 웹은 서버와 클라이언트로 구성되어있다 웹 서버 : 데이터 저장 및 관리, 클라이언트의 요

오늘은 HTML 문서를 꾸며주는 CSS와 선택자를 배웠다.HTML 문서의 색, 모양 등 외관을 꾸미는 언어CSS로 작성된 코드를 스타일 시트(style sheet)라고 한다.스타일 시트는 반드시 head 아래 자식 요소로 작성<span> 을 20px blue로 출

오늘은 CSS의 단위 속성과 글자 속성을 배웠다.키워드 단위W3C에서 미리 정의한 단위로, 키워드를 입력하면 스타일이 자동으로 적용됨크기 단위%브라우저 디폴트 크기를 기준으로 비율값을 지정em부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율

오늘은 CSS의 배경 속성과 박스 속성을 배웠다. > CSS 배경 속성 background-image 배경 이미지 지정 background-size 배경 이미지의 크기 지정 background-repeat 배경 이미지의 반복 형태 지정

오늘은 CSS의 위치 속성을 배웠다.position 속성값position : staticposition 속성의 디폴트 값HTML 태그의 작성된 순서대로 출력 위치를 정함 (상대 위치)top, bottom, left, right 속성값은 적용 안됨position : re

오늘은 CSS의 레이아웃과 HTML 테이블 태그를 배웠다. > CSS 레이아웃 정렬 수평 정렬 부모 > overflow : hidden 속성 지정 자식 > float 속성 지정 📍 부모 요소에 overflow:hidden을 지정하는 이유 → 자식

오늘은 HTML5의 목록 태그를 배웠다. > 목록 태그(List) 리스트 종류 순서 있는 리스트(ordered list) `` 으로 글머리 기호를 변경할 수 있다. 순서 없는 리스트(unordered list) `` 정의 리스트(definition l

오늘은 반응형 웹(responsive Web)을 만드는 미디어 쿼리를 배웠다. > 반응형 웹 PC, TV, 스마트 기기 등 다양한 기기에 반응하여 화면의 크기가 자동으로 조절되어 최적화된 화면 레이아웃을 보여줌 반응형 웹의 장점 기기의 화면 크기나 해상도에

오늘은 플렉스 박스로 아이템을 배치하는 방법을 배웠다. > 플렉스 박스 플렉스 박스(Flex Box) 가변적인 박스를 만드는 기술로, 박스 요소들을 다양하고 자유롭게 배치할 수 있음 반응형 웹사이트를 제작할 때 최적의 기술 플렉스 박스의 축

오늘은 그리드 레이아웃을 사용하여 요소를 배치하는 방법을 배웠다. > 그리드 레이아웃 웹사이트를 여러개의 칼럼(column)과 줄(row)로 나눈 후 요소를 화면에 맞게 배치하는 것을 의미 스크린샷 2022-10-28 오후 5.18.19.png 그

오늘은 자바스크립트의 자료형과 변수에 대해 배웠다. > JavaScript 자바스크립트란? 1995년 넷스케이프에서 개발된 웹 프로그래밍 언어 웹 페이지에서 동작하는 프로그램을 만들 때 사용(동적인 페이지) 웹 페이지가 어떻게 보일지 제어 사용자가

오늘은 자바스크립트의 조건문과 반복문에 대해 배웠다. > 조건문 조건을 검사하여 참인지 거짓인지에 따라 서로 다른 작업(코드)을 실행 if → 필수, else → 필수 아님 if문 중첩 가능 if문 조건식이 참이면 실행문을 실행한 후 if문을 벗어남 조건식이 거

오늘은 자바스크립트에서 하나의 공간에 여러개의 데이터를 저장할 수 있는 배열을 배웠다. > 배열 데이터 값을 하나의 목록으로 생성 여러 개의 데이터를 연속적으로 저장하고, 전체를 하나의 단위로 다루는 데이터 구조 배열 만들기 👉 변수 3개를 작성하지 않고, 과

객체(object)란 프로그램에서 인식할 수 있는 모든 대상으로, 하나의 공간에 여러개의 순서 없는 데이터를 저장할 수 있다. > 객체 자바스크립트의 객체 구성 여러 개의 프로퍼티(property)와 메소드로 구성 프로퍼티 : 객체의 고유한 속성

함수는 특정한 목적을 가지고 작성된 코드 블럭으로, 데이터를 전달받아 처리한 후 결과를 돌려준다. 주로 중복된 코드를 함수로 작성하여 재사용한다.특정한 목적을 가지고 작성된 코드 블럭데이터를 전달받아 처리한 후, 결과를 돌려주는 코드 블록함수 호출함수의 코드 실행 요청

클래스는 프로퍼티와 메서드로 구성되어 있으며, 객체를 생성하는 템플릿이다. 생성자 함수보다 간편하게 객체를 생성할 수 있다.<span style='background-color: 📍 객체(Object) : 실생활에 존재하는 실제적인 물건 또는 개념속성(Attri

오늘은 ES6에서 새로 추가된 문법을 배웠다.인자로 함수를 받거나 함수를 반환하는 함수(매개변수로 함수를 가짐)함수 안에서 다른 함수를 원하는 시점에 호출할 수 있는 권한을 가진 함수인자로 전달되는 시점에 바로 함수를 호출하는 것이 아닌 고차 함수 내부에서 필요한 순간

이벤트마우스 클릭, 키보드 입력 등 사용자의 입력 행위나 문서 또는 브라우저의 상태 변화를 자바스크립트 코드에게 알리는 통지이벤트 리스너발생한 이벤트에 대처하기 위해 작성된 자바스크립트 코드이벤트 종류HTML5에서 이벤트 종류는 70여개이벤트 리스너 이름은 이벤트 이름

클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷대부분의 프로그래밍 언어에서 사용 가능표기방식키와 값으로 구성객체랑 똑같이 생겼는데 키에 따옴표를 붙여줘야함 (문자열)JSON.stringify()객체 또는 배열을 JSON 포맷의 문자열로 변환직렬화(ser

응용 프로그램에서 데이터를 주고 받기 위한 방법API 사용 시, 개발 시간 및 비용 절감 가능Open API누구나 사용할 수 있도록 공개된 API지도, 날씨, 음악, 공공데이터, 쇼핑 등 다양한 분야에서 사용 가능제공처네이버, 카카오, 구글 등<span style

React 개발 환경 설정을 해보자!페이스북이 만든 사용자 UI 구축을 위한 라이브러리특징 \- Component 기반 \- Virtual DOM 사용 \- JSX 문법 사용프레임워크 vs 라이브러리프레임워크일정한 형태와 기능을 갖추고 있는 골격 또는

배열 안의 모든 요소들의 값을 변경해서 새로운 배열을 생성하는 함수실습 map() 함수를 이용하여 영화 목록 앱 수정데이터는 서버에서 전달 받는다고 가정데이터는 객체 형식으로 배열에 저장App.jsMovie.js자바스크립트의 배열다양한 자료형을 저장 가능XML과 JSX

값을 저장하거나 변경할 수 있는 객체컴포넌트 내부에서 바뀔 수 있는 값을 의미주로 버튼 클릭과 같은 이벤트와 함께 사용함props와 차이점props는 부모 컴포넌트가 설정한 값을 전달받아 읽기 전용으로만 사용할 수 있음props는 컴포넌트 내부에서는 값을 직접 변경할

리액트의 이벤트 시스템 이벤트를 사용할 때 주의사항 이벤트 이름은 카멜 표기법으로 작성 onClick, onKeyUp 등 이벤트의 값으로 함수 형태를 전달 실제 자바스크립트 코드를 전달하지 않음 📍 DOM 요소에만 이벤트를 설정할 수 있음 di

컴포넌트 스타일링 리액트 컴포넌트 스타일링 이름 생성 규칙 컴포넌트이름-클래스 형태 프로젝트 내 App.css BEM 네이밍 방식 Block, Element, Modifier class에만 사용하는 것이 규칙 📍 리액트에서는 id를 거의

Post CSS CSS를 불러와서 사용할 때. 클래스 이름을 고유한 값 형태로 자동으로 만들어 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술 값 형태 파일이름클래스이름해시값 사용 방법 버전2 이상부터는 별도의 설정이 필요없고, 다

지금까지 배운 리액트 내용을 활용해서 간단한 todo 앱을 만들어 보았다. > 프로젝트 준비하기 프로젝트 생성 $ npx create-react-app todo-app 라이브러리 설치 $ npm install --save react-icons Reac

📚 Intro 짧게 느껴졌던 일주일 간의 프로젝트 기간이 끝났다. 새로 배운 JavaScript와 API, JSON-server를 활용한 프로젝트를 하고 싶어서 카카오 도서 API를 활용한 책 검색 & 책갈피 생성 사이트를 구상해 보았다. 나는 이런 식으로 책을

Hooks 리액트 버전16.8에 새로 도입된 기능 함수형컴 포넌트에서 상태 관리를 할 수 있는 기능 제공 종류 useState useEffect useReducer useMemo useCallback useRef useS

useReducer() 컴포넌트의 상태를 관리할 때 사용하는 Hooks 특징 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리 가능 다른 컴포넌트에서도 해당 로직을 재사용 가능 동작 과정 useReducer() 사용 방법 | 값 | 설명 | | -

Context란? 어플리케이션에서 전반적으로 사용할 값을 관리 예) 사용자의 언어, 로그인 상태, UI 테마 등 환경 설정 주의사항 Context와 컴포넌트가 연동되면 컴포넌트를 재사용하기 어려움 자주 변경되는 상태인 경우, 사용하지 않는 것이 좋음 Cont

싱글 페이지 어플리케이션 (SPA) 일반 웹 사이트의 동작 과정 웹 사이트의 화면 일부를 수정하는 방법 초기 웹 사이트 각 화면에 해당하는 웹 문서를 일일이 제작 서버에 저장된 값을 화면에 반영하는 동적인 웹 문서 도구 개발 서버 사이드 렌더링(Se

동기vs 비동기 동기 방식(synchronous) 요청을 보낸 후 응답을 받아야 다음 동작을 실행할 수 있는 방식 특징 설계가 간단하고 직관적 요청에 대한 응답을 받을 때까지 대기해야 하는 단점 비동기 방식(Asynchronous) 요청을 보낸 후

Firebase란? 구글의 모바일 및 웹 어플리케이션 개발 플랫폼 백엔드 서버 기능을 클라우드 서비스 형태로 제공 인증(Authentication), 데이터베이스(Firestore), 분석(Analytics) 등의 기능 제공 Firebase(https://fireba

리액트, 라우터, firebase를 사용해 CRUD가 가능한 과일 정보 Database 사이트를 만들어 보았다. > 페이지 과일 정보 입력 페이지 Addfruit component 과일 리스트 페이지 FruitsList component 과일 정보 상세페이지 FruitsInfo component ![](https://velog...

TypeScript란? 타입이 필요한 이유 특징 변수 값에 데이터 타입 지정 가능 예측 가능한 코드 작성 가능 디버깅 편리 객체지향 프로그래밍 가능 클래스 기능 제공 동작 과정 ![](https://velog.velcdn.com/image

함수 함수 선언문 반환값이 숫자 타입인 함수 반환값이 문자열 타입인 함수 반환값이 문자열 배열 타입인 함수 → 반환값에 배열도 넣을 수 있음 반환값이 없는 함수 void 타입 아무것도 반환하지 않는 함수의 반환 값으로만 사용되는

인터페이스 객체에서만 사용 가능 인터페이스를 사용하는 이유 타입이 객체인 p1, p2, p3 객체를 생성하는 예 👉 코드마다 중복되는 객체 타입을 하나로 만들 수 있다면? 👉 타입이 인터페이스인 p1, p2, p3 객체를 생성하는 예 특징 코드

사용하는 이유 printArray 함수에 숫자, 문자열, 불리언 타입의 배열을 전달 printArray 함수가 다양한 타입을 전달받아 처리하기 위해서는 함수 선언부에 해당 타입을 모두 명시해야 함 이런 경우, 제네릭 타입으로 선언하면 함수 선언부를 간단하게 작성 가

📁 파일구조 📁 App.tsx todo를 추가하고 삭제하는 함수를 만들어 각 컴포넌트에 props로 전달 📁 todo.ts 클래스 구조를 todo.ts 파일에 따로 빼서 설정해주었다. 📁 Todos.tsx input으로 입력받은 값을 state 끌어

2005년 리누스 토르발스가 처음 소개특징컴퓨터 파일의 변경사항을 추적여러명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템개발자들은 깃을 통해 수많은 소스 코드를 효율적으로 관리깃(Git)의 특징버전 관리(Version Control)문서를