Front-End78 기술블로그를 작성하는 이유 개발자들이 기술 블로그를 작성하는 이유가 뭘까? 개발하기도 바쁜데, 글까지 쓰라고요? 코딩을 배운 지 얼마 되지도 않은 (1년이 쪼오오금 안된) 코린이인 나. 많은 기업에서, 학원에서, 주변에서 기술 블로그를 중요시하고 있다. 점차 유명 기업에서 기술 블로그들을 활발하게 작성하고 있다 보니, 기술 블로그 모음 사이트까지 생겨났다. https://techblogposts.com/ 기술 블로그 모음 IT 기술 블로그들의 최신 포스트를 한곳에서 보세요. techblogposts.com 개념 익히고, 문법(Syntax) 공부하기도 바쁜데, 글은 도대체 언제 쓰지...? 만약에 쓴다고 하면 어떻게 써야 하지? 막막하기만 하다. 일단 기술 블로그의 중요성부터 알아보도록 하자. 커리어 관리 자신이 어떻게 성장해왔고,.. 2021. 7. 19. [React] 리덕스 모듈 만들기 리액트 프로젝트에 리덕스를 적용하기 위해서 리덕스 모듈을 만들어보도록 하겠습니다. 리덕스 모듈이란 다음 항목들이 모두 들어있는 자바스크립트 파일을 의미합니다. 액션 타입 액션 생성함수 리듀서 리덕스를 사용하기 위해 필요한 위 항목들은 각각 다른 파일에 저장 할 수도 있습니다. 리덕스 GitHub 레포에 등록되어있는 예제 프로젝트를 보면 다음과 같이 코드가 분리되어 있습니다. actions index.js reducers todos.js visibilityFilter.js index.js 위 예제 프로젝트에서는 액션과 리듀서가 서로 다른 파일에 정의되어있습니다. 하지만, 이 코드들이 꼭 분리되어있을 필요는 없습니다. 이 코드들이 서로 다른 디렉터리에, 그리고 서로 다른 파일에 분리가 되어있으면 개발을 하는.. 2021. 6. 4. [React] Redux 사용하기 키워드 (Keyword) 액션 (Action) 상태에 변화가 필요하게 될 때 액션을 발생시킵니다. 하나의 객체로 표현이 됩니다. { type: "TOGGLE_VALUE" } 액션 객체는 type 필드를 필수적으로 가지고 있어야하고 그 외의 값들은 개발자 마음대로 넣어줄 수 있습니다. { type: "ADD_TODO", data: { id: 0, text: "프론트엔드 개발자 되기" } } 액션 생성함수 (Action Creator) 액션 객체를 만들어 주는 함수입니다. export function addTodo(data){ return { type: "ADD_TODO", data } } // 화살표 함수도 가능합니다 export const addTodo = data => { return { type: ".. 2021. 6. 4. [React] Redux란 ? 리덕스는 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면 컴포넌트 상태관리 로직을 다른 파일들로 분리시켜 더욱 효율적으로 관리할 수 있으며, 글로벌 상태관리도 손쉽게 할 수 있습니다. 허나 요즘은 Context API + useReducer를 사용해서도 상태 관리를 할 수 있습니다. ❓ Context를 쓰는 거랑 어떤 차이점이 있을까? 1.미들웨어 특정 조건에 따라 액션이 무시되게 만들 수 있습니다. 액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있습니다. 액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있습니다. 특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있습니다. 특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행.. 2021. 6. 4. [React] react-router-dom switch, NavLink Switch는 여러 라우트 중 가장 먼저 매칭된 라우터 하나만을 보여줍니다. Switch는 어떨 때 유용하냐면, 페이지를 못찾았을 때(404 Not Found) 즉, 페이지가 아무것도 일치하지 않았을 때 보여줄 페이지로 사용하면 유용합니다. App.js import React from 'react'; import { Switch, Route, Link } from 'react-router-dom'; import About from './About'; import Home from './Home'; import Profiles from './Profiles'; import HistorySample from './HistorySample'; const App = () => { return ( 홈 소개 프로필.. 2021. 6. 4. [React] react-route-dom withRouter withRouter는 라우터 컴포넌트가 아닌 곳에서 match, location, history를 props로 받아와서 사용하게 해줍니다. src/WithRouterSample.js import React from 'react'; import { withRouter } from 'react-router-dom'; const WithRouterSample = ({ location, match, history }) => { return ( location match history.push('/')}>홈으로 ); }; export default withRouter(WithRouterSample); Profiles.js 에서 렌더링하기 src/Profiles.js import React from "react";.. 2021. 6. 4. [React] react-route-dom history history 객체 history 객체는 라우트로 사용된 컴포넌트에게 match, location 과 함께 전달되는 props 중 하나입니다. 이 객체를 통하여, 우리가 컴포넌트 내에 구현하는 메소드에서 라우터에 직접 접근을 할 수 있습니다 - 뒤로가기, 특정 경로로 이동, 이탈 방지 등.. src/HistorySample.js import React, { useEffect } from "react"; function HistorySample({ history }) { const goBack = () => { history.goBack(); }; const goHome = () => { history.push("/"); }; const replaceToHome = () => { history.replac.. 2021. 6. 3. [React] 서브라우트 서브 라우트는, 라우트 내부의 라우트를 만드는것을 의미합니다. 컴포넌트를 만들어서 그 안에 또 Route 컴포넌트를 렌더링하시면 됩니다. 서브 라우트 만들어보기 한번 Profiles 라는 컴포넌트를 만들어서, 그 안에 각 유저들의 프로필 링크들과 프로필 라우트를 함께 렌더링해보겠습니다. src/Profiles.js import React from "react"; import Profile from "./Profile"; import { Link, Route } from "react-router-dom"; function Profiles() { return ( 사용자 목록 meanbymin homer 사용자를 선택해주세요} /> ); } export default Profiles; 위 코드에서 첫번째 Ro.. 2021. 6. 3. [React] Router에서 파라미터와 쿼리 페이지 주소를 정의할 때, 우리는 유동적인 값을 전달해야 할 때도 있습니다. 이는 파라미터와 쿼리로 나뉠 수 있습니다. 파라미터: /profiles/meanbymin 쿼리: /about?detail=true 이것을 사용하는것에 대하여 무조건 따라야 하는 규칙은 없지만, 일반적으로는 파라미터는 특정 id 나 이름을 가지고 조회를 할 때 사용하고, 쿼리의 경우엔 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵션을 전달할 때 사용됩니다. URL Params Profile 페이지에서 파라미터를 사용해보겠습니다. /profile/meanbymin 이런식으로 뒷부분에 username을 넣어줄 때 해당 값을 파라미터로 받을 수 있습니다. Profile이라는 컴포넌트를 만들어서 파라미터를 받아오는 예제 코드를 작성.. 2021. 6. 3. 이전 1 2 3 4 ··· 9 다음
