전체 오늘 어제
본문 바로가기
안녕하세요 :) 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일
JS 실행 컨텍스트란? 들어가기 js 공식 문서나 관련 자료들을 찾아보면 컨텍스트, 실행 컨텍스트 라는 단어가 많이 들어가는 것 같다. 글을 읽다 보면 대충 컨텍스트가 이런 걸 말하는 거구나 하고 넘겼었는데 최근 기초부터 다시 공부하다 보니 실행 컨텍스트라는 단어가 유독 많이 나오는 것 같아서 컨텍스트에 대해 정확히 짚고 가자 싶어서 정리했다. 실행 컨텍스트에 대해 알아보자 실행 컨텍스트(Execution Context)란 쉽게 실행 가능한 코드가 실행되기 위해 필요한 환경 정보들을 모아둔 환경이라고 생각하면 될 것 같다 :) 1. 실행 가능한 코드가 뭘까? 자바스크립트에서 실행 가능한 코드의 정의는 아래와 같다..! 1. 전역에 존재하는 코드 2. 함수 코드 3. Block - ES6 이상 4. Eval 코드 2. 그럼 코..
2022년 08월 19일
Javascript 동작 원리에 대해 알아보자 들어가기 자바스크립트를 몇 년 동안 사용해 오면서 동작원리에 대해 대충은 알고 있었는데 "나중에 제대로 알아보자.. 알아보자.." 하며 미뤄놨었다가 드디어 정리했다 :) Javascript 동기식 언어다 js는 동기식으로 동작한다. 비동기 처리가 가능하기 때문에 비동기식 언어라고 생각할 수 있지만 javascript는 동기식으로 동작되고 비동기 처리는 아래에서 나오는 WebAPI로 따로 처리한다. Js는 싱글 스레드 js가 동기적으로 동작하는 이유가 여기에 있다. 싱글 스레드는 한 작업이 종료될 때까지 다음 작업을 실행하지 않고 기다린다. 아래 코드로 살펴보자 alert('hello'); console.log('world'); 콘솔을 확인해 보면 알럿트가 닫히기 전까진 'world'가 찍히지 않는 걸 확..
2022년 08월 17일
클로저(Closure)와 렉시컬 스코프(Lexical Scope) 렉시컬 스코프(Lexical Scope) 란? 렉시컬 스코프를 번역하면 "어휘 범위"라고 하지만 보통 "정적 범위", "정적 스코프"라고 한다. 렉시컬 스코프는 함수가 어디서 실행되는지가 아닌 어디서 선언되었는지에 따라 상위 스코프를 결정한다. 클로저(Closure) 란? 클로저란 함수가 속해있는 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때에도 해당 스코프에 접근할 수 있게 하는 기능을 말한다. 쉽게 말해 외부 함수의 실행 컨텍스트가 종료된 이후에도 내부 함수에서 외부 함수의 컨텍스트에 접근할 수 있게 해주는 기능을 말한다. 아래 코드를 통해 살펴보자 const test = () => { const a = 123; const res = () => { console.log(a) } re..
2022년 08월 16일
Js 스코프(Scope) 란 스코프(Scope)란? 스코프란 식별자(변수, 함수, 클래스) 접근 규칙에 따른 유효 범위를 말한다. 즉 식별자에 접근 가능한 유효 범위가 존재하고 그 범위는 중괄호와 함수에 의해 나눠진다. (중괄호 : Block Scope, 함수 : Function Scope) 스코프의 종류와 접근 Block/Function 스코프가 있다. 1. 스코프는 안에서 밖으로만 접근 가능하다 스코프는 안에서 밖으로만 접근이 가능하고 그 반대는 불가능하다. const app = () => { const a = '테스트'; console.log(a); // result: '테스트' }; // app 블록 종료 console.log(a); // result: Uncaught ReferenceError: b is not define..
2022년 08월 16일

티스토리툴바