탁이로그

MAMP를 이용해서 로컬에서 php 개발을 할 때 xdebug를 사용하는 방법을 소개합니다. PHP버전 확인 먼저 PHP의 버전을 확인합니다. 필자의 경우 7.4.21 php.ini 편집 /Applications/MAMP/bin/php/php7.4.21/conf/php.ini를 편집합니다. [xdebug] ;zend_extension="/Applications/MAMP/bin/php/php7.4.21/lib/php/extensions/no-debug-non-zts-20190902/xdebug.so" 세미콜론을 지우고, 아래 세줄을 입력하면 됩니다. [xdebug] zend_extension="/Applications/MAMP/bin/php/php7.4.21/lib/php/extensions/no-debu..

Visual Studio Code (VSCode)에서 편집중인 코드 텍스트에서 바로 가기 키로 같은 단어, 문자열 범위를 모두 선택하여 일괄 편집하는 절차를 소개합니다. 목차 같은 단어, 문자열의 범위를 모두 선택 선택한 문자열을 편집/삭제 같은 단어, 문자열의 범위를 모두 선택 같은 단어, 문자열의 범위를 모두 선택하려면 지정하고 싶은 단어에 커서를 맞추거나 문자열의 범위를 선택하고 바로 가기 키 Shift+Ctrl+L 을 누릅니다. 공백이나 쉼표 등의 구분 기호로 구분된 단어 또는 문자열이라면 먼저 해당 문자열을 선택하지 않아도 커서가 거기에 있으면 해당 문자열과 동일한 문자열을 모두 선택합니다. 또한 한 줄 또는 여러 줄을 대상으로 할 수 있습니다. 연결된 문자열의 일부만 전체 선택을 대상으로 하려..

HTML의 파일내에는 「HTML」 로서 사용되는 기호 등은, 무장내에 기재하면 기호로서 표시되지 않거나, 프로그램에 무제가 생기게 됩니다. 예를 들어, "

이번에는 워드프레스에서 웹사이트의 네비게이션과도 같이 경로를 보여주는 빵부스러기 리스트를 만들고 적절한 위치에넣는 방법을 알아보도록 하겠습니다. 먼저 대략적인 절차를 살펴 보겠습니다. "함수()" 형식으로 빵부스러기 목록의 함수를 만들고 이를 functions.php에 추가 작성한 함수를 형태로 넣고 싶은 페이지에 추가 매우 대략적이지만 위의 단계로 빵 부스러기 목록을 만듭니다. 빵부스러기 목록이라고 해도 여러가지가 있는데, 일반적으로 사용되고 있는 페이지에서의 표시 예를 정리해 보았습니다. 표시할 페이지 빵부스러기 목록 톱 페이지 표시하지 않음 카테고리 페이지 HOME(링크 첨부) > 카테고리명 월별 아카이브 페이지 HOME(링크 첨부) > 일시 태그 페이지 HOME(링크 첨부) > 태그명 게시 페이지..

이번에는 SCSS를 사용할 때 참조할 수 있도록 치트 시트를 정리 소개하도록 하겠습니다. Sass란? "Syntactically Awesome StyleSheet"의 약자로, CSS를 효율적으로 기술할 수 있도록 설계·개발된 Ruby제의 CSS메타언어 Sass 공식 사이트 SCSS 기법이란? SCSS 기법이란 Sass 쓰는 방법 중 하나로 Sass에는 SCSS 기법과 SASS 기법이 있으며, SCSS 기법이 CSS와 호환성이 있기 때문에 사용되는 경우가 많다. 확장자는 .scss한다. 중첩 구조 중첩 구조 중첩 구조 (HTML과 같은 형태)에 설명 div{ p{ color: red; } } 상위 선택기 참조 상위 선택기의 이름을 참조하고 설명 a{ &:hover{ color: red; } } 네임스페이스..

사이트의 프론트엔드를 담당하는 한 축인 CSS. 이번에는 CSS미디어 쿼리 치트 시트를 정리해 봤습니다. 미디어 쿼리란? 표시된 화면 환경에 따라 적용할 스타일을 전환하는 기능입니다. CSS @media screen and (min-width: 560px) { /* 스타일 */ } 화면 크기 스마트폰 스마트폰 세로 - 320px ~ 480px 스마트폰 가로 - 480px ~ 812px iPhone5 320px iPhone6/7/8/SE 375px iPhone6/7/8 Plus 414px iPhoneX 375px Pixel2 411px Galaxy S5 360px 태블릿 태블릿 세로 - 768px ~ 1024px 태블릿 가로 - 1024px ~ 1366px iPad 768px Android 8인치 600p..

VSCode 「Visual Studio Code」는 Microsoft가 개발하고 있는 고기능 코드 에디터로, 무료로 이용할 수 있습니다. 이 기사에서는 VSCode 바로 가기 키의 치트 시트 윈도우버전을 소개합니다. 목차 일반 기본편집 네비게이션 검색 및 바꾸기 멀티 커서 및 선택 풍부한 언어 편집 파일작업 화면표시 설정 디버그 통합터미널 VSCode 단축키 치트 시트 for mac 일반 General Ctrl+Shift+P 명령 팔레트 표시 Ctrl+P 파일 이름으로 열기 Ctrl+Shift+N 새 창 열기 Ctrl+Shift+W 창 닫기 Ctrl+, 사용자 설정 열기 Ctrl+K Ctrl+S 키보드 단축키 목록 열기 기본 편집 Ctrl+X 행 잘라내기 (선택되지 않은 경우) Ctrl+C 행 복사(선택..

VSCode 「Visual Studio Code」는 Microsoft가 개발하고 있는 고기능 코드 에디터로, 무료로 이용할 수 있습니다. 이 기사에서는 VSCode 바로 가기 키의 치트 시트 mac 버전을 만듭니다. 목차 1. 기본 2. 일반 3. 기본 편집 4. 멀티 커서 및 선택 5. 검색 및 바꾸기 6. 언어 편집 7. 네비게이션 8. 편집 관리 9. 파일 관리 10. 화면 11. 디버깅 12. 일체형 터미널 VSCode 단축키 치트 시트 for windows 기본 ⌘ command ⌥ option ⇧ Shift ⌃ control 일반 ⇧⌘P, F1 명령 팔레트 표시 ⌘P 빠른 열기, 파일 검색 ⇧⌘N 새 창 ⌘W 창 닫기 ⌘, 사용자 설정 ⌘K ⌘S 키보드 단축키 기본 편집 ⌘X 잘라내기 ⌘C 복..

CSS 에서 Padding (패딩) 과 Margin (마진) 한줄로 기술하는 방법은 간편하지만, 원리가 이해될 때까지 그 순서가 헷갈릴 때가 있어서, 이번에는 이미지로 설명을 하도록 하겠습니다. CSS에서 margin 및 padding 속성을 지정하는 방법은 몇가지 방법이 있습니다. 첫째는. 상하좌우를 각각 다 지정해주는 방법으로 아래와 같이 기술할 수 있습니다. margin-top: 10px; margin-right: 20px; margin-bottom: 15px; margin-left: 5px; 다음은 한줄로 기술을 하는 방법인데, 순서대로 한줄로 기술하기 때문에, 간편하지만 익숙해 질 때까지 순서를 잊기 쉽습니다. 한줄로 기술하는 순서의 포인트는 상하 좌우 중에서 위가 기점이 된다는 것입니다. 아래..

파이썬 목록이 숫자형 배열인 경우 합계를 sum이라는 함수로 계산할 수 있습니다. 프로그램 a = [5, 3, 6] b = sum(a) print(b) 출력 14 실제로 5+3+6=14이며 sum(a)는 a의 합계입니다. 예(총합) 1에서 100까지의 합계를 찾는 프로그램은 다음과 같습니다. 프로그램 a = range(1, 101) b = sum(a) print(b) 출력 5050 range의 제 1 인수가 최소치, 제 2 인수로부터 1을 뺀 수가 최대치가 되는 수열이 range(1, 101)입니다. 예(평균) 합계를 개수로 나누면 평균이 됩니다. 프로그램 x = range(1, 101) s = sum(x) c = len(x) a = s / c print(a) 출력 50.5 s에 합계, c에 개수를 넣고..

코딩에 있어서 영어는 피할래야 피할 수 없는 길과도 같습니다. 아래 코딩에 많이 쓰이는 영어 포스트의 2차로 많이 쓰이는 단어들을 정리해 봤습니다. 코딩에 많이 쓰이는 영어 프로그래밍, 코딩은 영어로 작성이 됩니다. 따라서 코딩에 있어서 영어는 중요하다 아니다라는 차원이 아니라, 반드시 사용해야만 하는 기본적으로 꼭 필요한 요소인 것 같습니다. 이번 시간에 tagilog.tistory.com 기본 300 A accept 【동사】 수락, 수락 access 【동사/명사】 액세스, 이용, 입수/액세스 account 【명사】 계정, 계좌 algorithm 【명사】 알고리즘 allow 【동사】 가능, 허용 alternative 【형용사】 대체 application 【명사】 어플리케이션 apply 【동사】 적용 a..

하루종일 코딩하고 있는 코더가 한 줄에 10자를 줄일 수 있다면, 100줄 입력했을 때 1,000 문자를 줄일 수 있게 됩니다. 현장에서 속도있는 개발을 위해서 emmet 과 숏헨드가 중요시 되는 이유가 바로 코딩의 효율을 폭발적으로 높여 주기 때문입니다. 그 외에도 오타가 적다 타이핑이 적기 때문에 피곤하지 않다 등의 장점이 있습니다. 코더라면 반드시 알아야 할 것이 Emmet 입니다. 이번에는 기본적인 사용법과 자주 사용하는 쇼트 핸드의 패턴을 정리하고 있으므로, 참고하시길 바랍니다. 【사전 준비】 에디터 「Visual Studio Code」 라면, 표준으로 Emmet를 사용할 수 있게 되어 있습니다. 개인적으로 추천하는 에디터입니다. 다른 메이저의 에디터 「Sublime Text」 「Atom」도 E..

자바스크립트에서 연산에 필요한 연산자를 정리해 봤습니다. 코딩에 참고해 보시길 바랍니다. 산술 연산자 연산자 기호 추가 + 감소 - 나누기 / 증분 ++ 잉여 % 곱하기 * 감산 - 단항 마이너스 부호 - 논리 연산자 연산자 기호 쉼표 , 조건 연산자 ?: 같음 == 더 큰 > 더 크거나 같음 >= 엄밀한 등가 연산자 === 동일하지 않음 != 더 작은 > 대입 연산자 연산자 기호 대입 연산자 = 복합 대입 연산자 OP= 기타 연산자 delete instanceof new typeof void

자바스크립트 로 테이블을 동적으로 만드는 방법입니다. 이 방법을 사용하면 일일히 수동으로 만들지 않아도 자동으로 원하는 만큼 표를 만들 수 있습니다. 백만개도 만들 수 있어요호호호^^ 대신 만들면 시간 엄청 걸립니다. HTML SCRIPT 결과

취득한 시각을 String로 변환해 padStart 5시 5분을 '5:5'가 아니라 '05:05' 처럼 두 자리로 표기하고 싶을 때는 아래와 같이 padStart를 사용하면 됩니다. const date = new Date(2022, 5, 5, 5, 5); const myHour = date.getHours().toString().padStart(2, '0'); const myMin = date.getMinutes().toString().padStart(2, '0'); console.log(myHour + ":" + myMin); // 05:05

Homebrew로 인스톨을 한 파이썬을 삭제하는 방법입니다. Homebrew로 설치한 파이썬 제거 일반적인 삭제 방법 $ brew uninstall python3 Error: Refusing to uninstall /opt/homebrew/Cellar/python@3.9/3.9.6 because it is required by watchman, which is currently installed. You can override this and force removal with: brew uninstall --ignore-dependencies python3 위와 같이 에러가 난 경우 % brew uninstall --ignore-dependencies python3 혹은 아래와 같이 강제로 --force..

자바스크립트에서 값을 입력하고 그 값을 바탕으로 계산하고 결과를 화면에 낸다는 프로그램은 곱셈, 나눗셈, 뺄셈에서는 잘 작동합니다. 하지만 더하기로는 잘 작동하지 않습니다. 이번시간에는 그 이유와 해결방법을 설명하도록하겠습니다. num1 = prompt("값을 입력하십시오",""); num2 = prompt("값을 입력하십시오",""); alert( num1 + num2 ); 이 프로그램에서, 예를 들면 최초의 입력으로 3을, 다음에 5를 입력했을때, 답은 8이 아니고, 35가 되어 버립니다. 이것은 왜 그럴까요? 그것은 prompt에서 반환되는 데이터가 숫자가 아닌 문자열이기 때문입니다. 문자열인 데이터를 수식에 사용하고 있는 것입니다. 그러나 그래도 곱셈이나 나눗셈 때는 잘 됩니다. 그런데 그것은, ..

JavaScript의 Math.floor 메서드를 사용하는 방법에 대해 실제 코드를 사용하여 초보자를 위해 설명합니다. 계산 결과를 출력하는 프로그램 등에 있어서 수치의 소수점 처리를 하고 싶을 때가 있는데요. 이번 포스트에서는 JavaScript의 Math.floor 메소드의 사용법을 설명합니다. Math.floor 메서드란? Math.floor 메서드는 숫자의 소수점 이하의 잘림 처리를 수행하는 방법입니다. Math.floor 메서드 사용법 Math.floor 메서드의 사용법은 Math.floor(숫자) 입니다 실제로 써보자 이제 코드가 실제로 실행될 때 어떻게 될지 살펴 보겠습니다. 요약 JavaScript의 Math.floor 메서드의 사용법을 설명했습니다. 소수점 이하 반올림외에도 버림과 올림 ..

자바스크립트에서 수치 계산을 수반하는 프로그램이 승수를 계산해야 할 수도 있습니다. 그래서 이 기사에서는 자바스크립트에서 Math.pow 함수를 사용해야 하는 승수를 구하는 방법을 설명합니다. 자바스크립트에서 Math.pow 함수를 사용하여 제곱을 찾는 방법에 대해 실제 코드를 사용하여 설명해 보겠습니다. Math.pow 함수란? Math.pow 함수는 승수를 계산한 결과를 반환합니다. Math.pow 함수 사용법 Math.pow 함수는 Math.pow (값, 지수) 라고 기술합니다. 제곱을 구하는 방법 예를 들어, 2의 3승(2^3)을 구하고 싶다면, Math.pow(2,3) 라고 쓰면 8을 반환합니다. 코드 예문 이제 코드가 실제로 실행될 때 어떻게 될지 살펴 보겠습니다. 요약 자바스크립트에서 Mat..

자바스크립트를 공부하며 날짜에 처리에 관련된 내용을 정리해 봤습니다. 현재 시간의 Date 인스턴스 new Date() 인수의 지정 시각의 Date 인스턴스 new Date(year,month,date,hours,minutes,secounds) 월(month)의 지정은 0 시작인 것에 주의! //2021년1월15일 22시30분 경우 new Date(2021,0,15,22,30) new Date(value) 인수를 에포크 밀리 세컨드로 해석한 Date 인스턴스 Date() 현재 시간 문자열 인스턴스에서 다양한 값 검색 인스턴스는 에포크 타임으로 시각을 보관 유지하고 있어 캐릭터 라인이나 수치로서 꺼낼 때에 로케일이나 타임 존에 맞추어 변환됩니다. 다음은 모두 모두 로컬 시간. var dt = new Dat..

파이썬 리스트: 파이썬(Python)에서 다른 언어의 배열과 동등한 데이터 구조는 리스트(목록)로 구현되어 있습니다. 이번에는 리스트(목록)의 사용법을 예제를 위주로 정리해 봤습니다. 목록 초기화 # 리스트 (배열) 초기화 : 대괄호 "[]"로 묶고 요소를 쉼표 ","로 구분하여 배열 empty_list = [] # 빈 목록 print (empty_list) # [] int_list = [ 0 , 1 , 2 ] # 정수 목록 (정수 배열) print (int_list) # [0, 1, 2] mylist = [ 0 , 'abc' , 1 , 'def' ] # 목록 (배열)에는 모든 유형의 요소를 포함 할 print (mylist) # [0, 'abc', 1, 'def'] # 목록 (배열) 초기화 : list..

Web 디자이너가 사랑해 마지 않는 것 중의 하나는 "box-shadow (상자 그림자)" 라는 것이 있습니다. Photoshop과 같은 특수한 소프트웨어를 사용하지 않더라도 코드만으로 그림자를 만들수 있다는 점에서, Web 디자이너들에게 사랑받는 코드라 할 수 있습니다. box-shadow의 역사는 길고, 2005 년 시점에서 W3C 에서 box-shadow의 초안 이 발표되었습니다. 그림자의 길이와 각도, 색상이나 투명도까지 지정할 수 있기 때문에 이 기술이 등장한 초기에는 감동한 분도 많을 것입니다. 그러나 box-shadow를 사용한 그림자 떨어 방법은 등장부터 10년 이상이 경과했으며, 그 동안 브라우저가 다양한 속성을 새롭게 지원하기 시작했기 때문에, 이번 시간에는 새로운 시대의 css 그림자..

이번 시간에는 리액트 네이티브 프로젝트에서 버전관리를 어떻게 하는지 알아보도록 하겠습니다. 매우 간단합니다. 기본적인 git 사용법은 아래 기사를 참고해 주세요. [GITHUB 사용법] 왕초보를 위한 깃허브사용법 (Git사용법) 코딩할 때 뺄래야 뺄 수 없는 서비스 중 하나가 GitHub (깃허브) 입니다. 현역 프로그래머에게는 너무나 친숙한 서비스지만, 코딩 초보자에게는 생소할 수도 있습니다. 그래서 이번에는 코딩 초 tagilog.tistory.com 먼저 터미널을 열고 네이티브 프로젝트의 디렉토리에 들어가서 아래의 순서대로 실행을 합니다. 1. git용 프로젝트를 초기화합니다. $ git init 2. 프로젝트 디랙토리에 생성된 모든 파일을 추가합니다. $ git add . 3. 파일을 커밋하고 메..

업로드 키 생성 https://reactnative.dev/docs/signed-apk-android Publishing to Google Play Store · React Native Android requires that all apps be digitally signed with a certificate before they can be installed. In order to distribute your Android application via Google Play store it needs to be signed with a release key that then needs to be used for all future upd reactnative.dev Enter keystore passwo..

보일러 플레이트를 사용하면 좋겠지만, 리덕스에 익숙하기 때문에 정리하는 의미에서 아래 순서대로 설치를 해보도록 하겠습니다. 1. React Native (0.65) with Typescript RN 템플렛을 사용할 경우 npx react-native init MyApp --template react-native-template-typescript expo bare work flow 를 사용할 경우 expo init --template expo-template-bare-typescript --name MyApp 2. React Navigation 설치 yarn add @react-navigation/native 디펜던시 설치 yarn add react-native-screens react-native-sa..

앱 개발 때처럼 안드로이드 스마트폰을 컴퓨터에 연결하여 제어할 때, ADB devices 명령을 입력하고 adb : command not found 이 나왔을 때는, export PATH=$PATH:/Users/사용자명/Library/Android/sdk/platform-tools 를 입력합니다. 나의 경우는 export PATH=$PATH:/Users/tagi/Library/Android/sdk/platform-tools 이렇게 입력을 했습니다. 입력 후 디바이스가 연결이 됐는지 확인 할 경우에는 adb devices 로 확인할 수 있습니다.

리액트 네이티브 RCTBridge required dispatch_sync to load RCTDevLoadingView 에러가 나오면, 아래의 코드를 /ios/YourAppName/AppDelegate.m 화일의 #import "AppDelegate.h" 바로 밑에 입력해 줍니다. #if RCT_DEV #import #endif 참고 https://github.com/facebook/react-native/issues/16376

리액트 네이티브 디버거를 오랜만에 다시 설치하려고 하니 달라진 점들이 있어서 기록으로 남겨둡니다. 1. 설치버전 2. 리액트네이티브 디버거 설치 3. 리덕스 익스텐션 설치 1. 설치 버전 react: 17.0.2 react-native: 0.65.1 react-redux: ^7.2.4 redux: ^4.1.1 redux-devtools-extension: ^2.13.9 redux-logger: ^3.0.6 2. 리액트네이티브 디버거 설치 https://github.com/jhen0409/react-native-debugger GitHub - jhen0409/react-native-debugger: The standalone app based on official debugger of React Nativ..

새삼스럽지만 도커(Docker)에 입문했기 때문에 정리해 봤습니다. 이제 도커는 세상에서는 당연한 기술. 적어도, 조금 만져본정도의 기본적인 지식 정도는 익혀야 합니다. 요약 Docker는 기존의 Linux 커널 기능으로 이루어져 있다 이미지를 공유하여 여러 사람이 여러 곳에서 쉽게 이미지로 컨테이너를 시작할 수 있다 Docker 커멘드에서 컨테이너를 하나하나씩 명령한다 Docker 커멘드를 두드리는건 불편하니 Dockerfile 을 이용하자 하나 하나 컨테이너를 관리하는 불면하니 docker-compose 로 동일한 호스트 OS의 여러 컨테이너를 한꺼번에 관리 하자 가상화 개요 (호스트형 가상화 vs 하이퍼 바이저 형 가상화 vs 컨테이너형 가상화) 호스트 형 가상화 호스트 OS에서 실행하는 가상화 소..

JavaScript 로 변수를 선언할 때 써왔던 var 그런데 최근 var 뿐만 아니라 let 과 const 이라는 코드도 많이 눈에 띠게 됐는데요. let이나 const 는 ECMAScript2015에서 채택 된 새로운 선언의 방법입니다. 그렇다면 지금까지 사용하던 var와 어떤 차이가 있는지, 이번 시간에는 JavaScript 에서 var, let, const의 차이 · 구분에 대해서 알기쉽게 설명합니다. 목차 var, let, const 란 let, const는 새로운 기법 var, let, const의 차이 var, let, const의 구분 var, let, const 란 JavaScript는 변수나 상수 (이하 총칭하여 "변수"라고 표기합니다) 를 사용할 때 변수 이름을 선언하도록 되어 있습니..