전체 오늘 어제
본문 바로가기
안녕하세요 :) FE 개발자 윤지홍입니다.
저는 리액트를 주로 사용해요.
UX/UI디자인에도 관심이 있어요.
Javascript React NextJs NodeJs Flutter HTML CSS PHP
👋
분류 전체보기 (21)
Twitter Crawler 만들기 Twitter Crawler Crawlee와 Playwright 스터디 용도로 개발된 트위터 트윗 크롤러입니다. 구현된 기능 특정 키워드와 관련된 트윗 수집 트윗 수집 기간 설정 수집된 트윗 상세페이지 스크린샷 기능 실행방법 $ yarn install $ yarn dev 결과확인 트윗 수집 결과는 storage/datasets/default 경로에서 확인 가능합니다. 수집된 트윗 스크린샷은 screenshots 폴더에 저장됩니다. 확인된 문제점 AWS EC2 해외 IP로 테스트 시 국내 IP에서 실행했을때와 수집 트윗 개수가 다른 문제. (ex - 국내 100개, 해외 70개) HTML을 기준으로 데이터를 수집한 게 아니라 network response 값을 긁어온 것이기 때문에 아마 국내와 해외에서 보..
2022년 11월 02일
React + Vite + Typescript + Jest 템플릿 세팅하기 들어가기 React + Vite + Typescript + Jest로 기본 템플릿 세팅을 진행 했을때 Jest 세팅을 제외한 다른 부분은 문제가 없었는데 Typescript에 Jest를 추가해서 그런지 공식문서를 보고 세팅을 진행 했음에도 Jest세팅 하나에 무려 5시간이 넘게 걸렸다 :( 2022.10.31 추가 해당 환경 Jest대신 Cypress를 적용해서 사용해보려 했으나 Cypress에서 자체적으로 vite를 지원하지 않아서 문제가 생겼다.. Cypress에서 vite지원용 패키지를 설치해봤으나 여전히 안됨.. 1. Vite + React + Typescript 설치하기 기본적인 설치는 Vite에서 보일러 플레이트 코드가 있어 간단하게 설치할 수 있었다. $ npm init vite@latest..
2022년 11월 01일
KAKAO BLIND RECRUITMENT 오픈채팅방 해당 게시글은 "프로그래머스 LV2"의 "KAKAO BLIND RECRUITMENT 오픈채팅방" 알고리즘 문제 풀이입니다. 풀이 // STEP1 - 유저 정보는 "입장"과 "변경"이란 두개의 이벤트에서 바뀔 수 있기 때문에 user정보를 먼저 저장 // STEP2 - 필요한 로그는 "입장"과 "퇴장"의 기록이기 때문에 "Change" 이벤트는 걸러준다. // STEP3 - 접속 로그에 노출되는 회원 정보를 "최신 정보"로 갱신하고 이벤트를 한글로 바꿔준다. function solution(record) { var users = {}; for (let v of record) { const data = v.split(" "); if (data[0] !== "Leave") { users[data[1]] = d..
2022년 11월 01일
Github 명령어 모음(추가중) Github Desktop 굳이 명령어를 치치 않고 Github Desktop을 통해 간단하게 처리할 수 있다. Git 설치 $ brew install git Git 명령어 모음 // Git 버전 확인 $ git --version // 새 저장소 생성 $ git init // 저장소 복제 $ git clone $ git clone /로컬경로
2022년 08월 25일
Flutter - Get the improper use of a GetX has been detected 문제상황 플러터 GetX를 사용해서 개발중 아래와 같은 에러가 나왔다.. [Get] the improper use of a GetX has been detected. You should only use GetX or Obx for the specific widget that will be updated. If you are seeing this error, you probably did not insert any observable variables into GetX/Obx or insert them outside the scope that GetX considers suitable for an update (example: GetX => HeavyWidget => variableObservable). ..
2022년 08월 24일
Javascript 원시타입과 참조타입 들어가기 javascript 변수 타입에는 원시타입과, 참조타입으로 나누어져 있는데 이 원시타입과 참조타입에 대해 알아보자. 원시 타입이란? 원시타입의 종류에는 string, number, bigint, boolean, undefined, symbol이 있다. 이 타입의 데이터들은 불변성을 가지고 있다. 즉 읽기 전용으로 값을 변경할 수 없고 변수에 할당될 때 메모리의 크기가 고정되어 절대 변하지 않는 특징을 가지고 있다. 그리고 변수 선언 시 변수에 실제 값을 저장한다. 이러한 특징 때문에 변수의 값을 변경하더라도 기존 값이 변경되는게 아닌 새로운 메모리에 값이 생성되고 해당 값이 변수에 저장된다. 위 이미지 처럼 변수 c에 a를 할당했을 경우 변수 c는 a와 연결되는게 아닌 a의 실제 값인 10이 변..
2022년 08월 23일
Javscript 변수 선언 방법 (var, const, let) 들어가기 javascript 변수 선언방식에는 var, const, let 키워드 3가지가 있다. 각 선언방식의 유효 범위와 값 재할당 및 재선언에 대해서 자세히 알아보자. var 키워드 유효 범위 - 함수 레벨 스코프 값 재할당 - 가능 재선언 - 가능 var키워드는 함수 레벨 스코프이기 때문에 아래 코드와 같이 작동된다. var a = '123'; const test = () => { var a = '테스트'; console.log(a); // result: '테스트' }; test(); console.log(a); // result: '123' 또한 함수 레벨 스크프이기 때문에 블록 레벨 스코프는 무시된다. var i = 0; for (var i = 0; i < 10; i++) { console.l..
2022년 08월 22일
React Hook에서의 클로저 들어가기 React Hook인 useState에서 클로저를 사용해 상태를 저장하고 관리한다고 한다.. 이제 이게 정확히 어떤 식으로 작동되는지는 알아보자 useState를 간단하게 구현해보자 간단하게 직접 구현해 보면 아래처럼 구현할 수 있지 않을까..? const useState = (initialValue) => { let val = initialValue; const state = () => { return val; }; const setState = (newVal) => { val = newVal; }; return [state, setState]; }; const App = () => { const [state, setState] = useState(0); return { change: () =..
2022년 08월 20일

티스토리툴바