밝을희 클태

일단 차이를 정확하게 이해하기 전에 실행 컨텍스트에 대해서 알아야 한다 실행 컨텍스트는 두가지 주요 단계로 나누어지는데 코드 평가 단계 코드 실행 단계 이렇게 총 두 단계로 구분된다 코드 평가 단계는 코드를 실행하기 앞서 Lexical Environment 에 변수 및 함수 선언 등이 바인딩되고 스코프에 등록이 된다. 이 단계에서 호이스팅이 발생한다. 코드 실행 단계는 코드 평가 단계에서 준비한 과정을 실행한다. 여기서 필요는 없지만 코드 실행 단계에서 실행 컨텍스트 스택이란게 있는데 코드를 실행하면서 현재 실행되고 있는 함수를 실행 컨텍스트 스택에 PUSH 하고 함수가 종료되면 POP 하는 방식으로 이루어져 있다 var console.log(x); // undefined var x = 3; var 키워..

프로젝트를 마무리하면 이제 배포를 해야 하는데 github를 이용하면 정적 웹 사이트를 무료로 호스팅 할 수 있다. $ npm i gh-pages 깃허브 페이지 배포를 도와주는 라이브러리를 다운로드한다. 그리고 package.json scripts 부분에 deploy 명령어를 추가해 주고, "scripts": { ... ... "deploy": "gh-pages -d build" }, 최상단 부근에 homepage도 추가해준다 github닉네임이 hello, 배포하려는 레포지토리 이름이 world면 "https://hello.github.io/world"로 해주면 된다. "name": "test", "version": "0.1.0", "private": true, "homepage": "https://깃..

지금 Pong게임을 할 수 있는 팀프로젝트를 진행을 하고 있는데 https://www.ponggame.org/ Pong Game Welcome to PongGame.org, In this site, you can find many free versions of the game, one of the first video games ever created. In the game below, use the mouse or keyboard to control the paddle, Press P to pause the game, or ESC to go back to the main menu www.ponggame.org 프로젝트에서 내 첫번째 역할은 실시간 채팅이 가능하도록 채팅 기능을 만드것이다. 실시간 채팅을..

이벤트 핸들링에서 event.target과 event.currentTarget은 서로 다른 요소를 참조할 수 있다. 이 둘의 주요 차이점은 이벤트가 실제로 발생한 요소(event.target)와 이벤트 리스너가 등록된 요소(event.currentTarget)를 가리킨다는 것 event.target event.target은 이벤트가 실제로 발생한(구체적인) 요소를 가리킵니다. 이벤트 버블링이나 캡처링 과정에서도 event.target은 변하지 않습니다. 사용자가 클릭하거나 상호작용하는 실제 요소를 나타냅니다. event.currentTarget event.currentTarget은 이벤트 핸들러(리스너)가 등록된 요소를 가리킵니다. 이벤트 버블링이나 캡처링 과정에서 event.currentTarget은 ..

function updateHeaderText() { const header = document.querySelector('h1'); header.textContent = '새로운 제목'; } 위의 js 코드는 updateHeaderText함수가 실행이 될 때마다 DOM tree에서 해당 요소를 찾는다. 그렇게 되면 매우 빈번하게 함수가 호출이 되고 성능에 영향이 있을 수 있다. const header = document.querySelector('h1'); // DOM 요소 캐싱 function updateHeaderText() { header.textContent = '새로운 제목'; // 캐싱된 요소 사용 } 사용자와 상호작용 되는 DOM이 아니라면 자주 사용되는 DOM은 전역으로 둬서 스크립트가 ..

splice()는 원본에서 요소를 바로 제거하고 제거된 배열은 리턴해줌 slice()는 원본을 변경하지 않고 복사된 배열을 리턴 splice arr.splice(start, deleteCount) start: 시작 IDX deleteCount: 삭제할 요소의 개수 (deleteCount를 주지 않으면 start IDX부터 전부 삭제) let arr = [1, 2, 3, 4, 5]; let newArr = arr.splice(0, 2); //IDX 0부터 2개 요소 제거 console.log(arr, newArr); //제거된 값은 리턴해줌 // arr = : [ 3, 4, 5 ] // newArr : [ 1, 2 ] arr.splice(start) let arr = [1, 2, 3, 4, 5]; let ..

Array 접근 - O ⑴ 삽입 splice() - 최악의 경우 O(n) 특정 요소를 제거하거나 삽입시 수정된 요소 뒤의 배열들을 이동시켜야 함 push() - O⑴ 삭제 shift() - O(n) 배열의 가장 앞의 요소를 반환과 동시에 제거하고 배열의 모든 요소를 앞으로 이동해야 함 pop() - O⑴ 탐색 indexOf() - O(n) find() - O(n) findIndex() - O(n) 순회 map() - O(n) forEach() - O(n) filter() - O(n) Object 접근 - O⑴ 삽입 - O⑴ 삭제 delete - O⑴ 배열과 다르게 순서가 없어 삭제가 빠르다 탐색 obj.hasOwnProperty() - O(1) 순회 keys() - O(n) values() - O(n) ..

git을 쓰다보면 파일 이름이 한글일때 git으로 출력을 하면 한글이 아래 처럼 깨져서 보인다 해결 git config --global core.quotepath false

2차원 배열 90도 회전 let arr = [ [0, 0, 0, 0, 0], [1, 1, 1, 1, 1], [2, 2, 2, 2, 2], [3, 3, 3, 3, 3], [4, 4, 4, 4, 4], ]; let rotateArr = [ [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], ]; for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[0].length; j++) { rotateArr[j][arr.length - 1 - i] = arr[i][j]; } } 출력: [ [ 4, 3, 2, 1, 0 ], [ 4, 3, 2, 1, 0 ], [ 4..

IntersectionObserver API 는 특정요소가 뷰포트와 교차하는지 비동기적으로 관찰하는 데 사용된다. 이걸로 스크롤 애니메이션을 구현할 수 있다. 코드 : function Item({ children }: { children: React.ReactNode }) { const ref = useRef(null); const [visible, setVisible] = useState(false); useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach(({ target, isIntersecting }) => { if (target === ref.current) setVisible(isInt..

React와 Next.js의 사전 렌더링 차이점 React의 동작 원리: React에서는 Hello World와 같은 코드를 JSX라는 JavaScript의 확장 문법으로 작성한다. 이 JSX는 브라우저가 직접 해석할 수 없어, React 애플리케이션의 JavaScript 코드가 브라우저에 의해 로드되고 실행된 후에 HTML DOM에 삽입된다. 이 과정은 사용자의 브라우저가 JavaScript를 로드하고 실행하여 React가 JSX를 해석하고 DOM에 삽입하는 것을 의미한다. Next.js의 정적 사이트 생성과 서버 사이드 렌더링: Next.js에서는 정적 사이트 생성(Static Site Generation)이나 서버 사이드 렌더링(Server-Side Rendering)을 통해 서버 측에서 Hello..

문제 자연수 N과 M이 주어졌을 때, 아래 조건을 만족하는 길이가 M인 수열을 모두 구하는 프로그램을 작성하시오. 1부터 N까지 자연수 중에서 중복 없이 M개를 고른 수열 고른 수열은 오름차순이어야 한다. 입력 첫째 줄에 자연수 N과 M이 주어진다. (1 ≤ M ≤ N ≤ 8) 출력 한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안 되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으로 증가하는 순서로 출력해야 한다. 코드 : const fs = require("fs"); const [N, M] = fs .readFileSync("/dev/stdin") .toString() .trim() .split(" ") .map((v) => Number(..

토큰(Token)이란?토큰은 인증에 사용되는 문자열로, 서버가 사용자를 식별하기 위해 발급합니다. 일반적으로 로그인과정에서 아이디와 비밀번호가 검증된 후 사용자에게 발급되며, 이후 사용자는 발급받은 토큰을 이용하여 서비스 내에서 권한이 필요한 요청을 할 수 있습니다.토큰의 장점:보안성: 토큰은 사용자의 로그인 정보를 서버에 저장하지 않기 때문에, 서버에 대한 해킹으로부터 사용자 정보가 유출될 위험을 줄여줍니다.확장성: 토큰 기반 인증은 서비스의 서버뿐만 아니라, 다른 플랫폼 및 서비스에서도 동일한 토큰을 통해 인증할 수 있어 서비스 확장성을 높여줍니다.상태 비저장성(Statelessness): 서버는 상태를 저장할 필요 없이 토큰만으로 사용자를 인증할 수 있어 서버 자원을 절약할 수 있습니다. React..

문제 : 자연수 N과 M이 주어졌을 때, 아래 조건을 만족하는 길이가 M인 수열을 모두 구하는 프로그램을 작성하시오. 1부터 N까지 자연수 중에서 중복 없이 M개를 고른 수열 입력 : 첫째 줄에 자연수 N과 M이 주어진다. (1 ≤ M ≤ N ≤ 8) 출력 : 한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안 되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으로 증가하는 순서로 출력해야 한다. 코드 : const fs = require("fs"); const [N, M] = fs .readFileSync("/dev/stdin") .toString() .trim() .split(" ") .map((v) => Number(v)); let arr ..

문제 : N개의 수로 이루어진 수열 A1, A2, ..., AN이 주어진다. 또, 수와 수 사이에 끼워넣을 수 있는 N-1개의 연산자가 주어진다. 연산자는 덧셈(+), 뺄셈(-), 곱셈(×), 나눗셈(÷)으로만 이루어져 있다. 우리는 수와 수 사이에 연산자를 하나씩 넣어서, 수식을 하나 만들 수 있다. 이때, 주어진 수의 순서를 바꾸면 안 된다. 예를 들어, 6개의 수로 이루어진 수열이 1, 2, 3, 4, 5, 6이고, 주어진 연산자가 덧셈(+) 2개, 뺄셈(-) 1개, 곱셈(×) 1개, 나눗셈(÷) 1개인 경우에는 총 60가지의 식을 만들 수 있다. 예를 들어, 아래와 같은 식을 만들 수 있다. 1+2+3-4×5÷6 1÷2+3+4-5×6 1+2÷3×4-5+6 1÷2×3-4+5+6 식의 계산은 연산자 ..

안드로이드 스튜디오에서 project->app->res 클릭 후 file->New->image Asset을 누르면 어플의 아이콘을 넣을 수 있는 창이 하나 뜬다.거기서 원하는 로고를 넣어서 맨 아래에 resize 퍼센트를 적절하게 조절해서 영역 안에 로고가 들어가게 해 준다그리고 name을 지정해 줄 수 있는데 기본 이름은 ic_launcher로 저장이 되는데 바꾸고 싶다면 manifests/AndroidManifest.xml도 수정해 주어야 한다.  IOS 앱 아이콘 변경하기https://gaebarsaebal.tistory.com/35 [IOS] ios 앱 아이콘 변경하기앱 로고를 만든 다음 해당 로고를 다양한 사이즈로 resize 하기 위해 https://w..

앱 로고를 만든 다음 해당 로고를 다양한 사이즈로 resize 하기 위해 https://www.appicon.co/  App Icon Generator www.appicon.co사이트에서 원하는 로고를 넣고 저장해준다.❇︎다양한 사이즈를 만들기 위해 사이트에 나와있는 데로 1024 * 1024 사이즈의 이미지가 필요함 파일을 저장하고 해Assets.xcassets로 들어가면 AppIcon.appiconset폴더가 있는데Xcode에서 AppIcon의 폴더를 열고다운로드한 AppIcon.appiconset 폴더를 기존의 AppIcon.appiconset폴더와 교체해 주면 된다. Android 어플 아이콘 변경하기https://gaebarsaebal.tistory.com/36app->res 클릭 후 file..

path: ios/project/info.plist``` CFBundleDisplayName name  name 부분을 원하는 이름으로 바꾸면 된다. https://gaebarsaebal.tistory.com/33 [Android] android project 앱 이름 바꾸기path: android/app/src/main/res/values/strings.xml name "name"부분을 원하는 부분으로 변경하면 된다 https://gaebarsaebal.tistory.com/34 [IOS] ios project 앱 이름 바꾸기 path: ios/project/info.plist ``` CFBundleDisplayName name gaebarsaegaebarsaebal.tistory.com

path: android/app/src/main/res/values/strings.xml name "name"부분을 원하는 부분으로 변경하면 된다 https://gaebarsaebal.tistory.com/34 [IOS] ios project 앱 이름 바꾸기path: ios/project/info.plist ``` CFBundleDisplayName namegaebarsaebal.tistory.com

안드로이드 스튜디오에서 APK를 추출하려는데 아래와 같은 에러가 난다. 읽어보면 react native vector icons에서 나는 에러 같은데 검색해 보면 쉽게 해결법이 나온다.A problem was found with the configuration of task ':app:lintVitalAnalyzeRelease' (type 'AndroidLintAnalysisTask').Gradle detected a problem with the following location: '/Users/tom/Documents/GitHub/media/android/app/build/intermediates/ReactNativeVectorIcons'.Possible solutions:Declare task ':a..

문제: 666은 종말을 나타내는 수라고 한다. 따라서, 많은 블록버스터 영화에서는 666이 들어간 제목을 많이 사용한다. 영화감독 숌은 세상의 종말 이라는 시리즈 영화의 감독이다. 조지 루카스는 스타워즈를 만들 때, 스타워즈 1, 스타워즈 2, 스타워즈 3, 스타워즈 4, 스타워즈 5, 스타워즈 6과 같이 이름을 지었고, 피터 잭슨은 반지의 제왕을 만들 때, 반지의 제왕 1, 반지의 제왕 2, 반지의 제왕 3과 같이 영화 제목을 지었다. 하지만 숌은 자신이 조지 루카스와 피터 잭슨을 뛰어넘는다는 것을 보여주기 위해서 영화 제목을 좀 다르게 만들기로 했다. 종말의 수란 어떤 수에 6이 적어도 3개 이상 연속으로 들어가는 수를 말한다. 제일 작은 종말의 수는 666이고, 그 다음으로 큰 수는 1666, 26..

문제: 우주비행이 꿈이었던 진우는 음식점 '매일매일싱싱'에서 열심히 일한 결과 달 여행에 필요한 자금을 모두 마련하였다! 지구와 우주사이는 N X M 행렬로 나타낼 수 있으며 각 원소의 값은 우주선이 그 공간을 지날 때 소모되는 연료의 양이다. 진우는 여행경비를 아끼기 위해 조금 특이한 우주선을 선택하였다. 진우가 선택한 우주선의 특징은 아래와 같다. 1. 지구 -> 달로 가는 경우 우주선이 움직일 수 있는 방향은 아래와 같다. 2. 우주선은 전에 움직인 방향으로 움직일 수 없다. 즉, 같은 방향으로 두 번 연속으로 움직일 수 없다. 진우의 목표는 연료를 최대한 아끼며 지구의 어느위치에서든 출발하여 달의 어느 위치든 착륙하는 것이다. 최대한 돈을 아끼고 살아서 달에 도착하고 싶은 진우를 위해 달에 도달하..

문제: 민식이는 다음과 같은 폴리오미노 2개를 무한개만큼 가지고 있다. AAAA와 BB 이제 '.'와 'X'로 이루어진 보드판이 주어졌을 때, 민식이는 겹침 없이 'X'를 모두 폴리오미노로 덮으려고 한다. 이때, '.'는 폴리오미노로 덮으면 안 된다. 폴리오미노로 모두 덮은 보드판을 출력하는 프로그램을 작성하시오. 출력: 첫째 줄에 사전순으로 가장 앞서는 답을 출력한다. 만약 덮을 수 없으면 -1을 출력한다. 코드: const fs = require("fs"); let map = fs.readFileSync("/dev/stdin").toString().trim(); let answer = ""; const check = (idx, notEnb) => { if (idx % 4 === 0) while (id..

어플을 테스트해 보기 위해 릴리즈 apk를 만들어서 안드로이드 실기기에 설치했는데 흰 화면에서 어플이 멈춰있는 현상이 있다. adb logcat으로 봐도 따로 crash 나진 않고 splash screen도 정상적으로 넘어갔고 로딩이 다 된 걸로 나왔는데 어플은 흰 화면 밖에 안 나올 때 project/android/app/src/main/AndroidManifest.xml

문제: 가로, 세로의 크기가 각각 100인 정사각형 모양의 흰색 도화지가 있다. 이 도화지 위에 가로, 세로의 크기가 각각 10인 정사각형 모양의 검은색 색종이를 색종이의 변과 도화지의 변이 평행하도록 붙인다. 이러한 방식으로 색종이를 한 장 또는 여러 장 붙인 후 색종이가 붙은 검은 영역의 넓이를 구하는 프로그램을 작성하시오. 예를 들어 흰색 도화지 위에 세 장의 검은색 색종이를 그림과 같은 모양으로 붙였다면 검은색 영역의 넓이는 260이 된다. 입력: 첫째 줄에 색종이의 수가 주어진다. 이어 둘째 줄부터 한 줄에 하나씩 색종이를 붙인 위치가 주어진다. 색종이를 붙인 위치는 두 개의 자연수로 주어지는데 첫 번째 자연수는 색종이의 왼쪽 변과 도화지의 왼쪽 변 사이의 거리이고, 두 번째 자연수는 색종이의 ..

입력 : 총 다섯 줄의 입력이 주어진다. 각 줄에는 최소 1개, 최대 15개의 글자들이 빈칸 없이 연속으로 주어진다. 주어지는 글자는 영어 대문자 ‘A’부터 ‘Z’, 영어 소문자 ‘a’부터 ‘z’, 숫자 ‘0’부터 ‘9’ 중 하나이다. 각 줄의 시작과 마지막에 빈칸은 없다. 출력 : 세로로 읽은 순서대로 글자들을 출력한다. 이때, 글자들을 공백 없이 연속해서 출력한다. const fs = require("fs"); const input = fs .readFileSync("/dev/stdin") .toString() .trim() .split("\n") .map((arr) => arr.split("")); let strArr = []; let answers = ""; input.map((arr) => ar..

문제 과 같이 9×9 격자판에 쓰여진 81개의 자연수 또는 0이 주어질 때, 이들 중 최댓값을 찾고 그 최댓값이 몇 행 몇 열에 위치한 수인지 구하는 프로그램을 작성하시오. 예를 들어, 다음과 같이 81개의 수가 주어지면 이들 중 최댓값은 90이고, 이 값은 5행 7열에 위치한다. input으로 들어온 값 중에 최대값을 찾고 그 최댓값의 idx를 구하는 문제다 const fs = require("fs"); const input = fs .readFileSync("/dev/stdin") .toString() .trim() .split("\n") .map((arr) => arr.split(" ").map(Number)); let answers = ""; let y = 0; let max = Math.max(..

설치방법https://gaebarsaebal.tistory.com/20 [react native / 리액트 네이티브] react-native-push-notification IOS, Android 푸시 알람 설치하기푸시 알람을 보내기 위해선 IOS, Android 둘다 푸시 알람에 대한 권한을 받아야 해서 react-native-permissions 라이브러리도 함께 설치해야 한다. https://gaebarsaebal.tistory.com/21 [react native / 리액트 네이티브]rgaebarsaebal.tistory.com공식 githubhttps://github.com/zo0r/react-native-push-notification GitHub - zo0r/react-native-push-..

nohup 사용법은, 원하는 명령어 앞에 nohup을 붙여주고, 백그라운드 실행을 위해 맨 뒤에 &을 붙여주면 된다! AWS-EC2를 접속하고 파일이 있는 디렉토리로 이동 한뒤, 백그라운드 실행을 하고자 하는 파일에 권한을 부여한다. chmod +x test.py 백그라운드 실행 nohup python3 -u app.py & log의 경우 nohup.out에 기록된다. 로그 안남기기 nohup python3 -u app.py & > /dev/null 뒤에 > /dev/null을 붙여주면 로그가 안남는다고 한다. (확인은 안해봤다) nohup 실행 nohup으로 실행시켜주면 위처럼 PID가 출력된다. PID를 기억하지는 않아도 된다 프로세스 종료 이제 nohup으로 백그라운드에서 실행중인 프로세스를 종료시..

https://github.com/zoontek/react-native-permissions#supported-permissions GitHub - zoontek/react-native-permissions: An unified permissions API for React Native on iOS, Android and Windows.An unified permissions API for React Native on iOS, Android and Windows. - GitHub - zoontek/react-native-permissions: An unified permissions API for React Native on iOS, Android and Windows.github.com 라이브러리 설치..