본문 바로가기

분류 전체보기361

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.
Vue(13) 동적라우팅으로 상세페이지 vuex 로 구현하기 메뉴들을 클릭할 때, 라우터를 통해 각각의 컴포넌트 상세페이지로 넘어가는 것이 아니라 컴포넌트 없이 동적라우팅을 통해 상세 페이지로 넘어가는 기능을 구현해보자. Vue(14) 동적라우팅으로 상세페이지 vuex 로 구현하기 src/api/index.js 일단 Api를 불러와 상세페이지를 보여줄 통신 메소드를 정의해보자. import axios from "axios"; function showMenuDetailApi(menuid) { // 매개변수로 menuId를 받는다. const BASE_URL = `http://________/menu/${menuid}`; return axios.get(BASE_URL); } export { showMenuDetailApi }; src/router/index.js 통신.. 2021. 8. 24.
SSH 란 실무에서 개발환경을 세팅할 때마다 SSH 접속을 위한 세팅을 해주는 과정을 거친다. 그래서 튜토리얼을 따라 세팅하면서도 내가 하는 세팅이 뭔지를 잘 몰라 답답하기도 하고 궁금하기도 하였다. 항상 답답함의 연속이지만 한걸음 한걸음 걸음마하다보면 쌓이지 않을까 기대해본다. ㅠㅠ 자 그럼 SSH 가 무엇인지 자세히 살펴보자. SSH(Secure Shell) 란 SSH는 원격 호스트에 접속하기 위해 사용되는 보안 프로토콜이다. 원래는 쉘에 원격으로 접속 하려면 ‘텔넷(Telnet)' 을 사용했는데, 암호화를 되지않아 보안상 취약했다. 실제로 패킷 분석 프로그램으로 원격 접속 과정에서 옮겨지는 비밀번호나 파일 내용 등의 데이터를 쉽게 탈취할 수 있다. 그래서 여기에 암호화 기능을 추가하여 1995년에 나온 프로토.. 2021. 8. 23.
Docker(2) Docker-compose 란 (기본 명령어 & docker-compose.yml) 실무에서는 도커를 사용하여 애플리케이션을 개발한다. 처음 접해보는 스택이지만 한 걸음 한 걸음 배워나가보자. 도커를 사용하는 이유는 개발할 때 누구나 동일한 환경 구성을 할 수 있다는 점이다. 사용자마다 서버마다 환경이 다르기 때문에 도커로 같은 실행 환경으로 만들 수 있다. docker-compose 란 보통은 여러 애플리케이션이 서로 의존성 있게 구성되어 시스템이 이뤄져 있다. 그래서 하나의 컨테이너가 하나의 애플리케이션을 담당하기 때문에 여러 개의 컨테이너가 필요하다. 도커 컴포즈(Docker Compose)는 yaml 포맷으로 작성되고, 여러 컨테이너들을 한 번에 관리를 할 수있게 도와주는 역할을 한다. docker-compose.yml docker-compose.yml은 장황한 도커 실행 옵션을.. 2021. 8. 22.
반응형

티스토리툴바