Stacks

[GIT] git clone 시 port22: Connection timed out 에러 해결

터미널에서 평소와 같이 git clone 명령어를 사용하고 있었는데, 한참이 걸리더니 Permition Denied 에러가 발생했다. ssh키가 문제인가 하여 전체 키를 삭제하고 재등록을 한 뒤, 아래 코드로 ssh 접속을 확인하였다. ssh -T git@github.com 여기서 port22: Connection timed out 에러가 발생해서 구글링을 하니 ~/ .ssh/config 파일을 수정하여 포트 설정을 변경해주어야 했다. 카페 와이파이에서 비슷한 에러가 많이 발생했다는 것을 보니, 지난주 금요일 와이파이를 새로 설치하면서 뭔가 바뀌었기 때문에 이런 에러가 발생한 것 같다. 1. .ssh/config 파일 편집 아래 코드를 입력하면 .ssh 파일 아래 config 파일을 생성하거나, 수정할 ..

[Redux] React-Redux 라이브러리 : Counter 예제만들기

오늘은 리액트와 리덕스를 함께 사용할 때 권장되는 공식 라이브러리인 react-redux 라이브러리를 알아보고, 이를 사용해 간단한 카운터 예제를 만들도록 하겠다. Redux 에 대한 내용은 아래 포스팅을 통해 정리해두었다. [Redux] 상태관리 라이브러리 : Redux 원리 살펴보기 🤔리덕스란 무엇인가? 자바스크립트에서 상태관리를 할 수 있는 라이브러리로, 변경되는 상태 데이터를 전역 저장소에 보관하여 관리함으로써 상태관리의 복잡성을 해소할 수 있는 도구이다. friedegg556.tistory.com 🤔react-redux 라이브러리란 무엇인가? 리덕스는 독립적인 라이브러리로 여러 UI 라이브러리 혹은 프레임워크와 함께 사용할 수 있는데, 예시로 Vue, Angular, Ember, React 그리..

[Redux] 상태관리 라이브러리 : Redux 원리 살펴보기

🤔리덕스란 무엇인가? 자바스크립트에서 상태관리를 할 수 있는 라이브러리로, 변경되는 상태 데이터를 전역 저장소에 보관하여 관리함으로써 상태관리의 복잡성을 해소할 수 있는 도구이다. 특히 리액트 프로젝트에서 많이 사용되지만, 리액트와는 독립적인 라이브러리로 바닐라 자바스크립트에서도 사용할 수 있다. 리액트에서 컴포넌트 단위로 코드를 작성하고, 컴포넌트 안에서 상태가 존재한다면 여러 컴포넌트에서 해당 상태에 접근하기 위해 필연적으로 props drilling 이 일어날 수밖에 없다. 이는 코드의 복잡성을 증가시키고 그렇기 때문에 유지보수가 어렵고 앱의 동작을 예측하기 힘들어진다. 리덕스에서는 상태와 컴포넌트 구조를 분리시킴으로써 상태가 업데이트되는 흐름을 추적하기 쉽게 하고, 결과적으로 컴포넌트를 구성하는 ..

[Node.js / express] 미들웨어를 알아보자!

[Node.js / express] express.js 기본 내용 정리 express란 무엇인가? express는 Node.js 환경에서 웹서버 혹은 API 서버를 구축하기 위해서 사용되는 프레임워크이다. Node.js 내장 모듈인 http 모듈을 기반으로 만들어졌으며, 웹서버를 구축하기 위해 필 friedegg556.tistory.com 이전 글에서 express 개요와 간단한 웹서버 구축에 대해 알아보았다. 이번 글에서는 express의 핵심 개념인 미들웨어에 대해서 정리해보았다. 미들웨어란 무엇인가? 미들웨어 함수는 요청 오브젝트(req), 응답 오브젝트(res) 그리고 애플리케이션 요청-응답 주기 중 그 다음의 미들웨어 함수에 대한 액세스 권한을 갖는 함수입니다. 그 다음의 미들웨어 함수는 일반적..

[Node.js / express] express.js 기본 내용 정리

express란 무엇인가? express는 Node.js 환경에서 웹서버 혹은 API 서버를 구축하기 위해서 사용되는 프레임워크이다. Node.js 내장 모듈인 http 모듈을 기반으로 만들어졌으며, 웹서버를 구축하기 위해 필요한 다양한 함수와 서브 모듈을 포함하고 있다. (여기서 웹서버란 http 서버를 의미한다.) http 모듈이 독립적인 모듈이기 때문에 server, request, response 객체를 사용해 직접 이벤트를 달아 요청을 받고 응답하도록 코드를 짜야한다면, Express는 모든 것이 포함된 '프레임워크'이기 때문에, 이런 과정을 간소화 시켜주는 편리한 기능들을 가지고 있다. express는 어떻게 시작하는가? 먼저 express 프레임워크 사용을 위한 기본 명령어를 입력하여 초기 ..

[React] UseEffect로 fetch API 요청하기

import React, {useState, useEffect} from 'react'; function Test() { const [weather, setWeather] = useState(0); useEffect(() => { fetchData(); }, []); const fetchData = async () => { let response = await ( await fetch( 'http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getUltraSrtFcst?serviceKey={API Key}&numOfRows=10&pageNo=1&base_date=20220807&base_time=0630&nx=55&ny=127&dataType=JSON', ..

[React] 리액트 Props 와 State 를 알아보자!

리액트에서 컴포넌트는 하나의 기능 단위로 구분된 코드 모음, 즉 데이터 + 화면이 같이 존재한다. 따라서 컴포넌트 내부 로직은 데이터가 변경되면 화면이 바뀌는, 데이터 중심으로 동작한다. 컴포넌트에서 외부로부터 받아오는 데이터는 props, 컴포넌트 안에서 바뀌는 데이터는 state로 구분할 수 있다. Props란 무엇인가? props란 컴포넌트의 프로퍼티(properties)를 의미한다. 자바스크립트에서 함수를 생각하면 조금 이해가 쉬운데, 함수를 전달 인자와 함께 호출하면, 호출된 함수 내부에서 그 전달 인자를 매개변수로 받아와 접근할 수 있듯이, 상위 컴포넌트에서 호출된 하위 컴포넌트에 속성 값을 전달하면, 그 속성 값 props라는 객체를 하위 컴포넌트에서 접근할 수 있다. 실제 함수를 호출할 때..

[React] SPA 는 무엇인가? / React Router 활용하기

SPA 란 무엇인가? 기존에는 웹페이지를 미리 준비해두었다가, 로딩할 때 새 페이지를 서버 측에서 전달받아와 렌더링을 했었는데 규모가 커지고 사용자와의 상호작용이 많아짐에 따라서 속도 저하의 문제가 발생했다. 이를 해결하기 위한 것이 SPA Single-Page Application이다. SPA는 페이지 전체가 아닌 바뀔 부분, 필요한 부분만 로딩한다. Header 나 Nav처럼 중복되는 요소들을 매번 불러오는 것은 불필요한 트래픽의 증가, 즉 자원의 낭비이다. 느린 반응성 때문에 쾌적한 사용자 경험을 제공하기가 어렵다. 정리하자면 필요한 데이터만 받아와서 부분을 업데이트 하는 방식으로 작동하는 웹 애플리케이션, 웹사이트를 SPA라고 한다. SPA의 단점 첫 화면의 로딩 시간이 다소 길다는 단점이 있다...

[React] 리액트는 무엇이고, 왜 리액트를 사용해야 하는가?

본 게시글은 한입 크기로 잘라 먹는 리액트 (인프런) 강의를 보고 정리한 내용입니다. 리액트란 무엇인가 node.js 기반의 자바스크립트 ui 라이브러리이다. 바닐라 자바스크립트로 구현하기 복잡한 여러 UI를 보다 쉽게 개발할 수 있도록 돕는 컴포넌트 기반의 라이브러리이다. 리액트를 사용해야하는 3가지 이유 1. 컴포넌트 기반의 UI 라이브러리 만약 엄청나게 많은 html 페이지가 존재하고, 공통적으로 들어가는 부분이 있다면 중복되는 코드가 엄청 많을 것이다. 여기에 한가지 변경사항이라도 생기게 된다면, 그 수 많은 html들을 일일이 수정해주어야 하는 문제점이 발생하고, 이렇게 하나씩 변경해주는 것을 산탄총 수술이라고 부른다. 산탄총이 엄청나게 많은 총알로 군데군데 박살내는 것에서 영감을 얻은 비유인 ..

[GIT] GIT 활용을 위한 명령어 정리

로컬 리포지토리 git init # 현재 디렉토리에 git repo 생성 git add . # 현재 변경 내용을 git의 관리 상태로 올려줌 (staging) git status # add 내용이 staging으로 넘어갔는지 확인 git commit -m "commit message" # 커밋 + 커밋 메시지 입력 git log # 현재까지의 커밋 로그를 확인할 수 있다. git reset HEAD~1 # 현재 시점부터 입력된 숫자 만큼 커밋을 되돌릴 수 있다. 커밋 메시지 작성 예시 git commit -m "feat: 인스타 게시글 조회 페이지네이션" 타입과 변경 내용을 간결하게 작성 자주 커밋하여 쉽게 복원할 수 있고, 코드 수정 당사자가 누구인지 확인할 수 있도록 함. (기능별로 포인트를 나누자)..