본문 바로가기

분류 전체보기361

React(46) 타입스크립트 - api 객체 받아오기 2 (상세페이지) 리액트와 타입스크립트를 이용하여 api 객체를 받아오는 방법에 대한 포스팅 순서이다. 1. React(45) 타입스크립트 - api 객체 받아오기 (상세페이지) 1 - api 로 서버에서 채팅방과 유저들의 정보를 받아와 회원 등급에 따른 채팅 리스트를 구현한다. 2. React(46) 타입스크립트 - api 객체 받아오기 (상세페이지) 2 - 구현한 채팅 리스트를 바탕으로 채팅 정보가 들어있는 상세 페이지를 구현해보았다. React(46) 타입스크립트 - api 객체 받아오기 2 (상세페이지) 결과 화면 1. 통신메소드를 통해 컴포넌트 내에서 채팅방 리스트를 받아온다. [ 더보기 ] 버튼을 누르자. 2. [ 더보기 ] 를 누르면 customer 인 유저 정보와 그에 따른 1:1 채팅방 리스트로 연결된다... 2021. 9. 11.
React(45) 타입스크립트 - api 객체 받아오기 1 (상세페이지) 리액트와 타입스크립트를 이용하여 api 객체를 받아오는 방법에 대한 포스팅 순서이다. 1. React(45) 타입스크립트 - api 객체 받아오기 (상세페이지) 1 - api 로 서버에서 채팅방과 유저들의 정보를 받아와 회원 등급에 따른 채팅 리스트를 구현한다. 2. React(46) 타입스크립트 - api 객체 받아오기 (상세페이지) 2 - 구현한 채팅 리스트를 바탕으로 채팅 정보가 들어있는 상세 페이지를 구현해보았다. React(45) 타입스크립트 - api 객체 받아오기 (상세페이지) - 1 모든 것이 처음이었다. 타입스크립트도 낯설기만 하였다. 컴포넌트가 여러개 연결되다 보니 그냥 코딩만 할 수는 없었다. 처음으로 며칠동안 구조에 대해 고민하게 된 계기가 되기도 하였다. 왜 구조가 중요한지도 깨달.. 2021. 9. 10.
React(44) 리액트 훅 - useMemo 란? memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다. 작성된 컴포넌트 함수는 React 앱에서 랜더링(rendering)이 일어날 때마다 호출이 됩니다. 컴포넌트 함수가 호출이 되면 그 안에 자바스크립트 로직들이 수행되고, 이를 기반으로 JSX로 마크업된 UI가 리턴되는 기본 구조를 가지고 있죠. React에서 컴포넌트의 랜더링은 한 번 일어나고 끝이 아니라 수시로 계속 일어날 수 있습니다. 랜더링마다 호출되는 컴포넌트 함수 useMemo란 성능 최적화를 위하여 연산된 값을 재사용.. 2021. 9. 9.
Git(29) git stash 란 요즘 git 을 중점적으로 사용하다 보니 git 에 대한 포스팅이 많다. 그만큼 지식과 대처능력도 쌓여가리라 믿는다 :) 오늘은 git stash 에 대해 중점적으로 알아보자. Git(29) git stash 란 - git stash 사용하기 git stash 는 내가 작업하던 코드만 싹 긁어서 임시 공간에 저장해준다. (클립보드 같은 느낌이랄까) 내 브랜치는 { 마스터 + 그 뒤로 작업한 코드 } 상태이다. 작업한 코드만 싹 잘라내기(git stash)하고, 임시공간에 따로 저장해놓는다. 내 브랜치는 { 마스터 } 만 남는다. 어딘가에 { 그 뒤로 작업한 코드 } 가 따로 임시 저장된다. 커밋 이 후에 작업을 했다. const ItemDetail = (): ReactElement => { return .. 2021. 9. 8.
React(43) 리액트 훅 - useCallback 이란 내가 사용하면서 느낀 useCallback 은 리액트 전용 콜백함수라는 느낌이 강했다. 보통 자바스크립트만 사용하다가 callback 지옥을 경험해봤다는 목격담을 많이 전해들었다. (후덜덜) 다행히도 리액트에서는 콜백함수가 쓰이지 않는다. 그렇지만 가끔씩 비슷하게 써야할 때가 있다. 자 그럼 useCallback() 이 무엇인지 알아보자. React(43) 리액트 훅 - useCallback 이란 - 내가 이해해본 useCallback() useEffect 는 (() => { 두번째 배열 [test] 라는 변수에 변화가 있을 때만 렌더링을 새로 하는 것 처럼 }, [ test ]) useCallback 도 (function() { 두번째 배열 [test] 라는 변수에 특정 변화가 있을 때만 함수를 새로 .. 2021. 9. 7.
React - 타입스크립트 실행오류 Type 'undefined' is not assignable to type 리액트에서 타입스크립트를 사용하다가 에러가 났다. 강의만 들어봤고, 처음 사용해보았던 터라 당황했지만 차근차근 해결해 나갔다. 처음에는 타입스크립트만 쓰지 않았더라면 이런 고생을 하지 않고 진작에 개발이 끝났을 텐데 하는 불평도 많이 들었다. 그렇지만 쓰다 보니 변수 관리가 훨씬 잘된다는 사실을 깨달았다. 그리고 이 포스팅은 내가 겪은 이슈들의 기록이다. 언젠가는 쌓이겠지 휴 ... (Updated 02/21/22) 오랜만에 예전에 쓴 포스팅을 봤는데 추가할 부분이 있어 수정해보았다. 아직도 부족하다고 생각하지만 몇 개월전의 나를 보니 정말 쌓이긴 하는 것 같다. React - 타입스크립트 실행오류 Type 'undefined' is not assignable to type props 를 넘겨주다 발생한.. 2021. 9. 6.
Git(28) git reset 으로 삭제한 커밋 원래대로 되돌리기 git pull 을 받고 컨플릭트를 해결하려다 git reset --hard 으로 마지막 커밋을 삭제하였다. 자 reset 을 취소하고 삭제했던 커밋을 되돌려보자. 이렇게 취소할 수 있는 이유는 Git 에서 커밋, 체크아웃, 머지, 등의 이력을 모두 기록하기 때문이다. Git(28) reset 으로 삭제한 커밋 원래대로 되돌리기 일단 로그를 확인해야 한다. 돌아가야 할 로그를 확인하고 명령어를 통해 다시 돌아가보자. 1. ref로그 확인하기 HEAD 는 마지막 커밋의 참조로 가장 최신 커밋 을 가리키는 좌표같은 것이다. - HEAD@{0} 은 현재 상태를 가리킨다. ex) reset 해서 마지막 커밋이 삭제된 상태 - HEAD@{1} 은 마지막 명령어가 실행된 상태이다. ex) 마지막 커밋을 한 상태 -.. 2021. 9. 5.
React(42) 리액트 훅 - POST 방식으로 요청 보내기 통신 "영단어 새로 추가해줘" (Create) "영단어 목록 좀 보여줘봐" (Read) "영단어 수정 좀 해줘" (Update) "영단어 지워줘" (Delete) 클라이언트는 서버에게 요청을 보낸다 이 때 API라는 체계를 이용해 클라이언트와 서버 간에 요청과 응답을 주고 받는다. 이 때 CRUD 방식을 사용한다. CRUD 클라이언트가 서버에게 요청을 보낼 때 이 요청들을 크게 4가지 성격으로 분류할 수 있다. CRUD라고 불리는 이 4가지 대표적인 요청에 대해 살펴보자. Create = POST create는 서버에 정보를 올려달라는 요청이다. ( 생성 ) create는 POST 메서드를 사용해 해당 URI를 요청하면 리소스를 생성한다. Read = GET read는 서버에서 정보를 불러오는 요청이다... 2021. 9. 4.
Git(27) git rebase 로 커밋관리하기 예전에는 팀원이 적었기 때문에 작업 후에는 내 브랜치에서 → 마스터브랜치로 바로 git merge 하였다. 편하긴 하지만 커밋 이력을 보면 깔끔하지는 못했다. 요즘은 git rebase 으로 커밋이력을 관리 하고 있다. 과정이 merge 보다는 복잡하지만 커밋이력은 깔끔하다. 즉 rebase 와 merge 는 실행결과는 같지만 커밋 히스토리가 달라진다. (결과가 깔끔하냐 아니면 과정이 쉽게 가냐) 아래 사진을 보면 한눈에 차이점을 이해하기 쉬울 것이다. 자, 그럼 rebase 를 이해하러 가보자. Git(27) git rebase 로 커밋관리하기 읽으며 이해하기 내 브랜치는 { 마스터 + 그 뒤로 작업한 코드 } 이다. 작업한 코드만 싹 잘라내기(git stash)하고, 임시공간에 따로 저장해놓는다. 내.. 2021. 9. 3.
반응형

티스토리툴바