방과후 개발&계발노트

비동기 프로그래밍은 JavaScript에서 매우 중요한 부분을 차지하며, 웹 개발에서 자주 사용됩니다. JavaScript는 기본적으로 단일 스레드 언어이기 때문에, 비동기 작업을 효율적으로 처리할 수 있는 방법이 필요합니다. 이를 위해 콜백, 프로미스, 그리고 async/await 같은 패턴 및 구문이 사용됩니다.콜백 (Callback)콜백 함수는 다른 함수에 인자로 넘겨지는 함수로서, 어떤 이벤트가 발생한 후나 특정 작업이 완료된 후에 호출됩니다. 콜백은 비동기 프로그래밍에서 오랜 기간 사용된 패턴이지만, 너무 많이 중첩되면 코드가 복잡해지는 “콜백 지옥”이 발생할 수 있습니다.const fs = require('fs'); // Node.js의 파일 시스템 모듈 fs.readFile('example...

JavaScript에서 프로토타입과 상속은 객체 지향 프로그래밍의 핵심 개념 중 하나입니다. 이 개념들은 객체들이 속성과 메소드를 공유하고 상속받는 방법을 정의합니다. JavaScript에서는 전통적인 클래스 기반 언어와 달리, 프로토타입을 통한 상속 모델을 사용합니다.프로토타입 (Prototype)JavaScript의 모든 객체는 prototype 객체를 가집니다. 이 프로토타입 객체는 다른 객체에 공유 속성(메서드 포함)을 제공하는 데 사용됩니다. 즉, JavaScript의 상속은 프로토타입 객체를 통해 속성과 메서드를 자식 객체에 전달하는 방식으로 이루어집니다.function Person(name) { this.name = name;}Person.prototype.greet = function..

JavaScript에서 this 키워드는 함수가 호출되는 맥락(context)에 따라 그 의미가 달라집니다. this의 값은 함수가 호출되는 방식에 따라 결정되며, 다양한 시나리오에서 다르게 작동합니다.1. 전역 컨텍스트에서의 this전역 실행 컨텍스트에서 this는 전역 객체를 가리킵니다. 브라우저에서는 window 객체가, Node.js에서는 global 객체가 됩니다.console.log(this === window); // 브라우저에서는 true2. 함수에서의 this일반 함수에서 this의 값은 함수를 호출하는 방식에 따라 결정됩니다.일반 함수 호출함수 내에서 this는 전역 객체를 가리키는 경우가 일반적입니다(엄격 모드에서는 undefined).function showThis() { co..

JavaScript에서 스코프와 클로저는 매우 중요한 개념입니다. 스코프는 변수와 함수가 어디서 어디까지 접근 가능한지를 정의하는 범위입니다. 클로저는 함수가 정의될 때의 렉시컬 환경을 기억하여, 함수가 스코프 밖에서 호출되어도 해당 환경에 접근할 수 있게 하는 기능입니다.스코프 (Scope)JavaScript의 주요 스코프 유형은 다음과 같습니다:1. 전역 스코프 (Global Scope): 코드의 모든 부분에서 접근 가능한 변수나 함수.2. 함수 스코프 (Function Scope): 함수 내부에서 선언된 변수나 함수는 함수 외부에서 접근할 수 없습니다.3. 블록 스코프 (Block Scope): let과 const로 선언된 변수는 그들이 선언된 블록(일반적으로 {} 내부) 내에서만 접근 가능합니다...

// import import 'package:flutter/services.dart'; // 복사 final data = ClipboardData(text: "테스트데이터"); await Clipboard.setData(data); print("복사했어요"); // 클립보드로부터 데이터를 취득 final data = await Clipboard.getData("text/plain"); print(data.text);

infinite scroll을 사용한다던지 디자인에 맞춰 높이를 창사이즈에 맞춰 조절해야 할 때 CSS를 사용하여 조절이 가능합니다 예를 들어 이하의 구조가 있다고 하면 .content의 높이 = container의 높이 - header의 높이가 되게 하는 경우의 높이 설정방법입니다 방법 1 flex-grow .container { display: flex; flex-direction: column; height: 100%; .header { height: 96px; // 높이가 정해져있을 경우 설정 } .content { flex-grow: 1; // 단말브라우저에 맞춰 높이를 조절 overflow-y: scroll; } } ( 브라우저 호환성 ) 방법2 calc(100% - xxx) .containe..

터미널로 작업을 할 때 내가 작업하는 폴더나, 브랜치명이 표시 되어있으면 편하지 않나요? 그리고 $이 너무 오른쪽에 있으면 긴 명령어를 입력할 때 보기 불편하죠. 그래서 전 터미널의 표시 부분을 커스터마이즈 합니다. .bashrc #path＆브랜치표시 function git_ps() { git branch --no-color 2> /dev/null | sed -e 's/ //g' | sed -e '/^[^*]/d' -e 's/*\(.*\)/\1/' } export PS1='\[\033[32m\]\w\[\033[31m\] [$(git_ps)]\[\033[00m\] \n\$ ' 현재의 출력내용을 확인하기 $ echo $PS1 표시내용의 의미 값 의미 \h 호스트명 (처음의 .까지) \H 호스트명 \t 시간(..

터미널에서 코드를 칠때 자주 사용하는 명령어들이 있나요? 그런 명령어들이 너무 길어서 치기 귀찮을 때, 전 alias를 설정하곤 합니다. 컴퓨터를 포멧하거나 바꿀때마다 매번 설정을 하는 내용을 정리해봤어요. alias 명령 / unalias 명령 # 설정한 alias를 확인 $ alias # 설정 $ alias [ 옵션 ] 이름 [= 내용] # 설정한 alias를 삭제 $ unalias [ 옵션 ] 이름 # 한꺼번에 삭제 $ unalias -a 설정파일들 # bash를 사용하는 경우 $ vi ~/.bashrc # zsh를 사용하는 경우 $ vi ~/.zshrc alias 입력이 끝나면 esc :wp 로 저장하고 반영하기 # bash를 사용하는 경우 $ source ~/.bashrc # zsh를 사용하는 ..

애드센스의 ads.txt문제로 경고가 뜨는게 영 찝찝해하다가 드디어 해결되어서 안심하고 열심히 블로그 써야지!!! 하고 의욕에 불타오르고 있었는데 이래저래 만지작만지작하다가 2차도메인을 설정하면서 신경쓰이는 부분들이 생겨서 공유를 하고자 합니다. 2차도메인이 애드센스에 어떤 영향을 미치나? 지금 이 사이트는 2차도메인 czenhe.xyz 를 사용하고 있습니다. 이 블로그 이외에도 다른 블로그도 쓰고 있고, 그 곳도 2차도메인을 설정하고 애드센스는 2차도메인으로 설정을 했는데 관리화면에서 뜨는 접속수와 애드센스에서 확인하는 페이지뷰수가 너무나 크게 차이가 납니다 뭐, 접속의 정의가 틀리면 그럴 수 있겠거니 하고 넘어갔는데 시간이 흐를수록 좀 이상하다는 생각이 들어서 테스트를 해보기로 했어요. 티스토리의 블..

예전에는 git checkout으로 브랜치를 변환했었는데 작년 2020/8/16 Git이2.23.0버전으로 릴리즈하면서 git switch와 git restore가 새로 도입되었죠 git brunch을 이용해서 작업중인 브랜치를 확인하거나 이제 사용하지 않는 브랜치를 삭제하는 건 이 전 포스트에 올렸었는데 이번에는 작업중인 브랜치를 바꿔서 작업하는 방법을 알아보려고 합니다 git switch git switch는 이름 그대로 브랜치를 변경하는 기능입니다 작년에 git switch가 도입되기 전까지 사용해오던 git checkout도 지금까지 써온대로 사용이 가능합니다 (checkout으로 다양한 기능이 들어가 있었기 때문에 switch와 restore로 기능을 나눴는데 실험적인 단계이기에 추후에 변경이 ..

메인설정(global) $ git config --global user.name "이름" $ git config --global user.email "메일주소" 위에와 같이 설정을 하게 되면 ~/.gitconfig 에 아래와 같이 설정이 들어가게 된다 # This is Git's per-user configuration file. [user] name = 이름 email = 메일주소 서브설정 회사프로젝트랑 개인프로젝트로 설정을 변경하는 경우 $ cd ../프로젝트path/ $ git config --local user.name "이름" $ git config --local user.email "주소" ※프로젝트리포지토리안에 있는 ./.git/config에 설정내용이 들어가게 됨 설정확인 $ git con..

※맥OS만 대응합니다. 윈도우즈는 죄송. 우선, nvm을 설치하시죠(이건 나중에 다시 정리를 할께요) [GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions](https://github.com/nvm-sh/nvm) Node.js 인스톨 nvm을 인스톨했다면 nvm을 이용하고 Node.js를 인스톨합니다 일반적인 유저라면 LTS(장기서포트)의 최신버전을 설치하는 게 좋을테니 밑의 코드를 실행합니다. $ nvm install --lts 설치가능한 버전을 확인하고 $ nvm ls-remote 버전을 지정해서 설치할 수도 있어요 $ nvm install v15...

const url = window.location.href; // 확장자포함한 파일명 const filename_ex = url.match(".+/(.+?)([\?#;].*)?$")[1]; // 확장자없이 파일명만 const filename = url.match(".+/(.+?)\.[a-z]+([\?#;].*)?$")[1];

일단 프로젝트안에서 dayjs를 인스톨할것 https://day.js.org/ $ npm install dayjs 간단한 dayjs사용법 import dayjs from 'dayjs' let dayjsDate = dayjs('2019-03-01') // 2019-03-01일자 dayjs 객체 할당 dayjsDate.add(1, 'day') // 1일 추가(반영 X) console.log(dayjsDate.format('YYYY-MM-DD')) // '2019-03-02'가 아닌 '2019-03-01'가 출력됨 dayjsDate = dayjsDate.add(1, 'day') // 1일 추가 console.log(dayjsDate.format('YYYY-MM-DD')) // '2019-03-02' utili..

GitHub/gitLab에서 리포지토리를 작성한다 로컬에서 작업중인 프로젝트를 git init $ git init $ git add . $ git commit -m ':tada: First commit'​ 리모트 리포지토리(GitHub/gitLab에서 만든 리포지토리)를 등록 $ git remote add origin git@github.com:user/xxx.git push $ git push origin master 브런치를 전부 push하는 경우에는 이렇게 $ git push -u origin --all

로컬상에서 브랜치 확인 $ git branch 브랜치 삭제 로컬에서 만든 브랜치 삭제 $ git branch --delete [브런치명] $ git branch -d [브런치명] 리모트에서도 삭제 $ git branch -D [브런치명]

// 커밋을 지정해서 취소한다 $ git reset HEAD ●● // add를 취소, 수정한 내용은 보존된다 $ git reset HEAD // add를 취고, 수정하기 전으로 되돌린다 $ git reset --hard // 직전의 commit을 취소, 수정하기 전으로 되돌린다 $ git reset --hard HEAD^ // commit과add를 전부 취소 $ git reset --mixed // commit만 취소 $ git reset --soft // --amend를 취소, ●는 $ git reflog 로 확인 $ git reset --soft HEAD@{●} git reset을 취소하기 $ git reflog f78da58 (HEAD -> develop, upstream/master, origi..

우연히 유튜브의 알고리즘이 나를 이 컨텐츠로 이끌어줘서 보게 되었는데 꽤 흥미로워서 기록을 하게 되었다 [당신의 문해력 홈페이지] 1부- 읽지 못하는 사람들 2부- 공부가 쉬워지는 힘, 어휘력 (영상 하나가 삭제된듯...) 중학교 2학년 역사시간 어려운 단어들이 많이 나와서 아이들이 내용을 잘 이해를 못하고 있었다 수업이 끝나고 기억하고 있는 내용으로 마인드맵을 작성하게 했는데 잘 못적는 아이들이 많은 상황이었다 선생님은 여태까지와는 다른 방식의 수업을 시작했다 우선 모르는 단어에 동그라미치고 단어를 알아보게 하고 그 뒤에 수업을 시작하니 아이들이 이해하기 시작했다 주요어휘를 미리 학습한 뒤에 공부할 때 더 빨리 습득할 수 있었다 미국 캘리포니아의 초등학교 단어를 배우고 그 단어를 그룹으로 나눠 복습하기..

일요일 저녁 친구에게서 헬위크에 관련된 유튜브영상을 추천받아서 보다가 리디셀렉트에 헬위크가 있다는 얘기에 가볍게 속독하면서 정리해보았다. 아니, 이미 인생이 헬인데, 헬위크라니 끔찍하다 라고 생각하고 있었는데 거기에 대해서도 작자는 얘기를 하고 있었다. 남들보다 뛰어난 사람이 되는 것은 핵심이 아니다. 더 나은 자신을 만드는 것, 나아가 나 자신의 최고 버전에 이르는 것이 목표가 되어야 한다. 따라서 중요한 것은 성공에 대한 나의 정의다. 일주일간 더 지옥같은 스케쥴을 견뎌야 하는건가.. 했는데 어떻게 보면 지금 헬같다고 느끼는 상황을 가볍게 만들기 위한 수단이 될 수도 있겠다 싶어서 몇가지 요점을 추려봤다 성공적인 삶을 위한 법칙 • 몸을 움직여라 • 즐겨라! • 멋진 취미를 만들어라. • 일찍 일어나..

개인맥북이 공장수리에서 돌아와서 개인작업을 위해 로컬호스트로 서버를 설정하면서 메모를 남깁니다. 유저디렉토리를 유효화 $ sudo vi /etc/apache2/httpd.conf 아래의 부분이 코멘트아웃되었다면 앞에 있는 # 을 삭제해서 코멘트를 유효화시켜주세요 LoadModule userdir_module libexec/apache2/mod_userdir.so LoadModule authz_core_module libexec/apache2/mod_authz_core.so LoadModule authz_host_module libexec/apache2/mod_authz_host.so # User home directories Include /private/etc/apache2/extra/httpd-use..