본문 바로가기

전체 글73

fe-sprint-react-twittler-state-props-refernce 수도코드 작성해보기 import React, { useState } from 'react'; import Footer from '../Footer'; import Tweet from '../Components/Tweet'; import './Tweets.css'; import dummyTweets from '../static/dummyData'; import shortid from 'shortid'; const Tweets = () => { const [username, setUsername] = useState('parkhacker'); const [msg, setMsg] = useState(''); const [tweets, setTweets] = useState(dummyTweets); const [filteredTw.. 2023. 3. 28.
React - State & Props Props 외부로부터 전달 받은 값 How to use props 1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다. 2. props를 이용하여 정의된 값과 속성을 전달한다. 3. 전달받은 props를 렌더링 한다. function Parent() { return ( I'm the parent ); } function Child(props) { console.log("props : ", props); // {text : "I'm the eldest child"} return ( {props.text} ); } export default Parent; State 내부에서 변화하는 값 useState 사용법 React에서는 state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공한.. 2023. 3. 28.
React - 기초 리엑트? 리엑트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다. 리엑트의 3가지 특징 선언형(Declarative) 리엑트는 한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. 컴포넌트 기반(Component-Based) 리엑트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다. 유지보수 및 유닛테스트도 편하다는 장점이 있다. 범용성(Learn Once, Write Anywhere) 리엑트는 JavaScript 프로젝트 어디에든 유연하게 적용.. 2023. 3. 22.
JavaScript - 프로토타입 체인 프로토타입 체인 prototype 객체는 기본적인 속성으로 cunstructor와 __proto__를 가지고 있다. 이 중 __proto__에는 자식의 부모 prototype을 가리키는 링크를 담고 있다. 프로토타입 체인은 __proto__의 특징을 이용하여, 부모 객체의 프로퍼티나 메서드를 차례로 검색하는 것을 의미한다. 즉, 특정 객체의 프로퍼티나 메서드 접근 시 자신의 것은 물론 부모 객체의 것도 접근하여 사용가능하다는 것이다. 모든 프로토타입 체이닝의 종점은 Object.protortype이다. 즉, Object는 가장 상위 객체이다. 레퍼런스 https://velog.io/@bining/javascript-prototype%EA%B3%BC-prototype-chain 2023. 3. 16.
JavaScript - 프로토타입과 클래스 프로토타입(Prototype) 자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있다. 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다. 이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입이라고 한다. .prototype 객체를 생성하는 생성자 함수의 프로토타입 객체를 가리킨다. 해당 함수로 생성된 객체의 부모객체인 프로토타입 객체를 가리킨다. __proto__ 모든 객체가 가지는 내부 프로퍼티로, 객체의 프로토타입 객체를 가리킨다. 모든 객체는 자신을 생성한 생성자 함수의 프로토타입 객체를 상속받고, __proto__프로퍼티를 사용하면 해당 객체의 프로토타입 객체에 직접 접근.. 2023. 3. 15.
객체 지향 프로그래밍(Object-Oriented Programming) 객체 지향 프로그래밍(OOP) 사람이 세계를 보고 이해하는 방법을 흉내 낸 프로그래밍 방법론이다. 실세계에 존재하고 인지하고 있는 객체(Object)를 소프트웨어의 세계에서 표현하기 위해 객체의 핵심적인 개념 또는 기능만을 추출하는 추상화(abstraction)을 통해 모델링하려는 프로그래밍 설계 철학을 뜻한다. 객체 지향 프로그래밍의 주요 개념으로는 크게 4가지가 있다. 캡슐화(Encapsulation) 데이터와 기능을 하나의 단위로 묶고, 외부에 공개될 필요가 없는 정보(내부 데이터 혹은 내부 구현 등등)는 숨기는 것을 말한다. 다른 말로 정보 은닉(information hiding)이라고도 한다. 데이터에 외부에서 직접 접근을 하면 안되고 오로지 함수를 통해서만 접근해야하는데 이를 가능하게 해주는 .. 2023. 3. 15.
JavaScript - 클래스와 인스턴스 클래스(Class) 객체를 만들어 내기 위한 설계도 혹은 청사진이다. 일반적인 함수와 구분하기 위해 클래스는 보통 대문자로 시작하며 일반명사로 만든다. 참고로 일반적인 함수는 적절한 동사를 포함하며, 소문자로 시작한다. 인스턴스(Instance) 클래스를 바탕으로 한 객체를 인스턴스 객체, 줄여서 인스턴스라고 한다. New 키워드 new키워드를 사용하여 클래스의 인스턴스를 만들어낸다. 생성자(Constructor) 함수 객체를 만들고 기존 객체의 속성에 대한 값을 설정하는 특수함수. 인스턴스가 초기화될 때 실행된다. 실습 ES5) 클래스는 함수로 정의할 수 있다. function Car(brand, name, color){ // 인스턴스가 만들어질 때 실행되는 코드 } ES6) class라는 키워드를 이.. 2023. 3. 15.
코드스테이츠 프론트엔드 부트캠프 Section1 회고 코드스테이츠 프론트엔드 부트캠프 44회차에 신청했지만, 초심자였던 내가 바로 합격을 할거란 기대는 애초에 하지도 않았었다. 주변 사람들에게 합격하진 못하고 대기번호만 받았다고 전했을 때 많이들 실망하는 눈치였지만, 나는 내가 많이 부족함을 누구보다 잘 알고 있었기에 무척이나 기뻤다. 신청서를 작성할 때 나의 성격 & 성향 & 공부태도 등이 반영되었는데 대기번호도 받지 못했다면 많이 방황했을 것 같다. 어떤식으로 공부해야할지 방향조차 잡지 못했을 테니... 대기인원 신분으로는 첫 주 수업까지만 들을 수 있었다. 경쟁률이 높은 부트캠프임을 알고 있었기에 추가합격을 기대도 하지 않았지만 열심히 들었다. 뭐라도 하나 건져와서 다음 모집 때 꼭 합격하고 싶었다. 돌이켜보면 이때 가장 열정적으로 질문도 하고 공부도.. 2023. 3. 13.
local Git repository Git repository? 우선 Git이란 개발자의 코드를 효율적으로 관리하기 위해 개발된 `분산형 버전 관리 시스템이다. 이러한 Git을 저장하는 공간을 repsitory라고 하며, repository는 자신의 컴퓨터의 작업공간에 위치한 local Git repository와 Github 등 원격 공간에 위치한 remote Git repository로 구분할 수 있다. 로컬 환경에 있는 디렉토리에서 Local Git Repository를 추가하면 디렉토리의 파일 변화를 감지 할 수 있다. 1. 코드를 저장할 디렉토리를 만들고 해당 디렉토리에 local Git repository를 생성한다.(git init) 2. 코드를 작성하고 저장하는 공간, 즉 작업 공간(work space)의 파일 및 디렉토리를.. 2023. 3. 10.
HTML에서 JavaScript를 body의 끝부분에 연결하는 이유 웹브라우저가 HTML문서를 해석(Parsing)할 때, 2023. 3. 7.
JavaScript Koans 복습(CodeStates FrontEnd BootCamp) - 작성중... 1. Matcher - mocha, chai framework에는 아래의 예시 말고도 다양한 matcher가 있다. https://www.chaijs.com/api/bdd/ expect( ).to.be.true; expect( ).to.be.false; expect( ).to.equal( ); // 두 값이 타입까지 같은 지 엄격하게 검사(strcit equality, ===) 2. JavaScript의 별난(quirky) 부분들 - https://github.com/denysdovhan/wtfjs expect(1 + '1').to.equal('11'); // +뒤에 나온 '1'이 숫자로 적용되었다. expect(123 - '1').to.equal(122); // -뒤에 나온 '1'은 문자열로 적용되었다.. 2023. 3. 6.
JavaScript - 배열 , 객체 배열 다량의 데이터를 다룰 수 있는 배열 배열을 잘 다루기 위해서는 배열의 요소를 추가하거나 변경, 삭제하는 방법을 확실하게 학습해야한다. 배열의 기초 let myNumber = [73, 98, 86, 61, 96] 인덱스(index) [0] [1] [2] [3] [4] 요소(element) [73] [98] [86] [61] [96] myNumber[3]; // 61 myNumber[3] = 200; // 3번째 요소를 200으로 변경 배열의 반복 for(let n = 0; n < myNumber.length; n++) 배열의 메서드 console.table(myNumber) // 배열의 표로 보여줌 Array.isArray(myNumber) // true, 어떠한 데이터가 배열인지 아닌지 판별 myN.. 2023. 3. 4.

티스토리툴바