본문 바로가기

분류 전체보기139

[Redux] 왜 쓸까? props의 상태 값에 따라 구동되어야할 함수들이 서로 의존적이지 않고 독립적으로 작성하기 위해서이다. 그래서 props에서 state(상태)가 변경되면, 그에 맞춰서 Action을 해주는 것을 reducer에서 정의하고, dispatch를 이용해서 render에 전달해주는 것이다. 이렇게 작성해야, reducer에서 정의한 상태값에 따라 작동되어야 할 Function(함수)들을 독립적으로 작동되게끔 작성하는 것이 가능하다. 함수도 단순하게 할 수 있으며, 리액트의 (독립적인)컴포넌트 구현 개념과도 일치하게 된다. Redux - 5.3. Redux의 적용 : state의 변화에 따라서 UI 반영하기 by 생활코딩 조금 더 깊게.. 조금 더 깊게 들어가면, dispatch가 전달해주는 action.type.. 2021. 2. 17.
[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.. 2021. 2. 16.
[Basic] Scaffold 개발 기법 create-react-app 도 scaffolding 개발 기법을 적용한 것이다. (개발 방법론은 아니고 개발 기법(테크닉) 중 하나) 모듈을 제작해둬서 모듈 단위로 셋팅을 하고 모듈 중 일부를 활용하는 개발 기법이다. 문제는 리소스 활용이 좀 많아질 수 있다는 단점? 장점은 초기 세팅 자체가 굉장히 수월해진다. 그리고 다른 사람이 작성한 모듈을 그대로 사용해도 되기 때문에 생산성을 훨씬 높일 수 있다는 점이다. *우주선 같은 거 날리거나 전투기에서 사용하는 거 아닌 이상은 닥치고 Scaffold기법을 이용하는 것이 좋지 않을까 싶다. 출처 : seunghyum.github.io/scaffold/Scafflod-Modules/# saltfactory.github.io/ruby/speedly-develo.. 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까지가 문자열.. 2021. 2. 10.
[Basic] 비즈니스 로직과 View의 차이 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com MVC 패턴(Model-View-Controller Pattern) MVC 패턴은 여러가지 디자인 패턴 중에 하나이다. 즉, 건축으로 비유하자면 공법이며, 소프트웨어에 빗대어 말하자면 어떻게 소프트웨어를 개발할 것인지의 개발 방식을 공식화 한 패턴이다. 특히 MVC 패턴은 사용자와 상호작용을 하는 어플리케이션을 개발할 때 사용되는 방식이다. 예를 들어 웹 어플리케이션과 같이 UI(User Interface)를 통하여 .. 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.. 2021. 2. 8.

티스토리툴바