2022 - TIL

상태, 속성 값을 이용해 값을 계산할 때, 상태, 속성 값이 바뀌지 않았다면 재렌더링 시에도 기존 값을 쓰게 하는 것기존 값을 쓰는 경우부모 컴포넌트가 재렌더링 했을 시계산에 쓰이지 않은 다른 상태, 속성 값이 바뀌었을 시함수 선언이 재렌더링 될 때마다가 아니고, 필요

axios instance를 만들어 공통 속성을 모듈화한다(공통 속성이 적용된 axios함수라고 할 수 있다)만든 instance에 interceptor를 설정한다요청/응답의 성공/실패 직전의 처리의 대한 로직을 작성할 수 있다 \-> callback함수로 작성하는데

MonthSub프로젝트 리팩토링을 시작했다컴포넌트와 폴더 구조 정리부터 하기로 했는데 아토믹하게 컴포넌트를 나누는 기준이 감이 안왔다..나름 아토믹하게 구성한 것 같은데 왜 컴포넌트의 갯수가 많아지고 범위가 모호해졌을까?서치해봐도 단순한 예시만 있어서 실제 프로젝트 구

MonthSub프로젝트 리팩토링은 본격적으로 시작했다.오늘은 시리즈 생성과 작성 페이지의 중복코드를 제거하는 작업을 했다.시리즈 생성과 작성 페이지의 겹치는 form부분 코드를 SeriesForm컴포넌트로 분리SeriesForm컴포넌트에서만 쓰이는 컴포넌트를 내부 컴포

기존에 Series작성, 수정 페이지에서 Form을 구현할 때useForm과 checkBox의 상태를 분리했었다.value 하나의 경우말고 다수인 경우 어떻게 상태를 재할당해야할지 몰랐기 때문.useForm에 이벤트 핸들링 함수에 input type이 checkbox인

EditSeriesPage컴포넌트에서 데이터를 불러와, seriesForm컴포넌트에 전달해주도록 리팩토링 했다. (원래는 seriesForm컴포넌트로 분리되지 않고 EditSeriesPage에 직접 로직이 들어가 있었다) 그런데 부모 자식 간의 렌더링, 상태 변화 과정

axios함수를 추상화하는 작업을 진행했다. axios create함수를 사용해 모든 api에 필요한 공통 속성들을 정의한 커스텀 axios를 만들고, 후에 리프레시 토큰 로직을 추가할 것을 대비해 interceptor도 적용해주었다. 메소드 이름과 각 메소드에 필

api로 데이터를 불러왔을 경우의 부모-자식 컴포넌트 간 렌더링 과정이 이해가 가지 않았는데다른 할일이 많아서 넘겼다가 주말인 김에 알아보았다.리액트 라이프사이클 개념을 서치해서 자료를 찾아보았지만 내가 궁금했던 점이 명쾌하게 해결되지 않아서 직접 콘솔을 찍어보았다.c

오늘은 MonthSub반응형 작업만 했다.막히는 건 없었지만 원래 반응형 작업이 손이 많이가기도 하고오늘은 하루 종일 졸려서 느리적거리느라 쓸데없이 시간을 많이 쓴 것 같다..프로젝트 기간에 고착된 생활습관을 아직 바꾸지 못해서 그런 것 같다.빨리 밤낮을 바꿔야겠다..

오늘은 monthSub프로젝트 반응형 작업과 알고리즘 문제를 하나 풀었다.저번 주부터 계속 dp문제만 풀어서 어느정도 dp비슷하게 코드를 짰고 몇 개의 테스트 케이스는 통과해서 좀 뿌듯했다. 이제 예외처리만 해주면 맞추겠지? 해서 스터디가 끝나고 계속 코드를 수정해봤는

오늘 한 것LeetCode 377. Combination Sum IV 문제 복습 및 블로그 정리LeetCode 1262. Greatest Sum Divisible by Three 풀기MonthSub프로젝트 반응형 작업Combination Sum IV를 푸는 패턴만 익

반응형 breakpoint에 대해 공부했다 MonthSub반응형 작업을 진행하는데 모바일 범위가 너무 넓고, 테블릿 범위여야 할 사이즈가 모바일로 속해있는 등 뭔가 어설펐다.. 지금까지도 그냥 되는대로 하거나 서치해서 찾은 걸 복붙해서 썼었는데 이번 기회에 제대로 이해

타입 스크립트 공부원시타입 & 객체타입 변수 타입 지정법union, any, unknown함수 타입 지정법dp+dfs 문제로 알고리즘 스터디 진행\[LeetCode] Generate Parentheses 문제dp+dfs가 합쳐지면 백트랙킹 로직이 될 수 있다백트랙킹이란

TypeScript 공부narrowingassertiontypealias

class와 prototype콜백 함수 복습js로 컴포넌트 기반 코드 짜는 방법 복습타입 스크립트 Literal Types과 함수와 methods에 type alias 지정법내일부터 바닐라 js관련 스터디를 2개나 하기로 했기 때문에 잘 몰랐던 개념과 배웠지만 잊었던

다익스트라 알고리즘 공부 및 잘된 코드 분석타입스크립트 돔 조작 관련 내용 학습빌드 최적화에 관한 내용 학습

오늘 학습한 것 > 1. 코드스피치 스터디 css rendering 강의 학습 js 프로토타입에 대해 이해안갔던 부분 학습 monthSub프로젝트 컴포넌트, 반응형 코드 리팩토링 1. 코드스피치 - css rendering graphic system - 점찍는(화면

MonthSub 리팩토링 UseCheckBox 훅 생성(로직 구현) checked의 초기값도 상태로 설정해야함 부모에게 상태를 전달해줄 때 매번 변화하는 상태를 전달해야해서 useEffect에 의존성을 걸어줬다 페이지 컴포넌트에서 props으로 데이터를 전달

monthSub 리팩토링 체크박스 기능 추가 filter 버전 기능 추가

코드스피츠 float 타스 토이프로젝트 환경 설정 타스환경설정 웹펙, 바벨 scss typescript 웹팩은 설치하고 최소한의 옵션을 설정해줘야 한다 require('path') node.js이 기본으로 제공하는 path모듈로 설치 없이 사용가능 파일/

컴포넌트 기반의 Typescript를 토이프로젝트를 하기 위해 클래스 관련 공부를 했다. vanilla js 노션 클론 프로젝트에서 컴포넌트를 생성할 때 생성자 함수를 썼기 때문에 타입스크립트로 생성자 함수를 작성하는 방법을 찾아봤는데 적합한 타입이 없었고, class

타스 토이프로젝트 환경 설정 Webpack5 typescript설정법 계속 안되던 lint, prettier설정...경고문을 잘 읽어야 함 클래스는 그 자체로 타입이 됨

MonthSub 1. export 시 한객체로 묶어서 내보낼 때의 문제점 문제점 모듈 관리가 mixin이라는 객체를 통해 되고 있다. mixin 객체를 사용했기 때문에, mixin을 사용하는 모든 파일에서 mixin 객체를 import해서 프로퍼티로 접근하게되는데,

스토리를 만들기 위해 함수를 내보내는데,그 함수의 args속성에 props값들을 할당해주면args를 인자로 받아 해당props가 포함된 컴포넌트를 반환한다.args === propsprops이 아닌 args로 받는 이유는 컨트롤러를 사용한 실시간 컴포넌트 업데이트 때문

scss적용 안됐던 이유 웹팩 설정을 안봐서..

css를 객체화 시켜서 모델링 한 것자바스크립트로 css그 자체를 수정할 수 있다(동적으로 조작 가능)css를 조작하려면 태그에서 cssstylesheet 객체를 꺼내서 조작해야 함stylesheet객체가 실체이고 'style' 이라는 돔에 집어넣은 것Styled Do

포스트는 api에서 불러온 데이터가 아닌 더미를 넣어준다 args는 props에 컨트롤을 달아줄 때 사용하고, 컨트롤이 필요 없는 경우에는 그냥 props처럼 넣어줘도 된다 버전이 2개 이상 필요할 땐 템플릿을 만들고 arg를 따로 지정한다 -> 다른 중복 코드 작

useForm을 쓸 경우 storybook에 어떻게 작성할까 -> onsubmit과 initialvalue를 페이지 단에서 props으로 받는다 useForm의 handleChange를 input의 name과 value로만 받아야하다는 고정 관념 때문에 그렇게 받아질

Like컴포넌트에 api호출, contextApi로직이 포함되어있어서 storyBook에 작성할 때 오류가 났다 page컴포넌트에서 호출한 후 props으로 내려줘야했는데 depth가 너무 깊고, 2개의 page에서 사용중이었기 때문에 비효율적이라는 생각이 들었다

Semantic Web기계에게 친화적인 웹데이터베이스화 시키기 좋은 웹검색 엔진이 유의미한 것을 추출해서 다양하고 유효한 검색결과를 만들어내게끔하기 위해 Semantic하게 html문서를 짜야한다시맨틱 웹에서 css를 어떻게 사용하면 좋은가?보통 selector사용 시

WaffleCard 리팩토링 지라 사용법 숙지 및 문서화

WaffleCard Refactoring undefind procss 오류 → react-error-overlay": "^6.0.9 설치해 해결(npm만 가능) PrivateRoute, PublicRoute, Router 컴포넌트 구현 및 적용 react-router

Jira티켓 이동 자동화는 깃허브 연결외에도 따로 자동화 기능을 설정해줘야했다MyPage컴포넌트 리팩토링을 했다MyPage에 닉네임/비밀번호 변경 모달 포함되어있는데,api사용 로직과 context실행 후 받은 값을 부모인 페이지에서 props으로 넘겨받도록 해 순수한

탭에 대한 정보를 상수로 저장해서 사용하도록 리팩토링했다탭포인터 이동을 해야하기때문에 인덱스가 꼭 필요했고상수를 객체들이 들어있는 배열의형태로 만들어서 구현했다프로퍼티에 대한 인덱스를 구할땐 findindex함수를 사용했다피드백인덱스 정보가 유의미한 정보는 아니기 때문

Display groupDisplay(레이아웃): 지오메트리를 구성할 때 쓰는 알고리즘===속성 (+position)6개의 그룹으로 나뉜다Outside: nomal flow관련된 것 (Block, Inline)Box: 기존 box규칙을 무시하고 대체하는 것 (conte

블로그 정리MonthSub Refactoringinput:checked 선택자 사용 시 형제 선택자에서 button은 선택이 안된다중복되는 css를 mixin파일에 저장해서 중복을 제거했는데, styledComponent로 해결해봐야겠음MonthSub 회의타입스크립트

코드스피치 스터디 프로그래밍의 흐름 language code machine language WaffleCard Refactoring overflow를 감지해 정렬 바꾸기 scrollHeight, clientHeight(ref로 접근)를 사용해 자식의 높이나 너비가 부

라이브러리 설치eslint 설정tsconfig.json 설정tsconfig.path.json 설정alias경로 설정tsconfig.json에 path를 작성하면 yarn start시 초기화되기 때문에 따로 path파일을 만든 후 craco에 등록해준다craco.conf

TypeScript Project 스터디에서 알게 된 점 이벤트 해제 안해주면 돔 사라져도 계속 남아있다 이벤트는 처음 한번만 걸어주는 게 좋음 xss: innerHtml을 쓸 시의 보안 문제 domparser 텍스트를 돔으로 만들어주는 api 기존에

메모리 모델js기초 구성 문법Lexical grammarLanguage ElementSync flow메모리 모델에 관한 내용이 내가 알던 js메모리 모델&할당과 달라서 혼란스러웠다그래서 js의 메모리에 관해서 전에 썼던 포스팅을 보면서 복습을 했는데원시 타입의 변수 복

Component컴포넌트 파라미터와 리턴값에 대한 타입 설정훅 사용 시 Generic로 파라미터 타입 설정하기props에 대한 타입인 interface설정필수 값이 아닌 경우 옵셔널(?)을 설정해야함 styled componentstyled component에 pro

flow control에 관련된 문은 레코드 흐름을 제어할 수 있는 권한을 얻게 됨어떤 레코드를 선택할 지를 결정하는데 사용됨유일한 직접 컨트롤 명령어 문이 아니기 때문에 자체적으로 실행할 수 없다 (꼬리표일 뿐 ;찍어서 공문이라도 있어야함)break로 lable sc

WaffleCard Refactoring 카드 리스트 애니메이션 css keyFrame 사용 data를 3번 복사해서 3세트의 카드리스트 컴포넌트들을 생성 처음 렌더링 시 1세트의 카드리스트 너비만큼 스크롤을 당김(그래야 역방향으로 스크롤 가능) keyFrame을 이용

WaffleCard Refactoring Typescript 전환 HTMLDivElement의 타입에는 onClick이 정해져 있기 때문에 커스텀한 타입을 쓰려면 omit으로 제거해준 후에 지정해야한다 CardList Animation useEffect와 setI

Vanilla Javascript로 웹 컴포넌트 만들기(https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/이 링크를 참고해 컴포넌트를 리팩토링하려한다기반이 되는 component c

WaffleCard Refactoring 알고리즘 DFS

리팩토링한 템플릿 컴포넌트 클래스로 기존 작업을 전환했다기존에는 이벤트로 변경된 부분만 돔에 접근해 속성을 바꿔주었는데,컴포넌트 디자인 패턴으로 프로젝트를 진행할거라면 상태에 의존해 리렌더링을 하도록 구현하는게 맞다는 생각이 들었다. 가상돔이 없으면 효율이 매우 떨어지

lazy evaluation === 제네레이션 서스펜션같은 iterable을 생성한다하더라도 일반 함수로 생성하는 것과 generator로 생성하는 것은 다르다 -> 후자가 지연 평가를 하기 때문에 효율적임제너레이터에서는 yield를 이용해 반환할 값을 만들어낸다값을

css의 keyframe+translate 속성을 사용해 이동 애니메이션과 동시에 스크롤을 조작하기에는 한계라는 생각이 들었다그래서 setTimeout을 이용해 시간이 지날 때마다 왼쪽으로 스크롤을 연속적으로 이동시키는 방법을 사용해야겠다고 생각했다setTimeout를

MonthSub Refactoring seriesForm의 가격 입력 input의 값을 1000단위로 ','가 찍히도록 포맷팅되는 기능을 구현했다 1000단위로 ,를 찍으려면 뒤에서부터 숫자를 3개씩 세면서 ,를 찍어야한다 onChange가 될 때마다 input값을 가

MonthSub Refacroting 가격 입력값 한글형식으로 포맷 구현 시도1 문제점 만단위가 넘어간 갔을 때 '만'이 안 붙는다 WaffleCard Refactoring 카드 리스트 처음으로, 맨끝으로 이동시켜주는 버튼 구현 디자인이 마음에 안들어서 가이드 슬

TypeScript Project

TypeScript Project 템플릿 컴포넌트 성능 개선 실패 constructure함수에서 컴포넌트 자신의 dom을 만들고, 자식 컴포넌트를 생성해 연결해주려면 인스턴스 생성 시에 해당 컴포넌트가 사용할 태그 이름을 props으로 넣어줘야하는데, 그럴 경우 같

클래스 constructor함수에서 비동기 사용시 문제점 setup함수에서 비동기가 다 끝나고 나서 다음 메소들이 실행되는게 아닌, 비동기 로직이 끝날 동안 다음 메소드들이 줄줄이 실행돼서 초기 값이 빈값이 렌더링되어 오류가 생겼다 setup함수에서 setState함

서버 사용 시 index.js의 경로를 절대경로로 해줘야 도메인에서 찾을 수 있다 실제 서버의 경우 로컬 서버일 경우

평소 사용하던 class기반 컴포넌트 템플릿이 부모state변경 시에 모든 컴포넌트가 재렌더링 되는 구조였는데, 이번 과제는 keyup이벤트를 사용해야했고, input값이 변경될 때마다 input도 재렌더링이 되는 문제점이 생겼다. 결국 템플릿 사용을 포기하고 특정 자

배열 타입은 객체로 변환되어서 length가 먹히지 않는다 이렇게 감싸줘야한다 https://www.delftstack.com/ko/howto/javascript/javascript-length-of-object/ for 문을 돌려 동적으로 key를 접근하려면

자소서 쓸 때 지켜야할 점 WaffleCard Refactoring CardList Animation 카드 너비나 갯수가 달라질 때도 속도가 유지되도록 해야하는데 그러려면 targetDom의 scrollWidth가 달라질 때마다 useInterval이 재실행되야한다

textarea가 입력된 텍스트가 길어지면 세로 스크롤이 생기는데,화면 전체에도 스크롤이 2중으로 생겨서 사용성이 좋지 못했다.textarea의 텍스트가 길어지면 스크롤이 생기는 것이 아닌 heigth가 늘어나도록 수정했다→ 키 입력 이벤트가 발생할 때마다 textar

특정 지점에서 스크롤이 위로 튕기는 버그 수정→ onKeyUp에는 이벤트를 안걸어주었더니 해결됐다 (정확히 어떤 이유 때문인지는 모르겠다..)하지만 위 방법을 적용했더니 새로운 버그가 생겼다..textarea의 높이가 늘어날 때 'auto'로 잠시 바뀌면서 윗부분이 가

리팩토링한 컴포넌트 구조로 기존 코드를 수정했다.ImageSlide최상위 부모인 ImageSliderPage의 상태로 현재 슬라이드 index와 슬라이드의 갯수를 저장해주었다.슬라이드, 넘김 버튼, 포인터 3가지의 컴포넌트를 만들어 ImageSliderPage의 해당

리액트 공식문서 학습

와플카드 interception observer적용

User Interface의 주소창에 URI가 들아오면 Browser Engine에 전해준다.Browser Engine은 Data Prsistance에 캐시된 데이터가 있는지 확인 후 URI와 함께 Rendering Engine에 전달한다.Rendering Engine

CardList Animation 구현 시도문제점/결과isPlayMove상태를 의존하기 때문에 useInterval(스크롤 애니메이션)이 재실행, 중지될 때마다 리렌더링이 발생한다. 이를 막기 위해 ref로 변경 시도했지만 원하는대로 동작하지 않았다..이유isPlayM

React에서 useInterval을 사용해야하는 이유

명령형 프로그래밍절차지향 프로그래밍객체지향 프로그래밍선언형 프로그래밍함수형 프로그래밍객체객체 지향 프로그래밍절차적 프로그래밍객체 생성과 상속class와 prototype면접 준비를 위한 cs공부를 했다..다 한번씩은 들어본거지만 제대로 공부해보니 다 내가 사용해 본 것

React Hook VS Container Component https://yujonglee.com/socwithhooks.html 버블 정렬 알고리즘 sort((a,b) => a-b) - 바뀌어야하는 조건만 잘 설정해주기 주의!! a가 next, b가 prev이다

운영체제하드웨어를 관리하고, 응용 프로그램과 하드웨어 사이에서 인터페이스 역할을 하며 시스템의 자원과 동작을 제어하는 시스템 소프트웨어프로그램 - 실행파일프로세스 -운영체제가 실행시키고 있는 프로그램스레드 - 프로세스 안에서의 작업 흐름으로 프로세스의 자원을 공유하며

실행할 코드에 필요한 환경 정보를 모아놓은 객체로,함수가 실행될 때 생성되어 스택에 쌓이고, 가장 위의 있는 컨텍스트와 관련있는 코드를 실행한다생성 과정구조호이스팅: 실행 전 코드를 한번 쭉 훑으면서 식별자를 LexicalEnvironment에 순서대로 수집하는 것스코

빈 태그는 interSection observer사용 시 교차를 인지하지 못한다.flex적용된 부모 요소의 자식인 flex-item은 가로 정렬 시 본인의 content너비만큼으로width가 설정된다.직접 width에 값을 설정해도 0으로 먹힌다.그래서 flex-ite

this 학습 vercel배포 시 index.html로 우회하는 방법 알고리즘 문풀 사실상 문제를 보면 가로x세로 길이를 명시해서 더 헷갈리게 만들었다. 사실 어떤 모서리는 가로가 될 수도 있고 세로도 될 수가 있다. 그치만 한 모서리를 가로라고 지정하면 다른 모서

NotionClone Project 리팩토링 babel 오류 트리 구조 목록 구현

NotionClone Project 리팩토링 트리구조 목록에 이벤트 설정할 때의 오류 문제점 ul에 걸 경우 하위 ul에도 이벤트가 걸렸기에 이벤트 버블링 발생 최상위 ul에 이벤트가 2번 걸림 1뎁스의 PageItem이 2개인데, PageItem컴포넌트

NotionClone Project 리팩토링

콜백 함수콜백 지옥promiseasync await비동기 동작이란 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 것.비동기 제어/처리란 비동기 동작 코드완료 후에 실행헤야 할 코드를 지정하는 것.js는 동기적인 언어이기 때문에 비동기적인 코드를

클로저를 공부하다가 막혔다.함수 선언 시 함수 자체가 저장되는 것과 함수 실행 시 콜스택의 저장되는 것의 차이도 헷갈렸고실행 컨텍스트가 만들어지고 실행되는 과정과 클로저 현상을 연관지어 생각하는 것이 어려웠다..각각 내용을 배울 땐 알겠는데 연관지으려니까 어렵다.함수

의문점들을 찾아보았다.약간의 뇌피셜도 있지만 이렇게 생각하는게 편할 것 같다.매개 변수함수 몸체 (코드)environment (부모 함수의 환경 레코드 참조) 이외의 해당 함수에 관한 정보들함수 실행 메소드(call, constructor)애초에 선언될 때 부모 환경을

헤맨 것 페이지를 이동할 때 컴포넌트가 생성되게 했다. 엄연이 따지면 App컴포넌트가 한 페이지고 Sidebar와 EditFrame은 자식 컴포넌트지만 나는 각각 두 영역을 페이지로 사용하고 싶었기 때문이다. 왜냐하면 두 영역에 대한 로직을 각 App에 합쳐서 작성하

재귀 알고리즘 학습 재귀함수란? 자기 안에서 자신을 부르면 해당 함수가 복사되어 실행되는 것 (실행컨택스트가 만들어지는 것) 실행실행실행실행 - 리턴리턴리턴리턴 재귀함수가 호출된 곳으로 돌아감 수열, 규칙적이지만 복잡한 반복에 사용할 수 있다. 재귀 함수는 결국 반복을

정렬 알고리즘 학습 정렬은 무조건 오름차순, 내림차순이 아니라 정렬 조건에 따라 정렬하는 것이다. 모든 수를 자기 자리에 정렬시켜야하기 때문에 갯수만큼 비교 로직을 반복해야한다. 정렬이 된 영역과 안 된 영역이 있다. 일단 자기 자리만 잡는 것. 모든 값이 자기 자리

프로젝트 코드를 다시 보니 내가 짠 코드지만 하나도 못알아보았다.코드 퀄리티에 심각성을 느껴서 클린코드를 짜는 법에 대해 공부했다.유데미 강의 수강, 유튜브를 보며 공부하면서 내가 뭘 놓쳤는지 알게되었다.한 함수는 하나의 동작만 하도록.함수의 인수는 2개 이하 적당하고

클린코드에 대해 공부한 것을 바탕으로 MonthSub프로젝트의 유효성 검사 로직을 리팩토링 했다.게시글 생성과 수정에서 같은 form을 쓰게 했는데, 로직이 다른 점이 있다보니, 유효성 검사를 할 때 엄청난 중첩 if를 써서 작성했었다.최대한 한 함수에 한 기능을 담당

과제 전형 연습을 위해 프로그래머스 데브매칭 때 출제되었던 검색 앱을 구현했다. 기존에 만들어놓은 클래스 기반 베이스 컴포넌트로 만들었는데, 문제점을 발견했다. 특정 자식 컴포넌트만 부분 렌더링할 수 있도록 개선을 했지만, 부모의 상태가 여러 개이고, 각 상태가 각 자

바닐라 js과제 연습 - 기존의 베이스 컴포넌트의 구조로는 부모 상태 중 일부만 사용하는 컴포넌트를 선택적으로 리렌더링 시킬 수 없었다.상태 각각을 구독할 수 있는 패턴을 찾아보았으나, prop으로 넘겨받으면 안되고 직접 가져다가 써야했다(import하거나 등등..)p

input 속성에 autofocus을 작성해주면 자동으로 포커싱이 된다.replace를 사용해 특정 글자에만 태그를 씌워주도록 구현선언적으로 코드를 짜고 싶은데 기능들을 함수로 분리할 때 순수 함수로 깔끔하게 추상화하는 것과 함수명을 적절하게 짓는 것이 어려웠다.

api호출 성능 최적화 방법디바운스 & 쓰로틀링브라우저 스토리지 캐시 (세션 스토리지)사용성 개선자동 포커싱 - 값이 있으면 가장 뒤로가게창 닫았다 켜도 기존 상태가 유지되도록 (로컬 스토리지 이용)input cursor 텍스트 가장 끝으로 자동 포커싱하기input태그

ts + webpack5 환경에서 이미지 import가 안됐던 이유 src/index.ts 범위 안에 import를 안 했기 때문에 dist폴더에 안 만들어졌다.ts에서는 따로 이미지 확장자를 설정해줘야만 import한 image주소를 변수에 담아서 사용할 수 있다.i

에러처리를 모든 api를 추상화한 함수에 공통적으로 해줘야하는지각 api를 사용할 때마다 매번 try catch를 해줘야하는지 모르겠다..후자의 경우에 중복코드가 발생할 것 같은데 전자같이 한 번에 몰아서 처리하는 것도 좋은 방법은 아닌 것 같다.또한 공통적인 에러인

기존에 베이스 컴포넌트를 구성할 때 컴포넌트를 생성할 때 받는 element를 target이라고 지칭했다. 부모 돔으로 여기고 컴포넌트 내부에서 template메소드를 이용해 target돔의 내용을 생성해주는 걸부모 돔에 내 돔을 만드는 걸로 여겼었는데, 이럴 경우 컴

베이스 컴포넌트 리팩토링 - state와 props을 따로 관리해야하는가?컴포넌트를 생성하는 지점에서 초기 상태가 정해지기 때문에 컴포넌트 내부에서 어떤 상태를 추가하거나 어떤 상태를 가졌는지 확인하기 불편하다.또한 부모에게 받는 데이터와 컴포넌트 내부에서 쓰는 상태가

시맨틱 마크업을 위해 지켜야 할 것 div는 스타일 적용을 위한 그룹핑에 쓰임. 의미와 기능을 다 적용해야 함. alt값에 넣을 게 없을 때에는 생략하지 말고 비워둬야한다. 의미있는 내용만 태그로 일단 쭈우욱 만들어주고 스타일 적인 요소는 css로만 처리한다. ari

this는 함수 내부에서 자신의 호출 주체를 참조하기 위해 쓰인다.각 함수의 호출 주체일반 함수 - 전역 객체 참조메소드 - 함수 이름 앞에 명시된 객체 참조생성자 함수 - 반환한 인스턴스 객체 참조화살표 함수 - 상위 컨텍스트의 this(호출 추체)참조내부 함수 -

서비스의 수많은 변경 필수적이고 그것이 성장한다는 증거변경은 미리 알 수 없고 그렇기에 변경에 대응해서 개발해야한다. 외부 주입 데이터 + 내부 데이터(상태)를 관리함 그 데이터가 사용자에게 어떻게 보여질지 정의함 (ui)ui를 기반으로 어떻게 사용자와 상호작용할지를

html heading 태그의 올바른 사용법에 대해 공부했다.가장 중요한 규칙으로 아래 4개를 뽑아봤다.페이지당 한개의 h1을 사용논리적 구성의 목적이 아닌 경우의 사용 지양(강조 등)h요소의 순서를 지켜 사용섹셔닝 엘리먼트에 필수로 사용내가 잘못생각했던 점로고에 무조

바닐라js로 컴포넌트를 만들었을 때 이벤트 위임을 추상화한 메서드에서 많은 문제점을 발견했다.template이 재실행되면 기존에 있던 DOM이 날라가고 다시 그려지는 과정에서 children배열의 노드들이 무용지물 → 첫 마운트 이후 한번만 실행되기 때문에…와 Arra

context Api의 단점과 해결책 폼 태그 사용 시의 렌더링 최적화

과제+기술 면접을 보고 부족하다고 생각한 부분과 의문점이 들었던 부분을 복습/학습했다.화면이 이미 만들어져 있냐? 요청하는 즉시 만들어지냐?정적 웹(ssg) - 이미 만들어진 화면을 보여줌동적 웹 - 클라이언트 요청에 따라 실시간 데이터가 반영된 화면을 보여줌요청 즉시

한 파일에서 특정 함수가 전역변수를 써야할 때 클로저를 사용해서 접근을 제한할 수 있다는 것을 알게됐다. 면접에서 과제 피드백을 해주셔서 알게되었는데 클로저의 이론만 공부해봤지 실제로 적용한 적은 처음이라 이런 경우에 쓰는 거구나 하고 알게됐다.적용 전적용 후관련해서

공부할 것들을 다시 계획했다.1\. nextJS+TS+Redux 개인 프로젝트 진행2\. CS/네트워크 공부3\. 리팩토링 2판 읽기4\. 이외 공부해보고 싶었던 것들 → 프로그래밍 패러다임, 프론트 디자인 패턴, 리액트 내부 동작 공부, CICD, TD

자바스크립트의 객체 지향과, 객체지향 프로그래밍 vs 함수형 프로그래밍

문제점easing효과가 나긴하지만 diff가 작은 숫자일 때만 티가 남.숫자가 커지면 티가 나지 않게됨.diff의 크기에 비례해서 더 급격하게 그래프가 바뀌어야할 것 같은데..easeInQuad방정식을 어떻게 수정해야 할 지 모르겠다.클래스 컴포넌트React.Compo

TDD와 프론트엔드 테스트 모던 프론트엔드 테스트 전략 드림 코딩 엘리 - 테스트와 TDD 테스트란? 소프트웨어가 원하는 대로 동작하는 지 확인하는 것. 확인하는 요소는 함수, 특정 기능, ui, 성능, api스펙 등등이 있다. 목적 소프트웨어 품질

리액트 CRA를 안쓰고 환경셋팅을 해보았다.CRA에 많은 의존성 패키지들이 포함되어있어서 직접 셋팅하기 굉장히 어려울 것이라고 생각했다.하지만 먼저 해보았던 webpack(각종 로더들이 적용된), ts, lint+prettier설정에 그냥 jsx/tsx 확장자만 포함해

객체 지향 설계 프로그래밍의 유지보수성과 확장성에 도움이 되는 전략.주로 객체 지향 언어에 적용되지만 개발 프로세스의 핵심 철학으로 간주된다면 모든 언어에 적용될 수 있디.리액트를 사용할 때도 유지보수성과 확장성을 위해 solid원칙을 따라야할 필요성이 있다.단일 책임

컴파운드 패턴을 처음 적용해보았다.약간씩만 달라지는 ui를 구현할 때 props을 이용하는 것보다 유용하다.예시를 참고해서 구현해봤는데, 구현하려는 ui가 예시보다 복잡해서 생각보다 컴포넌트가 너무 많이 분할되었다..이게 맞나 싶은데 복잡한 컴포넌트의 예시를 찾지 못했

평소 부족하다고 느꼈던 네트워크와 프론트 성능 개선애 대해 공부했다. 네트워크의 정의 자체도 몰랐었던 것에 대해 반성했다. 전체적인 흐름이나 기본 개념까지는 파악했는데, 각 계층을 거치며 데이터가 전달되는 흐름을 자세하게 이해하지는 못했다. MAC주소와 IP주소가 왜

useEffect의 리턴 함수는 컴포넌트가 언마운트될 때 뿐만 아니라, 재실행되기 전에도 실행된다. 즉 다음 useEffect콜백 함수가 실행되기 전+언마운트 되기 전에 수행됨. reactMemo사용 시 컴포넌트가 조건에 따라 생겼다가 없앴다가 하면 최적화를 할 수

의문점 js가 왜 함수형 언어인지? 리액트는 함수형? 객체지향? -> 객체지향에서 함수형으로 바뀌는 추세인 듯? 리액트의 컴포넌트를 사용해서 조합하는 방식이 객체지향인건지? -> 아예 다른 개념인 것 같다. 작은 부분들로 조합해서 큰 것을 만드는 것은 그냥 복잡한