전체 글90 [성동구/성수] 제철 재료를 사용하는 신상 성수동 와인바 아도르 Ardor 아도르 Ardor위치 : 서울 성동구 성수일로3길 4-13 1층영업시간 : 11:00 - 24:00라스트오더 : 23:00정기휴무 : 매주 월요일 성수동에 신상 와인바가 생겼다고 해서 친구들과 부리나케 달려갔습니다.두 명의 셰프가 신선한 제철 재료를 사용하여 메뉴를 만들어 낸다고 하네요. 저희는 캐치테이블을 이용해서 예약을 했는데, 네이버에서도 예약이 가능하더라구요.당일 워크인 보다 예약을 하고 가면 셰프님께서 좋은 자리를 미리 마련해주세요 ! (꿀팁) 입구에 도착하자마자부터 아 저기 분위기 좋을것 같다라는 생각이 들더라구요. 출입문부터 레드브릭..! 그리고 투명한 유리의 출입문이 보이네요.이때부터 맛있는 음식 먹을 생각에 두근두근 거렸어요. 너무나도 예뻤던 창가자리.밖.. 2024. 8. 29. 기술블로그를 작성하는 이유 개발자들이 기술 블로그를 작성하는 이유가 뭘까? 개발하기도 바쁜데, 글까지 쓰라고요? 코딩을 배운 지 얼마 되지도 않은 (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. 이전 1 2 3 4 ··· 10 다음
