![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbRGrnH%2Fbtr6g9d0xyd%2Fe6eIwCkYe3dFzlmpDa0wm0%2Fimg.jpg)
[SSH] Git 에서 서로 다른 두 개의 계정 사용하기
2023. 3. 28. 13:07
개발이야기/Git
서로 다른 두 개의 계정을 사용하는 방법을 알아보겠습니다. 개인용 노트북에서 작업을 해야 하거나 업무와 관련된 작업을 할 때, 깃에서 두 개의 계정을 사용하면 깃이 꼬이는 문제를 해결할 수 있습니다. 이 문제를 해결하기 위해 많은 블로그에서 도움을 받을 수 있지만, 제가 직접 겪었던 어려움과 혼란스러웠던 부분을 블로깅해보고자 합니다. 저는 윈도우 컴퓨터를 사용하고 있으며, 윈도우 기준으로 작성하겠지만 파일 디렉토리 주소 말고는 윈도우와 맥이나 리눅스 등 다른 운영체제에서도 큰 차이가 없을 것으로 생각됩니다. 1. 먼저 터미널이나 git bash를 실행한다. 2. 명령어를 입력하여 ssh 폴더로 들어간다. cd ~/.ssh 3. ssh 인증키를 생성 인증키를 생성하는 방법은 두 가지가 있다. "ed2551..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FzP1V5%2Fbtr5orGzZny%2FCgHOKDaRBUXKxcEmn5GZ00%2Fimg.png)
CSR과 SSR의 장단점 Next.js 선택 이유와 고려사항
2023. 3. 22. 15:02
개발이야기/Next.js
csr과 ssr의 차이점✍️CSRreact는 CSR 방식으로 페이지를 렌더링 한다.react는 SPA로 하나의 페이지안에서 모든 데이터를 주고 받으며,react-router-dom 같은 라우팅 라이브러리를 사용해서 페이지 이동처럼 보이게 만들어준다.하지만 실제로는 페이지가 이동하는것이 아닌, URL이 변경될때 보여지는 컴포넌트가 달라지는것 뿐이다.그러므로 실제로 페이지가 이동되어서 다시 HTML과 자바스크립트를 받아오는 것이 아니다. react에서는 맨 처음 유저가 웹에 방문하면 HTML을 받아오고 CSS와 자바스크립트를 불러와서웹을 동작시키면 이후에 우리가 react안에 작성해놓은 코드들이 동작하는 것이다.CSR의 장점은 사용자와의 상호작용이 매끄럽다는 장점이 있다.그러나 검색 엔진 최적화(SEO)가 ..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fl01x5%2Fbtr42yr6du5%2FcZy4n3MhyxgJnuPoC4wc21%2Fimg.jpg)
탭 버튼 컴포넌트 만들기: 확장성과 API 연동을 고려한 React 예제
2023. 3. 21. 15:09
개발이야기/React.js
확장성 높은 tabButton을 만들어보자. 조건 1. firstButton과 secondButton을 누르면 각각에 알맞은 데이터가 보여져야한다. 2. thirdbutton, fourth button 등이 추가 될 가능성을 고려해서 만들어야한다. 구현 방법 1. 변경되는 탭 모드를 저장할 state를 만들어준다. 2. 각 탭 버튼에 고유한 값을 할당하고, 해당 값을 이벤트 핸들러에 전달한다. 3. 이벤트 핸들러에서 전달받은 값에 따라 현재 활성화된 탭을 업데이트한다. 4. 활성화된 탭에 따라 적절한 데이터를 렌더링한다. 1. 부모컴포넌트에 탭 모드를 저장할 state와 탭 모드 변경시 실행되는 함수를 만들어준다. 부모컴포넌트.tsx //탭모드를 저장한 state/ 초기값은 firstBtn으로 설정 co..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmFuV8%2FbtrNrz1wfIM%2FMgbbTYNhmiP0NuwkduyrS0%2Fimg.jpg)
[Design Pattern] React와 Flux 패턴
2022. 9. 30. 09:45
개발이야기/TIL
지금은 react에서 데이터 관리를 할 때 redux를 쓰는 게 당연시되고 있다. 그럼 리액트는 왜 줄곧 MVC패턴을 사용하다가 flux패턴을 사용하게 되었는지 알아보자. Flux 출현 배경: 기존 MVC 모델의 한계 기존의 어플리케이션 환경에서 보편적으로 사용되는 패턴은 MVC였다. Model에 데이터를 정의해 두고, Controller를 이용해 Model 데이터를 생성 / 조회 / 수정 / 삭제(CRUD)하고, 변경된 데이터는 View에 출력되면서 사용자에게 전달되는 흐름, 하지만 이 패턴의 문제점은 어플리케이션의 규모가 커질수록 데이터 흐름의 복잡도가 무지막지하게 늘어난다는 것이었다. 예를 들어 칼럼 게시판을 만든다고 치면. (이 게시판 UI의 가장 큰 특징은 자신이 최근에 남긴 댓글이 우측 사이드..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbVJfYL%2FbtrNqtgnTCr%2FZ5TLXTIDTZC1JnnjvMCtmK%2Fimg.jpg)
[Design Pattern] MVC
2022. 9. 30. 08:54
개발이야기/TIL
디자인패턴 “바퀴를 다시 발명하지 마라(Don’t reinvent the wheel)” 이 문장이 뜻하는 의미는 무엇일까? 이미 만들어져서 잘 되는 것을 처음부터 다시 만들 필요가 없다는 의미이다. 이처럼 디자인 패턴은 자주 발생하는 고질적인 문제들은 또 발생할 수 있기때문에 하나의 패턴을 만들어서 재사용할 할 수 있게 만들어주는 해결책이다. 그럼 ... 만약에... 이런 방법들이 없다면 ? 우리는 클래스 함수들을 일일히 다 만들어야 한다.😵💫🤮 디자인패턴은 라이브러리나 프레임워크와 의미가 비슷하다고 보면되는데, 예를 들어 그냥 jQuery를 이용한다면 $('#MVC')로 DOM을 선택할 수 있는 것을 순수 Javascript를 사용한다면 document.getElementsByid('MVC')로 길게..