TIL

정확히는 2일차. 어제는 OT였으니까 넘어가주고...강의를ㄴ 듣기 시작하 당일부터 1일차라 표하겠다.오늘 배울 강의의 이름은 JS주요문법. 중요 메소드, 동작원리를 심도깊으면서도 심플하게 강의해주시는 것 같다.근데 자료구조-알고리즘등 CS지식도 같이 들어있는걸 보아하니

네트워크 기초 네트워크는 따로 조금 더 깊게 배워둬서 훑고 지나갔다. 단, 일련의 흐름은 리마인드할 필요가 있음 브라우저가 URL해석 hosts에 dns-ip캐싱 안되있으면 프로토콜스택 의뢰해서 udp로 getHostname 스위치 => 라우터 거쳐서 IP가 존재하

자료구조알고리즘자료구조/알고리즘의 필요성자료구조/알고리즘의 종류시간복잡도

git은 당연하게도 회사의 규모에 상관없이 거의 다 사용함.필요성은 느낄 필요조차 없겠지?git은 정확히 로컬환경에서 버전관리를 해주는 도구.github는 git을 클라우드환경에 올려주는 도구 => 로컬 환경 백업or업로드 용알아보자잉~깃이 없다면, 계속해서 복제본을

트리는 방향을 가진 그래프. 노드를 가리키는 간선은 단 하나씩.여러 용어가 존재함.https://www.geeksforgeeks.org/tree-data-structure/레벨 : 깊이를 의미한다. 위에서부터 0~n level루트 : 맨 위 노드, 시작지점.부

느낀점 1주일을 조금 초과했다. OT를 월요일, 첫 강의를 화요일에 시작했으니 한 주가 돌고 + 1일. 그래도 한주를 완전히 보내고 한 주 회고를 쓰는 게 나아보인다. 몸이 아프다 눈과 허리가 아팠다. 하루종일 노트북만 보고있어서...원래 안구건조증이 있기도 했고

js에선 재귀보다 스택효율이 더 좋음bfs, dfs로 구현 가능효율을 위해 탐색 안해도되는 곳을 잘라내는것 => 가지치기cycle이 존재하면 bfs사용그나마 할만하다...항상 백트래킹과 DP가 제일 어렵다...몇번을 봐도 이해는 가는데막상 문제에 적용하려면 한세월 걸리

예전에는 하이퍼텍스트를 눌러 페이지 이동을 했었음.그때 생긴것이 html. 그때는 레이아웃, 폰트크기 등 스타일을 html이 모두 도맡아 함.이후 css생김. 현대의 html은 문서의 구조, 의미다.각 태그마다 기본스타일이 있다. 다 외우는건 멍청한 짓! 사례들로 파악

명령형 프로그래밍은 컴퓨터가 수행할 명령을 순서대로 써놓은 것.=> 대부분의 프로그래밍 언어 특징이다.선언형 프로그래밍은 무엇이 나타나야 하는지를 설명=> 추상화가 잘 된 프로그래밍(프로그래밍언어는 아니지만, html과 sql도 선언형이다)선언형으로 프로그래밍하면, 유

과제를 제출했었는데, 코드리뷰를 받았다.과제는1\. 이진트리 전위, 중위, 후위 순회 구현2\. 트라이로 문자열 자동완성 구현리뷰를 받고 리팩토링하며 배울때 깨달은 점들을 써보자.원래 한줄짜리 조건문은 중괄호를 생략해도된다사람의 실수는 언제나 있을 수 있으니 한줄도 중

컴포넌트 방식으로 생각하기 홀로 진행하던 클래스형 컴포넌트 만들기와 거의 유사한 내용이니 길게 설명하진 않겠다. 각각 컴포넌트는 독립적이어야하고 하나의 책임을 가진다. 따라서 형제들끼리는 최대한 의존성을 치우고 부모에게 연결시켜서 부모컴포넌트에서 처리하는 방식 다른

map()을 이용해서 li를 뿌려준다.이때 각각의 상태를 업데이트 해야하는데, 골머리를 썩었다.어떻게 고유한 li를 집어줄 것인가?문득 리액트에서 뭣모르고 사용했던 map이 생각났다.속성중에 key가 있었는데, 지정하면 고유한 식별자로서 리액트가 구분하기 더 쉬워진다했

Promise 비동기작업을 제어하기위해 나온개념. 콜백지옥에서 어느정도 벗어나게 해준다. 기본 틀은 이런식이다. 응용은 보통 이렇게 한다.

2주차편은 추석연휴로 인하여 스킵하였다.합격했다고 좋아하던게 엊그제 같은데, 시간이 쏜살같이 지나갔다.짧지만 긴 3주남짓. 배운건 차고넘친다. 특히 바닐라 JS 컴포넌트.상태단위로 동작하며 DOM조작이 훨씬 쉬워졌다.그러면서 구현력도 자연스레 올라왔다. 배열, 객체관련

historyAPI 세션에 쌓이는 history데이터를 조작하게 해줌.(뒤로가기, 앞으로가기 등) SPA는 디렉토리 이동시 화면 깜빡임이 없어야함. => 다른 페이지로 이동시 historyAPI를 사용해 새로고침 없이 URL을 이동한것 처럼 할 수있음. histor

typeof, Array.isArray에 대해 조사해보고 constructor로 타입을 검사할때의 한계를 조사해보자!리액트 map()으로 컴포넌트 뿌려줄때 index를 기본키로 사용하는 이유=> 리액트는 결국 UI를 위한 라이브러리. CSR이기에 간단하게만들어서, 내부

api오류인지, 구현오류인지 처음엔 잘 모르니 더미데이터 생성 후 렌더링까지하고 api받기어떤 타입의 데이터가 어떻게 오는지 써놓기(알면 편하다!)이벤트 버블링을 활용함.=> 이벤트가 부모로 전파됨. e.target이 실제 이벤트 지점. 부모에게 달아놓고 e.targe

노션을 클론하는 프로젝트다.기본적인 레이아웃은 노션과 같아야 한다.상태를 어떻게 관리해줄지 생각해보면 되겠구먼?추가할땐 모달로 글을 작성한다.모달과 통신할땐 CustomEvent를 사용해보자원래 있는 글을 수정하면 문서번호는 그대로, 업데이트만문서의 리스트, 리스트의

설계를 확실히 하고 넘어가야하는데, 잘 몰라서 아는 만큼 해봤다.아무래도 이전 과제의 깊이보단 2단계정도 깊어진 터라자식의 상태 변경을 부모가 알아차리게하는 방법을 고민했다.결국에 이전 과제처럼최상단 부모에서 함수를 모두제작하고 내려주는 방식을 택했다.그렇게 하면 ap

국비지원교육 현실, 국비지원 교육 추천, 코딩 부트캠프 현실, 코딩 부트캠프 추천, 코딩 부트캠프 비교 준비에서 합격까지 사회복무요원으로 일하던중 소집해제가 얼마 남지 않은 시점. 혼자서도 잘 공부하고있었지만, 어딘가 부족하고 가려운 부분이 많았다. 그래서 찾게된

서론 어제 MIL을 작성해서 TIL이 하루 밀렸다. 점점 한 숫자씩 밀려서 숫자가 좀 이상하구먼 화면 깜빡임 route 첫 부분에 target.innerHTML=""이 있어서 깜빡임이 발생한다. 따라서 그냥 지워봤는데, 깜빡임이 사라졌다. ..? 대신 제목을 바꿔

노션 과제를 한창 진행할때였다.강의를 보며 생각없이 코드를 따라쳤다. 그리고 수정했다.=> 똥같은 결과물이 나왔다.사실 그럭저럭 봐줄만했다. 하지만 어딘가 부족했다.구조를 정확히 설명할 수 없고, 상태관리도 부실해보였다.특히 인스턴스에 대한 개념이 아주 무지한채 사용했

문서를 누르면, 하위문서가나온다.1-1. 하위문서는 display-none상태다.1-2. document-item이 문서고, document-list는 문서 묶음이다(래핑). 따라서 document-item의 하위문서가 document-list안에 담겨있다.1-3. d

이런 녀석은 정직하게 대해주면 안된다.정직하게 대해주다가.contentEditable는 innerText를 state로 가진다. 따라서 업데이트 시켜줄때마다, innerText를 건드려, 포커스가 풀림1번 상황으로 인하여 커서위치도 날아감.어찌저찌해도, 커서는 맨 앞에

오늘의 이야기는 과제가아닌 컴포넌트에 대한 이야기다.과제를 바닐라JS로 진행하였지만, 결국 기능을 한데 모으고, 재사용이 가능한 컴포넌트식으로 만들었다.따라서 컴포넌트와는 뗄레야 뗄 수 없는 관계.멘토님이추천해주신 강의 영상을 보며 컴포넌트란 무엇이고, 어떻게 만들어야

배포 과제는 제출했는데, 배포했으면 배포링크를 적어달라하셨다. 선택이었나본데 한 번 해보고싶어 마감3시간전에 후다닥 달리는중. 배포를 하려면, 레포지토리를 선택해야한다. vercel에서 해보려함. 왜냐고? => 다른 교육생분들도 여기서 배포하심. 당장 비교해가며 볼

지금까지 안일했다. 돈받고 일하는사람은 결국 프로다.프로게이머를 준비할때 어떻게 해서 프로게이머가 되었는가?재미도 있었지만, 결국 남보다 잘하고 싶어 끊임없이 노력했기에 가능한 일이었다.재능이 필요없단 말은 아니다. 중요한건 수 없이 많은 노력이 필요했다는 사실이다.하

무한 스크롤 UI 모바일 환경에서 많이 사용한다. 따라서 모바일 환경이라 가정하고 한다. 개발자도구 누르면 모바일 화면으로 바꿀수있음!(크기나 기기 설정가능). 무한스크롤이란? 컨텐츠 마지막 요소 볼때쯤 다음 컨텐츠가 있으면 불러온다. 방식은 보통 2가지가 있음.

과제가 또 추가됐다. 이왕 과제가 추가된거 후딱 끝내고 쉬면서 코드리뷰를 봐야지...이번에 배운건 크게 다른 것 없고 컴포넌트 분할, api호출, 로딩시 로딩용 컴포넌트 보여주기 등임.부모에게 몰아놓고 자식에게 분배하는 방식이다.과제는 이렇게 만든 고양이 사진첩을 조금

지웠다!앞으로 쓸모없는 코드는 그냥 지워뿔자이걸 Map으로 리팩토링 해보자.이렇게 뚝딱 넣고...사용하면 편하구나?얘도 forEach로 순회가 된다!옵저버패턴의 subscribers가 배열이었는데, 중복된 콜백들이 계속 들어와서 set으로 바꾸엇다!잘 작동하는구먼~함수

요소에 draggable=true를 주면 드래그가 가능해진다.잠깐 했을뿐인데 굉장히 많은 이벤트가 발생했다.아마 마우스관련 거의 모든 이벤트가 총망라 되어있지 않을까?mousedown => mousemove...enter...out... => mouseup 이런식으로

서론 CSS의 기초는 잘 알고있다는 가정 하에 넘어갔다. 큰일났군...? 일단 강의부터 잘따라가보자 codepen.io 가입해서 들어가면 이런식으로 코드를 간단히 작성하고 바로 볼수있는 화면이 나온다. css를 하기위해 vscode를 키고 익스텐션깔고 하지 않아도

개발자도구에서 레이아웃을 상세하게볼수있다.3행3열로 잘 나눠진 모습을 볼 수있다.매겨져있는 번호는 line이라고 함.=> 라인은 양수, 음수 두 값을 가진다. 명시적으로 몇번째 라인부터 시작, 끝내라고 정할 수 있다.2번라인부터 행이 시작하여 4번라인에서 행이 끝나라고

CSS에서 변수 사용하기 아래와 같이 사용한다! 참고로 변수는 요소에 종속되고 후손들이 모두 사용가능하다(스코프구먼) 가상 클래스 선택자root는 html태그와 같은 의미지만 명시도(우선순위)가 높다 @supports 브라우저가 기능을 지원하는지 체크할 수 있는

재활용 mixin, include = 함수 mixin, include키워드로 재활용이 가능하다. 함수처럼 인수를 받아올수도 있고 인수 순서 상관없이 원하는 인수에만 할당할 수 있음 기능이 점점 많아지는걸...?🤔 arguemnts, ...args같은 가변인수도

재활용 mixin, include = 함수 mixin, include키워드로 재활용이 가능하다. 함수처럼 인수를 받아올수도 있고 인수 순서 상관없이 원하는 인수에만 할당할 수 있음 기능이 점점 많아지는걸...?🤔 arguemnts, ...args같은 가변인수도

잘 써먹은 CSS 속성들 html { font-size: 62.5%; } 루트 글꼴의 상대크기인 rem을 잘 활용하기위해서 사용함. 루트 글꼴은 16px이라 10px로 바꾸어줌. => 계산 용이 box-shadow box-shadow: offset-x, offs

자바스크립트와 다른점이 뭘까?자바스크립트(동적 타입) : 런타임에서 동작할 때 타입 오류 확인!타입스크립트(정적 타입) : 코드 작성 단계에서 타입 오류 확인!=> 실행하지 않아도 코드작성단계에서 오류를 체크할수있어서 좋다거의 모든 게 JS와 호환되기에 사실상 슈퍼셋임

웹팩 scss컴파일을 npx sass --watch기능을 이용하여 하고있었다. 그런데 선택요구사항에 웹팩, parcel같은 번들러를 활용하여 컴파일 해보라고 되어있었다. 몇번 들어보긴 했는데, 웹팩이 뭘까? 모듈 번들러 모듈이란 특정 기능을 갖는 작은 코드 단위다

흠! 여러 타입을 선언한것과 뭐가 다를까?찾아보니 interface는 선언 병합이 가능하다고 한다. 같은이름을 선언하면 컴파일 시점에 둘이 합쳐짐.그래서 interface를 조금 더 권장한다고한다.?키워드 : 해당 프로퍼티가 있어도 없어도 됨readonly키워드 : 해

또한 interface나 타입 별칭등에서도 사용 가능하다.결국 꺽쇠로 흘러들어간 타입의 흐름이 어떻게 작동하는지 잘 알면 될것 같다!제네릭 안에 여러속성(타입 변수)를 사용할 수도 있다.다만 이렇게 추론을 사용했을 경우 타입스크립트의 장점이 퇴색될수 있음.명시적으로 지

모듈 가져와서 사용할 때 타입을 선언해주어야함.예를들어 lodash라는 라이브러리를 사용할때. lodash.d.ts파일을 만들어주어야 한다.메소드를 쓰면 쓸수록 작성해야할 타입선언이 많아진다. 누군가가 만들어놓은 타입선언을 갖다써보자!없으면...만들어야겠지...?😫n

공식문서가 한글을 지원하는 위대한 프레임워크..!!검색하면 보통 버전2 내용이 많을텐데, 요즘은 버전3을 많이쓰니 버전3으로 검색해서 사용하자.Vue의 대표적인 기능은 선언적 렌더링과 반응성이다.여기서 counter라는 데이터값은Proxy라는 객체에 들어가있다.실제로

두달이 쏜살같이 지났다. 하루하루 몰입이 늘어날수록 시간도 빠르게 지나간다.2차 단위기간 10.19~11.19의 회고는 KPT(Keep, Problem, Try)방식으로 회고해보려한다.성취감이 은근 많았던 달이다.1차 단위기간과 비교하면 몰입이 늘었다. 개인적인 시간을

아래처럼 중복되는 표현식이 존재한다고 치자.반복되는 표현식은 함수로 바꿔줄수 있다.하지만 똑같이 4번의 표현식을 실행하는건 똑같다.4개면 다행이지, 단위가 커진다면 리소스가 꽤 낭비된다.이를 보완하는 기능이 Computed다.언뜻보면 표현식을 4번 실행하듯 보이지만,

조건부 바인딩 v-if, v-else디렉티브를 이용하여 조건부 렌더링을 할 수 있다. v-else-if또한 가능하다. >결과: 아래와 같이 v-else나 v-else-if가 바로 전,후 형제요소가 아니라면 작동하지 않는다

major.minor.patch개편릴리즈패치node.js는 JS가 동작할수 있게 해주는 환경. 브라우저가 없어도 돌아감.Npm은 node package manager의 약어. JS로 만들어진 패키지들을 관리함.html 다 읽고나서 스크립트 실행하라고 body맨 아래 적

저번 시간에 배웠던 $emit을 말하는거다.위와같은 코드는 클릭이벤트가 발생하면 custom이벤트를 발생시킨다.참고로 자식 컴포넌트의 옵션 emits에 명시적으로 등록하는걸 권장한다.(등록하지 않아도 동작함)주의할점은 기본적인 이벤트click,keyup...등을 emi

Vuex Vue의 상태관리 라이브러리. flux패턴과 리덕스에서 영감을 받았다고 한다. 키워드만 잘 숙지해보자 state: 원본소스 역할(data) getters: stor의 state에 접근할때 사용함. 첫번째 전달인자로 상태를 받는다. (저장소 상태 기반하는

해쉬라우터가아닌 브라우저라우터 경로 새로고침하면 404에러 발생하는법 해결로컬환경(웹팩 데브서버 사용시)는 이렇게 해결함.beforeEach()메서드를 사용하여 라우터의 미들웨어 기능을 사용할 수 있음.=> 페이지 도착 전 적용되는 메서드이런식으로 사용하면 된다.bef

저번에 바닐라JS로 진행했던 노션클론 과제를 강사님이 뷰로 진행하신다.따라 쳐봤자 의미가 없어보인다.천천히 보면서 내가 만든 것과 어떠한 차이가 있는지 알아보자! 컴포넌트 단위로 나누실줄 알았는데, 일단 그리는 것이 먼저니까 레이아웃 단위로 나눈다.이렇게 하면 확실히

원래 사용하던 API방식이 아닌 vue3에서 등장한 방식!원래 사용하던 Options API방식보다 더 복잡한 애플리케이션을 제작할때 사용함또한 타입스크립트와 잘 연동됨ㅎㅎ백문이 불여일견 먼저 써보자!npm create vite@latest .으로 바이트를 이용하여 개

역시 트러블슈팅이 많다! 기록으로 남겨보자!또한 구조 짠것도 기록으로 남겨보자!검색하면 영화 카드들이 나오고 영화 카드를 선택하면 그 영화의 자세한 설명이 들어있는 페이지로 이동하게 만들것이다.재사용 가능하게 만들어야겠지?MovieCards : 검색했을때 나오는 영화

이미지에 분명 높이를 px로 지정했는데 원하는 높이가 나오지 않았다. 어제 밤에 고심하다가 오늘 잘 아시는 팀원분께 여쭤보니display:flex속성때문 일수도 있다 하셨다. 제거하니 바로 원하는 높이가 나옴.=> flex속성에는 shrink같은 속성이 들어있어서 그럴

배포할때, SPA 새로고침 오류를 방지하기위하여 설정을 추가해준다.그런데, 이렇게하면 배포서버에서는 괜찮지만 로컬서버에서는 오류가 남.이때 vite서버에서 주소를 수동으로 바꿔주어야한다.이 옵션을 추가해준 뒤, npm run vite(dev)로 비트 로컬서버를 켜준다.

Vue도 재밌었지만 실무에서 많이쓰는건 결국 리액트다!리액트는 반응형 프레임워크임. 헷갈리면 엑셀을 떠올리자 ㅎㅎ처음엔 컴포넌트만 열심히 생각해보자. 구조, 아키텍처, 아름다운 코드는 잠깐 잊고 UI를 구현해보자!리액트로 애플리케이션 만들때 가장 빠른방법 => webp

리액트에서의 스타일 보통 3가지로 나뉨. 인라인 스타일, CSS(SCSS)파일 빼서 두는 스타일 그리고 CSS in JS(emotion) 또한 상태의존 스타일은 인라인 스타일로 하는게 좋음. => 그러면 서타일 싯트로 빼서 쓰는게 가장 적은 비율이겠구먼? 일단 제일

자주 쓰이는 컴포넌트들을 예제로 보여주신다. 탑-다운 방식의 접근법은 나도 좋아한다. 이렇게 배운 뒤, 제대로된 리액트의 구조를 잘 살펴봐야겠지?이름만 들어선 어떠한 문자를 보여주는 컴포넌트다. 실용성이 있을까? 일단 만들어보자재사용은 용이해보이는데, 프롭스가 너무 많

Provider로 데이터를 공급해주면 Consumer로 데이터를 사용한다.PropsDrilling을 피하려고 나온 상태 공유 API. 관리 API가 아니다ToDO를 만들면서 실습해보자!강의도중 처음 배운 내용들 위주로 보았다.not선택자. 위처럼 사용한다면 first-

로딩바, 진행바.출처 : https://www.invisionapp.com/inside-design/progress-bar/TED내용인데 프로그레스바가 사용자의 행복에 영향을 끼친다는 연구결과다. 정확성은 상관없다고 한다 ㅎㅎSlider컴포넌트와 거의 흡사해서

타입 카멜케이스 타입은 기본적으로 카멜케이스로 선언한다. 이번 Vue과제는 서버에서 타입과 값을 파스칼케이스로 내려주어서 어쩔수없이 썼지만, 다음부턴 꼭 파스칼케이스로 해보자. 쿼리스트링과 SEO https://developers.google.com/search/

hover을 체크한다.useCallback이 어떤 커스텀훅에서는 쓰이고 어떤 커스텀 훅에서는 쓰이지 않는다(대부분 쓰긴함). 왜 쓰이는걸까?=> handleMouseOver처럼 이벤트 핸들러는 자주 호출된다. 매 렌더링시 재생성되는 비효율을 막기위함인가?스크롤시 일어나

formik이라는 라이브러리가 훌륭해서 잘 쓰일일이 없다고 한다.무슨 라이브러리인고 찾아보니, contextAPI기능도 같이 들어있는 폼 관리 라이브러리다.최소한의 필요한 기능만 들어있어서 사이즈도 작고 필요한 컴포넌트에서 꺼내쓸 수 있는 contextAPI가 있어서

지금까지 만들었던 컴포넌트와 훅을 사용하면 매우 간단할 것 같다. 어떤 훅과 컴포넌트를 사용할지 예측해보자!useClickAway : 모달창 끄는 기능이 필요하다.useToggle : 어떤 버튼을 눌렀을때 모달창이 나오게 한다.useHotKey : 핫키를 눌러서 나오게

리액트 빌트인 훅이다.ref에 메서드를 할당할수 있음.부모가 가진 ref에 자식의ref값을 지우는 메서드를 추가했다. 높은 응집도공통 폐쇄 원칙(컴포넌트 기능, 스타일등 묶기)공통 재사용 원칙. 함께 재사용 될수없으면 분리공통 폐쇄 원칙이 과하면 재사용성이 낮아지고 재

https://react.dev/learn/typescripthttps://www.typescriptlang.org/docs/handbook/react.htmlhttps://velog.io/@jay/react18.3defaultPropshtt

strapi는 headless cms다. 즉, 철저하게 콘텐츠 저장소로 설계 및 구축된 백엔드 전용 콘텐츠 관리 시스템.쉽게 말하자면 아주 쉽게 사용할 수 있는 백엔드다.npx create-strapi-app@latest my-project로 설치하자. 꽤 걸린다.설치

둘 다 데이터를 불러오는 규칙. 방법이 다를뿐이다.POST/graphql로만 요청해야함백엔드에서 미리 타입을 정의해야함요청은 query 변경은 mutation을 사용=> 백엔드 개발자가 귀찮아진다 ㅋㅋ러닝커브가 높다HTTP캐싱이 어렵다필요한 필드를 모두 작성해야함파일

생각없이 썼던 나 자신을 반성하며...트러블 슈팅 기록을 올린다.Is a length or percentage representing the abscissa (horizontal, x-component) of the translating vector tx, 0. In

기획,모델링(스토리 기반) 뭘 구현해야하는가? => 스토리에 초점을 맞춘다. 사용자 스토리 사용자가 서비스를 어떻게 이용할까 예측해봄(스토리) 비인증 사용자는 글 작성을 위해 가입 후 글 작성 => 도메인을 뽑아낼 수 있다. 사용자, 글... => 기능을 뽑아낼

서론이라 쓰고 반성문이라 읽는다 ...반성이 많은 달이다. 저번 MIL에서 Try부분에 적어놓은 것들을 거의다 지키지 않았다😥 TS프로젝트 : TS로 과제를 두번이나 진행하고 이번 협업시 TS를 써야하다보니 todoList단계를 할 필요가 없어져서 하지 않았다. 일찍 일어나기 : 드문드문 일찍 일어나긴 했는데, 늦게 일어난 날이 더 많다. 반성반성.....

혼자 할때는 타협점이 매우 낮았다. 어차피 과제니까, 재미로 하는거니까, 단순한 프로젝트니까.에러처리는 그냥 console.warn으로 던지기 일쑤였고 new Error로 던지는건 양반이었다.재사용 가능한 컴포넌트를 생각하지만 도중에 잡스러운 마음이 들기 쉽상이고...

수많은 데이터 속에서 유의미한 정보를 찾아 시각화 한다!ex) 미세먼지 농도, 코로나 감염 국내현황, 대시보드 등...데이터에 형태를 부여해서 한눈에 파악하기 위함.유용한 정보 수집독자의 니즈 파악내용의 구성(데이터에서 출발하여 수치값 시각화 or 분석에서 출발하여 증

인생 첫 협업을 프로그래머스 데브코스에서 맞았다. 당연하게도 이런저런 우여곡절이 있었지만, 얻어간 게 너무나 많았다.일단 뭐든 부딪혀보는게 최고다!(프로젝트는...기획이 중요해보인다).이번 기간에 첫번째 팀에서 진행하던 모던JS deep dive 스터디도 끝났다. 분량

과제 리포지토리에서 프로젝트를 fork한 뒤 내 branch만 남기고 삭제하였다.그 후 사용하던 notion-clone이라는 리포지토리에 clone땡기고 push mirror명령어를 이용하여 커밋내역째 push함.이후 사태 발생.과제 리포지토리 브랜치가 다 삭제됨...

key함수, animation, colorize는 쉬워서 넘어갔다색상척도는 세가지로 나뉜다선형 색상척도(linearScale)순차적 색상척도(sequentialScale)범주형 색상척도(ordinalScale)사실 척도부분에서 배운 세가지 척도를 활용하는거다.순차적 색

이 메서드는 같은 값을 각 메모리에 띄워서 채우는 것이 아닌, 한 참조를 반복해서 채워넣는 것.따라서 Array(5).fill(\[])처럼 빈 배열을 반복해서 채워주면, 모든 배열의 요소(빈배열)이같은 참조를 가리키게됨이렇게 된다!

이 문제를 객체로 풀다가 도저히 안되서 검색 => Map자료구조로 푼 글을 봄.로직은 똑같은데, 시간복잡도에서 차이 발생.객체와 Map의 차이가 그렇게 심한가...?=> 이터러블과 아닌것의 차이 인듯 하다...그렇다면 객체를 이터러블로 만들어보자.원래 전부 실패했던 효

트러블 슈팅

Server Sent Event게임방 목록을 보여주는 화면에서 SSE를 쓰기로했다. 이름 그대로 서버에서 보내주는 이벤트다.통상적인 http통신은 클라이언트가 request를 보내면 서버가 response한다.SSE는 클라이언트의 request없이 서버가 respons

useEffect dependecy 의존성배열에 있는 값이 바뀌면 useEffect를 재실행 함. 이때 객체라면 말이 달라진다. 내부가 같은 값이어도 중첩 객체라면 다른값 취급! => 참조형 데이터는 조심해서 다루자

리액트에서 제공해주는 내장 메서드.isValidElement는 유효한 리액트 엘리먼트인지 판단해준다.출처는 리액트 공식문서(https://react.dev/reference/react/isValidElement\`\`\`tsximport { isValidEle

골자는 같다 `로 사용하던방식에서 createBrowserRouter`로 넘어왔다. 하지만 인증 라우트의 골자는 같다. 로직에따라 Outlet를 리턴하던가 Navigate를 리턴한다. if문때문에 가독성이 좀 그렇지만...요약하자면 이렇다. useAuthCheck

React-Query isLoading in v5 내가 지금까지 해오던 react-query의 사용방식이다. 이렇게 내부에서 처리하거나 ErrorBoundary, Suspense를 이용하여 선언적으로 로딩, 에러를 처리한 뒤, 데이터가 무조건 존재하는 상황에서만 쿼리된 데이터를 사용했다. => Type narrowing을 했다. 하지만 v5에서 이렇게...

함수형 프로그래밍은 패러다임이자 코딩 스타일이다.

내가 원하는 로직은 이렇다.예시 문장이 존재함 ex) '벨로그 사용중'유저가 예시 문장을 따라침. 이때 오타를 검출함. 중요한 건 한 글자가 완성되고나서 오타를 검출해야함=> 한 글자가 완성되었단걸 어떻게 판별할까?커서 위치로 판별다음 글자를 입력하면 판별조합이 완료된

함수는 일급 객체다. 그러니까 useCallback + React.memo 리액트는 Object.is로 값을 비교한다. 따라서 함수를 프롭스로 전달하면, 참조가 달라서 다른 값으로 여겨진다. 아래와 같은 구조가 있다고 해보자. 이때, 부모컴포넌트에서 리렌더가 발생

쿠키를 못받아오네? 원인은 Samesite 백엔드쪽에서 원래 response body로 넘겨주던 refresh토큰을 set-cookie + Http only를 이용해서 넘겨달라고 요청드렸다. 어디서 본게 있어서 그랬다. 쿠키는 js로 직접 조작하면 위험해 보였다. 이

파워쉘 관리자 권한 실행 후net stop winnat 으로 winnat을 종료시킨뒤 net start winnat로 다시실행.5173포트가 예약되어있어서 그렇다.보통 윈도우 업데이트때문인 경우가 많음!

requestAnimationFrames > https://velog.io/@loevray/%EB%8F%99%EC%9E%91%EC%9B%90%EB%A6%AC-6-JS%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84#animation-frames 예전에 작성...

디바운스는 동일한 요청이 짧은 시간내에 반복하여 들어왔을때, 마지막 요청만 처리하는 기법이다.느린 처리속도로 인하여 사용자가 많은 POST요청을 짧은시간동안 빠르게 보냈을 경우'ex) 방 생성 '방이 수십개는 생길 것이다.이를 방지하기위하여 Debounce를 도입해야

크롬 개발자도구에서 제공해주는 웹 사이트 성능 측정 도구다.정량적으로 나뉜 성능을 보며 어디가 문제고 어디가 느린지 파악할 수 있다!참고로 제일 중요한 세 가지 핵심 수치를 (Core Web Vitals)라고 한다.출처 : https://web.dev/arti

vercel 배포 오류(this project.json defines 'packageManager'...) 2024.03.22 갑자기 vercel 배포가 오류가 발생하였다. 공식문서를 열쉼히 찾아본다. 에러의 원인 요약하자면 다음과 같다. yarn은 원래 1버

들어가며 6개월. 180일. 반년. 절대 짧지 않은 기간이다. 긴 여정에서 무엇을 얻고 무엇을 잃고 어떻게 변했는가? 한번 돌이켜보며 천천히 알아보자. 습관을 얻다 습관은 의식해서 하는 일이 아니다. 사람들은 배가고플때 냉장고를 연다. 먹을게 없는지 확인 한 뒤

이사 결심 프론트 배포처를 vercel에서 aws로 이사를 했다. 주된 이유는 다음과 같다. vercel은 yarn v4를 지원하지 않는다. 위 사항이 크게 문제되지는 않았으나, 며칠 전부터 vercel 배포 오류가 발생 github actions를 사용하여 ci를

부트캠프 마지막 프로젝트를 진행하며 패키지 매니저를 yarn으로 결정했었다.써보지 않아서 궁금하기도 했고 병렬설치때문에 패키지 설치속도가 npm보다 빠르다하여 사용했었음.아주 초창기에 멘토님과 얘기하던중 yarn berry를 써보는 게 어떠냐는 제안을 받았다.당시에 블

6개월간 밀도있게 보낸 부트캠프를 떠나보내고 취업전선에 뛰어들었다. 단번에 결과를 얻을 수 있다는 자만은 절대 하지 않았고 내 수준을 객관적으로 판단하고 있었다.그래서인지 불합격이라도 무던하게 넘길 수 있을 줄 알았다.하지만 사람은 간사하다. 어쩌면 내가 유독 간사한

카카오 2022 인턴십 3번문제 코딩테스트 공부2차원배열을 이용하여 최솟값을 구하는 문제인데, 그리디로 접근해서 풀다가 오래걸려서 풀이를 봤다.dp와 그리디는 한 끗 차이라더니...아무튼.풀이는 이렇다.dp\[i]\[j]는 i알고력, j코딩력에 도달할때의 최소시간 이다

면접 단골 질문주제이자 JS 비동기처리의 핵심.MDN에는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체라고 정의되어있다.크게 특별해보이는 문법은 아니지만, 핵심은 두가지다.비동기 작업의 상태를 알 수 있다.resolve, reject시 작업 콜백을 넘겨줄 수 있다

generator란 generator함수에서 리턴되는 객체이며, iterable protocol과 iterator protocl를 준수합니다처음 마주하면 당황하는 MDN문서의 정의다. 다행히도 모던 자바스크립트 딥 다이브를 스터디했기에 generator함수, itera

프론트엔드는 뱌야흐로 대 넥스트의 시대! (라고하기에는 사실 React말고 잘 모르겠다🤔)그래도 지금까지 훑어본 신입 프론트엔드 조건에 포함되어있는 경우가 절반정도는 됐던 것 같다. 절반 이상일지도?아무튼 왜 필요하고, 왜 쓰는지. 그 이유는 아직 모른다. 물론 검색

react-router를 이용하여 라우팅을 했을땐, 라우팅 관련 코드를 작성해야했다.Next에서는 File-system routing을 사용해서 폴더가 URL segement에 매핑되게 만든다.app/dashboard/invocies라는 폴더를 생성하면, 위와같은 라우

스트리밍은 본래 영상,오디오같은 파일을 전송하고 재생하는 방식 중 하나다. 특히 동영상처럼 용량이 큰 파일을 재생할 때 다운로드에 시간이 오래소요될 수 있다. 이때 파일을 작은 chunk로쪼개어 다운받으며 영상을 재생하면, 다운과 동시에 재생이 가능해진다.이처럼 Nex

서버란?

Node.js에서 백준 입력 두가지 방법이 있다. 파일을 온전히 읽어오는 readFile방식과 한 줄씩 읽어오는 readline방식. 하나씩 알아보자. readFile readFile은 비동기 방식이라 readFileSync를 활용했다. 파일 하나를 통째로 읽어온

WeakMap은 Map하고 유사한 기능을 가진 자료구조다. 즉, key => value를 연결하는 자료구조다.다만 특이한점은 키값을 오직 객체로만 받는다.왜 객체로만 받을까?Map, WeakMap 둘 다 키를 객체로 받을 수 있다.(후자는 정확히 말하면 객체만 받는다)

컴파일러 컴퓨터(CPU)에게 명령을 내리려면, 0과1로 이루어진 언어(기계어)를 전달해 주어야한다. 따라서 사람이 이해하기 쉬운 언어로 작성된 코드를 기계어로 변환하는 과정이 필요하다. 고급언어(C언어같은...) => 어셈블리어 => 기계어 그 과정 자체를 컴파일

AST(Abstract Syntax Tree, 추상구문트리) > 출처: https://en.wikipedia.org/wiki/Abstractsyntaxtree 추상구문트리란 아주 축약해서 말하자면, 사용자가 작성한 소스코드를 트리로 표현한 것이다. 참고로 이번 파트

React 리액트 내부 동작과정. 아주 자세하게 들여다 보진 않을 것임. But, 동작원리를 어느정도 이해할 수 있는 수준으로 배워보자. Render Phase, Commit Phase

서론 Fiber과 V-DOM에 대해서 자세히 알아보려했으나 먼저 리액트 공식문서를 기반으로 기초를 조금 더 다져놓은뒤 심도깊은 학습을 한다면 이해가 더 잘될 것 같다. 그리하여 공식문서 내용 중 궁금하고 잘 몰랐던 부분을 간추려 적었습니다! State as a sn

100번째 TIL🎉 9월말 프로그래머스 데브코스를 계기로 프로그래밍 공부를 시작한지 어언 9개월쯤... 100번째 TIL이라니 감격스럽기도 하고 아직 취준생이라는 사실에 살짝 눈물이 삐져나온다.😥 물론 꼴랑 몇개월 하고 취업하려는 마인드로부터 굉장히 글러먹은 인간

타입스크립트는 뭘까? 타입스크립트 컴파일러 잘 몰랐던 타입스크립트 기능들 d.ts Literal Enum index signature Mixin

Test 시험, 검사 개발자가 만든 애플리케이션이 원하던 대로 동작하는지 검증하는 행위를 테스트라고 한다. 나아가서 애플리케이션자체가 아닌, 애플리케이션 로직일부도 테스트 가능하다. 사실 이번 TIL은 이쪽에 초점을 맞추었다. unitTest 소스 코드의 특정 모

position:fixed와 postion:sticky css만을 이용하여 스크롤 시 특정 엘리먼트를 좌표에 고정시켜놓고 싶을때 보통 두 옵션중 하나를 택하기 마련. position:fixed와 position: sticky. 나는 레이아웃을 만들때 fixed를 선호

compound pattern을 간략하게 알아보자

제어역전을 알아보자

yotubeapi, server action, next Image에 대해 간단히 알아보았다.

Toast를 구현해보자

상태 정규화를 알아보자

사다리타기를 canvas로 구현해보자

간단한 드래그앤 드롭을 리액트에서 구현해보자

웹 표준과 웹 접근성을 알아보았다.

동시성과 병렬성을 알아보았습니다

에러를 핸들링해보자

Polling과 Interrupt의 차이. 그리고 Event Listener의 동작 방식?

테스트 관련 용어에 대해 정리해보았습니다. 특히 헷갈리던 Mock과 Stub도 같이

DI(Dependency Injection, 의존성주입)에 대해 간략히 알아보았습니다.

DB용어를 정리하고 트랜잭션에 대해 간략히 알아보았습니다.

컴파일러와 트랜스파일러. 누구냐 너흰