코딩이야기 by Fansor

Fansor의 코딩이야기 더보기

FrontEnd [React] useRef는 unmount 되어도 유지될까? 최근에 캐시된 이미지를 사용하기 위해 useRef에 캐시되어야 할 id를 저장하고 캐시여부를 판단해야 하는 상황이 있었습니다..! 관련해서 오늘은 useRef와 관련된 사실을 알아보겠습니다! 먼저 내가 원했던 동작은 useRef를 선언한 컴포넌트가 unmount 되어도 그 값이 유지되어서 다음에 컴포넌트가 mount되어도 동일한 useRef 값을 사용하고 싶었습니다! 다음 코드를 살펴보자 //App.js function App() { const [isOpen, setIsOpen] = useState(false); return ( { setIsOpen(!isOpen); }} > click {isOpen && } ); } 먼저 App.js에 state를 바꾸는 버튼을 하나 만들어주고, 버튼이 클릭될때마다 U..
FrontEnd [React] useState? useRef? (feat.단축키 추가) 최근에 업무를 진행할 때 리액트로 만들어진 웹사이트에 전역 단축키 이벤트를 추가해야하는 경우가 있었습니다. 이때 겪었던 문제 상황과 해결 방법에 대해 간단하게 소개하고 관련 내용을 추가 학습하여 정리해보았습니다. 상황을 자세히 설명하자면 리액트로 만들어진 프로젝트에 전역 단축키 기능을 추가해야하고, 로직을 추가할 때 컴포넌트 안의 업데이트 된 state 값을 사용해야하는 상황이었습니다. 상황을 간단한 코드로 재현해보면 다음과 같습니다.(코드는 App.js에 중요한 부분만 간단하게 요약하였습니다.) //App.js function App() { const [count, setCount] = useState(0); useEffect(() => { //컴포넌트가 렌더링 될 때 전역 단축키 이벤트를 설정한다. ..
BackEnd [SQL] 쿼리 튜닝이란?(+기본 개념) 최근 쿼리 튜닝을 통해 성능을 향상시키는 것에 흥미가 생겨 오랜만에 기록을 남깁니다..! *MsSQL관련 내용을 기반으로 정리하였으나 최대한 MySQL과 중복되는 부분만을 공유합니다! *따라서 MsSQL의 내용이 섞일 수 있습니다..! 그보다 쿼리튜닝이 뭐지? 관계형 데이터베이스에서의 쿼리튜닝이란 SQL문을 최적화해 원하는 결과를 좀 더 빠르게 하는것을 뜻한다. 그럼 쿼리 튜닝을 왜 해야 할까? 빠른 데이터 조회를 통해 사용자가 더 빠르게 원하는 결과를 받을 수 있게 된다! 그러면 사용자 경험 즉, UX가 향상되어 웹사이트에 더 오래 머무르게 되고 이는 수익으로 직결 될수도 있다! 그렇다면 쿼리 튜닝을 어떻게 해야할까? 쿼리튜닝을 하기 전에 알아두어야 할것들이 몇가지 있다. 오늘은 짧게 용어와 쿼리 튜닝..
Git husky를 이용한 git-hooks 자동화 오늘은 프로젝트에서 다들 사용하는 git에 관련된 내용입니다! 그중에서 git-hooks에 대해 알아볼건데요! git-hooks란? git과 관련된 이벤트가 발생했을떄 특정 스크립트를 실행할 수 있도록 하는 기능 git init을 하면 자동적으로 생기는 기능이라고 합니다..!(git 넘나 좋은것..) 종류 이렇게 있다고 하는데 그 중에서 오늘 소개할 부분은 빨간네모 부분인 prepare-commit-msg, commit-msg, pre-push 입니다! git init을 하면 안에 .git/hooks폴더가 생성되게 됩니다. 폴더 내부를 살펴보면 이렇게 구성되어있는데 뒤에 .sample확장자를 없애주면 hooks가 실행됩니다! 하지만 프로젝트를 진행할때 .git폴더는 올라가지 않는거 알고 있죠?! 아무리 ..
Git [Git] Git-Flow에 대하여 오늘은 회사에서 새로운 프로젝트를 진행할때 git-flow 브랜치 전략을 적용하기 위해 사전 학습한 내용을 정리하고자 한다. 먼저 브랜치 전략이란? 소프트웨어의 상태에 따라 브랜치를 분리하는 전략, git-flow. github-flow, gitlab-flow등이 있다. 그렇다면 git-flow를 쓰면 뭐가 좋은데? 기능별로 브랜치를 새로 생성해 작업하므로 각각 병렬적으로 개발할 수 있다! feature 브랜치가 존재해 추적이 쉽다! 규모가 커질수록 소스코드 관리가 용이하다! git-flow의 흐름을 살펴보자 git-flow를 설명할때 가장 많이 언급되는 흐름도이다. 하지만 나는 영어로 되어있어 그런지 잘 이해가 안간다.. 이는 밑에 예시를 들면서 설명하겠다. git-flow에서 각각의 브랜치 역할 ma..
운영체제 [운영체제] CPU 스케쥴링(Scheduling) 오늘은 CPU스케쥴링에 대해 알아보자 하나의 프로세스만 CPU를 독점하고 있으면 어떻게 될까? 지금 우리가 여러개의 프로그램을 동시에 사용하는 것은 불가할 것이다.(사실 어느 시점의 CPU는 하나의 프로세스가 사용하고 있지만 매우 빨리 바뀌기 때문에 우리는 동시에 사용한다고 느끼는 것이다.) 그렇다면 여러 프로세스들이 CPU를 번갈아가면서 사용해야 하는데 어떤 기준을 가지고 CPU를 할당 받게 될까? 지금부터 그 기준을 알아보자 먼저 CPU 스케쥴링에는 선점(Preemptive)와 비선점(Non-Preemptive)가 있다. 단어만 들어서는 무슨 뜻인지 모르겠다. 선점이란? 선점 방식이란 예를 들어 A프로세스가 실행되고 있는데 특정한 기준에 의해 우선순위가 더 높은 B프로세스가 CPU를 요청하게 되면 A..
운영체제 [운영체제] 인터럽트(Interrupt)와 컨텍스트 스위칭(Context Switching) 지난번에 정리한 멀티 프로세스 혹은 멀티 스레드 환경을 생각해보자 A라는 프로그램이 CPU를 할당받아 명령을 수행하고 있다. 하지만 어떠한 이유에서 어떠한 루틴의 실행을 목적으로 CPU를 할당받아야 한다고 해보자 그렇다면 어떻게 CPU에 대한 사용권을 얻어와야 할까? 이때 사용되는 것이 인터럽트(Interrupt)라는 것이다. 인터럽트가 발생하게 되면 A는 현재 수행중인 명령을 멈춘다. 그리고 어떠한 루틴을 수행한 다음 다시 A로 돌아와 명령을 수행하게 된다. 여기서 의문이 생긴다. 명령을 멈췄으면 다시 돌아왔을때 처음부터 실행해야 되나? 이를 위해 멈추기 전에 현재 실행상태(명령의 위치)를 저장해 놓는다. 이렇게 저장되는 자료의 구조를 PCB(Process Control Block)이라고 한다. 그렇다..
운영체제 [운영체제] 프로세스(Process)와 스레드(Thread) 오늘은 프로세스와 스레드에 대해 알아보자 Process란? 간단히 말해서 실행되는 프로그램이다. 일반적으로 CPU에 할당되는 단위라고 하는데 이는 매우 위험하다. 그 이유는 최근 리눅스에서는 스레드 단위로 CPU에 할당하는 방식으로 사용하기 있기 때문이다. 따라서 조심하자!! Thread란? 이것도 간단히 말해 프로세스 내부에서의 작업단위 혹은 실행단위라고 말할 수 있다. 정의에 대해서는 간단하게 살펴보고 차이점을 알아보자 Process vs Thread 가장 큰 차이점은 메모리 공유에 있다. 프로세스들은 각각이 독립적인 존재로 서로 메모리를 공유하지 않는다. 하지만 스레드는 서로 메모리영역을 공유한다. 여기서 알아두어야 할게 있다. 스레드는 모든 메모리 영역을 공유하는 것이 아니고 Heap/Data/C..
자료구조 [자료구조] Heap이란? 오늘은 Heap 이라는 자료구조에 대해 알아보자 Heap이란? 힙이란 완전 이진트리의 일종으로 반정렬 상태에 있다! 우선순위가 높은 노드가 위쪽에 있는 형태이고 이를 통해 최대값과 최소값을 빠르게 찾아낼 수 있도록 설계된 구조이다 그러면 Heap은 어디에 쓰이는가? 바로 우선순위 큐를 구현할 때 쓰인다. 사실상 힙이라는 구조는 우선순위 큐를 위해 존재한다고 봐도 무방하다! 우선순위 큐 구현에도 여러가지 방법(Array,LinkedList,Heap)이 존재하는데 Heap으로 구현하는 것이 가장 효율적이기 때문에 보통 우선순위큐는 heap으로 구현되어있다. 힙은 어떤 종류가 있을까? 힙은 최대힙과 최소힙 두가지 종류가 있다. 그림으로 보면 왼쪽이 최대힙으로 큰 값이 우선순위가 높아 제일 위에 있다. 오른쪽은..
자료구조 [자료구조] Stack과 Queue 오늘은 선형 자료구조인 Stack과 Queue에 대해 알아보자 Stack 이란? 입력과 출력이 한 곳으로만 이루어지는 자료구조의 형태이다. LIFO정책을 따르고 있다.(Last In First Out) 따라서 나중에 들어온 것이 먼저 나간다. 뷔페의 접시가 쌓여있는 것을 생각하면 쉽다!! 그렇다면 Stack은 언제 사용될까? 1. 함수의 콜스택에 사용된다. 2. 문자열을 역순 출력할때에도 하나하나씩 넣고 빼면 역순으로 출력된다. 3. 후위 표기법을 연산할때 ex) 234*+ = 14 5. 브라우저 방문기록 6. 실행 취소(undo) Stack은 배열과 달리 index로 접근할 수 없다. 또한 삽입과 삭제는 O(1)의 시간 복잡도 이다.(값을 넣고 빼기만 하면 되므로) 하지만 탐색시에는 O(n)이 걸린다...
자료구조 [자료구조] Array와 List CS스터디를 시작하면서 한동안 못썼던 블로그를 자주 써볼려고 합니다!! 예전 개발자들이 개발을 시작하면서 데이터를 다룰때 하나의 데이터만 다루는 것은 아니겠죠? 여러가지 데이터가 모인 집합을 형성하게 되는데 먼저 Array라는 녀석부터 살펴봅시다. Array란? 순차적으로 데이터를 저장하는 형태로 물리적주소도 순차적으로 저장된다.(크기를 미리 지정해줘야 한다.) index라는 것이 존재해 빠르게 값을 찾아낼때 유용하다.(원하는 데이터 한번에 접근가능O(1)) 하지만 삽입과 삭제에는 취약하다. (해당 위치에 접근하고O(1), shift O(n)해주는 작업까지 걸려 O(n)이 걸린다.) 예를 들어 중간녀석을 삭제하려면 배열의 연속성이 깨져 이후 뒤에것들을 모두 앞으로 땡겨줘야 한다. 그렇다면 어떻게 저런 시..
후기 및 회고 [수료 회고] 네이버 부스트캠프 웹풀스택 6기 회고 지난 7월에 네이버 부스트캠프 챌린지에 붙은 소식이 엊그제 같은데 벌써 멤버십과정을 지나 수료를 하게 되었네요..! 저에게 있어서 2021년 하반기는 그야말로 순삭이었어요 4주간의 챌린지를 거쳐 멤버십에 오게된 것만 해도 신기한데 이렇게 프로젝트를 마치고 수료까지 할줄이야..! 지금부터 5개월간의 부스트캠프과정을 간단하게 회고해보려고 합니다. 먼저 지난 5개월동안 가장 많이 배웠던 건 뭐냐!! 바로 스스로 학습하는 방법과 새로운 것을 두려워하지 않는 마음가짐이 제일 크다고 생각해요 부스트캠프를 경험하기 이전에는 이렇게 어려운걸 어떻게 하지? 라는 마음으로 시도조차 안해봤다면 이제는 이거 인터넷 찾아보고 공부해보면 할수있어!! 라는 자신감이 생겼어요 부스트캠프 특성상 물고기를 주는 것이 아닌 물고기 잡는법..
BackEnd [Docker] Docker란? 오늘은 Docker에 대해 알아보겠습니다. 보통 웹개발을 하게 되면 아래와 같이 OS 위에 웹 서버,데이터베이스 등을 올려놓는 방식으로 개발 환경을 설정한다. 다들 개발 환경 설정할 때 삽질 했던 경험이 많지 않나요? 왜 안 되는지 모르겠고, 또 왜 되는지 모르는!! 생각만 해도 머리가 지끈 거리네요! 또 개발 환경 설정을 성공했다고 해도 다음에 비슷한 개발 환경이 필요하게 되면? 보통은 삽질을 기억하지 못하고 다시 삽질을 반복하게 되죠.. 악순환의 연속..! 이럴때 다음과 같은 생각이 떠오른다. 전문가가 나 대신 해줬으면 좋겠다.. 하지만 우리집에 와서 키보드를 두드려 주지 않는 이상 불가능 하다.. 또 아래와 같이 나의 앱과 웹 서버, 데이테베이스를 각각 다른 OS에서 설치해 관리하고 싶다! 하지만 ..
BackEnd [Express] pm2로 로컬에서 배포하기 express를 사용해 서버를 돌릴때 나는 nodemon을 자주 이용했었다. 하지만 pm2라는 것을 알고 난 뒤 이것만 쓰게 되었다!! 그렇다면 pm2는 뭘까? Process Manager의 약어로 Node.js의 프로세스를 관리해주는 역할을 하는 녀석이다. 쉽게 말해 프로세스들이 계속 실행될 수 있는 환경을 제공해준다!! 또한 예외가 발생해 스레드가 죽었을때 어플리케이션도 같이 죽는 것을 방지해준다. 프로세스 매니저라는 이름에 맞게 관리자의 역할을 톡톡히 한다. 지금부터 pm2를 이용해 로컬에서 ncloud로 배포하는 과정을 설명할 것이다. https://pm2.keymetrics.io/docs/usage/deployment/ PM2 - Deployment Advanced process manager ..
Git [Git] commit 쪼개기 commit은 잘게 쪼갤수록 좋다!! 라는 말을 알고계신가요? 하지만 실제로 구현을 할때 코드를 적고 commit을 하고 또 코드를 적고 이러기 쉽지 않습니다. 흐름이 끊기는 느낌이랄까?ㅜㅜ 그래서 저도 지금까지 한개의 커밋안에 여러가지 내용이 들어가 있었는데요. 최근에 이미 저장된 커밋을 여러개의 커밋으로 나누는 방법을 알게 되었습니다!! commit 통째로 하기 일단 커밋을 통쨰로 여러개 만들어 보겠습니다. $ echo first > first.txt $ git add . $ git commit -m"first commit" $ echo second > second.txt $ git add . $ git commit -m"second commit" $ echo third > third.txt $ ec..

티스토리툴바