코딩배우기 40

한물간 box-shadow? CSS로 "그림자" 만드는 방법

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

코딩배우기 2021.10.11

리액트 네이티브 Git으로 버전관리하는 방법

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

코딩배우기 2021.10.01 (2)

리액트 네이티브 프로젝트를 안드로이드 플레이 콘솔 업로드 방법

업로드 키 생성 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..

코딩배우기 2021.09.29

React Native React Navigation Redux Reduxpersist with Typescript (+Jest)

보일러 플레이트를 사용하면 좋겠지만, 리덕스에 익숙하기 때문에 정리하는 의미에서 아래 순서대로 설치를 해보도록 하겠습니다. 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..

코딩배우기 2021.09.20

adb: command not found 해결 방법

앱 개발 때처럼 안드로이드 스마트폰을 컴퓨터에 연결하여 제어할 때, 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 로 확인할 수 있습니다.

코딩배우기 2021.09.10

리액트 네이티브 디버거 설치하기

리액트 네이티브 디버거를 오랜만에 다시 설치하려고 하니 달라진 점들이 있어서 기록으로 남겨둡니다. 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..

코딩배우기 2021.08.28

왕초보 도커 입문해서 도커 사용법을 정리해 봤다.

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

코딩배우기 2021.08.09

JavaScript 에서 var, let, const의 차이

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는 변수나 상수 (이하 총칭하여 "변수"라고 표기합니다) 를 사용할 때 변수 이름을 선언하도록 되어 있습니..

코딩배우기 2021.06.28

Javascript forEach 배열의 요소를 순서대로 처리

Array 객체의 forEach 메소드를 사용하면 배열에 포함되는 요소를 차례로 꺼내 콜백 함수에 전달하여 처리 할 수 있습니다. 이번 포스트에서는 JavaScript 배열의 요소를 순서대로 검색하는 방법을 설명하겠습니다. 목차 forEach 메소드 사용 배열의 반복에서 forEach 메소드와 for 문의 차이 forEach 메소드 사용 Array 객체의 forEach 메소드를 사용하면 배열에 포함되는 요소를 차례로 꺼내 작성한 콜백 함수 전달하여 처리 할 수 ​​있습니다. 형식은 다음과 같습니다. 배열 이름 .forEach (콜백 함수 (요소 값)) 배열 이름 .forEach (콜백 함수 (요소 값 요소의 인덱스)) 배열 이름 .forEach (콜백 함수 (요소 값 요소의 인덱스 배열)) forEach..

코딩배우기 2021.06.22