- 전체보기(263)
- DFS(8)
- 완전탐색(4)
- Sort(4)
- BFS(3)
- this(3)
- 재귀(3)
- splice(3)
- useEffect(3)
- stack(3)
- queue(3)
- regexp(2)
- API(2)
- Binary Search(2)
- ESLint(2)
- &&(2)
- combination(2)
- toggle(2)
- 발상의 전환(2)
- 리팩토링(2)
- useState(2)
- useInterval(2)
- greedy(2)
- hash(2)
- useMemo(2)
- dynamic array(2)
- setInterval(2)
- setTimeout(2)
- reduce(2)
- Que(2)
- FCP(1)
- 생명주기(1)
- 시각화(1)
- Compound Components pattern(1)
- 이중 포인터(1)
- google(1)
- 일단그대로만들기(1)
- mutaionObserver(1)
- git(1)
- 503(1)
- test(1)
- canvas(1)
- withCount(1)
- Mocking(1)
- 버그(1)
- corona(1)
- search(1)
- routing(1)
- kwargs(1)
- function(1)
- undefined(1)
- heroku(1)
- dic(1)
- mixin(1)
- Fiber(1)
- path parameter(1)
- scss(1)
- destructuring(1)
- cors(1)
- webvitals(1)
- component(1)
- next image(1)
- done(1)
- Pivot(1)
- min-width(1)
- promise(1)
- every(1)
- swr(1)
- H Index(1)
- LCP(1)
- WILDCARD(1)
- history API(1)
- 순수함수(1)
- contains()(1)
- absolute(1)
- relative(1)
- 고딩때의 추억(1)
- GET(1)
- POST(1)
- makeStyles(1)
- 프로그래머스(1)
- debugger(1)
- static path(1)
- alias(1)
- slug(1)
- OOP(1)
- merge(1)
- restful api(1)
- DNS(1)
- bind(1)
- customState(1)
- stackoverflow(1)
- createStyles(1)
- IAM(1)
- 선언형 방식(1)
- smoking test(1)
- happy path(1)
- heap(1)
- 스켈레톤(1)
- 개발자 vibe(1)
- commands(1)
- NOT(1)
- Request(1)
- 약수의 갯수(1)
- srcset(1)
- boolean(1)
- mocks(1)
- custom render(1)
- Namespace(1)
- findIndex(1)
- fibonacci(1)
- memoization(1)
- 함수형 컴포넌트(1)
- cypress(1)
- quick(1)
- 개발자직업병(1)
- vmin(1)
- 응집도(1)
- nth-of-type(1)
- Thinking in React(1)
- notifyOnChangeProps(1)
- jsconfig.json(1)
- variables(1)
- Helper(1)
- sortable(1)
- reconciliation(1)
- beforeunload(1)
- Module(1)
- 무식하게(1)
- dijkstra(1)
- 라우팅(1)
- MVC(1)
- Trie(1)
- 뿌듯(1)
- beautifulsoup(1)
- CLS(1)
- navigate(1)
- 해쉬(1)
- throttle(1)
- debounce(1)
- HistoryAPI(1)
- BLOGGING(1)
- Object.assign(1)
- "for 와 recursive의 조화(1)
- high order function(1)
- Prototype(1)
- await(1)
- sizes(1)
- cachememory(1)
- nth-child(1)
- skeleton(1)
- compose(1)
- loader(1)
- waitForElementToBeRemoved(1)
- try/except(1)
- rules of hooks(1)
- 일단돌아가야..ㅋ(1)
- Statement(1)
- wait()(1)
- async(1)
- rstrip(1)
- 다시 만들기(1)
- return(1)
- escape(1)
- class(1)
- for(1)
- State and Lifecycle(1)
- cmd(1)
- bubble(1)
- JavaScript(1)
- singly linked list(1)
- render_template(1)
- useParams(1)
- pagination(1)
- 고차함수(1)
- Higher-order Function(1)
- JSX ELEMENT(1)
- tailwind(1)
- Call By Reference(1)
- 신뢰자산(1)
- progress(1)
- unshift(1)
- 신속정확(1)
- span(1)
- div(1)
- nested for loop(1)
- auto-complete(1)
- d.ts(1)
- react testing library(1)
- error(1)
- wrap(1)
- If_Else(1)
- ec2(1)
- documentFragment(1)
- mini project(1)
- json(1)
- drag and drop(1)
- 크루스칼(1)
- const(1)
- replace(1)
- 맴버변수(1)
- 식도염(1)
- 사실성장(1)
- visible(1)
- format(1)
- Prime(1)
- diffing(1)
- componentWillUnmount()(1)
- 다중 정렬(1)
- expression(1)
- CS(1)
- End to End Test(1)
- filter(1)
- props.children(1)
- z-index(1)
- debugging(1)
- Hash brown 맛있겠다(1)
- new Intl(1)
- ARP(1)
- delete(1)
- build error(1)
- mixitup(1)
- 클린코드(1)
- base_url(1)
- special characters(1)
- react-query(1)
- 부분집합(1)
- jquery(1)
- 투자(1)
- Group(1)
- bruno(1)
- media query(1)
- RAM(1)
- State(1)
- useReducer(1)
- LILO(1)
- vite(1)
- sqlite(1)
- global(1)
- 응급상황(1)
- DOM(1)
- query paramter(1)
- DB 설계(1)
- good_job(1)
- global style(1)
- PriorityQueue(1)
- styled(1)
- styled components(1)
- memory leakage(1)
- 칭찬(1)
- hook(1)
- useCallback(1)
- MSW(1)
- act(1)
- fixtures(1)
- Derived State(1)
- CustomHook(1)
- 꼭꼭 숨어라 머리카락 보일라(1)
- 이중포문(1)
- double bang(1)
- CSR(1)
- SSR(1)
- github-issues(1)
- 콜트짱!(1)
- preventDefault(1)
- 최대약수(1)
- localstorage(1)
- Pop(1)
- 오류(1)
- inline(1)
- shield.io(1)
- transition(1)
- split()(1)
- max(1)
- f-string formatting(1)
- CustomEvent(1)
- tryCatch(1)
- animation-fill-mode(1)
- getter(1)
- extends(1)
- Then(1)
- Fetch(1)
- submit(1)
- dict(1)
- addEventListener(1)
- 삽질(1)
- layer(1)
- doubly linked list(1)
- Delegation(1)
- LIFO(1)
- jest(1)
- MAX_PAGE(1)
- change event(1)
- HoC(1)
- useLocation(1)
- github(1)
- 오히려좋아(1)
- 컨벤션(1)
- dash(1)
- FID(1)
- 인형뽑기(1)
- random(1)
- FLOOR(1)
- seo(1)
- lazy(1)
- validator(1)
- JSX(1)
- Flask(1)
- super excited(1)
- auto fit(1)
- auto fill(1)
- useNavigate(1)
- dblclick(1)
- life cycle(1)
- debug(1)
- Map(1)
- @BeforeEach(1)
- 그래프(1)
- describe()(1)
- CRUD(1)
- new Date(1)
- spyon(1)
- withStyle(1)
- data set(1)
- clean-up(1)
- Props(1)
- Content(1)
- min(1)
- 데이터 분석(1)
- dispatchEvent(1)
- single source of truth(1)
- plotly(1)
- csv(1)
- color palette(1)
- pandas(1)
- grid(1)
- max-width(1)
- 나무(1)
- customElement(1)
- dynamic programming(1)
- closure(1)
- 좋은 개발자(1)
- github issue(1)
- emotion(1)
- 이름짓기(1)
- audio(1)
- set(1)
- react router(1)
넥스트 이미지 컴포넌트 cdn 이미지 불러오기
cdn 주소를 env파일에 담아놓고 path parameter만 바꿔 이미지 컴포넌트 src에 pass 했다.그런데 어떤 짓을 해도 503이 안 없어지는 것이다. 그래서 사수님께 여쭤보았고 아주 빠르게 해결해주셨다. loader를 사용하는 것이다.loader는 url
url query paramter, path parameter 파싱하는 법
출처: https://dmitripavlutin.com/parse-url-javascript/
next js 에서 redirect 시키기
https://github.com/vercel/next.js/discussions/1489013버전이면 https://nextjs.org/docs/app/api-reference/functions/redirect
Error: `'` can be escaped with `'`, `‘`, `'`, `’`. react/no-unescaped-entities 에러
next js 를 vercel에 빌드하려다 생긴 에러이다. 이유는 간단하다. '를 그대로 넣어서 그렇다. 콤마보다는 html entities를 사용하도록 eslint에서 force하고 있어서 생긴 eslint이다.해결책은 아래와 같다콤마대신 entities를 넣어주면
short url과 custom scheme
short url 에 대해서 알고 싶으면 여기: https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=is_king&logNo=221534471474인코딩해서 서버에서 변환한다음 300번 c
안드로이드 폰 내 컴퓨터에서 디버깅
https://m.blog.naver.com/dsmobile3550/221299587135여기서 하라는대로 하고 chrome://inspect/
이미지 sizes? srcset?
html img attribute를 통해 이미지 최적화를 할 수 있다. next js image도 이걸 바탕으로 최적화 한다.더 자세한 내용은 아래 링크로 https://web.dev/learn/design/responsive-images/#sizes
animation
animation-fill-mode의 forwards를 알아보던 도중 정리해본건참고로, forwards는 애니메이션 마지막 시점의 css를 유지하기위한 prop이다name > duration > timing-function > delay > count > directi
next image static path
이미지 파일 본래의 크기를 계산해서 자동으로 높이와 너비를 계산하게 하려면 static path를 src에 넣자.참고로, CLS도 막아준다.아래처럼!출처 : https://nextjs.org/docs/basic-features/image-optimization
styled components - compose?
https://styled-system.com/api/#compose 참고해서 적기
declare로 타입을 알려주자!
declare란?: 전역 타입을 선언할때??module vs namespaced.ts?참고자료https://www.typescriptlang.org/ko/docs/handbook/namespaces-and-modules.htmlhttps://velog
힘을 좀 빼자(feat, 디자이너와의 커뮤니케이션)
회사에 입사해서 아주 간단한 일을 맡게 되었다. 바로 텍스트를 추가하고 UI의 위치를 바꾸는 일!그러나, 의문점이 생겼다. 피그마상에서 사용자의 이름과 예약정보가 분리되어있는것이다! 같이 모여있으면 좋겠다는 생각이 들어 사수한테 물어보았다.'이거 분명 분리되어있는 이유
테오의 스프린트 14기 후기 - 개발하기(4~6일차)
: 황금같은 토요일 아침일찍부터 일어나 팀원들과 같이 개발하기 시작했다. 뭔가 하루를 굉장히 알차게 보내는 느낌이 들어서 괜스레 기분이 좋았다.게더타운에 들어가니 다른 팀들도 같이 개발을 하고 있었다.아마 아침10시에 모였을거다. 그리고 3개의 소그룹 팀으로 나눠졌고,
테오의 스프린트 14기 후기 - 개발하기 전 생각의 싱크 맞추기(1~3일차)
구글 스프린트라는 책을 읽고 그 책을 토대로 나름대로 자신만의 스프린트를 만든 테오이다.총 6일간 스프린트를 진행했다. 6일중 3일을 서비스에 대해 밤새 토론했다.우린 봄 시즌을 한정으로 초대장을 커스텀하는 서비스를 만들기로 했다.일일 단위로 자세하게 설명하겠다.: 팀
신입으로써의 마음가짐
드뎌 취업에 성공했다... 정말 설레지만 동시에 두렵기도 하다.. 그럼 나는 어떻게 해야하는가? 가히 국내 최대규모의 프론트엔드 단톡방이라고 할 수 있는 테오의 단톡방에서 보고 들은것을 토대로 앞으로 가져야할 마음가짐을 정리해보려 한다.: 기한을 지키는게 가장 중요하다
EC2에 대해서
일단 간단하게 적고 나중에 세세하게 정리.: 버지니아 북부 지역이 모든 EC2를 지원하는 지역, 디폴트운영체제 + 서비스운영에 필요한 자원 --> 설치 가능.AZ(Availability Zone): Region안에 여러개의 AZ가 존재. 하나의 AZ가 문제생겼을경우 다
IAM
AWS의 IAM에 대해서 배웠다. 일단 AWS에 대해서 거의 모르지만 차근차근 정리해보려 한다.우선 이렇게 막무가내로 정리하고 나중에 다듬으려 한다.Identity(실사용자) and Access Management의 약자AWS전반에 걸쳐 권한을 통제하는 서비스.인증: