분류 전체보기138

• 

  [React] super(props); 보통 아래와 같은 구조로 리액트 Component 구조를 갖는다. class App extends React.Component { constructor() { super(); ... } render() { return (); } } super 는 상위 객체의 Method를 가져오는 것이다. 위에서 super();는 React Component에 object 와 Method를 전달하기 위한 것이다. super(props), constructor(props)를 선언할 경우도 상위 컴포넌트에 object를 전달해주는 성격이 된다. 참조: min9nim.github.io/2018/12/super-props/ velog.io/@hytenic/Javascript-javascript-OOP-Class-Super ve.. React & TypeScript/React 2021. 2. 16.

• 

  [Basic] Scaffold 개발 기법 create-react-app 도 scaffolding 개발 기법을 적용한 것이다. (개발 방법론은 아니고 개발 기법(테크닉) 중 하나) 모듈을 제작해둬서 모듈 단위로 셋팅을 하고 모듈 중 일부를 활용하는 개발 기법이다. 문제는 리소스 활용이 좀 많아질 수 있다는 단점? 장점은 초기 세팅 자체가 굉장히 수월해진다. 그리고 다른 사람이 작성한 모듈을 그대로 사용해도 되기 때문에 생산성을 훨씬 높일 수 있다는 점이다. *우주선 같은 거 날리거나 전투기에서 사용하는 거 아닌 이상은 닥치고 Scaffold기법을 이용하는 것이 좋지 않을까 싶다. 출처 : seunghyum.github.io/scaffold/Scafflod-Modules/# saltfactory.github.io/ruby/speedly-develo.. Dev-Basic/Programming 2021. 2. 15.

• 

  [JavaScript] 검색 기능 만들기 [펌] 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com const value = "search keyword"; for (let i = 0; i -1) { console.log(videos[i].snippet.title); } else { } } 내가 아래의 블로그 내용을 토대로 작성한 내용이다. videos[i].snippet.title까지가 문자열.. Javascript/Basic 2021. 2. 10.

• 

  [Basic] 비즈니스 로직과 View의 차이 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com MVC 패턴(Model-View-Controller Pattern) MVC 패턴은 여러가지 디자인 패턴 중에 하나이다. 즉, 건축으로 비유하자면 공법이며, 소프트웨어에 빗대어 말하자면 어떻게 소프트웨어를 개발할 것인지의 개발 방식을 공식화 한 패턴이다. 특히 MVC 패턴은 사용자와 상호작용을 하는 어플리케이션을 개발할 때 사용되는 방식이다. 예를 들어 웹 어플리케이션과 같이 UI(User Interface)를 통하여 .. Dev-Basic/Programming 2021. 2. 9.

• 

  [javascript] import 에 대한 이해 *간단한 건데, 의외로 검색어에 이 내용이 노출이 안되는 것 같아서 기록해둔다. 나처럼 의문을 갖고 헤매고 있었을 사람을 위해서ㅋㅋㅋㅋ 힘내라 용자여! import React, { useEffect } from "react"; import "./app.css"; import VideoList from "./components/video_list/video_list"; function App() { const [videos, setVideos] = React.useState([]); //null video 위와 같이 작성해도 되고, 아래와 같이 작성해도 된다. import React, { useState, useEffect } from "react"; import "./app.css"; import Vid.. Javascript/Basic 2021. 2. 8.

• 

  [React] useEffect 는 무엇인가? 간단하게 말하면, Render 이후에 처리하는 함수이다. Render가 되었다는 것은 DOM 구조까지 이미 생성이 모두 완료된 시점이다. 이 시점에 처리해야 할 일들을 effect에 모아두었다가 처리하는 것이다. DidMount, DidUpdate, willUnmount 이 세가지 상황에 쓰인다. 참조 : ko.reactjs.org/docs/hooks-effect.html#example-using-hooks-1 React & TypeScript/React 2021. 2. 2.

• 

  [Redux] Redux를 써야 하는 이유? 상태가 변경되었을 때 처리해야 하는 요소를 통합적으로 처리하기 위해서. 효율성을 위해서 사용한다. 미 사용했을 때는 아래와 같은 일이 발생한다. 출처 : 생활코딩 youtu.be/bn-8isrtx0k?t=356 React & TypeScript/Recoil 2021. 2. 1.

• 

  [React] useState 설명 2 const [number, setNumber] = useState(0); 위와 같은 코드가 있다고 했을 때, [number, setNumber] 는 배열이다. useState(0)은 number에 0을 할당하는 배열 비구조화 할당 문법이다. 1번째 원소 number는 현재 상태 값 변수이고, 2번째 원소 setNumber는 상태 값을 갱신해주는 Setter 함수이다. useState 괄호 안의 값은 상태의 초기 값이다. 다음 코드는 배열 비구조화 할당을 이해하도록 아래 코드를 먼저 보고 배열 비구조화 할당을 이해하도록 하자. const array = ['dog', 'cat', 'sheep']; const [first, second] = array; console.log(first, second); // .. React & TypeScript/React 2021. 1. 29.

• 

  [React] useRef() 는 언제 사용하는가? 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com React에서 useRef를 사용하는 경우는 다음과 같다. useRef는 리렌더링 하지 않는다. 컴포넌트의 속성만 조회&수정한다. 1. 컴포넌트에 focus를 위치시킬 필요가 있는 경우. - 예를 들어, 값을 여러개 일력하고 첫 번째 칸으로 이동해야 하는 경우 필요하다. //InputTest.js import React, { useState, useRef } from 'react'; function InputTest(.. React & TypeScript/React 2021. 1. 29.

• 

  [React] 함수형 프로그래밍을 가능하게 하는 React Hook (부재 : useState가 이렇게 쉬운 것일 줄은...) 리액트 공식문서의 순서도 이제 변경해야 할 것 같다. React Hook을 먼저 설명하고 나머지 내용을 설명하는 게 오히려 낫겠다 싶을 정도다. 초심자일 경우, class 구문을 익히기 전에 아예 리액트훅을 먼저 익히고 나서 class 구문을 익히도록 하자. 나도 초심자라 그런지 react 자체가 잘 이해가 가지 않아서 처음에 많이 헤맸다. 헤메었던 것을 잊지 않기 위해 기록해둔다. 이 글을 보고 있는 동지여 힘내라. hook.jsx import React, { useState } from "react"; function Hook() { const [item, setItem] = useState(0); function plusItem() { setItem(item + 1); } function minus.. React & TypeScript/React 2021. 1. 28.

• 

  [React] Props란 무엇인가? function Welcome(props) { return Hello, {props.name}; } function App() { return ( ); } ReactDOM.render( , document.getElementById('root') ); App function이 있는 이유는 return에서 여러 개의 복합적으로 구성된 Component를 한번에 ReactDOM.render에 보내기 위해서이다. 정확히는 index.html에 있는 div class=root 에 보내기 위해서이다. props는 객체 생성 시에 지정되는 value를 받아서 처리하기 위한 react에만 있는 유니크한 정의이다. (위에서는 Welcome 을 생성 시에 "Sara", "Cahal", "Edite" 값을 받아주는 역할을.. React & TypeScript/React 2021. 1. 27.

• 

  [javascript] typeof, instanceof 설명 사용되는 것과 생성(instance)되는 것 사이에 차이가 있다. 생성까지 맞추려면 new Type(value); 형식으로 입력하는 것이 일치하게 하는 방법이다. 임의로 편하다고 대충 변수명 쓰고 value 를 넣는 방식은 지양하도록 하자 Javascript/Basic 2021. 1. 26.