본문 바로가기

전체 글282

프론트 배포 실습2 대체 도메인 설정 및 서브 도메인 등록 실습하기 전 이론 및 실습 프론트 배포 이론 프론트 배포 이론 [ AWS 배포 방법들 ] AWS EC2를 활용한 배포 AWS S3와 CloudFront를 활용한 배포 AWS amplify를 활용한 배포 Nginx를 활용한 배포 각 방법에 따라 배포할 수 있는 서버가 다르며 배포할수 있는 서버란 웹서버와 hyeon-e.tistory.com 프론트 배포 실습 프론트 배포 실습 S3 + cloudfront를 활용하여 배포후 GitHub Action으로 CI/CD 적용 실습 실습하기 전 배포 이론 https://hyeon-e.tistory.com/219?category=1107791 프론트 배포 이론 [ AWS 배포 방법들 ] AWS EC2를 활용한 배포 AWS S3와 C.. 2023. 12. 28.
JS, 이벤트 바인딩(Event Binding) 바인딩이란 서로 묶어서 연결해 준다는 뜻 이벤트 바인딩이란 발생하는 이벤트와 그 후에 어떤 일이 벌어질지 알려주는 함수(콜백함수)와 묶어서 연결해준다는 뜻 예를 들어 어떤 버튼을 사용자가 클릭하게 되면 클릭 이벤트가 발생하게 되고 그 이벤트가 발생했을때 콜백함수가 실행하게 됨 이때 이 콜백함수를 이벤트 핸들러라고 함 이벤트 바인딩의 대표적 3가지 방식 ▶ HTML 이벤트 핸들러 HTML 요소의 이벤트 Attribute에 이벤트 핸들러를 대응시키는 방법 Click me function clickBtn() { alert('Button clicked!'); } HTML과 JS가 혼용되서 사용되는 방식. 현재 이 방식을 사용하지도 않고 사용해서도 안됨 HTML 이벤트 핸들러 내부의 this HTML 이벤트 핸들.. 2023. 12. 26.
라이프사이클(Life Cycle) [ 라이프 사이클(Life Cycle) ] 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리 그러다보니 각각의 컴포넌트에는 라이프사이클 즉 컴포넌트의 수명 주기가 존재함 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질때 끝이 남 라이프 사이클을 다루는 것은 컴포넌트가 생성, 업데이트, 제거의 일련의 프로세스를 프로그래머가 통제하는 것을 뜻함 실제로 HTML을 작성한 것이 아니고 JSX를 작성했기 때문에 이런 부분들을 알아야 하는 것 라이프 사이클을 이해하게 되면 왜 그동안 리액트에 render 메서드를 작성만 했는데도 브라우저에게 어떻게 HTML을 만들어 주었는지 알 수 있게 됨 생성자를 통해서 필요한 메모리를 할당하고 객체의 역할이 끝나면 소멸자를 통.. 2023. 12. 15.
JS, DP(Dynamic Programming) [ 동적 계획법(Dynamic Programming) ] 하나의 큰 문제를 여러 개의 작은 문제로 나누어서 그 결과를 저장하여 다시 큰 문제를 해결할 때 사용하는 것 즉 큰 문제를 작은 문제로 쪼개서 그 답을 저장해두고 재활용 함 ▶ DP를 사용하는 이유 일반적인 재귀를 단순히 사용 시 동일한 작은 문제들이 여러번 반복되어 비효율적인 계산이 될수 있음 예를 들어 피보나치 수의 경우 1이상의 n의 경우 F(n) = F(n-2) + F(n-1)적용되는 수를 말함(F(0)=0, F(1)=1) 만약 n이 4라면 재귀호출 방식을 사용하게 되면 F(4) = F2 + F(3) = (F(0) + F(1) ) + ( F(1) + F(2) ) = (F(0) + F(1) ) + ( F(1) + (F(0) + F(1) ) ).. 2023. 12. 13.
GameCrew 프로젝트 개요 2023.10 ~ 2023.11_6주, FE:2, BE:2 다양한 멀티게임을 함께 즐길 수 있는 사람들을 찾는 간단한 채팅 기능이 내장된 커뮤니티 애플리케이션 만들게 된 계기 새로운 기술을 배우고자 SWR, Emotion, Socket, AWS를 활용하여 프로젝트를 진행하였다. 게임을 즐기는데 있어 대규모 멀티게임에서 함께 할 동료를 찾는 것이 어려웠다. 블로그, 카페, 디스코드 등을 활용해보았지만 어려운점이 많았다. 이에 실제 게임을 즐기는 사람들을 위한, 빠르게 동료를 찾을 수 있는 멀티게임 커뮤니티 애플리케이션을 만들기로 결정했다. SWR로 서버 데이터를 가져오고, Emotion을 활용하여 스타일링을 하였으며, Socket을 통해 채팅 기능을 구현하고 AWS를 활용하여 배포해보기로 하.. 2023. 12. 13.
useMemo & useCallback 메모이제이션(Memoization) 값비싼 함수 호출의 결과를 캐싱하고 동일한 입력이 다시 발생할 때 캐싱된 결과를 반환하는 프로그래밍 기술 즉 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법 적절하게 활용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있음 [ useMemo ] 메모이제이션된 값을 반환하는 함수 리렌더링이 발생할 경우 의존성 배열에 지정된 deps가 변할때에만 useMemo에 등록한 함수가 실행되도록 처리하면 불필요한 연산을 하지 않게됨 useMemo(() => fn, [deps]) 의존성 배열에 지정된 deps로 지정된 값이 변하게 되면 () => fn함수를 실행하고 그 함수의 반.. 2023. 12. 7.
JS, 버블링, 캡쳐링 [ 버블링 ] 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작하며 가장 최상단의 조상 요소를 만날때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작함 즉 이벤트 버블링은 HTML에서 이벤트가 발생했을 때, 해당 요소에서 이벤트가 처리된 후 상위 요소로 이벤트가 전파되는 현상을 의미 ▶ 예시 FORM DIV P 가장 안쪽의 p태크를 클릭하게 되면 에 할당된 onclick 핸들러가 동작 바깥의 에 할당된 핸들러가 동작 그 바깥의 에 할당된 핸들러가 동작 document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작 p태그를 누르게 되면 p → div → form 순서로 3개의 얼럿 창이 뜨게 됨 ▶ 버블링의 이벤트 위임 이벤트.. 2023. 12. 6.
JS, 클로저 클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합 즉 함수 안에 함수를 선언한 환경에서의 관계를 의미함 해당 함수안에 함수를 선언한 환경은 내부 함수에서 외부 함수로 지역변수를 접근할 수 있지만 외부 함수의 실행이 끝나고 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는 것을 의미함 자바스크립트는 함수를 리턴하고 리턴되는 함수가 클로저를 형성하기 때문에 접근이 가능함 클로저는 반환된 내부함수가 자신이 선언되었을때의 환경(Lexical Environment)에서의 스코프를 기억하기 때문에 접근이 가능함 function outerFn() { let x = 10; return function innerFn(y) { // innerFn 함수는 클로.. 2023. 12. 4.
JS, charAt() [ charAt( ) ] 문자열에서 지정된 위치에 존재하는 문자를 찾아서 반환하는 함수 인덱스의 순번은 0부터 시작되고 마지막 인덱스의 순번은 -1로 매겨지게 됨 인덱스 문자열의 길이를 벗어나게 되면 빈 문자열을 반환함 charAt() 함수는 인덱스(index)로 주어진 값에 해당하는 문자를 반환 ▶ 사용방법 문자열.charAt(index) ▶ 예시 let str = "HELLO WORLD".charAt(0);//'H' 만약 코테를 풀경우 문자열에서 바로 인덱스로 문자를 찾게 될경우 문자열 길이를 벗어나게 되면 undefined가 됨 이럴경우 charAt()을 사용하면 빈문자열로 반환하므로 유용 let str = '' str[0]//undefined str.charAt(0)//'' 2023. 11. 29.

티스토리툴바