TIL

w3c 표준 이메일 정규식 → email regex w3ce.target → e.currentTarget 으로 사용prevState 사용하기 → react는 근처의 값을 한 번에 적용하기 때문에 setState에 값을 바로 적용 시 버그 발생 확률이 높다서비스에 꼭 필

git flow 에 대해 알아보자 - https://techblog.woowahan.com/2553/jira/asana 등을 잘 사용하는 방법내 시간을 관리하는 방법소통을 잘할 수 있는 방법체크된 박스의 text에 취소선을 그어주는 작업을 했다text-deco

자라기 함께더 잘 협력할 수 있는 방법style lint - color: 색상을 변수 명으로 정해주면 된다class와 객체 지향scss 모듈 사용법classNames 사용법svg: 어떻게 가져다가 쓰긴 했는데 svg 사용법에 대해 공부 해야겠다Date 객체: 데이트 객

자라기 함께더 잘 협력할 수 있는 방법내 시간을 관리하는 방법소통을 잘할 수 있는 방법style lint - color: 색상을 변수 명으로 정해주면 된다class와 객체 지향scss 모듈 사용법classNames 사용법git branch 관리와 팀에서 pull pus

Sass(scss)lintprettierstyleLint: styled-components lint를 사용하기 위해stylelinttrc.json에 아래와 같은 코드 추가 시 scss에서는 작동하지 않는다 -> 동시 사용은 어려운 것 같음styled-components

React Hooks: useRef, useMemo, useCallback, useContext(?)css 변수 사용시멘틱한 코드좋은 질문 하기useRef: 검색 시 디바운싱을 적용했던 부분을 useRef로 처리하면 조금 더 좋은 방법이 될 수 있을 것 같다useMem

TypeScript: interface, type...recoilaxiosyarn시멘틱 태그yarn/npm: npm 4버전 까지는 확실히 yarn이 빨라서 인기가 있었지만 5버전 이후에는 큰 차이가 없다고 한다TypeScript: interface와 type 중에 in

이미지 작업 시 용량 최적화에 신경 쓰자Can I Use: 브라우저 지원 여부를 검색할 수 있다영어: 전세계 55%의 자료는 영어로 되어있다, 한국어는 2.5% 정도.. 프로그래밍 관련은 더 심한 차이를 보일 것테스트 환경: 사용하고 있는 환경에 따라 에러의 이유와 해

CSS를 모듈화 하여 사용하는 방법.module.css 확장자로 작성className 중복을 막아준다유지보수에 용이react에서 모듈을 사용하지 않으면 부모 컴포넌트의 css가 자녀들에게 모두 적용되기 때문에side effect 발생 확률이 높아진다모듈화된 CSS가 R

TypeScript..recoil 적용강사님이 주신 코드 템플릿 이해하기dotenvuseMemo 적용..?interface: 배열일 경우 \[]를 넣어줘야 한다 props를 전달 할 시 prop에 대한 interface 구성하는 것 잊지 말자dotenv: .env 파

앞으로의 과제 recoil lint ?Suspense: 알게 됐으니 써보는 방향으로.. 코드 통일성과 관심사 분리 Router/NavLink() 공식문서 css axios 인터셉터: then / catch로 처리 되기 전 요청과 응답을 가로챌 수 있다 인터셉터로 받고

Routerlinter이미지 없을 때 처리즐겨찾기 제거, 내 즐겨찾기 title즐겨찾기 된 영화 검색 목록에서 식별 처리안쓰는 코드 지우기 hi즐겨찾기 목록 sorting스크롤 시 데이터 관리, scroll up 처리페이지 이동 후 스크롤 위치 고정recoil: res

버그 잡기버그 잡기버그 잡기세스코 부르기즐겨찾기 된 영화에 색상 추가 - 바로 적용되도록즐겨찾기 삭제 바로 적용되도록 변경recoil: 리코일 적용 완료 - 적용은 하였으나 효율적으로 사용하고 있는지.. 여기 저기서 import하는 것이 맞는지 통일성을 위해 전부 re

드롭 다운 버튼을 활용한 즐겨찾기 정렬디자인..?refactoringflushSync: Automatic Batching(자동 일괄 처리)로 인해 근처의 state를 한 번에 업데이트 하는 것을 하나씩 처리할 때 사용startTransition: 긴급하지 않은 상황을

READMERefactoring처음부터 잘하자..TypeScript: 아무래도 적응 안되는 그것..컴포넌트 구조: 이정도면 119구조대 불러야 한다.. 처음 부터 잘 설계하고 시작해야겠다setState: set끼리 최대한 분리하자 flushSync로 해결할 수 없는 상

Redux toolkitReact querymark 태그로컬 캐싱퍼지 문자열 검색드래그 앤 드롭캐싱: 이미 가져온 데이터나 계산의 결과를 저장하여 이후 요청에 대해 빠르게 처리할 수 있고 서버의 부하를 줄여준다 로컬 캐싱: react query로 구현할 수 있다고 한다

suspense: react-query isLoding으로 ?redux-toolkitreact-query호출 최적화: 디바운싱, 쓰로틀링, startTransition퍼지 문자열 검색.env: 적용이 안된다? 일단 껐다 켜본다useQuery: 옵션에 enabled: b

캐싱 최적화api 호출 더 최적화호출 시 마다 console.log 완료\~~ 리덕스 툴킷 완료\~~startTransition: 드디어 사용해봤다.. api호출 최적화 한다고 썼는데 효과가 있는지는 잘 모르겠다컴퓨터 속도가 느릴수록 도움이 되는 것 같은커스텀 훅에 u

로컬 캐싱 최적화퍼지 문자열 검색커스텀 훅suspenseapi 호출 최적화: 디바운싱 처리를 한 input value 변경 시 api를 호출하지만 한 번 호출 시 대기 시간이 너무 길다 -> input value 변경 시 호출 취소 기능 추가https://g

useMemouseCallbackreact-querysuspense고차 함수와 고차 컴포넌트순수 함수와 순수 컴포넌트코드만 보고 데이터 형식을 알 수 있어야 한다생각을 하게 만드는 코드는 좋지 못한 코드다 -> 관심사 분리를 통해 관리삼항 연산자: 가독성을 위해 사용을

custom hookPotal refactoringinterceptorSuspense: 간단하게 적용은 해봤지만 Router와 같이 사용되는 경우를 구현해봐야 한다redux: 최상위에서 불러올 수 없다 component 내부, custom hook, 함수 내부에서만

state: 협업 시 주요 기능 구현에 대한 필요 상태를 먼저 정의해보고 변경 시 보고하는 것은 어떨까..컴포넌트: 하나의 파일에 하나의 기능을 가진 컴포넌트로 나누는 것이 역시 좋은 것 같다useQuery 조건부 캐싱 or api 응답 부분에서 처리redux-tool

뛰어갈 수 없음 걸어걸어 갈 수 없음 기어..READEME 작성currentTarget / tartget: currentTarget은 이밴트 생성 위치, target은 이벤트 발생 위치를 가리킨다 강사님이 준혁님이 왜 currentTarget을 사용하라고 하셨는지 대충

틀리지 않는 코드시멘틱한 코드깔끔한 코드잘 동작하는 코드useQuery: useQuery 첫 번째 인자에 첫 번째 값은 꼭 string으로 작성함수로 작성 시 웹팩이 함수 a, 함수 b 이런 식으로 변경해주기 때문에반응형: 모바일 먼저, 작은 것 -> 큰 것으로모달:

말은 어눌하게행동은 민첩하게dom 조작을 직접 하는 것 쓰지말자redux-toolkit: reset할 때 INIT_STATE를 사용하면 좋다li 처럼 자주 처리하고, 몇 단계 안거치면 props로 데이터 전달 해주자useInfinityQuery: 무한 스크롤..Susp

그래프 그리기: victory.js데이트 피커: react-datepickerui 디자인dropdownrefactoring폴더 구조와 컴포넌트 분리절대 경로 설정tsconfig.jsontypescript에서의 object: 아래 형식으로 데이터를 넣는 것 실패믿음을 가

aside, maindrop down size만 다르게 해서 사용dl: dt, dd를 div로 감싸도 된다레게노css header에 넣으면 개느림모바일은 사이즈 따로 렌더링\_\_shared: 페이지 내부에서의 공용 컴포넌트여러 곳에서 쓰는 것은 전역 공용 컴포넌트로

https://reactdatepicker.com/구현되어있는 예시가 많고 예제 코드가 잘 되어있어잘 조합해서 쓰면 좋은 것 같다자바스크립트 기본 Date 객체와 자료형이 다르다typescript.. 조금 곤란하지만 오히려 좋아사용이 매우 간편하고 직관적이라

useCallbackrefactoring도커SSR주간 데이터..useEffect: 순환 참조에 걸렸다.. 테스트 한다고 데이터를 일반 변수로 두고 map을 돌리는 로직을 useEffect내에서 사용, deps로 데이터를 걸어 주었기 때문이었다\-> useMemo로 사

전역 데이터 관리조건별 검색 / 초기화 버튼UI 디자인navLinklocal DBtest casehtml table: thead와 tbody를 사용하자공통 button 컴포넌트: 이게 되네..?dayjs, datepicker: dayjs는 dayjs type이고 dat

앞으로의 과제 Keyword store.js: 저번에는 TS를 바로 지원하는 storejs 를 썼는데 store.js 사용자 수가 월등히 많아서 이 쪽으로 선택 데이터를 Error log Date 객체: Date 타입을 사용하는 경우 데이터 형식이 Date가 아니

\[] 과제 수행 보고서\[] 디자인 수정label 태그: htmlFor 속성이 - input태그 id와 연결datetime: input datetime: 날짜를 선택할 수 있는 inputaside: 위에 div를 주고 aside를 fixed 주는 방식이 좋을까..r

나를 생각하자useCallback화면 사이즈는 작은 것 부터 맞춘다vscode: READEME 미리 보기가 있다.. 진짜 개꿀이네module.scss: 파일 구조, className을 잘 짜야겠다크로스 브라우징.. : internet explorenode_modules

앞으로의 과제 Keyword json euc-kr 인코딩: bug log 코드 가로 길이를를 짧게 쓰자.. 화면 밖으로 나가서 안보이는 영역을 디버깅 할 때 제대로 못봐서 쉽게 고칠 수 있는 부분도 놓친다 안보일 땐 분위기 환기 후 좀 멀리서 보자 꿈 > 어떤이는

과제 수행 보고서README개인 프로젝트 기획light house: 웹페이지 성능 검사svg는 path 이미지를 겹쳐서 만드는 것이었다.. path가 하나의 이미지..vscode extension SVG: 우클릭으로 svg 이미지 미리 보기 가능컴포넌트를 map으로 생

UI 디자인기능별 state 정의 공통 컴포넌트 작성컴포넌트 구조 작성story book..?foundation: 모두 외우진 않더라도 어떤 것들이 필요하고 어떻게 작성하는지 알고 있어야겠다eslint, stylelint, webpack, babel 등..원하는 결과를

이력서헤더LNBAPI 불러오기Layout component: Layout 컴포넌트 태그 내에 다른 컴포넌트를 넣으면 props로 전달되는 것 같다 type은 ReactNode구조를 처음부터 생각하고 짜면 좋을 것 같다이런 구조는 그냥 flex로 가자..width: fi

좋은 api 찾기dl, dt, dd: 되도록 dt:dd가 1:1로 쌍을 이룰 때 사용하자\-> 스크린리더 사용자들은 dd가 여러번 사용되었을 경우 전체 메뉴구조를 파악할 수 없다고 한다 리스트 안에 리스트가 필요할 경우 ul 리스트를 한 번 더 써주는 것이 더 시멘틱이

그래프 그리기..UI 디자인localeString intl 정규식 순서로 빠르다return 안에서 reduce 같이 객체의 변화가 일어나는 것들은 쓰지 않는다리액트 훅은 매 렌더링마다 호출 되어야한다response 관리: setIsEmptyResponse(조건문) -

차트 뜨기 전 스피너 추가실제 데이터로 차트 그리기캔들 차트출처: https://wikidocs.net/4766victoty.js의 BoxPlot을 이용해 그릴 예정원래 용도는 사분위 수를 그리는 것 같지만기본 모양은 이렇지만 속성을 줘서 원하는 느낌을 그릴

useReducer 사용해보기전날 시가가 당일 종가보다 높으면 red, 낮으면 blueuseRef: typescript에서의 3가지 ref 정의

전체 기간 api 구하기데이터는 사용할 모양으로 미리 가공해놓자..좀 수상하지만 api call 하는 곳에서 가공하는 것으로 수정해결해야하는 문제가 복잡 → 인터페이스도 복잡해짐 → 변경이 많다제품이 변경되지 않아야 하는 이유 → 사용자가 편하게 잘 사용할 경우좋은 제

https://velog.io/@nemo/coin-apiapi 정보T는 Trillion의 약자로 1조이고, 총 시가와 거래량을 1조로 나누고 단위를 붙였다.

scss @use 사용법..채용공고 내의 워딩을 이력서에 녹여라3~5줄 정도의 경력 중심 자기소개: \-> 어떤 실무 경험을 했는지 \-> 어떤 성과를 냈는지 \-> 구체적(정량적 지표 사용)으로 작성가장 어필하고 싶은 핵심 경험에 선택과 집중꼼꼼한 업무 처리

데이터 크롤링 성공하기숫자 콤마 찍기여백 조절button 태그는 flex, grid 등을 사용할 수 없다.. inline style을 사용하고 싶지 않았는데간편이 세상은 언제나 나를 더 좋은 곳으로 이끈다당장은 굴곡진 삶을 살고 있다고 생각하지만훗날 돌아보면 그래도 잘

게시판 만들기helmettoLocaleString(): 숫자를 로컬의 language format에 맞는 문자열로 변경파라미터로 아무것도 전달되지 않으면 사용자 로컬 환경의 locale을 default로 사용\-> 드디어 쓸 일이 생겨서 써봤는데 개꿀이네.. 편하고,

이렇게 코드를 작성하신 분이 계셨다useEffect 내에서 ascync await으로 axios 요청을 2회 보내고그 중 1번은 setState()로 상태를 업데이트 하는 코드..다른분 답변경고는 현재 컴포넌트가 unmount 된 후에 state 업데이트를 해주어서 매

axios와 fetch

https://velog.io/@boxerof8/%EC%9C%A0%EC%9A%A9%ED%95%9C-VSCode-%ED%99%95%EC%9E%A5%EC%9D%84-%EA%B3%B5%EC%9C%A0%ED%95%A9%EB%8B%88%EB%8B%A4

URL 접속 → HTML 불러오기, HTML 파싱, DOM 생성 →CSS불러오기 , CSS 파싱 → 렌더 트리 생성, 레이아웃 계산(layout), 화면에 그리기(paint) → JS 파싱, AST 생성, Reflow (DOM API로 DOM, CSSOM 변경 후 다시

검색엔진 최적화(Search Engine Optimization)의 약어로 검색 엔진이 보다 컨텐츠를 잘 이해하고, 사용자에게 잘 검색될 수 있도록 도와주어 사이트를 개선하는 프로세스를 의미합니다.대부분의 웹 크롤러, 봇들은 JS를 실행시키지 못하고 HTML에서만 컨텐

동기는 호출한 곳에서 호출한 함수의 결과를 기다리고 작업 완료 여부를 계속 확인합니다. 비동기적인 코드는 호출 결과에 관계 없이 현재 작업을 이어갑니다.호출된 곳에서 작업이 끝나면 callback으로 결과를 전달 합니다콜백 함수비동기 프로그래밍을 실현하는 기본적인 방

브라우저의 엔진이 html/css/js 파일을 해석해준다자바스크립트는 싱글 스레드이기 언어이기 때문에 한번에 하나의 작업만 실행 가능합니다작업은 코드를 실행해주는 공간인 callStack에서 후입선출로 실행됩니다바로 실행할 수 없는 코드나 지연시간이 긴 코드는 프로그램

framework와 library의 차이라이브러리는 개발자가 필요할 때 불러와서 사용프레임워크는 개발자가 프레임워크에 맞게 코드를 작성해야 한다react를 사용할 때는 마음대로 폴더 구조를 짜고, 이름을 마음대로 설정하고 언제 react를 불러올지 직접 정할 수 있다

next.js 고유의 style을 주는 방법component return문 안에서 다음과 같이 작성\-> style 태그에 props로 jsx추가styled jsx로 스타일을 주면자동으로 요상한 클래스명이 생긴다이 것들은 모듈별로 구분되어 생성됨 - 덕분에 각각의 파일

layout을 따로 안만드는줄 알았는데 만든다App component에는 들어갈 내용들이 많기 때문에최대한 컴포넌트를 외부로 빼서 간략하게 만든다next.js는 내장된 작은 패키지들을 사용할 수 있다Head는 react-helmet 같은..?next.js는 public

기본적으로 next.js npm run dev를 하면 서버와 클라이언트가 함께 실행됨api key를 숨기지 않는다return 은 배열redirect 시 url이 변경됨source를 찾는다source로 접속시 destination으로 보낸다permanent: 영구성 설정

next.js는 page를 html 형태로 export 하던지pre-render를 한다 - 초기 상태는 html적어도 무언가 볼 수 있다..SSR로 fetch를 하면 {!movies && Loading...} 같은 코드는 필요 없다export function getSe

URL에 변수를 넣을 수 있다/:변수 로next.js에서는 따로 router를 설정하지 않기 때문에폴더와 파일의 이름으로 설정한다/movies 로 접속하면movies/index.tsx로 가게되고movies/all로 접속하면 movies/all.tsx 로 가게된다 nex

URL에 데이터가 들어가면 SEO에 유리하다고 한다무엇이든 캐치해내는 URL..url 의 깊이에 상관 없이..?URL변수를 받아오는 \[id].tsx의 파일 명을 \[...params].tsx로 바꾼다\-> query의 id 값이 string이 아닌 배열로 들어오게 된

pages 내부에 404.tsx를 만들어주면 custom 할 수 있다

() => getPos() 이걸 넣어버리게되면() => getPos()이 자체가 하나의 함수가 되는거에요이건 익명함수로 넘기는거니까 1회성이죠() => getPos()로 쓰면 각각 개별 event로 처리 되는데strict 모드여서 useEffect가 2회 발생,이벤트가

Provider는 어플리케이션 안의 모두가 client에 접근할 수 있도록 한다

useQuery로 받을 수 있는 값들만든 client를 포함하고 있고data, loading, error 등 좋다loading이 false면 요청에 대한 결과를 받았다는 것useQuery는 선언형 코드를 작성하게 해준다단순히 설명하기 위한 코드만을 작성할 수 있도록 해

apollo graphql vscode extension 설치함..한 번 fetching한 데이터를 다시 불러올 경우 loading이 발생하지 않는다\-> apollo의 캐싱 기능으로 처음에 in memory cache 설정을 해줬기 때문

프로퍼티 속성에는 이름과 값 말고도writerble, enumerable, configureable이 있다writerble: 프로퍼티 값의 변경 가능 여부enumerable: 프로퍼티가 열거될 수 있는지 여부configurable: wtiterble, enumerabl

Global Style props로 style

실행 가능한 코드가 실행되기 위해 필요한 환경 자바스크립트 엔진에 의해 관리되고자바스크립트 V8엔진은 C++로 작성되어있다변수, thisValue, 함수 선언, 스코프와 같은 실행에 필요한 정보를 담고있다다음의 3가지 객체로 이루어짐변수매개변수(parameter)와 인

cmd + shift + , 를 통해 defaultSettings.json에 들어가서 eslint를 검색하면eslint.probe가 나온다여기서 어떤 종류의 파일에 eslint를 적용할지 설정해주는 것 같다triple에선 js, jsx, tsx만 적용하길 원함vscod

자바스크립트는 싱글 스레드 언어다자바스크립트 엔진의 이벤트 루프를 통해 비동기 작업이 가능스레드는 어떠한 프로그램이 실행되는 작업을 말한다.싱글 스레드는 한 번에 하나의 작업만 수행할 수 있으며, 멀티 스레드는 한 번에 여러 개의 작업을 수행할 수 있다.메모리 힙: 메

attrs 속성에서 props를 받아올 때는 정의된 이름을 바로 사용일반 css 속성에서 props를 받아올 때는 props를 받아서 props.이름 으로 사용

https://parkgang.github.io/blog/2021/05/06/using-recoil-in-nextjs/

리팩토링READMEheroku자바스크립트: jsconfig.json타입스크립트: tsconfig.jsonbaseUrl을 src 폴더 로 설정

heroku 배포..Steam It과 유사한 블록체인 스마트 컨트랙트 블로그 프로젝트모든 사용자는 글 읽기, 회원 가입 가능회원은 글작성, 댓글 작성, 글과 댓글에 투표를 할 수 있다사용자가 글을 작성할 수 있고 글 작성 시 보상으로 토큰을 받을 수 있다일정 기간동안

순수 함수를 이용해 사이드 이펙트를 줄이고 문제를 어떻게 해결할 것인가 보다 해결하는 것에 자체에 집중하는 프로그래밍 패러다임함수형 프로그래밍 언어로 설계된 클로저,스칼라,하스켈 등의 언어가 있고, 자바스크립트,코틀린,파이썬 등에도 최근 버전에 함수형 프로그래밍 문법이

클로저..렉시컬 스코프를 통해 push 내부의 함수에서 i가 for에서 정의한 var i를 참조하고 있어아래 for of문에서 i의 값을 계속 사용할 수 있다하지만 for of 문에서 i를 사용할 때는 이미 i가 9까지 사용되고i++로 후위 증감 연산자가 작동하면서10

방식 : 클라이언트 브라우저에서 앱 렌더링을 진행합니다. HTML, JS, CSS 파일을 모두 다운로드 한 뒤에 뷰가 구성됩니다.단점 : 1) 어플리케이션이 커질수록 구동시간이 느려집니다. 초기로딩 느림. 2) SEO에 취약합니다. 초기 JS 파일을

useRef는 DOM 조작에만 사용되는 것이 아니다자바스크립트 객체로 사용 가능하다여기서 current는 useRef 객체의 프로퍼티가 된다이렇게 사용한다면 input 컴포넌트에 useState를 사용하지 않고 값을 관리하고, 심지어 재렌더링이 일어나지 않는 장점도 있

외부 함수에서 this를 정의하지 않으면클로저는 외부함수의 this에 접근할 수 없다\-> 내부 함수의 경우에도 전역 변수를 카리키는 this,,?this는 변수가 아니라 키워드이다arguments는 키워드가 아니지만 모든 함수 호출에자동으로 선언된다클로저는 자신만의

https://mui.com/Material UIcss 프레임워크로 매테리얼 디자인 패러다임을 적용하여 만들어진 UI 인터페이스를 만들 수 있다MUI는 emotion을 기반으로 만들어졌기 때문에 설치 시 emotion을 함께 설치해야한다그렇기 때문에 추가적인

json 파일을 사용하여 간단한 시뮬레이션을 위한 REST API Mock server를 구축할 수 있는 툴이다db.jsondb.json은 데이터 베이스 역할을 하는 json 파일이다배열을 가진 프로퍼티의 이름이 라우터가 되고 id가 key가 되는 느낌이다json-se

프로젝트 폴더 내부에 있는 이미지만 사용해봐서 적잖이 당황스러운 next.config.json에추가해줬다https:// 를 포함하면 안된다 무슨 일이야..https://github.com/vercel/next.js/blob/canary/examples

모바일 환경에서 실행되는 앱을 데스크탑 환경에서 개발하고자 할 때 쓰는 플랫폼JavaScript, HTML, CSS 같은 웹 기술로 네이티브 앱을 만들 수 있기 때문에 웹 개발자가 쉽게 앱을 개발할 수 있다electron.js + next.js리액트로 SSR을 지원하는

Next.js 관련 코드는 renderer 폴더 안에 있다main/helpers: Electron의 BrowserWindow 기능을 사용하여 데스크탑 애플리케이션 창을 생성하는 createWindow 모듈을 내보낸다 초기 크기 및 위치와 같은 기본 앱 창 옵션을

https://blog.logrocket.com/building-app-next-js-electron/(여기선 모달 같음)이것을 사용하는 것은 매우 드물지만 프로그래밍 방식으로 새 창을 만드는 것도 가능 일반적으로 Electron에서 BrowserWindow를

https://blog.logrocket.com/building-app-next-js-electron/브라우저 기반 API와 Electron API도 원활하게 작동하며 모든 페이지로 직접 가져올 수 있다 아래와 같은 페이지에서 활용할 수 있는 브라우저 알림 A

https://kdydesign.github.io/2020/12/23/electron-ipc-communication/IPC는 electron에서 사용되는 프로세스간 통신 기술 모듈이다Vue에서의 Event Bus와 Props 개념이라는데..React의 Pro

화살표 함수는 this와 arguments 객체가 없다유사배열객체로 호출 시 전달되는 인자들이 배열 형태로 전달된다length 프로퍼티와callee 프로퍼티callee 프로퍼티는 현재 실행중인 함수의 참조값을 의미한다화살표 함수의 this는 일반 함수와 달리 함수 선언

이벤트의 전파 방식인 버블링을 이용하여비슷한 방식으로 여러 요소를 다뤄야 할 때,엘리먼트 각각에 이벤트 핸들러를 할당하지 않고공통되는 부모에 이벤트 핸들러를 할당하여 관리하는 방식버블링을 막기 위해서 event.stopPropagation()을 사용하지 말라는 것은st

Cross Sidt Scripting - XSSXSS 공격은 상대방 브라우저에 스크립트를 실행되도록 해 사용자의 세션을 가로채거나,웹사이트를 변조하거나 하는 등의 피싱 공격을 하는 행위를 말한다스크립트 언어와 취약한 코드를 공격 대상으로 한다킹의 주요 목적은 사용자의

https://lxxyeon.tistory.com/85서로 다른 컴퓨터 간에 통신을 하기 위한 규약웹 브라우저가 서버와 내용을 주고받을 때 사용할 규칙 이름.웹 페이지의 주소를 표현할 때는 http(Hyper Text Transfer Protocol) or h

현재는 next.js를 사용중이기 때문에 next-env.d.ts에 코드를 추가해주어 해결{추가할 파일명}.d.ts 파일을 만들어서typescript 트랜스파일러가 처리할 수 있도록tsconfig.json에 {추가할 파일명}.d.ts파일을 추가해준다https:

하나의 객체에서 두 개의 부모를 갖는 상속자바, 자바스크립트에서는 다중 상속을 지원하지 않는다https://readystory.tistory.com/112위와 같이 다중 상속을 하게되면 Father와 Mother는Person이 가지고 있는 변수나 메소드를 함께

nextron.js nextron.js 에서 평소처럼 .env의 내용을 불러왔다 javascript가 중복 실행되었다는 메시지와 함께 오류 메시지가 뜬다.. 저기서 포인트는 Error: secretOrPrivateKey must have a value https:/

ipc 통신에서 jwt 토큰 사용 하자 jwt

https://poiemaweb.com/nodejs-socketioHTML5의 web socket은 유용한 기술이지만오래된 브라우저의 경우엔 지원하지 않을 수 있다WebSocket은 사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성하는 HTML5

사용하지 않았을 때,에러 발생했다화면 깜빡임 + 렌더링 500에러는 1\. 서버 사용량의 폭주로 인해 서비스가 일시적으로 중단된 것 또는 서버의 이상에 의한 문제2\. 서버 스크립트의 오류라는데 call stack() 문제가 있는걸 봐서는 뭔가 렌더링이 무한 발생한 것

emit을 개인으로 변경

next.js + electronelectron은 데스크탑 앱을 구현하는데 사용되는node + chromium 기반의 프레임워크node 기반으로 동작하기 때문에 자바스크립트 진영의 것들을 사용하기 좋다nextron은 한국어 자료가 거의 없어서 당황스러웠지만electro

React Native는 모바일 앱을 만는 것이기 때문에각각의 모바일 환경에 해당하는 모든 소프트웨어를 설치해야 한다안드로이드 스튜디오, Java, SDK 등Xcode 등설치를 하지 않고 코드를 작성할 수 있는 도구도 있다\-> 프로토 타입만 작성 가능앱에서는 자바스크

웹 브라우저에서 React 어플리케이션을 만들 수 있게 해주는 온라인 코드 에디터웹이라 아이패드 등으로도 작성 가능https://snack.expo.dev로그인을 하거나 Expo Go 로 코드에 대한 QR코드를 스캔하면 된다React Native는 웹이 아니기

Typescrypt만 따로 설치해 본 것은 처음...ts 파일은 .js로 컴파일(트랜스 파일) 후 사용해야한다이거 가능할까 싶은 과제가 들어왔다일단은 구글링으로..typescript만을 사용하여 구현

벽에 공을 튕기는건 쉬웠지만여러 공을 생성하여 서로 부딛히는 공을 구현하기가 쉽지 않았다처음에는 x, y 좌표에 공의 부피 정도 되는 좌표를 이용하여 시도해 보았으나조건문도 너무 많아지고, 제대로 작동하기 쉽지 않았다연산량 자체도 많아질 수 밖에 없다상하좌우만 하더라도

수학과 물리학.. 모른다정석대로라면 삼각함수와 에너지 보존 등의 것을 구해서 해야겠지만속도는 변하지 않는 설정으로 물리량을 무시하기 때문에상대적으로 간단히..? 각도에 대해서만 구해보기로 했다한 방향으로 움직이는 점이 다른 각도로 날아오는 힘에 부딛힌다는 컨셉으로 구해

진행되고 있는 프로젝트에 웹팩과 바벨 설정을 해보았다자바스크립트 모듈 번들러webpack-dev-server는 애플리케이션을 빠르게 개발하는 데 사용할 수 있도록 개발 시에 잠시 사용하는 클라이언트 서버자바스크립트 트랜스파일러

공의 경로가 상대 공의 부피에 닿으면 공이 겹쳐지면서 각이 서로 다른 방향으로 갈 때 까지 브루스를 추는 현상 발생하였다..조금 어색하지만 해당 상황에는 서로 현재 날아오던 방향과 반대 방향의 각도로 날아가기로 했다해당 공의 새로 측정된 경로에 상대 공이 있을 경우두

프로젝트 코드 리팩토링 필요조금 더 규모가 큰 프로젝트 경험 필요사용한 라이브러리에 대한 특징과 사용 이유 명확히 정리JS, TS, HTTP 통신에 대해 지속적 학습자바스크립트 완벽 가이드타입스크립트 프로그래밍HTTP 네트워크프로젝트와 함께 병행나쁘지 않았다여러 것들을

플라스크와 리액트를 이용하여 웹 사이트를 구현할 것이다파이썬으로 서버를 구현할 수 있는 라이브러리실무에서는 주로 장고 프레임워크로 구성하는 것 같지만필요한 부분만 작성할 수 있는 플라스크 쓸 것이다나는 미드필더니까..아마 디비는 SQL Lite가 내장되어 있는 것으로.

나는 타입스크립트를 사용할거니까 2번째 것 선택기본 yarn으로 설치된다 (--npm 옵션으로 npm 설치 가능)username / email 로 로그인 가능휴대폰의 Expo Go와 local cli에서 로그인 되어있다면 연결된다근데 나는 왜 안될까..ㅠ

바벨 설정@babel/preset-env : ES5+ 를 변환할 때 사용한다.@babel/preset-react : React 를 변환할 때 사용한다.@babel/preset-typescript : Typescript 를 변환할 때 사용한다.@babel/plugin-t

next.js 를 사용하면 파일명으로 자동 라우팅 되어 편했는데..간만에 router 설정 해보자

navbar 등 모든 페이지에서 사용되는 컴포넌트의 경우 react-router-dom의 기능을 이용해 쉽게 Layout을 구성할 수 있다해당 레이아웃을 사용할 Route를 감싸는 Route를 작성Layout으로 사용할 컴포넌트를 불러와 element에 등록한다Layo

간만에 알고리즘 비슷한 무언가를 풀어보았다각각 깊이가 다른 object, object에 대한 참조를 작성한 문자열두 개의 인자가 주어졌을 때해당 깊이에 해당하는 값을 리턴하는 함수를 작성다른 두 분과 코드 리뷰를 하게될지도..

프론트엔드에서의 전역 데이터 관리란컴포넌트의 상태 데이터를 하나의 전역 스토어에서 관리하는 것을 말한다props drilling으로 코드가 굉장히 지저분해지고, 귀찮아지고, 복잡해 질 수 있다하나의 상태 업데이트로 같은 상태를 props로 전달받은 모든 컴포넌트에서 재

React 배우고 css를 어떻게 적용해야할지 몰라 무작정 배웠던 그것덕분에 scss문법을 배울 수 있었다Styled-Components는css in js 문법으로기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지

react datePicker를 사용하여 달력의 날짜를 클릭하면해당 날짜의 다이어리 페이지로 넘어가도록 할 것이다데이트 피커 설치

React Native에서 기본으로 제공하는 Core Components에도Status Bar가 존재한다과거에는 더 많은 컴포넌트가 Core에 존재했다React Native는 더이상 네비게이션, Date Picker 등을 지원하지 않는다가장 코어 기능만 제외하고 지원

이미 빌드된 프로젝트를 native로 실행하는..https://stackoverflow.com/questions/29108172/how-do-i-fix-the-xcrun-unable-to-find-simctl-errorxcode - Preferences - L

안드로이드 개발환경을 위해서는 안드로이드 스튜디오가 설치되어 있어야 한다ios와 마찬가지로node와 watchman 설치 후자바가 설치되는듯..안드로이드 스튜디오에서 기본 설정으로 New Project를 만들고Device Manager - Create Device -

자바스크립트는 이벤트 전파는root(Window) -> target -> root 의 과정을 거친다캡처링: 처음 root -> target으로 내려오는 이벤트 전파 과정target: 해당 이벤트가 발생한 html 태그에서 가장 깊은 영역의 엘리먼트를 target이라고

쓰기 권한이 없는? package 설치 명령어package-lock.json에 정의된 패키지 목록만 설치한다 \-> package-lock.json 파일이 있어야만 실행 가능package.json과 lock.json의 버전이 다를 경우 에러 발생node_modules

웹에서는 console.log()를 웹의 개발자 도구 console에서 확인 하여 쉽게 디버깅을 할 수 있었다React Native 에뮬레이터에서 개발자 도구를 보기 위해서는안드로이드: Command + M아이폰: Command + Ddebug with chrome을

React Native 0.60 이하의 버전인 경우

useRef() 훅을 이용하여 이전 값을 기억하는 변수를 리턴하는 custom hook타입스크립트 공부 좀 해야겠다..

프로젝트에서 가장 중요한 것은주어진 자원에 맞는 범위 설정이다..ec2 centos 환경에서 작업했다엔진x: 웹 서버 소프트웨어로, 가벼움과 높은 성능을 목표로 한다. 웹 서버, 리버스 프록시 및 메일 프록시 기능을 가진다. - 위키백과webpack에 설정해놓은 scr

위아래로 길게 표시되는 목록을 List View로 관리할 수 있는 것 같다React Native의 List View는변경될 수 있는 긴 리스트 목록에 적합화면에 표시되고 있는 요소만 렌더링 한다List View는 기본적으로 2개의 속성이 필요하다1\. List 목록으로

이미지 경로 폴더를 어느 위치에 배치하면 좋은지..?웬만하면 public을 사용하지 않는 편이 좋다webpack에 의해 관리되지 않는 폴더public폴더로 접근하기 위해서는 PUBLIC_URL 환경변수를 이용해야 함경로가 잘못되었을 경우 컴파일 단계에서 잡지 못하고 접

web의 경우는 네비게이션이 link 주소를 통해 다른 화면으로 보내 각 화면에새로운 네비게이션이 존재하는 것, 혹은 layout등으로 네비게이션 자체를 재활용 하기도 한다mobile의 경우는 네비게이션으로 컴포넌트를 전달하고 컴포넌트 내부에 또 네비게이션이 있기 때문

git에서 cache를 삭제해야 하는 것 같다git add, commit push

최소한의 SEO를 위해 meta 태그를 지원하는 라이브러리react-helmet-async일단은 기본형으로..사이트를 입장하면 각 페이지별로 다른 title을 볼 수 있다. 하지만 해당 사이트에 접속하지 않는 다면?? og tags들은 여전히 index.html에 나온

우분투에서 얀 설치 후 yarn install을 하니No such file or directory: 'install'install 이라는 명령어를 폴더명으로 인식하는 경우 발생아마 따로 설정 없이 sudo apt-get install yarn 으로 바로 설치해서 그런

class 선택자를 이용하여 css를 수정할 수 있다현재의 경우 App.css에서 수정하였는데따로 module화를 해서 관리해주면 어떨까 싶다인라인 스타일로 작성하는 것이 꽤나.. 불편하다가독성도 좀 떨어지고특히나 before, after 태그를 이용하는 경우3개의 엘

날짜를 더할 땐 getDate()를 해서 + 1 한 값을 setDate() 한다getDate()에 + 1 을 하면 getTime()을 한 것과 같이 number 형식으로 변경된다getDate(): 주어진 날짜의 현지 시간 기준 일을 반환합니다getTime(): 표준시에

commit을 하나 건너 뛰고 새로운 버전을 생성한 경우정방향이 아니기 때문에 pull, push 모두 불가능하게 된다건너 뛰어진 branch에서 앞으로 간 commit에 대해 pull을 하여버전통합 통합된 버전 push정방향 문제가 일어난 branch에서 pull

styled-componets css in js로 react의 state를 직접 전달하여 css를 직접 조작할 수 있다는 장점이 있다

유니온 타입의 종류가 많아질수록 가독성이 떨어진다enum 타입은 객체 처럼 작성하여 타입 열거를 할 수 있다Tree-Shaking이 되지 않는다 - enum 타입은 자바스크립트에 존재하지 않는 문법이기 떄문에 즉시 실행 함수로 변환되고 즉시 실행 함수는 번들러에서 코드

이벤트 루프의 매크로 태스크 큐에 들어가는 비동기 통신 라이브러리Promise API를 활용하여 HTTP 통신(REST)을 지원한다https://velog.io/@devjooj/React-axios-%EC%99%80-fecth-%EC%96%B4%EB%96%A4

객체는 변수 메모리 공간에 객체가 있는 메모리 공간의 주소를 담고 있다\-> 참조에 의한 호출, 얕은 비교를 함변수를 공유하지 않는 한 모든 객체는 새로운 객체다객체의 특징 때문에 state로 관리하면 다음과 같은 문제를 겪는다불변성을 지키기 위해 state에 새로운

tailwind css에서 className에 브라켓이 씌워져있으면 자동완성이 되지 않는다..

이전에는 바깥 영역에 click 이벤트를 주어서범용적으로 사용하려면 wrapper 영역을 만들어서wrapper에 click 이벤트를 걸어야 한다useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다.useRef는 DOM에 직접 접근하거

immer, ummutable.js 라이브러리 알아보기\-> 불변성을 위해 사용, 비용을 줄여주는 것 같다Recoil은 유향 그래프(directed graph) 형태로 구성된다. Recoil에서 데이터의 소스인 atom은 고유한 문자열 키를 가지는데, Recoil은 a

React.lazy vs lodable-component 회사는 개좋다나만 잘하면 된다없는 시간을 쪼개서 글을 작성하는 꾸준함 나쁘지 않았다내 작업 시간보다 함께 성장하는 쪽에 비중을 많이 두었다여가 시간에 코드를 치는 일이 거의 없다주 5줄 이상 코드를 작성하는 목표

const enum은 불안전한 접근을 막고역방향 찾기를 지원하지 않는다const enum은 아무런 자바스크립트 코드도 생성하지 않으며대신 필요한 곳에 열거형 멤버의 값을 채워넣는다다른 사람의 타입스크립트 코드에 정의된 const enum을 가져왔을 때채워넣기 기능 때문

리터럴은 데이터(값) 그 자체

react-nativeiOS version 11 이상에서 적용되는 View 영역 노치 등 하드웨어 장치의 화면 경계 내에서 콘텐츠를 렌더링 하는 것react-native-safe-area-contextroot(App.tsx)에 추가해야하는 요소react-native-s

react-hook-form

다른 브랜치의 커밋 하나를 pick 해서 현재 브랜치로 가져온다같은 내용을 담은 커밋을 여러 곳에서 가지게 되므로 신중히 사용해야 한다rebase는 현재 브랜치 내에서 다른 커밋을 가져오므로cherry-pick과 비슷하게 하려면 merge 후 rebase를 해야한다gi

Username, Password를 입력하는 깃허브 인증의 경우password에 access token을 입력하도록 정책이 변경되었다profile -> Settings -> Developer settings -> Personal access tokens -> Gener

기존 foundation에서semi: \[warn, never] 를semi: \[warn, always] 로 변경bracketSpacing: true 로 변경

react native에서 env 사용을 위해 라이브러리를.. react-native-dotenv

react-native-dotenv .babelrc .env

안드로이드에서는 new Date('2022-10-06') 형식을 계산하지 못한다new Date(date.setHour(-15, 0, 0, 0)) 형식으로 변경하여 ios, android 모두 호환될 수 있도록 변경 하였으나\-15를 줘야하는 것이 수상하다

react native의 기본 설정은input 창을 눌렀을 때, 키보드가 올라오는 영역에 input창이 있으면키보드가 위를 덮어서 사라져버린다KeyboardAvoidingView 태그를 이용하면 키보드가 올라오는 영역에 대해 유동적인 대응이 가능하고KeyboardAvo

react native의 이미지는 base64 incoding이기 때문에공백 문자를 인식하지 못하고 대문자의 경우 간헐적으로 인식하지 못한다svg 파일 인식 못함

타입스크립트에서 enum을 사용하면 자바스크립트에는 없는 타입이기 때문에꽤 긴 즉시 실행 함수에 대한 코드가 생성되고, tree-shaking이 되지 않는다const enum을 사용하면 역방향 찾기를 지원하지 않아자바스크립트 객체와 비슷해지고enum에 대한 자바스크립트

스크롤 영역을 지정하는 react-native 태그높이를 따로 안먹고 지정된 영역에 풀로 차는 것 같다.. 추측ScrollView에 ref를 주면 ref.current.scrollToEnd()를 사용할 수 있다ScrollView의 onContentSizeChange 속

react native 는 react 와 다른 컴포넌트를 사용하게 된다컴포넌트를 읽을 때 가장 마지막 줄 부터 확인한다export를 어떻게 했는지 부터 확인 후 올라간다react native 는 기본 css, styleSheet를 지원한다하지만 css도 웹과 조금 다르

react native 의 css에는 box-sizing 속성이 없다대신 모든 영역 외부 크기에 대해서 기본적으로 border-box 와 같이 동작한다하지만 내부 css는 content-box 처럼 동작하는 것 같다위와 같이 바깥 View 영역에 height를 주고 T

signing 에 Team을 등록하지 않아서 발생하는 에러project와 Pods 두 곳에 등록해줘야 하는 것 같다TARGETS -> 프로젝트 -> Signing & Capabliities -> TeamPROJECT -> Pods -> React-Core-Access

react native에서 키보드가 올라온 영역의 높이를 자동으로 계산하여 줄어드는 영역을 만들 때 사용KeyboardAvoidingView의 높이는 계산 후 줄어들고 남을 영역을 상단으로부터 계산한 값이다input이 있는 모든 영역에 대해 키보드를 사용할 것이니 템플

안드로이드 기기 기본 네비게이션 바는 에뮬레이터 내부의 기기 설정에서 찾을 수 있다..이거..setting - system - gesture - system navigation

리액트 디자인 패턴에 대한 견해하나의 기능적 단위로 재사용이 가능한 독립적 모듈을 뜻한다어떻게 하는지 항상 고민이다..돌아가는 코드를 짠다재사용될 코드를 분리기능별 분리가독성을 저해하는 요소 수정Inversion of Control (IoC): 유저에게 주어지는 유연성

Children React, Typescript 환경에서 컴포넌트에 자식 컴포넌트를 props로 정의할 때 다른 props 도 함께 넘겨 받아야 한다면 그냥

Typescript를 사용한다면babel과 함께 tsconfig도 설정해줘야 한다npm install -D babel-plugin-module-resolverbaseUrl을 src로 설정 후 paths를 @로 주었기 때문에@를 입력하면 src를 기준으로 경로를 탐색한다

react native에서 키보드 감지를 하려면Keyboard 태그에 addEventListener()를 주면 된다

react-native의 TextInput은 기본적으로 text를 받는 inputpassword를 받기 위해서는 secureTextEntry 속성을 사용해야 한다기본으로 false 값을 같는다하지만secureTextEntry={false}를 명시적으로 주게되면 기기에서

동적 크롤링이 가능한 라이브러리 크롤링: 웹문서의 정보를 가져오는 것 (html 태그를 탐색하여 가져옴)동적 크롤링: 클릭, input 입력 등 사용자가 동작을 일으키는 것 처럼 작동할 수 있는 크롤링정적 크롤링: 웹 페이지 주소에 따라 처음 뜨는 페이지에 있는 정보들

react native 에서 css 애니메이션을 줄 수 있는 ViewfadeNum 의 Animation.Value 에는 숫자만 들어갈 수 있다\-> 퍼센트로 사용하기 위해서는 String 변환 후 + '%'로 사용할 수 있을 것 같다

react native 에서 React Navigation 사용시 nesting navigation(중첩 내비게이션)을 사용한다면 tab bar가 display: 'none' 상태일 경우중첩된 네비게이션 끼리의 연결이 끊긴다상위 내비게이터가 display none 이고

키보드가 올라오면 전체 화면 크기에서 키보드가 차지하는 영역의 비율만큼 현재 영역의 비율을 자동으로 줄여주는 모듈이다따라서 화면을 모두 차지하는 가장 상위 컴포넌트의 가장 큰 영역에 작성해야 쉽게 사용할 수 있다옵션에 behavior - height, padding,

Keyboard 모듈 addEventListener()의 이벤트 객체 내부 endCoordinates.height를 통해 키보드의 높이를 구할 수 있다addEventListener()로 등록해야 이벤트 객체를 볼 수 있기 때문에 사용자가 키보드를 사용하기 전 까지는 키

React Navigation 에서 navigation 이동 및 변경해야할 경우 navigation.dispatch()에 StackActions 의 메소드를 조합하여 할 수 있다StackActions 의 메소드를 사용하여 navigation stack 에서의 현재 위치

한동안 안쓰다보니 잊고있었다input 영역의 event를 관리하기 위해서는 form 의 이벤트 핸들러를 변경해줘야 한다form에 onSubmit을 주고 왜 바로 반영 안되는지 고민했다니..최근 회사 지원자 중에도 이런 분이 계셨었는데 코드를 보고 바로 인지하지 못했었다

react-hook-form 의 useForm 기본 설정은 shouldFocusError 값이 true 이다onChange 와 함께 shouldFocusError: true 를 사용한다면 매 입력 시 마다 발생하는 유효성 체크 메시지가 있는 input 창으로 포커스가

password confirm password confirm은 두 가지 방식으로 진행 할 수 있다

react native 에서 Keyboard 에 addEventListener() 를 주어 키보드의 높이를 구하여 휴대폰 모델에 관계 없이 동적으로 사용하고 싶었는데useEffect() 를 사용하여 이벤트를 등록하면 원하는 결과를 얻기 힘들었다addEventListen

onLayout 속성의 nativeEvent 를 통해 요소의 높이를 알 수 있다

파일 import 시 파일의 확장자를 적지 않을 경우에 error를 발생시킨다확장자별 작동을 지정할 수 있다 never로 작성 시 사용하지 않겠다는 뜻웹에서는 잘 작동하는데react native 에서 유독 .ts 확장자를 가진 파일에 대해서만해당 옵션이 먹지 않아서 그

react native 에는 빌트인 모듈로 Modal 이 구현되어 있다prop으로 visible: boolean 을 주어 on / off 가능..transparent 로 투명도 조절도 가능하다position 은 absolute 처럼 동작함..modal 내부에 safeA

하위 영역을 터치가 가능하도록 만들어주는..버튼은 아닌데 버튼처럼 동작하도록 할 때 사용activeOpacity깜빡임을 조절하는 기능으로 보통 0.8hitSlop뷰 영역에 추가로 터치 영역을 확장해준다

백그라운드 이미지를 넣고 싶을 때 사용하는 react native 태그태그 내부에 children 컴포넌트를 작성하면 되는데내부에 들어갈 것이 많다면 갑자기 곤란해진다..분리하고 싶지 않음에도 백그라운드 이미지 때문에 컴포넌트를 분리해야하는 경우도 생김..분리하는게 맞

react native의 flex는 웹 css의 display: flex 가 아니다웹과 비슷하지만 조금 다른..?react native 에는 inline-box, grid 등이 없고 화면이 모두 flex box로 이루어져 있다flex는 숫자를 값으로 갖는데이 것은 현재

callback - promise - async/await 발전된 자바스크립트 비동기 처리 문법async 로 지정한 함수는 항상 promise 를 반환한다명시적으로 promise를 반환할 수 있지만 그러지 않아도 결과는 같다await 는 async 로 지정된 함수 내부

react native 에서 이미지는react native 의 FormData() 모듈을 사용하면 쉽게 받을 수 있다ajax 로 json 구조의 데이터를 전송할 수 있는 객체로이미지를 base64, buffer, 이진 형식으로 전송할 수 있다ajax 는 기본적으로 페이

react native 는 addEventListener() 가 없다때문에 바깥 영역 클릭 시 닫는 이벤트를 화면을 가득 차지하는 컴포넌트에 onPress를 주는 방식으로 구현하는 것 같다..영역을 구부려서 부채꼴로 만들 수 있을까 했는데absolute 인 것을 간과했

react native 에서 파이어베이스를 사용하기 쉽도록 도와준다https://firebase.google.com/?hl=ko시작하기 - 프로젝트명 - 계속 - 프로젝트 만들기콘솔로 이동 - ios 추가XCode - 프로젝트 명 - Bundle Identif

리액트 네이티브 프로젝트가 있다는 가정 하에 진행구글 계정 로그인 후생성 시 패키지 이름이android/app/src/main/AndroidManifest.xml 파일 내부첫번째 태그 내의 package 속성의 값과 동일해야 한다디버그 서명 인증서 SHA-1항목의 경

firebase 안드로이드 연동은 정말 쉽지만연동이 잘 된건지 모르겠다..설정이 복잡하고 특히 공식문서에 m1 이슈에 대한 부분이 적혀있지 않은 것 같다앱 등록 시 iOS 번들 ID 입력 란에XCode - 프로젝트 명 - General - Bundle Identifie

react native 에서 .env 파일을 변경했다면error code 65 와 같이 derived data 를 지워줘야 한다이대로 진행

https://developer.apple.com/의 계정 탭으로 가서로그인 후가운데 인증서, 식별자 및 프로파일에서 키(영문) 으로 접근Keys 의 + 버튼을 클릭하여 키 생성Key Name 입력 후 Apple Push Notifications service

http 통신의 status 코드가 0일 경우는 다음과 같다접근에 자체에 실패한 경우 (CORS error 포함)호출 시간 지연iOShttp 통신 status code가 0 인게 의심스러워서다른 곳에서 호출을 해보았더니 모두 성공하였다iOS 만 status code가

react native 에서의 포지션은 웹과 조금 다르게 동작하는 것으로 보인다부모에 relative 를 주고 자식에 absolute 를 주더라도 해당 위치에서의 포지션 값을 구하지 않는다position 속성을 을 주지 않더라도 left, right, bottom, t

useRef를 이용하여 원하는 영역 요소에 ref 속성을 준 후 ref.current.measureInWindow(( x, y, width, height ) ⇒ {})react native 요소의 타입은 이름과 같다View 의 타입은 View

쓰지 않는 import 문을 정리하거나import 문을 정렬할 수 있다정렬 기준은 찾아봐야할듯.. 변경 가능한지도webstorm의 settings(command + ,) 로 진입 후Tools (도구) - Actions on Save (저장 시 액션) 에서Optimize

중복인 것 같긴 하지만..

root 네비게이션에 바로 속하는 페이지를 만들 경우route.routes.tsxroutes (types).tsroot 내부 아무 페이지에서onPress 이벤트를 주어 네비게이션 이동

api get()을 해오는 함수 이전에 setState()가 작성되어있는 것을바로 파악하지 못했다\-> get()을 완료하기 이전에 setState()를 통해 화면이 재렌더링 되는 이슈get() 의 response를 받아오는 영역에 set을 하여 props로 자녀 컴포

https://firebase.google.com/docs/web/setup?authuser=0\[https://firebase.google.com/docs/web/learn-more?authuser=0알림 보내는 api end point https&

생각보다 너무 다 바뀌어서 쉽지 않은..pymysql 장점은 sql 문법 그대로 쓴다는 점인 것 같다

경량화 컨테이너 기반의 가상화 플랫폼으로리눅스 응용 프로그램들을 프로세스 격리 기술을 사용해 실행, 관리한다컨테이너란 소프트웨어를 실행하는 모든 것(코드, 런타임, 시스템 도구, 라이브러리 등)을 파일 시스템 안에 감싸 어떤 환경에서든 실행할 수 있도록 돕는다컨테이너는

설치 시 Xcode 나 Android Studio 가 설치되어 있지 않다면그냥 구글에서 지원하는 크로스 플랫폼 프레임워크로네이티브와 비슷한 수준의 속도를 보장한다플러터만을 위해 개발된 다트 언어를 사용한다는 단점이 있다자바스크립트를 대체하려 시도해보았지만자바스크립트는

React는 기본적으로 .env 설정이 되어있다development 버전과production 버전으로 설정이 구분되어 있다npm run start 시 우선순위.env.development.local > .env.development > .env.local > .envn

https://velog.io/@im_ssu/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EA%B5%AC%EA%B8%80-%EC%9D%B8%EC%95%B1-%EA%B2%B0%EC%A0%9C-V3https://de

git reset HEADgit reset HEAD^ ^의 개수에 따라 취소될 commit 수가 달라진다git reset --merge ORIG_HEADgit reset --hard ORIG_HEAD

React에서 배열을 엘리먼트 리스트로 만드는 방식은자바스크립트에서와 거의 동일하다엘리먼트 모음을 만들고 중괄호를 이용하여 JSX에 포함시킬 수 있다위 코드는 각 항목에 key 를 넣어야 한다는 경고가 표시된다key 는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한

조건부 렌더링

html 폼 엘리먼트는 엘리먼트 자체가 내부 상태를 가지기 때문에React의 다른 DOM 엘리먼트와 다르게 동작한다기본 폼 형태리액트에서 위와 같은 동작을 원한다면 그대로 사용할 수 있다하지만 대부분의 경우 자바스크립트 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한

동일한 데이터에 대한 변경 사항을 여러 컴포넌트에 반영해야 할 경우가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋다자식에는 setState()를 props로 전달하여 상태를 조상으로 끌어올릴 수 있도록 하고조상의 변경되는 state를 props로 전달 받아

UI에 최적화 되어있다생산성모든 플랫폼에서 빠르다다트는 2개의 컴파일러를 가지고 있다web과 Native자바스크립트로 컴파일 iOS, Android, Windows, Linux, Mac 으로 컴파일사물 인터넷도 가능거의 모든 곳에서 사용 가능하다Just In Time:

iOS 의 테스트 플라이트와 같이 앱 출시 전 테스트를 할 수 있는 서비스파이어베이스에서 제공한다키 생성 을 새로 하고 apk 파일 생성 도 새로 한 후https://firebase.google.com/docs/app-distribution파이어베이스 콘솔에서

안드로이드 에뮬레이터에서는 Google Play 에 등록된 아이템을 확인할 수 없다apk 를 통해서 실 기기에 연결하니 확인 가능..수익 창출 등록을 순서대로 해보자..https://www.doabledanny.com/react-native-iap-exampl

main/AndroidManifest.xml또는res/xml/network_security_config.xmlmain/AndroidManifest.xml

다크모드 차단

react native에서 안드로이드는 라이브러리를 추가해야 gif가 동작한다페이스북에서 만든 fresco 라이브러리를 추가app/build.gradle

metro server를 사용하고 있는 local 과 디바이스와 맥이 동일한 네트워크 dhcp를 공유해야 된다(같은 wifi 로 연결되어 있어야 한다)

react-native-iap 의 iOS method 를 이용하여 가져온다validateReceiptIos() 메도스에receiptBody 를 형식 그대로 넘겨줘야 함..

인앱 결제 시 finishTransaction() 을 해주지 않아 계속 이전 구매를 완료하지 못하고 있었다모바일 기기에서 사용자가 결제 과정을 모두 마치고 구매 승인 까지 완료하면 해당 결제의 완료 여부, 거래에 대한 정보를 currentPurchase 로 보낸다이 응

지금까지 react-native-svg 라이브러리를 사용했는데svg 파일을 바로 import 하여 사용할 수 있다

name 형식을 잘 맞춰줘야 한다

JS 스터디를 시작하려는데 var 키워드로 선언된 변수에 대해 정말로 학습해야 하는가에 대한 이야기를 나누었다물론 나는 그냥 책에서 var 관련 내용을 모두 삭제해도 된다는 입장..프론트 코드가 23년에도 var 로 작성되어 있으면그냥 탈주하는게 답 아닐까 라는 생각을

FlatList data type flat list 에 전달될 renderItem 의 데이터 타입은 item 이라는 프로퍼티 키를 가진 객체 형태가 되어야 한다 refreshControl ScrollView 나 FlatList 등의 리스트 구조를 갖는 컴포넌트에는 r

interceptor axios 호출에 대해 .then() 또는 .catch() 이전 요청과 응답을 가로챌 수 있다 가로챈 통신에 작업을 추가하여 반복되는 작업에 대해 처리하거나 특정 에러를 걸러낼 수도 있다 데이터를 정제하거나, 주로 로그인 인증에 사용 커스텀 인

react native 의 KeyboardAvoidingViewbehavior padding 속성은iOS 에서 적용되지 않는다안드로이드에서는 1회 적용되지 않고 2회 부터 적용된다..양쪽의 동작을 동일하게 맞추기 위해서behavior 속성을 제거하여 default 값을

공식문서에 안드로이드 10 버전을 쓰거나addjustNoting 을 쓰지 않으면keyboardDidShow, KeyboardDidHide 만 적용된다고 적혀있어OS 가 안드로이드인 경우만 Did 로 주고 iOS 인 경우에는 Will 로 주어 사용한다..iOS 는 Did

...src/AndroidManifest.xml 수정..

font 와 config 파일을 삭제한다고 설정이 지워지는 것은 아니다삭제 후 npx react-native-asset 실행하여clean 해줘야 함..

중첩 네비게이트 생성 방법중 하나로 router 의 children 첫 번째 인자에 index, element: navigate 를 주고두 번째 인자로 navigate 에서 이동할 path 에 대한 element, children 을 줄 수 있다path 에는 query

React Router V6 부터는 useHistory 가 없다고 한다..useHistory 가 useNavigation 으로 변경됨history 라이브러리를 사용하는 방법을 고려했었는데\-1 로 가능..안쓰다보니 다 잊는다

웹스톰에는 코드 스니펫 설정을 기본으로 지원하는 것 같다설정 - 라이브 템플릿 에서 설정확인 및 추가 가능우측 + 버튼으로 추가

React Router Dom V6의 createBrowserRouter 를 사용하여라우터를 사용하면 객체 + 배열 형태로 간편하게 라우터를 생성할 수 있다라우터를 생성하면 네비게이션에 탭에 함께 생기도록 코드를 작성중Outlet 이 작동하지 않는 이슈 발생..중첩 라

큐는 추상 데이터 타입이자 컬렉션으로 선입 선출 구조를 갖는다큐를 구현할 때 배열을 사용해도 크게손해는 아니지만..객체로 구현할 수 있다

push 와 pop 연산을 가진 추상 자료형으로후입 선출의 선형 자료구조후입 선출이므로 그냥 배열을 사용하는 것이 가장 좋을 것 같다

환형 연결 리스트는 단방향 연결 리스트와 같지만마지막 원소의 next 가 head 를 가리키게 된다이중 환형 연결 리스트는 tail 의 next 가 head 를,head의 prev 가 tail 을 가리키게 된다자주 쓰이는지는 모르겠지만...

집합 (set) 은 정렬되지 않은 컬렉션으로 중복이 없는 자료구조다집합 자료 구조는 수학에서의 유한 집합의 개념을 컴퓨터 과학에 적용한 것이다자연수의 집합은 1보다 같거나 큰 정수로 구성된다{1, 2, 3, 4, 5, ...}공집합 (null 집합) 은 {}집합은 수학

딕서녀리와 해시는 유일한 값 (반복되지 않은) 을 저장하기 위한 자료 구조다집합은 원소의 값이 유일한 값이라면딕서녀리(또는 맵) 은 값을 키: 값 형태로 저장하고 키가 중복되지 않은 자료구조다딕셔너리는 맵이라고도 하고 집합은 값이 키, 키 형태지만딕셔너리는 키,값 형태

react-native-svg

react 컴포넌트 foundation 코드를 웹스톰 코드 스니펫으로 작성하여 사용중파일명을 표현식으로 가져오는데 우리는 파일명에 마침표가 들어간다파스칼 케이스로 변경하기위해변수 표현식을 다음과 같이 설정

react native 의 animated.view 에서는 OS 별 스타일이 다르다flexDirection 과 alignItems 를 사용하는 경우 주의가 필요..

ReactNavigation 의 default Theme 는속성이 고정되어 있어 변경하여 쓰는 것이 큰 의미가 없는듯 하다테마에 따른 테마를 따로 만들어서 사용하는 편이 좋아보임

Jotai 는 상태라는 뜻의 일본어로Zustand 를 만든 곳에서 만든 상태 관리 라이브러리Zustand 는 독일어로 상태Zustand 는 Redux를 대체하기 위해Jotai 는 Recoil 을 대체하기 위해 만들었다고 한다Jotai 는 Recoil 과 거의 흡사한데a

CompositeNavigationProp 는서로 다른 레벨의 navigation 을 병합하여 사용하는 것인데같은 레벨의 navigation 이 여러개라면 union 타입을 사용할 수 있다또한 composite 한 type 을 다른 계층의 네비게이션과 중첩으로 comp

Cross-Site Scripting (XSS) 웹에서 가장 기초적인 취약점 공격 방법중 하나로 권한이 없는 사용자가 악의적으로 웹 사이트에 script 를 삽입하는 공격 기법 다른 웹 사이트와 정보를 교환하는? 다른 웹 사이트로 정보를 빼가는 것을 말하는 것 같다

자바스크립트의 동등 비교는 ==, ===, Object.is 다Object.is 는 ES6 문법이기 떄문에 리액트에서는 Polyfill 을 함께 사용한다위와 같이 조금 더 개발자가 원하는 비교를 위해 내부적인 알고리즘이 동작한다하지만 객체 비교는 얕은 비교를 한다런타임

jsx jsx 는 JSXElement, JSXAtributes, JSXChildren, JSXString 네 가지 컴포넌트로 구성되어 있다 JSX 의 목적은 단순히 HTML, XML 을 자바스크립트 내부에 표현하는 것은 아니다 다양한 속성을 가진 트리 구조를 토큰화해