사과 냄새나는 IT이야기 TAESTORY,

React-Native 프로젝트의 Back-End를 개발하며, React-Native 개발자가 API 호출하는데 이슈가 있다고하여 직접 테스팅해보기 위해 React-Native 환경을 구축하며 정리한 내용 여러가지 라이브러리들이 설치 되어야하는데 그 과정에서 충돌이 많음.cocoapods의 경우 gem으로 설치하는 가이드가 많아 gem으로 설치를 시도했으나계속 오류가 발생해서 ruby 버전을 변경해도 해결되지 않아 brew를 통해서 설치하였음.brew를 통해서 설치해도 문제 없어보임. sudo npm install -g react-native-clisudo gem install cocoapods#gem으로 cocoapods 설치 실패 시 homebrew로 설치brew install cocoapods#ru..

.env.development와 .env.production 파일을 구분하여 사용하는 것은 개발 환경과 프로덕션 환경에서 다른 설정을 적용하고 싶을 때 유용함..env 파일 설정.env.development: 개발 환경에서 사용될 환경 변수들을 정의. 개발 API 서버 주소나 로깅 레벨 등을 설정.env.production: 프로덕션 빌드에서 사용될 환경 변수를 정의. 운영 환경에 맞는 API 서버 주소, 트래킹 코드, 최적화 옵션 등을 설정두 파일은 프로젝트의 루트 디렉토리에 위치해야함.환경에 따라 파일 사용하기create-react-app을 사용하는 경우, 환경에 따라 자동으로 .env 파일을 사용개발 환경: npm start / yarn start를 사용하여 개발 서버를 시작, .env.develo..

컴포넌트에 데이터를 전달하는 방법컴포넌트를 호출하는 곳에서 아래와 같이 컴포넌트에 초기 값을 전달할 수 있음function App() { const number = 5; return ( );}컴포넌트에서는 인자로 받아서 사용이 가능함.import React, { useState } from "react";const Counter = (props) => { console.log(props); const [count, setCount] = useState(props.initialValue); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(c..

React에서 css class 사용 시 className 으로 attribute 이름을 사용CSS를 import 해서 사용import React from "react";import "./App.css";import MyHeader from "./MyHeader";function App() { let name = "테스트"; return ( 안녕 리액트 {name} React.js );}export default App;인라인 스타일로 CSS 사용import React from "react";import "./App.css";import MyHeader from "./MyHeader";function App() { let name = "테스트"; con..

React의 컴포넌트를 만드는데 사용하는 문법let test = "테스트";return ( {text} {1 + 2} {number % 2 === 0 ? "짝수" : "홀수"} );위 코드와 같이 { } 를 이용해 변수나 데이터를 넣을 수 있음.{func()} 처럼 함수를 호출할 수도 있으나 숫자나 문자열 처럼 화면에 표시할 수 있는 데이터 타입을 return해주면 화면에 해당 값을 뿌려주지만 그렇지 않은 경우 화면에는 아무것도 나타나지 않는다.닫힘 규칙여는 태그가 있으면 반드시 닫는 태그도 있어야한다최상위 태그 규칙취상위 태그 : 컴포넌트 최상위에 위치한 태그JSX로 컴포넌트를 만드려면 반드시 최상위 태그로 다른 태그들을 묶어줘야한다최상위 태그로 묶고 싶지 않다면 react fragment로 대..

사내에서 필요한 도구를 Chrome Extension으로 만들어봤었는데 Desktop Application 형태로 만들려면 어떤 도구가 적합할까 생각하다가 찾았던 Electron.notion에 메모했던 내용을 블로그로 옮겨본다.  기본적으로 npm 설치가 선행되어야함 프로젝트 시작하기1. 적당한 경로에 작업 폴더를 생성2. 작업 폴더에서 npm init 명령어 실행3. 명령어 실행 후 설정 값들을 입력할 때 다른 값들은 기본 값을 사용하되 entry point는 main.js로 입력Electron Application에서 main.js를 entry point로 사용하는 것은 많은 튜토리얼에서 사용하는 관습Electron Application은 두 가지 주요 프로세스로 구성됨 (Main / Renderer..

제목은 거창하지만 그냥 짧은 소감..2017년 웹 UI 테스팅을 위해 처음 Selenium을 사용했었다.당시 반복되는 테스트를하며 이걸 사람이 왜 이렇게 해야되나 싶어 찾았던 것이 Selenium.브라우저별 드라이버를 설정하고 브라우저별로 테스트 코드를 실행했었는데,당시 내 필요를 충족하는 유일한 도구가 Selenium이라 불편함은 일부 있지만 유용하게 사용했었다.특히 IE를 지원해야하는 상황에서 IE까지 드라이버를 통해 테스팅할 수 있었으니.. 많은 도움이 되었다. 그리고 수년이 지나 2023년.계속해서 Selenium을 사용해야할까? 고민이 되었다.프로젝트 환경을 설정하면서 영.. 번거롭다는 생각이 들었다.그러다 여러 기업들의 기술 블로그를 보며 많이 언급되던 Playwright를 알게되었다. npm..

AWS 인스턴스 생성 후 초기 타임존이 서울이 아니기 때문에 신뢰성 있는 서버 운영을 위해 타임존 설정은 필수입니다.다음 명령어를 차례로 입력하면됩니다.sudo rm /etc/localtimesudo ln -s /usr/share/zoneinfo/Asia/Seoul /etc/localtimedate마지막 date 명령어 실행 결과의 시간대와 맞다면 정상적으로 설정이 완료된 것입니다.