티스토리

바이크 타는 개발자

검색하기

블로그 홈

바이크 타는 개발자

meanbymin.tistory.com/m

바이크 타는 프론트엔드 개발자

구독자: 10

방명록 방문하기

주요 글 목록

기술블로그를 작성하는 이유 개발자들이 기술 블로그를 작성하는 이유가 뭘까? 개발하기도 바쁜데, 글까지 쓰라고요? 코딩을 배운 지 얼마 되지도 않은 (1년이 쪼오오금 안된) 코린이인 나. 많은 기업에서, 학원에서, 주변에서 기술 블로그를 중요시하고 있다. 점차 유명 기업에서 기술 블로그들을 활발하게 작성하고 있다 보니, 기술 블로그 모음 사이트까지 생겨났다. https://techblogposts.com/ 기술 블로그 모음 IT 기술 블로그들의 최신 포스트를 한곳에서 보세요. techblogposts.com 개념 익히고, 문법(Syntax) 공부하기도 바쁜데, 글은 도대체 언제 쓰지...? 만약에 쓴다고 하면 어떻게 써야 하지? 막막하기만 하다. 일단 기술 블로그의 중요성부터 알아보도록 하자. 커리어 관리 자신이 어떻게 성장해왔고,.. 공감수 4 댓글수 0 2021. 7. 19.
[React] 리덕스 모듈 만들기 리액트 프로젝트에 리덕스를 적용하기 위해서 리덕스 모듈을 만들어보도록 하겠습니다. 리덕스 모듈이란 다음 항목들이 모두 들어있는 자바스크립트 파일을 의미합니다. 액션 타입 액션 생성함수 리듀서 리덕스를 사용하기 위해 필요한 위 항목들은 각각 다른 파일에 저장 할 수도 있습니다. 리덕스 GitHub 레포에 등록되어있는 예제 프로젝트를 보면 다음과 같이 코드가 분리되어 있습니다. actions index.js reducers todos.js visibilityFilter.js index.js 위 예제 프로젝트에서는 액션과 리듀서가 서로 다른 파일에 정의되어있습니다. 하지만, 이 코드들이 꼭 분리되어있을 필요는 없습니다. 이 코드들이 서로 다른 디렉터리에, 그리고 서로 다른 파일에 분리가 되어있으면 개발을 하는.. 공감수 0 댓글수 0 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: ".. 공감수 0 댓글수 0 2021. 6. 4.
[React] Redux란 ? 리덕스는 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면 컴포넌트 상태관리 로직을 다른 파일들로 분리시켜 더욱 효율적으로 관리할 수 있으며, 글로벌 상태관리도 손쉽게 할 수 있습니다. 허나 요즘은 Context API + useReducer를 사용해서도 상태 관리를 할 수 있습니다. ❓ Context를 쓰는 거랑 어떤 차이점이 있을까? 1.미들웨어 특정 조건에 따라 액션이 무시되게 만들 수 있습니다. 액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있습니다. 액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있습니다. 특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있습니다. 특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행.. 공감수 0 댓글수 0 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 ( 홈 소개 프로필.. 공감수 0 댓글수 0 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";.. 공감수 1 댓글수 2 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.. 공감수 1 댓글수 0 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.. 공감수 0 댓글수 0 2021. 6. 3.
[React] Router에서 파라미터와 쿼리 페이지 주소를 정의할 때, 우리는 유동적인 값을 전달해야 할 때도 있습니다. 이는 파라미터와 쿼리로 나뉠 수 있습니다. 파라미터: /profiles/meanbymin 쿼리: /about?detail=true 이것을 사용하는것에 대하여 무조건 따라야 하는 규칙은 없지만, 일반적으로는 파라미터는 특정 id 나 이름을 가지고 조회를 할 때 사용하고, 쿼리의 경우엔 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵션을 전달할 때 사용됩니다. URL Params Profile 페이지에서 파라미터를 사용해보겠습니다. /profile/meanbymin 이런식으로 뒷부분에 username을 넣어줄 때 해당 값을 파라미터로 받을 수 있습니다. Profile이라는 컴포넌트를 만들어서 파라미터를 받아오는 예제 코드를 작성.. 공감수 0 댓글수 0 2021. 6. 3.
[React] Route 라우터 SPA란 Single Page Application (싱글 페이지 어플리케이션) 의 약자입니다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻입니다. 전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성되어있습니다. 유저가 요청 할 때 마다 페이지가 새로고침되며, 페이지를 로딩 할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 합니다. 요즘은 웹에서 제공되는 정보가 정말 많기 때문에 속도적인 측면에서 문제가 있었고, 이를 해소하기 위하여 캐싱과 압축을 하여 서비스가 제공되는데요. 이는 사용자와 인터랙션이 많은 모던 웹 어플리케이션에서는 충분하지 않을 수도 있습니다. 렌더링하는것을 서버쪽에서 담당한다는것은, 그 만큼 렌더링을 위한 서버 자원이 사용되는것이고, 불필요한 트래픽도 낭비되기 때문입니다.. 공감수 0 댓글수 0 2021. 6. 3.
[React] react-async 라이브러리 react-async는 요청 상태 관리를 위해서 사용하는 라이브러리입니다. 먼저 라이브러리를 설치합니다. $ yarn add react-async 해당 라이브러리의 README를 보면 많은 내용들이 들어가 있습니다. import React from "react" import { useAsync } from "react-async" const fetchPerson = async ({ id }, { signal }) => { const response = await fetch(`https://swapi.co/api/people/${id}/`, { signal }) if (!response.ok) throw new Error(response.status) return response.json() } const.. 공감수 0 댓글수 0 2021. 6. 1.
REST API 간단 정리 클라이언트와 서버가 소통하는 방식이다. 클라이언트와 서버는 여러가지 방법으로 소통을 한다. 이를 HTTP 메서드를 사용해서 구분을 합니다. HTTP 메서드는 여러가지가 있는데 가장 대표적으로 GET, POST, PUT, DELETE이 있습니다. GET 데이터 조회 POST 데이터 등록 PUT 데이터 수정 DELETE 데이터 제거 위와 같이 각 메서드마다 역할이 조금씩 다릅니다. GET /users 를 호출하면 모든 사용자 계정을 반환합니다. GET /users/1 뒤에 특정 아이디를 넣어주면 아이디가 1인 계정을 찾아서 반환합니다. POST /articles 특정 게시물 정보를 등록하는 API GET /articles 모든 게시물 정보를 불러오는 API GET /articles/1 아이디가 1인 게시글을.. 공감수 0 댓글수 0 2021. 6. 1.
[mongoDB] 몽고DB NoSQL Not only SQL의 약자입니다. 기존의 RDBMS(관계형 데이터베이스)의 한계를 극복하기 위해 만들어진 새로운 형태의 데이터베이스입니다. 관계형 DB가 아니므로 RDBMS처럼 고정된 스키마(테이블의 틀) 및 JOIN문이 존재하지 않습니다. NoSQL을 사용하는 이유 가장 큰 이유는 성능 때문입니다. 관계형 데이터베이스는 시스템의 신뢰도를 높이는데 필요한 장치를 많이 가지고 있습니다. SQL문을 읽고 실행하는데 많은 리소스를 사용하며 성능이 떨어지는 경우가 많습니다. 반대로 NoSQL은 성능을 최우선으로 생각하여 실시간으로 처리해야 할 경우나 대용량 트래픽을 감당할 수 있는 메시징 시스템 등에 활용됩니다. 회원정보등의 DB는 SQL쪽이 좋고 글을 적고 지우고를 많이하는 SNS같은 곳에서는 .. 공감수 0 댓글수 0 2021. 5. 22.
[알고리즘] 문자열 압축 ❓문자열 압축 알파벳 대문자로 이루어진 문자열을 입력받아 같은 문자가 연속으로 반복되는 경우 반복되는 문자 바로 오른쪽에 반복 횟수를 표기하는 방법으로 문자열을 압축하는 프로그램을 작성하시 오. 단 반복횟수가 1인 경우 생략합니다. ▣ 입력설명 첫 줄에 문자열이 주어진다. 문자열의 길이는 100을 넘지 않는다. ▣ 출력설명 첫 줄에 압축된 문자열을 출력한다. ▣ 입력예제 1 KKHSSSSSSSE ▣ 출력예제 1 K2HS7E 💡문제풀이 function solution(s) { let answer = ""; let cnt = 1; s = s + " "; for (let i = 0; i < s.length - 1; i++) { if (s[i] === s[i + 1]) { cnt++ } else { answer.. 공감수 0 댓글수 0 2021. 5. 22.
[알고리즘] 가장 짧은 문자거리 구하기 ❓ 입력받은 문자열과 문자가 있을 때, 문자를 기준으로 하는 가장 짧은 거리를 구하시오 한 개의 문자열 s와 문자 t가 주어지면 문자열 s의 각 문자가 문자 t와 떨어진 최소거리를 출 력하는 프로그램을 작성하세요. ▣ 입력설명 첫 번째 줄에 문자열 s와 문자 t가 주어진다. 문자열과 문자는 소문자로만 주어집니다. 문자열의 길이는 100을 넘지 않는다. ▣ 출력설명 첫 번째 줄에 각 문자열 s의 각 문자가 문자 t와 떨어진 거리를 순서대로 출력한다. ▣ 입력예제 1 teachermode e ▣ 출력예제 1 10121012210 💡 문제풀이 function solution(s, t) { let answer = []; let p = 1000; for (let x of s) { if (x === t) { p =.. 공감수 0 댓글수 0 2021. 5. 22.
[GitHub] React 프로젝트 github 배포하기 github에 레포지토리를 생성하고, git push 작업까지 해준다. 깃을 처음 사용한다면 아래 링크를 참조해보세요 :) https://meanbymin.tistory.com/7?category=929768 Git, GitHub 사용하기 Git 이란 ? 버전 관리 시스템의 한 종류입니다. 버전 관리 : 여러 파일을 하나의 버전으로 묶어 관리하는 것을 말합니다. 버전 관리 시스템의 종류 1. 클라이언트 - 서버 모델 하나의 meanbymin.tistory.com git push가 끝났다면, npm을 사용해 gh-pages 패키지를 설치합니다. $ npm install --save gh-pages push가 된 자신의 깃 레포지토리로 들어간 후 settings를 클릭한다. settings안에 있는 Page.. 공감수 0 댓글수 0 2021. 5. 21.
[React] class형 컴포넌트 우리는 class컴포넌트와 함수형 컴포넌트 둘 다 사용할 수 있는데, 리액트에서도 함수형 컴포넌트 사용을 추천하고 있다. 허나 이전에 만든 프로젝트가 있다면 class컴포넌트를 사용했을 것이고, 그것을 유지보수 하기위해서는 class컴포넌트도 알아야 유지보수가 가능하다. import React, { Component } from "react"; class CounterClass extends Component { //첫번째 방법 // constructor(props) { // super(props); // // bind작업을 하면 만약에 이 함수에서 this를 가르키게 된다면 constuctor에서 this를 가르키게 해라라는 의미 // this.handleIncrease = this.handleIncr.. 공감수 0 댓글수 0 2021. 5. 21.
[React] Immer를 사용한 불변성 지키기 immer를 사용하면 불변성을 해치는 코드를 작성해도 대신 불변성 유지를 해줍니다. 우리는 보통 배열을 변경할 때 합칠때는 concat, 찾거나 뺄 때는 filter, 리스트를 뿌릴 때는 map을 사용하여 불변성을 지켜주면서 배열을 수정합니다. 허나 immer를 사용하면, push나 직접적인 값 설정이 가능해집니다. 먼저 immer를 설치해줍니다. $yarn add immer 또는 $npm i immer 그리고 상단에 import produce from "immer"; 를 작성해주고 immer로 사용해도 되지만, 보통 produce로 많이 사용합니다. produce 함수를 사용 할 때에는 첫번째 파라미터에는 수정하고 싶은 상태, 두번째 파라미터에는 어떻게 업데이트하고 싶을지 정의하는 함수를 넣어줍니다. .. 공감수 0 댓글수 0 2021. 5. 20.
[알고리즘] 숫자만 추출하기 ❓숫자만 추출하기 문자와 숫자가 섞여있는 문자열이 주어지면 그 중 숫자만 추출하여 그 순서대로 자연수를 만 듭니다. 만약 “tge0a1h205er”에서 숫자만 추출하면 0, 1, 2, 0, 5이고 이것을 자연수를 만들면 1205 이 됩니다. 추출하여 만들어지는 자연수는 100,000,000을 넘지 않습니다. ▣ 입력설명 첫 줄에 숫자가 썩인 문자열이 주어집니다. 문자열의 길이는 50을 넘지 않습니다. ▣ 출력설명 첫 줄에 자연수를 출력합니다. ▣ 입력예제 1g0en2T0s8eSoft ▣ 출력예제 1208 💡 문제풀이 1. 정규식으로 대체하기 function solution(str) { let answer = ""; answer = str.toLowerCase().replace(/[a-z]/g, '') r.. 공감수 0 댓글수 0 2021. 5. 20.
[알고리즘] 유효한 팰린드롬 ❓유효한 팰린드롬(회문 문자열)을 검사하시오 앞에서 읽을 때나 뒤에서 읽을 때나 같은 문자열을 팰린드롬이라고 합니다. 문자열이 입력되면 해당 문자열이 팰린드롬이면 "YES", 아니면 “NO"를 출력하는 프로그램을 작성하세요. 단 회문을 검사할 때 알파벳만 가지고 회문을 검사하며, 대소문자를 구분하지 않습니다. 알파벳 이외의 문자들의 무시합니다. ▣ 입력설명 첫 줄에 정수 길이 100을 넘지 않는 공백이 없는 문자열이 주어집니다. ▣ 출력설명 첫 번째 줄에 팰린드롬인지의 결과를 YES 또는 NO로 출력합니다. ▣ 입력예제 1 found7, time: study; Yduts; emit, 7Dnuof ▣ 출력예제 1 YES 💡 문제 풀이 function solution(s) { let answer = "YES.. 공감수 0 댓글수 0 2021. 5. 20.
[알고리즘] 회문 문자열 ❓ 회문 문자열을 찾아라 앞에서 읽을 때나 뒤에서 읽을 때나 같은 문자열을 회문 문자열이라고 합니다. 문자열이 입력되면 해당 문자열이 회문 문자열이면 "YES", 회문 문자열이 아니면 “NO"를 출력 하는 프로그램을 작성하세요. 단 회문을 검사할 때 대소문자를 구분하지 않습니다. ▣ 입력설명 첫 줄에 정수 길이 100을 넘지 않는 공백이 없는 문자열이 주어집니다. ▣ 출력설명 첫 번째 줄에 회문 문자열인지의 결과를 YES 또는 NO로 출력합니다. ▣ 입력예제 1 gooG ▣ 출력예제 1 YES 💡 문제 풀이 1. for문을 이용해서 결과 도출 function solution(s) { let answer = "YES"; s = s.toLowerCase(); let len = s.length; for (le.. 공감수 0 댓글수 0 2021. 5. 18.
[알고리즘] flag변수를 이용한 봉우리 개수 구하기 ❓봉우리 개수 구하기 지도 정보가 N*N 격자판에 주어집니다. 각 격자에는 그 지역의 높이가 쓰여있습니다. 각 격자 판의 숫자 중 자신의 상하좌우 숫자보다 큰 숫자는 봉우리 지역입니다. 봉우리 지역이 몇 개 있는 지 알아내는 프로그램을 작성하세요. 격자의 가장자리는 0으로 초기화 되었다고 가정한다. 만약 N=5 이고, 격자판의 숫자가 다음과 같다면 봉우리의 개수는 10개입니다. ▣ 입력설명 첫 줄에 자연수 N이 주어진다.(1= 0 && ny = arr[i][j]) { flag = 0; // boolean false를 뜻함 break; } } if (flag) answer++; } } return answer; } let arr = [[5, 3, 7, 2, 3], [3,.. 공감수 0 댓글수 0 2021. 5. 18.
[알고리즘]격자판 최대합 구하기 ❓ 격자판 최대합 구하기 5*5 격자판에 아래롸 같이 숫자가 적혀있습니다. [자바스크립트 알고리즘 문제풀이] N*N의 격자판이 주어지면 각 행의 합, 각 열의 합, 두 대각선의 합 중 가 장 큰 합을 출력합 니다. ▣ 입력설명 첫 줄에 자연수 N이 주어진다.(1 공감수 0 댓글수 0 2021. 5. 14.
[알고리즘]등수 구하기 N(1 1); // let answer = Array.from({ length: arr.length }, () => 1); 자바스크립트에서는 배열을 객체로 분류하고 있기 때문에, Array.from(배열, 함수)에서 배열의 길이를 받아온 arr.length로 정의하고 그것을 모두 1로 초기화 시켜주도록 하였습니다. 공감수 0 댓글수 0 2021. 5. 14.
[React]배열 렌더링하기 userList.js import React from "react"; function User({ user }) { return ( {user.username} ({user.email}) ); } function UserList() { const users = [ { id: 1, username: "홍길동", email: "hong@hong.com", }, { id: 2, username: "임꺽정", email: "lim@lim.com", }, { id: 3, username: "최배달", email: "choi@choi.com", }, ]; return ( {users.map((user) => ( ))} ); } export default UserList; 배열 객체를 만들어놓고 객체를 하나씩 찍어줄.. 공감수 0 댓글수 0 2021. 5. 13.
[React] ref: Dom에 이름 달기 (useRef) 특정 DOM 요소에 어떤 작업을 해야 할 때 요소에 id를 달면 CSS나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업을 할 수 있다. 이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트에서 DOM에 이름을 다는 것을 ref(reference의 줄임말) 이라고 한다. ref는 어떤 상황에서 사용해야 할까? 'DOM을 꼭 직접적으로 건드려야 할 때'입니다. JavaScript 를 사용할 때에는, 우리가 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다. 리액트에서는 ref로 사용하는데 함수형 컴포넌트에서 ref를 사용할 때에는 useRef라는 Hook 함수를 사용합니다. In.. 공감수 0 댓글수 0 2021. 5. 13.
[JavaScript] 자식 노드 모두 삭제하기 부모노드에서 자식노드를 모두 지우고 싶은데 잘 되지 않을때가 많다. 아래 예시를 보자 const 부모노드 = document.querySelector( ".부모노드클래스이름" ); while (부모노드.hasChildNodes()) {// 부모노드가 자식이 있는지 여부를 알아낸다 부모노드.removeChild( 부모노드.firstChild ); } 원래 removeChild 메서드는 removeChild(지울 자식노드)를 적어줘야하는데, 위의 코드는 부모노드의 첫번째 자식을 계속해서 하나씩 반복문으로 지우는 방식이다. 간단하게 사용할 수 있으니 편하게 사용하면 될 듯하다. 공감수 2 댓글수 0 2021. 4. 15.
[JavaScript] for문 안에서 Ajax 돌리기 이번에 코드를 짜면서 처음으로 Jquery의 힘을 빌렸는데 사용한 부분이 바로 for문 안에서 Ajax를 사용할 때이다. 내가 짜고 있는 정확한 코드를 보여줄수는 없지만, 글자로 표현하자면 바닐라 자바스크립트로 코드를 짜고 있었고, ajax를 이용하여 배열에 값들을 넣어놓고 그 배열을 재사용하여 for문을 돌려서 ajax로 다시 한 번 값을 받아오는 것이였다. Promise의 방법도 사용해보고, fetch를 사용해보았지만 바닐라 자바스크립트로 해결하지 못하였다. 혹시나 이 글을 보시고 바닐라 자바스크립트로 for문 속에서 ajax를 사용하는 방법을 아시는 분은 댓글을 달아주시면 정말 감사하겠습니다. 자 이제 알아보도록 하자. for (let i = 0; i < review.length; i++) { (f.. 공감수 0 댓글수 0 2021. 4. 14.
[CSS] 마우스 클릭 금지, 안되게 막기 jquery나 javascript로 막을 수도 있지만 가장 간단하게 css로 막는 방법입니다. 작동안함 공감수 1 댓글수 0 2021. 4. 12.
[JavaScript] form태그 action 경로 여러개 만들기 요즘 PHP를 많이 사용하고 있는데, form태그를 사용하다가 하나의 form으로 여러 경로로 보낼 수 있으면 좋지않나? 라는 생각을 가지고, 공부하게 되었다. 예시) 전송1 버튼을 눌리면 form태그에 적은 action에 해당되는 경로로 정보가 보내지고, 전송2 버튼을 눌리면 submit2함수가 호출되면서 form의 action 주소가 두번째로 보낼 경로로 바뀌어서 보내지게 된다. 공감수 4 댓글수 0 2021. 4. 12.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.