티스토리

블로그 홈

웹개발,앱개발 코린이 알림장

구독자: 0

구독하기 방명록

인기글

[개념정리 1편]프론트엔드와 백엔드공감수1댓글수1조회 1

주요 글 목록

[개념정리 15탄] React State / useState글 내용
state 컴포넌트 내부에서 바뀔 수 있는 값을 말한다. 그리고 useState라는 Hook함수를 통해 이 state의 상태를 변경해줄 수 있다. function GrandFather() { const [name, setName] = useState("김할아"); // 이것이 state! return ; } 코드처럼 통상 react에서는 구조분해할당 문법을 통해 useState를 선언하고 사용한다. state의 값을 변경하는 방법이 빠질 수 없는데, useState로 state값 변경하는 법 import React, { useState } from "react"; function Child(props) { return ( { props.setName("박할아"); }} > 할아버지 이름 바꾸기 {prop..
좋아요2
댓글0작성시간2022. 10. 9.
[개념정리 14탄] React Props / childern글 내용
Props란? 부모 컴포넌트로부터 받아온 데이터이며 부모에서 자식으로만 일방통행으로 전달이 가능하다. Props 예시 import React from "react"; function GrandFather() { return ; } function Mother() { const name = "홍부인"; return ; // "props로 name을 전달했다" } function Child(props) { console.log(props); // object 타입이기때문에 안에 속성값인 .motherName으로 불러올 수 있다. return {props.motherName}; // props를 통해 받아오기 } function App() { return ; } export default App; // pro..
좋아요2
댓글0작성시간2022. 10. 9.
[개념정리 13탄] React 컴포넌트 / JSX글 내용
컴포넌트(Component) 간단히 설명하면 화면을 구성하는 하나의 단위(블럭)이라 할 수 있다. 예를 들어, 검색 컴포넌트, 로그인 컴포넌트, 상품리스트 컴포넌트, 추천 상품 컴포넌트 등 html 한 페이지를 각각의 컴포넌트로 나누어 작성할 수 있다. 컴포넌트를 사용함에 있어 장점은 계속 재사용이 가능한것, 유지보수가 비교적 쉬운 것, 협업하기 좋은것이 있다. 단점으론 프로젝트 크기가 커질수록 컴포넌트의 갯수가 많아지기 때문에 폴더구조가 복잡할 수 있다. 예시 function App(){ return } 결국 html을 리턴하는 함수가 컴포넌트다. 컴포넌트 코드 보는 방법(CRA 직후 App.js 파일) // 컴포넌트 밖, 필요한 파일 import import logo from "./logo.svg";..
좋아요0
댓글0작성시간2022. 10. 9.
[개념정리 12탄] React 주요 개념글 내용
Recat UI(User Interface)를 구축하기 위한 선언적이고 효율적이며 유연한 JS 라이브러리(도구)다. 컴포넌트(Component)라고 불리는 작고 고립된 코드의 블럭을 이용하여 복잡한 UI를 구성하도록 돕는다. SPA를 전제로 하고 있고, 가상DOM을 활용하여 업데이트해야 하는 DOM요소를 찾아서 그 해당 부분만 업데이트한다. 리렌더링이 잦은 동적인 모던 웹에서 빠른 포퍼먼스를 보여줄 수 있다. React의 주요 특징 5가지 컴포넌트 기반 선언형 뷰 JSX Hooks State & Props 컴포넌트 (Component) 개념적으로는 JS함수와 비슷하며 props라고 하는 임의의 입력을 받은 후 화면에 어떻게 표시되는지를 기술하는 React Element를 반환한다. 함수 컴포넌트 데이터를..
좋아요7
댓글0작성시간2022. 10. 9.
[개념정리 11탄]React 시작 전(ES6 문법)글 내용
React를 시작하기 전에 ES6 문법에 대해 알아야 하는데 6가지 목차 정도는 알고 React를 시작해야 해서 정리하려 한다. 화살표 함수 객체와 배열 구조 분해 할당 함수 인자에서 구조분해 할당 Spread Operator(전개 구문) Rest Operator(나머지 매개변수 구문) map, filter 함수 화살표 함수 자바스크립트에서 기본적으로 함수를 만드는 방법은 2가지 있다. Function 키워드를 사용하는 방법, Arrow function을 사용하는 방법 React에서는 2가지 방법에 큰 차이는 없다. 코딩하는데 본인이 편한 방법을 사용하면 된다. 기본적인 방법으로 function 키워드를 사용해 함수를 정의해보면 // Function keyword (함수 선언식) function sayH..
좋아요0
댓글0작성시간2022. 10. 9.
항해99 4주차 WIL(State, Props, 리렌더링 발생 조건)글 내용
state 컴포넌트 내부에서 변경될 수 있는 값이다. props는 부모 컴포넌트가 설정하고, 컴포넌트 자신은 props를 바꾸지 못하는 특성이 있는 것과는 차이가 있다. 리액트에 존재하는 state의 종류는 2가지다. 클래스형 컴포넌트가 가지고 있는 state 함수형 컴포넌트가 useState라는 함수로 사용하는 state 컴포넌트 내부에서 변경하고 싶은 값이 있을 때, state를 활용한다. 클래스형 컴포넌트의 state state의 이름과 초기값을 constructor(생성자)에서 설정하고, render() 함수에서 this.setState 함수를 통해 state를 변경해 줄 수 있다. import React, {Component} from 'react'; class Counter extends Co..
좋아요1
댓글0작성시간2022. 10. 9.
[개념정리 10탄] JavaScript 6번째글 내용
느슨한 타입의 동적 언어의 문제점 및 보안할 수 있는 방법 실행 시 변수의 type에 예상치 못한 type error가 발생할 수 있다. 동적 언어는 코드가 길고 복잡할 경우에 런타임 때 확인할 수밖에 없다. 이런 불편함을 극복하기 위해, typescript나 flow 등을 사용하는 방법이 있다. 기본형 데이터와 참조형 데이터 기본형 타입의 종류 = 논리(boolean), 정수(int), 실수(double), 문자(char) 형 타입 참조형 타입의 종류 = 배열(array), 클래스(class), 인터페이스(interface) 형 타입 불편 객체를 만드는 방법 불변 객체를 만드는 방법으로 Object.freeze()라는 함수를 사용하는 방법이 있다. let freezeTest = { water = 'sa..
좋아요0
댓글0작성시간2022. 10. 9.
[개념정리 9탄] JavaScript 5번째글 내용
변수의 범위 자바스크립트에서는 객체, 함수가 모두 변수에 담길 수 있다. 변수의 범위는 해당 변수에 접근할 수 있는 영역이다. 1. 지역변수 = 함수 내부에서 선언된 변수, {} 영역 내에서 선언된 변수이다. 지역변수는 변수가 선언된 영역 내에서만 유효하고 그 영역을 벗어나면 메모리에서 사라진다.(삭제된다) 2. 전역변수 = 함수 외부에서 선언된 변수이다. 전역변수는 프로그램의 어느 영역에서나 접근할 수 있으며 웹 페이지가 닫혀야만 메모리에서 사라진다. 문서 객체 모델 (DOM : Document Object Model) XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 문서 내의 모든 요소를 정의하고 각 요소에 접근하는 방법들을 제공해준다. document 객체 웹페이지 자체를 의미하는 ..
좋아요0
댓글0작성시간2022. 10. 8.
[개념정리 8탄] JavaScript 4번째글 내용
배열(Array) 저장공간을 나열해놓은 형태의 자료구조이다. 하나의 이름과 방번호(인덱스)로 참조되는 정렬된 값의 집합이다. 배열요소는 배열을 구성하는 각각의 값이다. 인덱스는 배열에서의 위치를 가리키는 숫자이다. let 배열명 = [값1, 값2, ...]; let 배열명 = new Array(값1, 값2, ...); let 배열명 = []; 배열의 특징 1. 타입이 고정되어있지 않다. let arr = ["안녕", 10, -2.35, true]; 2. 인덱스가 연속적이지 않아도 된다. let arr = []; arr[0] = 10; arr[3] = "친구야"; console.log(arr[3]); // 친구야 Array 객체의 기능(메소드) 배열명.length : 현재 배열의 총 길이(컨텐츠의 갯수) ..
좋아요1
댓글1작성시간2022. 10. 8.
[개념정리 7탄] JavaScript 3번째글 내용
연산자(operator) 기능이 있는 특수문자 또는 단어를 뜻하며 함수, 키워드들은 연산자가 아니다. 산술연산자의 종류 + (더하기) - (빼기) * (곱하기) / (나누기) % (나머지) ** (제곱) a % b = 나머지 연산자(a를 b로 나눈 나머지값) a ** b = 제곱연산자(a의 b 제곱근) ex) 10 % 3 = 1 비트 연산(2진법) 1 bit = 컴퓨터 용량의 최소 단위이다. 1 byte : 8bit = 메모리의 최소 단위, 데이터의 최소 단위이다. (1KB = 1024Byte, 1MB = 1024KB 등 1024배씩이다.) KB(킬로바이트), MB(메가바이트), GB(기가바이트), TB(테라바이트), PB(페타바이트) 등이 있다. 조건식*매우 중요!* 조건식이란 조건을 제시하는 식으로 ..
좋아요2
댓글2작성시간2022. 10. 8.
[개념정리 6탄] JavaScript 2번째글 내용
자바스크립트 출력 출력이란 개발자가 사용자에게 웹이나 앱의 화면을 통해 데이터 값을 표현하는 걸 뜻한다. 출력방법에는 2가지가 있다. 1. 대화상자 출력방법 winodw.alert() = 함수를 통해 알림창을 브라우저에 출력한다. winodw.confirm() = 함수를 통해 알림창을 브라우저에 출력해서 확인 버튼과 취소 버튼을 선택할 수 있다. 2. 콘솔 출력(개발자를 위한 출력이다.) console.log() = 함수를 통해 콘솔창에 출력한다. (개발자들이 코딩중에 많이 사용하는 함수로 오류가 발생하는지 개발자가 원하는 함수에 매개변수가 들어가서 잘 작동하는지 등을 체크할 수 있다.) 내부 자바스크립트의 종류 , 안에 JS를 작성한다. 외부 자바스크립트의 종류 자바스크립트 사용법은 CSS기능을 활용할..
좋아요3
댓글1작성시간2022. 10. 8.
[개념정리 5탄] JavaScript란?글 내용
자바스크립트(JavaScript)? 자바스크립트는 단순하게 생각하면 웹페이지에서 HTML은 뼈대, CSS는 그림, JS는 움직임을 나타낸다. JS에 대해 간단하게 설명하면 웹에서 동작(동적)을 구현하기 위한 언어이다. 웹 브라우저에 자바스크립트 엔진이 내장되어 있기 때문에 사용할 수 있다. 웹 브라우저에서 동작한다.(Node.JS는 예외이다.) 객체 기반의 스크립트 언어이다. HTML 문서 내에서 태그 안에서 작성한다. 대소문자 구별을 해야 한다. 자바스크립트의 역할(웹페이지에서의 역할) 웹페이지 3가지(HTML,CSS,JS)코드가 결합되어 작성된다. JS는 사용자의 입력을 처리하거나 애플리케이션을 작성하는 등 동적 제어에 사용된다. 동적 제어는 바꿀 수 있는 제어를 뜻하며 반대로 정적 제어는 이미 만들..
좋아요1
댓글1작성시간2022. 10. 8.
[개념정리 4탄] ifname / input / table / textarea / ul글 내용
input type에는 여러 종류가 있다. file : 원하는 파일을 선택해서 서버로 전송하는 입력 상자이다. email : 이메일을 입력받는 글상자로 @가 없으면 제출되지 않는다. url : 웹사이트를 입력받는 글상자로 http로 시작하는 url을 받는다. tel : 전화번호를 입력받는 글상자이다. text : 말 그대로 텍스트를 넣을 수 있는 글상자이다. password : 비밀번호를 입력하는 글상자이다.(글자가 가려진다.) radio : 동그란 체크 박스이다. button : 버튼 박스이다. submit : 제출하는 박스이다. checkbox : 이름 그대로 체크할 수 있는 박스이다. date : 날짜를 지정할 수 있는 박스이다. input 속성 size : 박스의 크기를 설정한다. maxlengt..
좋아요2
댓글0작성시간2022. 10. 8.
[개념정리 3탄] HTML 문법글 내용
HTML 파일의 확장자명 표시 방법은 '파일명.html'로 파일명 뒤에 .을 찍고 html 확장자명을 적어야 한다. 용어설명 div = 빈 박스, 하나의 구역을 의미 p = 한줄 단위, 위아래 공간이 만든다. span = 단어 단위, 특정 구간을 나눈다. b, strong = 강조, 굵은 폰트로 나타낸다. h1 ~ 6 = 제목 태그로, 폰트 크기, 굵기, 위아래 여백공간이 숫자 가 내려갈수록 커진다. em, i = 폰트 기울기 mark = 형광 del = 가운데 밑줄 ins = 밑줄 sup, sub = 위 첨자, 아래 첨자 br = 줄바꿈 = 띄어쓰기 &lt, &gt = (부등호 표시) 주석 = input type text (입력 공간 생성) password (입력값 가리기) button (버튼)..
좋아요3
댓글1작성시간2022. 10. 8.
[개념정리 2탄] HTML글 내용
HTML - Hypertext의 약자로 웹 페이지에서 다른 페이지로 이동하거나 페이지 내에 다른 데이터에 접근할 수 있도록 하는 것. - Markup Language는 웹 페이지 내에 콘텐츠를 어떻게 표현해야 하는지 명령하는 언어로 웹페이지 제작 시 쓰는 언어. - 태그 형태를 띈다. - HTML에선 해당 코드가 어떠한 정보를 담고 있는지 알려주기 위한 것, 형태는 ....이다. request와 response(요청과 응답) - '이 URL을 줄게'라는 요청과 '그에 맞는 화면의 데이터를 줄께'라는 응답을 의미한다. HTTP request HTTP response 이렇게 표현할 수 있다. HTTP (HyperText Transfer Protocol) 인터넷에서 데이터를 주고받을 때 사용하는 규약, 규칙,..
좋아요2
댓글1작성시간2022. 10. 8.
[개념정리 1편]프론트엔드와 백엔드글 내용
프론트엔드와 백엔드에 대해 정의들이 많지만 내가 생각하는 정의는 프론트엔드는 웹이나 앱을 사용하는 사람 입장에서 사용하는데 불편함 없이 눈에 보이는 화면을 설계하는 과정이고 백엔드는 로그인 시 필요한 개인정보나 웹에 있는 사진, 제품 정보와 같은 데이터를 어떻게 저장하고 관리할지, 어떤 방법으로 웹과 앱을 사용하는 사람에게 원하는 정보를 빠른 속도로 데이터 전달이 가능할지 고민하는 과정이라 생각한다. UI(User Interface) 웹이나 앱에 나오면 페이지(화면)이다. 로그인 하기, 회원 가입하기, 제품 정보, 글 크기, 제목, 폰트 크기 등 화면에 나타나서 우리가 읽을 수 있는 모든 것들을 나타낸다. UX(User Experience) 웹과 앱을 사용하는 사람의 모든 행위를 말한다. 제품을 클릭하거..
좋아요1
댓글1작성시간2022. 10. 8.
프론트엔드 하기 위한 나의 현주소글 내용
부트캠프에 들어와서 3주간 프로그램이 진행되면서 느꼈던건 내가 프론트엔드에 대한 지식이 1도 없다는것이였다. 벼락치기로 2주도 안되는 시간에 웹개발 강의를 들으면서 코드를 복+붙하면서 웹페이지가 작동하는걸 만들었지만 그게 왜 되는거고 함수나 매개변수 등의 단어가 뭔지 왜 저렇게 진행되는지 등은 1도 이해못하고 강의를 쫓아가기 바빴다. 입학시험에서 남들은 다 쉽게 통과했다는데 난 어떻게 해야하는지도 몰라서 구글링으로만 시험시간의 대부분을 보냈었다. 그땐 내가 이걸 시작해도 되는건지 광고만 보고 너무 안일하게 생각한건 아닌지 등 고민하면서 자책하는 시간들을 보냈었다. 그래도 포기하기 싫고 이미 퇴사하고 이쪽으로 직업을 전향하기로 마음 먹었기에 제출 마지막 시간까지 부여잡고 있다가 내가 최대한 할 수 있는데까..
좋아요4
댓글1작성시간2022. 10. 8.
항해99 3주차 WIL (JavaScript의 ES란?, ES5/ES6 문법 차이)글 내용
JavaScript의 ES란?, ES5/ES6 문법 차이 자바스크립트의 ES란 ?? ES는 ECMA (European Computer Manufactures Association) Script의 약자이다. ES의 탄생 배경 자바스크립트는 1990년대 Netscape 회사의 Brendan Eich라는 사람에 의해 최초 개발되었다. 자바스크립트가 잘 되자, MS의 IE 3에도 Jscript라는 언어를 개발해 IE에 탑재하였는데, 이 두 스크립트가 너무 제각각이라, 크로스 브라우징 이슈(기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈)가 발생했다. 표준을 위해 자바스크립트를 ECMA(European Computer Manufactures Association)라는 정보와 통신시스템의 비영리 표준 기구에 ..
좋아요3
댓글0작성시간2022. 10. 2.
항해 99 3주차 WIL글 내용
🔐 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야 할까요? 자바스크립에서 유사배열과 배열의 차이는 무엇일까요? 유사배열(Array-Like Object)이란 배열처럼 보이지만 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체를 뜻한다. 함수에서 처리 결과로 배열을 반환하고 싶을 때 또는, Array에서 기본으로 내포되어있는 기능을 제공하고 싶지 않거나 Array에 내포되어있지 않은 기능을 제공하고 싶을 때 사용한다. 차이점 A) 배열 유사 객체의 인덱스 범위는 0≤I≤2^53–1인 반면 배열의 인덱스 범위는 0≤ I { console.log(elem); }); } 여기서 인수에 대해 스프레드 연산자를 사용하고 있으며..
좋아요6
댓글0작성시간2022. 10. 2.
Javascipt 연습문제 - 두 정수 사이의 합글 내용
문제 두 정수 사이의 합 문제 설명 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다. 제한 조건 a와 b가 같은 경우는 둘 중 아무 수나 리턴하세요. a와 b는 -10,000,000 이상 10,000,000 이하인 정수입니다. a와 b의 대소관계는 정해져있지 않습니다. 입출력 예 abreturn 3512 333 5312 문제이해 1. 두 정수 a, b사이에 어떤 숫자가 있는지 알아내야한다. 2. 두 정수 사이의 최솟값과 최대값을 정해서 if문으로 정리해본다. 3. 합을 나타낸다. 문제풀이 function solution(a, b) { let a..
좋아요4
댓글0작성시간2022. 9. 28.

문의안내

티스토리
로그인
고객센터