함수와 함수호출, 고차함수에서의 호출
2022. 10. 23. 15:35
TIL/개념정리
함수와 함수 선언, 함수 호출을 잘 구분해야 한다 const add = (a, b) => a + b; function calculator(func, a, b) { return func(a, b); } add(3, 5); // 8 calculator(add, 3, 5); // 8 calculator(add(), 3, 5); // X 위 코드에서 calculator를 func, a, b를 매개변수로 가지는 함수로 선언하였다 이때 calculator는 add라는 함수와 a,b를 3, 5라는 정수 아규먼트로 받는다. 하지만 calculator의 func 매개변수 자리에 add라는 함수를 add() 호출해서 아규먼트로 넘겨주게 된다면 실제 전달되는 값은 함수가 아닌 그 함수의 리턴값이 된다 (함수 add는 매개변..
스코프 , 스코프체인 , 클로저
2022. 10. 2. 15:26
TIL/개념정리
function outer() { var a = 1; console.log(a); } outer(); a를 콘솔에 찍어보려고 할 때 a를 먼저 찾아야하는데 이때 scope를 사용하게 됩니다 scope는 table 형식으로 변수를 저장하고 있다고 이해하면 쉬운데 결국 scope는 변수의 값을 찾아올 때 들여다 보는 곳입니다 예를들면.. var A 1 이때 이 scope는 outer라는 이름으로 정의되어있어 변수 A를 찾아올 때 우선 outer에 scope를 확인하게 됩니다. function outer() { var a = 1; function inner() { var a = 2; console.log(a); } inner(); } outer(); 이렇게 작성하면 어떻게 나올까? 콘솔에 2가 나온다. 즉 여..
Python - Selenium으로 매크로 만들기
2022. 9. 8. 22:48
TIL/개념정리
개요 학교 시스템을 이용하던 중 매번 예약하고 이용하는 과정이 매우 귀찮고 매번 신청하기 번거로워 한번 매크로를 만들어보고자 했습니다. 찾아보던 중 Python 라이브러리 중 Selenium이라는 것을 알게되었고 이후에 유튜브를 통해 공부하게 되었습니다 Selenium v4 이후 구글링을 하면서 찾아보던 중 셀레니움 버전 3에서는 크롬 엔진을 따로 설치하여 경로를 지정해준 뒤 사용했다면 이후 버전 4로 넘어가게 되면서 굳이 OS에 맞춰서 다운받을 필요 없이 라이브러리만 설치해서 실행시켜줌으로써 자동으로 web driver를 설치할 수 있도록 변경되었습니다 https://kibua20.tistory.com/228 Selenium 4.0 개선 사항 정리 - WebDriver 자동 로딩 가능 이전 포스팅에서 ..
Docker에 대해서
2022. 9. 7. 20:24
TIL/개념정리
1. 도커란 무엇인가와 사용하는 이유 도커는 리눅스 운영체제를 활용하여 어떤 소프트웨어의 실행환경을 컨테이너 기반으로 장소, 환경에 제한되지 않고 어느 곳에서나 동일한 인터페이스를 제공하면서 프로그램을 신속하게 배포, 확장 그리고 관리 할 수 있게 해주는 역할을 합니다. 서버를 확장하거나 혹은 새로운 개발환경을 세팅해야하는 상황이 있을 때 굉장히 많은 작업을 해야하는데 시스템 엔지니어들이 따로 상주하여 이러한 개발환경을 세팅하였지만 도커가 사용되면서 추세가 변경되기 시작했습니다. 도커 컨테이너는 일종의 소프트웨어를 소프트웨어의 실행에 필요한 모든 것을 포함하는 완전한 파일 시스템 안에 감싼다. 여기에는 코드, 런타임, 시스템 도구, 시스템 라이브러리 등 서버에 설치되는 무엇이든 아우른다. 이는실행 중인 ..
NextJS 간단 정리
2022. 9. 6. 21:33
TIL/개념정리
https://nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org npx create-next-app@latest npx create-next-app@latest --typescript npm run dev Framework 기본적인 코드는 React와 상당히 유사할지도 모르지만 동작면에서는 상당히 큰 차이가 있다. 단순히 라이브러리처럼 어떤 기능을 호출하고 사용하..
Throttle과 debounce를 사용해보고 정리
2022. 8. 24. 09:30
TIL/개념정리
개요 x축으로 스크롤되는 컴포넌트를 만들던 중 화면 크기에 따라 초기 컴포넌트 위치를 조절하는 코드를 작성하였습니다. 화면을 늘리고 줄여보았는데 이때 컴포넌트 위치가 브라우저 화면 크기에 따라 반응하는 것은 좋았지만 늘리고 줄일때마다 계속해서 발생하다보니 성능 문제 뿐만 아니라 위치가 계속 수정되며 어지럽게 동작하는 것이 매우 불편하였고 해결하고자 했습니다 이벤트를 텀을 둬서 실행시키기 우선 js에서 setInterval과 setTimeout이 생각났고 좀 더 찾아보던 중 resize와 관련된 방식으로 throttle, debounce를 사용할 수 있다는 것을 확인하였고 이벤트 핸들러가 많이 발생하는 연산에 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 말한다고 합니다 throttle과 ..
React-query useMutation 간단히 사용해보고 정리
2022. 8. 18. 22:54
TIL/개념정리
개요 서버 상태 관리 라이브러리로 React-query를 사용하면서 서버에서 받은 데이터를 캐싱, 로딩 상태 관리 등 많은 기능을 사용할 수 있다는 것을 느꼈습니다. 여기서 특정 기능을 구현하기 위해 서버에서 데이터를 받을 때 뿐만 아니라 서버로 데이터를 보낼때도 사용할 수 있는지 찾아봤고 useMutation을 사용하면 된다는 것을 확인해보고 사용해봤습니다. 코드 import React from 'react'; const Button: React.FC = ({ nickname, setIsChecked, }) => { const { data, mutate, isLoading, isError, error, isSuccess, } = useMutation(ValidationApi); // or const v..
Git, Github 정리
2022. 7. 29. 21:02
TIL/개념정리
참고한 자료 제대로 파는 Git & GitHub (무료 파트) 제대로 파는 Git & GitHub (무료 파트) 어려운 프로그래밍 개념들을 쉽게 설명해주는 유튜브 채널 '얄팍한 코딩사전'. 영상에서 다 알려주지 못한 정보들이나 자주 묻는 질문들의 답변들, 예제 코드들을 얄코에서 확인하세요! www.yalco.kr 개요 우선 Git이란 소스코드 관리를 위한 관리 도구이며 개발자들끼리 수정 , 복구 , 기록 , 저장 뿐만 아니라 협업을 위한 여러 기능들을 제공하고 이를 통해 효율적으로 협업할 수 있게 해주는 하나의 도구(시스템)입니다. Git 뿐만 아니라 관리 도구는 여러가지 다양한 것들이 있지만 굳이 git이 아니어도 되지만 (https://na27.tistory.com/211 SVN(Subversion)..
DB 트랜잭션에 대해서
2022. 7. 27. 11:55
TIL/개념정리
트랜잭션이란? DB에서 하나의 작업단위라고 설명할 수 있습니다 대표적인 예시를 들면 부모님이 자식에게 은행 이체를 통해 돈을 보내주려고 할 때 진행순서 ( DB를 기준으로 ) 은행 계좌 정보를 select를 통해 검색 계좌 정보가 있다면 부모님 계좌 update -1,000,000원 계좌 정보가 있다면 자식 계좌 update +1,000,000원 이후에 추가적인 부분이 발생할 수 있음 이때 어디선가 장애가 발생해서 하나의 작업이라도 취소가 되었다면 이체라는 작업이 수행되지 않은 것이나 다름없기에 계좌 이체라는 하나의 작업단위 정의 업무 처리의 논리적 단위 하나의 건수로 처리되어야 하는 분리될 수 없는 연산 집합 All or Nothing 트랜잭션의 특성 위 예시처럼 하나의 트랜잭션 단위를 유지하며 실행하..
Nginx와 apache가 무엇인지
2022. 7. 21. 19:42
TIL/개념정리
Nginx, Apache의 개념 클라이언트의 HTTP(HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜) 요청을 받아 정적인 컨텐츠를 제공하는 서버 혹은 프로그램 정적인 컨텐츠 = html, css, js, 이미지 html, JS 같은 정적인 프론트엔드 컨텐츠들은 웹서버를 구축한다면 웹서버 선에서 요청을 정리할 수 있습니다. 하지만 정적인 컨텐츠말고도 당연히 동적인 컨텐츠를 처리하기 위한 구조가 항상 웹서버를 공부할 때 따라다니는데, 이것을 WAS(Web Application Server)라고 합니다. 웹서버는 정적인 컨텐츠를 제공하는 것 외에도 WAS구조에서 동적인 처리를 하는 컨테이너에게 요청을 넘겨주게 되며 처리가 끝나면 응답을 받아 다시 클라이언트로 전송하는 역할을 합니다 이때 대..