profile
완벽함 보다는 최선의 결과를 위해 끊임없이 노력하는 개발자
태그 목록
전체보기 (341)TIL(112)FE(9)redux(8)React(7)타입스크립트(6)프론트엔드(6)typescript(6)frontend(6)리덕스(4)CSS(4)개발자(4)html(4)프로그래머스(4)미들웨어(4)redux saga(3)recursion(3)리액트(3)ts(3)개발(3)bind(3)js(3)알고리즘(3)Saga(3)apply(3)call(3)카카오(2)React.memo(2)Tower of Hanoi(2)promise(2)ESLint(2)linked list(2)project(2)rtk(2)코테(2)코딩테스트(2)web browser(2)this(2)프로세스(2)프로토타입(2)토이프로젝트(2)카카오 코딩테스트(2)tree(2)event loop(2)웹브라우저 동작(2)redux-toolkit(2)JSX(2)플젝(2)State(2)Prototype(2)아토믹 패턴(2)Fetch(2)우선순위큐(2)프로토타입 체이닝(2)브라우저(2)클로저(2)리덕스 사가(2)스코프(2)middleware(2)타입(2)Graph(2)reduce(2)redux-middleware(2)lifecycle(1)scope(1)프로그래밍(1)고차함수(1)transform(1)Then(1)video(1)asynchronous(1)tuple(1)function(1)재귀함수(1)CRUD(1)코드스테이츠(1)find(1)template(1)도전(1)(1)data structure(1)diary(1)dotenv(1)비전공자(1)Flexbox(1)Binary Search Tree(1)Hash Table(1)예외처리(1)git github(1)함수 표현식(1)requestAnimationFrame(1)README.md(1)튜플(1)data type(1)Spread Syntax(1)유클리드호제법(1)하노이의탑(1)day1(1)any(1)sequelize-cli(1)파라미터(1)thunk(1)취준생(1)social-login(1)고급언어(1)lib(1)git HEAD(1)git checkout(1)keyCode(1)swr(1)어셈블리어(1)재귀(1)웹개발(1)토이 프로젝트(1)atom(1)browser(1)image(1)ssl(1)filter(1)Table(1)font(1)git branch(1)authentication(1)promise.all(1)운영체제(1)Fetch API(1)선택자(1)call stack(1)getElementByClassName(1)콜백지옥(1)토큰(1)객체지향 프로그래밍(1)세션(1)쿠키(1)반응형(1)코딩테스트 준비(1)infinite scroll(1)Restful(1)바이너리 서치(1)프로그래머(1)Time Complexity(1)prototype chaining(1)react router dom(1)inline block(1)호이스팅(1)selector(1)블라인드(1)캐싱(1)atomic(1)span(1)div(1)https(1)습관(1)grid(1)resolve(1)big o notation(1)sop(1)module.exports(1)git workflow(1)children(1)Today I learned(1)동기화(1)alias(1)heap(1)Context Switching(1)random(1)실행 컨텍스트(1)Object.create(1)프록시(1)Web API(1)git flow(1)toy project(1)key(1)불변성(1)자료형(1)css레이아웃(1)replace(1)스레드(1)취준(1)Blocking(1)V8엔진(1)스케줄러(1)object.entries(1)인라인요소(1)eval(1)Math.random(1)childNodes(1)redux-basic(1)arguments 객체(1)javscript 예외처리(1)springifyJSON(1)children vs childNodes(1)imperative vs declarative(1)선언형 vs 절차형(1)prototype 객체(1)currying vs closure(1)클로저 vs 커링(1)git잔디심기(1)prototype property(1)프로토타입 프로퍼티(1)프리코스를 마치며(1)document object(1)twittler(1)VOID(1)onsubmit(1)stack frame(1)활성객체(1)memory heap(1)동기 비동기(1)변수의 유효범위(1)스코프체인(1)변수객체(1)[[scopes]](1)parseJSON(1)circular queue(1)codestates HA(1)하노이의 탑 일반항 구하기(1)하노이의 탑 최소 시행(1)하노이의탑 재귀함수(1)doubly linked list(1)개발자취준(1)javascript runtime(1)git checkout -b(1)git conflict(1)시간 복잡도(1)this in node.js(1)this with 화살표함수(1)깃헙 정리(1)setTimeout this(1)this 바인딩(1)구조 분해 할당(1)strict vs non-strict(1)git pull vs git fetch(1)git diff(1)pull 대신 덮어쓸 때(1)git contribution(1)npm install --save(1)npm install --save -dev(1)깃 잔디심기(1)singly linkedlist(1)취업후기(1)edge(1)adjacency matrix vs adjacency list(1)inorder(1)빅 오 노테이션(1)callback Hell(1)interpreter vs compiler(1)기계어(1)객체 상속(1)git log(1)문자열 공백제거(1)화살표함수 복습(1)setTimeout 복습(1)Object.fromEntries(1)HA(1)logN 시간복잡도(1)setTimeout 매개변수 특징(1)병뚜껑 업다운(1)nQueens마무리(1)BFS vs DFS(1)reject(1)공채(1)spinner(1)CORS & npx serve(1)hybrid vs native vs web(1)simple component vs class component(1)state끌어올리기(1)선언형 vs 명령형(절차형)(1)react 정리(1)react 기초(1)setState이유(1)prop-type(1)axios vs fetch(1)@media only screen(1)HashRouter(1)Link to(1)push redirect(1)data fetching(1)console.table(1)바이너리힙(1)인접행렬(1)binary heap(1)인접리스트(1)리액트 개발자 로드맵(1)힙vs트리(1)세션vs토큰(1)session vs token(1)git commit 합치기(1)취업팁(1)linux find(1)선배 멘토링(1)개발자의 조건(1)웹페이지vs웹사이트vs웹브라우저vs웹서버(1)keydown(1)MIN_VALUE(1)NEGATIVE_INFINITY(1)airbnb convention(1)cra 프로젝트 세팅(1)cra project setting(1)git commit 되돌리기(1)깃 커밋 되돌리기(1)input options(1)focus out(1)max-width(1)spell check(1)onFocus(1)input 빨간줄(1)input red(1)input focus out(1)input focus on(1)인풋 빨간줄(1)input focus in(1)react hook componentDidMount(1)window.location.search(1)uri 파라미터(1)텍스트 축약(1)img tag(1)스피너(1)day3(1)day2(1)동작원리(1)day4(1)type alias(1)day5(1)day6(1)favicon.ico(1)repaint()(1)day7(1)day8(1)crop vs resize(1)day9(1)reflow(1)리렌더링(1)day10(1)day 11(1)멀쩡한 사각형(1)비전공자 개발자(1)토이(1)하반기(1)react-query(1)caniuse(1)ttf(1)react darkmode(1)윈도우에서 react(1)react세팅(1)map key(1)NFT(1)카카오-코테(1)Defer vs Async(1)unknown(1)calc()(1)개발자 취업(1)프로세스 동기화(1)렌더링 과정(1)리덕스툴킷(1)RTK Query(1)리덕스 쓰는 이유(1)리덕스 장단점(1)inline vs block(1)span div(1)렌더링 원리(1)자바스크립트 실행과정(1)자바스크립트 파싱(1)table tag(1)img 태그(1)비디오태그(1)video tag(1)인라인블록(1)js engine(1)테이블 태그(1)div vs span(1)div span(1)웹브라우저 동작원리(1)placeholder.com(1)브라우저지원(1)이미지 태그(1)크기별이미지파일생성(1)크기별(1)이미지파일생성(1)rtk middleware(1)redux-saga vs redux-thunk(1)rtk 미들웨어(1)분수의덧셈(1)css가상클래스(1)server state(1)제곱수의 합(1)제곱수의합(1)will-change(1)woff2(1)bypass cors(1)translate3d(1)프로그래머스 멀쩡한 사각형(1)멀쩡한 사각형 파이썬(1)이미지 최적화(1)useEffect vs useLayoutEffect(1)알고리즘 잡스 후기(1)코딩테스트 대비(1)알고리즘 잡스 수료생(1)algorithm jobs(1)알잡(1)코딩테스트 학원(1)알고리즘 잡스(1)ncsoft 개발(1)ncsoft 신입(1)ncsoft(1)ncsoft면접(1)개발자 합격(1)신입공채(1)개발직(1)비전공 개발(1)이미지 사전 로딩(1)토이플젝(1)gpu가속(1)하드웨어 가속(1)never(1)카카오 기출(1)프로그래머의 뇌(1)아토믹(1)리액트 쿼리(1)React Key(1)캐시 최적화(1)폰트 최적화(1)fontfaceobserver(1)react key값(1)redux하드코딩(1)리액트 키값(1)리액트 키(1)Atomic Pattern(1)organism(1)molecule(1)Optional Type(1)옵셔널 타입(1)readonly type(1)call signatures(1)주차요금계산(1)프로그래머스 양궁대회 js(1)양궁대회(1)d.ts(1)NFT란(1)NFT 정의(1)NFT 사는이유(1)희소성(1)크립토펑크(1)key값 쓰는 이유(1)map index js(1)취뽀(1)고유한 key(1)text overflow(1)Event Queue(1)브라우저 동작원리(1)useLayoutEffect(1)useselector(1)웹브라우저(1)자바스크립트(1)신입(1)onblur(1)스케줄링(1)git merge(1)JavaScript(1)Route(1)favicon(1)소셜로그인(1)woff(1)font-display(1)최적화(1)CSS Module(1)cors(1)git(1)파이썬(1)cookie(1)페어프로그래밍(1)취업(1)github(1)http(1)JWT(1)web(1)공부(1)API(1)Sequelize(1)OOP(1)함수(1)Binary Search(1)백준(1)이진탐색(1)inline(1)비동기(1)Map(1)error(1)자료구조(1)css선택자(1)Flex(1)redux thunk(1)DOM(1)그래프(1)클론코딩(1)input(1)블록요소(1)block(1)Proxy(1)CODESTATES(1)일급객체(1)git reset(1)stack(1)queue(1)closure(1)rest parameter(1)Props(1)useEffect(1)

[ToyProject] 점진적 과부하 사이트 - 18

목표 : FE에서 api로 아이디, 비밀번호, 닉네임 정보를 POST하면(이 때, 보안과 관련된 처리도 해야한다) BE에서는 이 정보를 받아서 ORM을 통해 데이터베이스(MySQL)에 저장한다. 이 때, 유효성 검사를 반드시 하고 진행을 해야하고, 만약 유효성 검사 단

어제
·
0개의 댓글
·

[ToyProject] 점진적 과부하 사이트 - 17

회원가입 관련 컨트롤러, 서비스(프로바이더) 정의 : 컨트롤러: 프로바이더그리고 실제로 프론트에서 이를 호출했다.호출을 할 때는 axios 모듈을 사용했다. 로컬끼리의 통신이었지만, 일단 정상적으로 작동하고, 데이터를 주고 받을 수 있다. 중간에 cors 관련 문제가

2일 전
·
0개의 댓글
·
post-thumbnail

[ToyProject] 점진적 과부하 사이트 - 16

위의 형식으로 Users 테이블을 만들 예정이다. nestJS, MySQL, typeORM을 사용해서 만들 예정이며 이번 주말에는 Users 테이블의 마이그레이션 및 로컬에서 react <-> nestJS 테스팅까지 완료가 목표이다(이 과정에서 인증 등의 구현도

6일 전
·
0개의 댓글
·
post-thumbnail

[ToyProject] 점진적 과부하 사이트 - 15

맨 상단에는 기존에 썼던 GlowHeader 컴포넌트를 재활용해서 Profile(title 부분) 페이지임을 표시한다.하단에는 본래 위와 같이 디자인을 했지만, email -> id로 바뀌고, height & weight 정보는 초기 버전에서는 추가하지 않을 예정이므로

6일 전
·
0개의 댓글
·
post-thumbnail

[ToyProject] 점진적 과부하 사이트 - 14

: 일단 아직도 완성이 안됐나?! 라고 내 스스로에 대한 반성으로 시작한다. 하지만, 새해 목표와 같이 매번 실패를 해도 끝에 가서는 완성만 하면 되는거다. 이번엔 5월 7일까지 끝내보자 라는 원대한(?) 계획을 갖고 시작해보자.recoil 로 리팩토링 완료nestJS

2023년 3월 14일
·
0개의 댓글
·

[DOM] DOM 관련 기술용어 및 ETC

요구 사항(실무 기준)을 받고, 바로 코딩을 해서는 안된다. 해당 요구 사항을 바탕으로 시나리오를 작성할 줄 알아야 한다(코딩테스트를 볼 때 요구 사항을 수도코드 만으로 구현을 끝낸 것처럼). 적절한 시맨틱(개발자에게 의미라는 뜻)과 뉘앙스(단어 선택이 똑같더라도 뉘앙

2023년 2월 28일
·
0개의 댓글
·
post-thumbnail

[React] key 값을 쓰는 이유(2)

: 위의 현상을 다시 살펴보고자 글을 써본다. : 위의 JSX 를 렌더링하고 있는건데, 포인트는 div 태그의 key값에 map 메서드의 index를 준 상황이다. 물론 아예 key값을 주지 않아도 위의 상황과 똑같을 것이다. key값을 index(map의)로 줬을 때

2023년 2월 24일
·
0개의 댓글
·
post-thumbnail

[React] key 값을 쓰는 이유(1)

: 생각해보니 항상 당연하다고만 알고 쓰고 있었던 이 부분에 대해서 내가 명확한 이유를 잘모르고 있다는 생각이 들어서 이에 대해 테스팅과 무엇이 포인트인지를 짚고 넘어가고자 글을 써봤다. React에서 map 메서드를 이용해서 배열을 렌더링할 때, 각 요소에 고유한 k

2023년 2월 23일
·
0개의 댓글
·
post-thumbnail

[React] 불변성

: 어떤 값을 직접 변경하지 않고, 새로운 값을 만들어내는 것이다... 이게 무슨 뜻일까? 어쨌든, 리액트를 사용할 때는 이러한 불변성을 지켜줘야한다는건 모두가 대략적으로는 안다. 예를 들어, 위에와 같은 함수를 써서 혹은 로직을 써서 직접 값을 변경하면 안되고, se

2023년 2월 21일
·
0개의 댓글
·

[TIL] 2023/02/20

key 값(리액트에서 같은 이름의 컴포넌트를 구분하기 위해 선택 속성으로 만들어놓은 것)은 props 로 받을 수 없다. 예를 들어,이런식으로 해놨다고 해도 Data 컴포넌트에서 props로 key를 받을 수 없다.

2023년 2월 20일
·
0개의 댓글
·
post-thumbnail

[React] React 복습겸 토이 프로젝트 진행 (4)

리액트의 동작 원리 Virtual DOM 이해하기 DOM(Document Object Model) 이란? : 문서 객체 모델로 불리는 DOM은 결론적으로, 웹 브라우저 안에서 HTML 문서에 JS를 통해 접근해서 문서 구조, 스타일, 내용 등을 변경하기 위해 우리

2023년 2월 20일
·
0개의 댓글
·
post-thumbnail

[React] React 복습겸 토이 프로젝트 진행 (3)

부제 : 기본 세팅: Prettier 란 vscode의 extensions 파트에서 다운 받을 수 있는 code formatter이다. 코드 포매터란 무엇일까?. 예를 들어, 다음의 코드를 보자. 전혀 이상할거 없이 보이는 위 코드에는 보기 불편한 들여쓰기가 두번이나

2023년 2월 20일
·
0개의 댓글
·

[TIL] 2023/02/19

https://velog.io/@tosspayments/%EA%B2%B0%EC%A0%9C%EC%9C%84%EC%A0%AF%EC%9C%BC%EB%A1%9C-30%EB%B6%84%EC%95%88%EC%97%90-%EA%B2%B0%EC%A0%9C-%ED%8E%98%

2023년 2월 19일
·
0개의 댓글
·
post-thumbnail

[React] React 복습겸 토이 프로젝트 진행 (2)

: scoop을 쓰면 된다. 그러나, 직접 다운받아도 상관없다.위와 같이 타입스크립트를 사용해서 프로젝트를 만들어봤다.웹팩(WebPack) : 웹팩은 프론트엔드 프레임워크에서 사용하는 대표적인 모듈 '번들러'이다. 웹 애플리케이션은 JS 코드 뿐만 아니라 다양한 css

2023년 2월 17일
·
0개의 댓글
·

[React] React 복습겸 토이 프로젝트 진행 (1)

리액트는 페이스북에서(현재 meta) 2013년에 발표한 오픈 소스 자바스크립트 프레임워크이다.리액트 프레임워크는 가상 DOM(Document Object Model)과 JSX(Javascript XML)라는 새로운 방식으로 동작하는 프레임워크이다.eXtensible

2023년 2월 17일
·
0개의 댓글
·

[Typescript] 복습 - (3)

: 이 말을 약간 풀어서 말해보면 js의 함수는 우리가 객체 지향 프로그래밍에서 특정 클래스에서 인스턴스를 생성하면, 그 인스턴스는 해당 클래스에 정의된 특성 및 메서드를 실행할 수 있는 자격 등을 갖게되는 것처럼, 함수도 Function(같은 말이지만) 클래스의 인스

2023년 2월 16일
·
0개의 댓글
·

[React] Atomic Pattern (2)

아토믹 패턴 정리 경과 보고(?) : 지난번 아토믹 패턴 관련 포스팅을 하고 나서 어언,, 3개월 정도가 지나서 이 포스팅 시리즈를 마무리하려고 한다. 이렇게 시간이 지난건 그 시간동안 실제로 아토믹 패턴을 팀원분들과 설계하고, 실제 적용하고 개발하느라 이다(핑계인가

2023년 2월 16일
·
0개의 댓글
·

[Typescript] 복습 - (2)

: 사실 여태까지 Interface 보다는 Type을 주로 써와서즉, 위와 같이 써도 interface와 같은 역할을 type이 해주기 때문에 주로 type을 썼었다. 하지만, 인터페이스도 사실 같은 기능을 하는 것이기에 알아두면 분명 쓸데가 있을..까(이건 팀마다 혹

2023년 2월 7일
·
0개의 댓글
·

[Typescript] 복습 - (1)

: 우리가 흔히 아는 ES5, ES6 는 포함 관계가 명확하다. 즉, ES5에 없는 문법이 ES6에 있고, ES6로 코딩을 했을 경우에 결국엔 ES5로 트랜스파일링을 해줘야한다. 그러면 같은 원리로 Typescript도 ES6의 문법을 포함함과 동시에(당연히 ES5도

2023년 2월 7일
·
0개의 댓글
·

[TIL] 2023/02/03

https://www.codeit.kr/roadmap/frontend-2023

2023년 2월 3일
·
0개의 댓글
·