본문 바로가기

분류 전체보기346

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.
React(41) 리액트 훅 + 타입스크립트 - 모달창 만들기 updated 11/19/22 학습만 해봤던 타입스크립트를 사용하여 실무에 적용하는 중이다. 역시 세상에 쉬운일은 없다는 걸 새삼 느끼지만 차근차근해나가면 안될일은 없다. 자 그럼 작업해보자. 오늘도 새발자는 지식공유를 위해 열심히 달립니다. React(41) 리액트 훅 + 타입스크립트 - 모달창 만들기 리액트 훅과 타입스크립트로 모달창을 구현해볼 것이다. 일단 필요한 준비물은 부모 컴포넌트인 OrderList와 모달창의 역할을 할 자식 컴포넌트인 OrderModal 이다. OrderList.tsx 부모컴포넌트 일단 isShow 상태변수를 선언하고 Boolean 값을 준다. 이게 모달을 보여주는 스위치가 될 것이다. 요청서를 열었다 닫았다 할 function 인 openReq() 와 closeReq() .. 2021. 9. 2.
React(40) 리액트 훅 - Custom Hook 만들기 커스텀 훅을 만들어보자. 한마디로 만능 함수 컴포넌트를 따로 만들어서 필요한데 어디든 한 줄 붙여넣으면 다 된다. 이전 시간에 연습했던 가내수공업같이 그 속에서 자급자족하던 코드들 중 통신용 함수를 따로 떼어다가 커스텀 훅을 만들어 보았다. 맨처음에는 햇갈렸다. 리액트 훅도 개념이 안잡히는데 커스텀 훅은 이게 무슨 @.@ ???? 하지만 계속 접하다보니 그 개념이 이해되었다. 아마 코드경험을 3번정도 하고 나면 이해가 갈 것이다. 동영상이든 블로그든 하면 된다. 혹시 코드 해석하다가 디테일하게 궁금한 점이 있다면 ? 어차피 내용은 똑같으니 지난 포스팅을 클릭해보자. Hoxy .... 커스텀 훅 만들기 전에 새발자가 일일이 가내 수공업으로 실습한 코드를 보고 싶다면? ↓↓↓ React(39) 리액트 훅 -.. 2021. 9. 1.
Git(26) Jira와 BitBucket 을 연동한 개발 과정 개발팀 내 모든 개발 task 는 Jira 를 이용해 업무 분배를 하고 있다. 자, 그럼 Jira 가 무엇인지 알아보고, Jira와 BitBucket 을 이용한 개발 과정을 익혀보자. ** 이 포스팅은 연동 후 사용법으로 연동 과정은 포함하고 있지 않습니다. Jira 란 Jira 는 협업 툴이다. 개발 뿐 아니라 모든 일을 효율적으로 관리 할 수 있다. ‘이슈’가 생성되고 완료될 때까지 상태 변화를 의미하며 강력한 tracking 을 할 수 있다. ‘이슈’ 해결에 대한 히스토리도 남는다. (나는 노션을 jira 와 비슷한 형식으로 사용해본 경험이 있기 때문에 조금 더 적응하기가 쉬웠던 것 같다.) Git(26) Jira와 BitBucket 을 연동한 개발 과정 JIRA 에서 , 1. Jira 에서 이슈(.. 2021. 8. 31.
Git(25) git commit --amend 커밋 수정 후 덮어쓰기 현업에서 git 은 필수이다. 특히 회사에서 협업할 때, 얼마나 아느냐가 작업시간을 좌지우지 하기도 한다. 오늘이 그런 날이었다. commit 을 하자마자 수정사항이 생겼다. 너무 마이너해서 다시 커밋하기도 민망하다면? 덮어 씌워 버리자! 오늘 소개할 녀석은 amend 라는 옵션이다. 한글 문서에는 '저장' 과 '다른이름으로 저장'이라는 기능이 있다. '저장' 기능은 그 파일 안에 새로운 내용으로 저장된다. 깃의 amend도 '저장' 기능처럼 그 커밋 위에 새로운 내용을 덮어 저장하는 기능이다. Git(25) git commit --amend 커밋 수정 후 덮어쓰기 amend 는 마지막 커밋에 + 추가할 사항이 있는 경우 (메시지든, 코드이든, 파일이든) 마지막 커밋에 덮어씌우는 옵션이다. 다음 예제를 .. 2021. 8. 30.
JavaScript 알고리즘(4) 퀵정렬(Quick Sort) 알고리즘 4번째 시간 ! 돌고돌아 오랜만에 돌아왔다. JavaScript 알고리즘(4) 퀵정렬(Quick Sort) 퀵 정렬은 앞선 정렬과 확인했을 때 훨씬 빠르다. 이를 분할정복 알고리즘이라고 한다. 특정 값을 기준으로 큰 숫자와 작은 숫자로 나눠 보면 어떻까? - 기초 아이디어 퀵 정렬에서는 피봇이라는 기준 값이 있다. 보통 첫번째원소를 피봇(pivot) 이라고 놓는다. 피봇을 기준으로, 피봇보다 작은 애들은 모두 피벗의 왼쪽으로 옮기고, 피봇보다 큰 애들은 모두 피벗의 오른쪽으로 옮긴다. 다 옮겼으면 피봇을 제외한 왼쪽 리스트와 오른쪽 리스트를 다시 순서대로 정렬한다. 좌우로 나눠진 부분 리스트는 순환 호출을 이용하여 정렬을 반복한다. 부분 리스트 내에서 다시 피봇(기준값)을 정해서 좌우로 2개의 .. 2021. 8. 26.
React(39) 리액트 훅 - json-server 사용하여 통신하기 리액트 훅 영단어장을 만드는 실습 중이다. json-server 로 통신하여 영단어 데이터를 호출하여 사용해보자. Hoxy .... json-server 실행하는 방법을 모르신다면 ? 지난 포스팅을 참고해주세요. React(38) 리액트 훅 - json-server 로 RESTful API 만들기 리액트 실습 중이다. json-server 는 아주 짧은 시간에 REST API 를 구축해주는 라이브러리이다. REST API 서버의 기본적인 기능을 대부분 갖추고 있지만 프로덕션 전용은 아니다. 프로토타입을 만들거 devbirdfeet.tistory.com React(39) 리액트 훅 - json-server 사용하여 통신하기 화면에서 날짜별 버튼이 나오고, 그 버튼을 누르면 해당 날짜에 암기해야할 영단어가 .. 2021. 8. 25.
반응형