Today I Learned

2020/08/09 TIL

Today, I Learned HTML, CSS를 학습했다 html에서는 기본적인 tag(head, body, meta, base, img, ul-option:list-style:none, ol, 'span vs div', 각종 semantic 태그(heade

Today, I Learned DOM이란 무엇인가, 그리고, 자바스크립트와 무슨 관계에 있는가 DOM을 일종의 '편리한 도구'라고 했을 때(Document Object를 관리하게 해주는), 이를 바탕으로, Javascript 언어와 함께 elements를 Cr

Today, I Learned JS, CSS, HTML 만을 이용해서, 즉, 서버를 이용하지 않고, DOM을 통해서 input을 받아서 만들어놓은 JSON에 자료를 넣기도 하고, 그 추가된 자료를 TODOLIST 만들듯이 추가되도록 하는 기능을 구현해봤다. 처음에 form 태그를 이용해서 onsubmit 이벤트를 일으켜서 만들려고 했으나, fo...

Planning to Study Document Object에 대한 이해(복습) 객체지향 프로그래밍 부분까지 문법 복습(JS) 현재 twittler 프로젝트로 회원가입까지(with API) 구현해서 포폴로 쓸 수 있게 만들어놓기 flexbox, grid

Today, I Learned 일급 객체 : 일급?(=first class)=> 특별한 대우를 받는 객체 => 특별한 대우 : 값으로 취급돼서 변수로 할당이 가능하고, 함수의 인수로도 줄 수 있고, 함수의 리턴값으로도 줄 수 있는 것 = 함수(function)

Today, I Learned Planning to Study 고차함수 코플릿 23, 27번 다시 풀어보기(답은 맞았지만, 풀이가 레퍼런스에 비해서 비효율적이였음

Today, I Leanred 절차형 프로그래밍 vs 선언형 프로그래밍 : 그저께 배웠던 추상화와 연관시켜 설명가능 => 절차형 프로그래밍이 하나하나 구체적으로 '절차' 혹은 'how to do it'을 명시해주는 프로그래밍이라면, 즉, 그것을 이해하려면, 하나하나 그 과정을 따라가면서 아 이렇게 되고, 이렇게 되는구나 하는 식이라면, 선언형 프로그래...

Today, I Learned Flex, Grid를 사용해서 의류 쇼핑몰 레이아웃 만들기 (header 부분을 flex로, section 부분을 grid로 만들기) Login Form을 만들되 Popup Form으로 만들기 회원 정보를 받고, 로그인이 되

Today, I Learned 깃에 잔디심기(commit 기록 남기기)가 안될 때 => git config --list 명령어를 써서 현재 user.email에 설정된 이메일과 내 깃헙 아이디에 등록된 이메일이 같은지 확인! => 같지 않으면, 'git confi

Today, I Learned PRE-underbar advanced 문제 마무리 (except for 3 problems) eval을 통해서 문자열을 코드처럼 쓸 수 있다. 예를 들어, eval('2+2'); 를 하면 결과는 4가 리턴된다.내가 이것을 응용한 코드 : result.push(eval('el.'+functionOr...

Today, I Learned 재귀(Recursion)에 대해서 학습

Today, I Learned 재귀함수를 이용해서 getElementByClassName() 메서드를 구현해봤다. element.classList.contains(classname)을 이용해서 해당 요소에 찾고자하는 클래스 명이 있는지를 탐색해볼 수

Today, I Learned 먼저, 오늘은 웹 브라우저에서 자바스크립트 엔진이(크롬의 경우 V8) 어떤 식으로 구성되어있고, 어떻게 실행되는지를 공부했다.먼저, 자바스크립트 엔진의 구성요소는 memory heap과 call stack이고, 이 call stack

Today, I Learned 클로저란 간략하게 말해서 자유 변수(free variable)를 참조하는 함수이다. 이 때, 자유 변수란 이미 콜 스택에서 실행되고 사라진 실행 컨텍스트의 활성 객체에 있던 변수를 의미한다. 본래, 이미 실행된 실행 컨텍스트의 활성

Today, I Learned advanced 과제였던 'parseJSON'을 완성하고 제출했다. 어제부터 작업했는데, 정말 밑 빠진 독의 밑을 고쳐놓으면 다른 부분이 새고, 그 부분을 고치면 다른 부분이 새는 느낌으로 하나하나 디버깅해가는 과정을 경험하면서 지식

Today,I Learned 코드스테이츠 HA(Hiring Assessment)날로 10시부터 문제를 풀기 시작했다. 최종적으로 마음에 안드는 풀이까지 고치는 시간까지 포함해서 4시 20분쯤 끝났으니까 6시간 20분 정도 걸린 것 같다. 밥먹고 쉰 시간 빼면 5시

Today, I Learned 하노이의 탑에 대해서 공부했다. 사실 예전에 블로그를 뒤지며 공부해보려던 때가 있었는데, 번번히 실패했다(사실, 머리 쓰기가 귀찮았던 것 같다). 근데, 오늘은 정말 이상하게 하노이의 탑 공부(재귀함수에 대한 이해가 부족하다는 생각에

Today, I Learned 백준 알고리즘 1914번 : 하노이의 탑 풀기(Clear) let num = Number(prompt('>')); function hanoi(n, from, to, by_ ) { if (n === 1) { conso

Today, I Learned Javascript Runtime에 대해서 ( 참고 사이트 ) Javascript Engine : Javascript 런타임의 구성요소 중에 하나로 자바스크립트 엔진이 있는데(구글의 v8같은), 이러한 자바스크립트 엔진은 또

Today, I Learned About 화살표 함수 함수를 선언 및 초기화 할 때, function을 써서 하는 것과 달리, 화살표 함수는 function을 없애고, 그 대신 (매개변수) => {} 형태로 쓴다고 생각하자 이 때, 화살표 함수

Today, I Learned About git : merge Conflict가 발생했을 때, vs code에서 제공하는 선택지 중에 current change는 내가 변경한 것을 선택하는 것이고, incoming change는 상대방의 변경 사항을 선택하는 것이

Today, I Learned 자료와 자료형, 그리고 자료구조의 이론적인 부분에 대해서 간략하게 학습했다. 먼저, 자료(Data)는 문자, 소리, 영상, 단어, 숫자 등 다양한 종류로 된 '의미 단위'이다. 그렇다면, 자료형은? 본래 컴퓨터는 0,1 만을 이해할

Today, I learned 먼저, linked list를 직접 구현해봤다(자바 스크립트 객체를 이용). 그 다음에 해쉬 테이블을 구현해봤는데, 아직 복습이 필요할 것 같다. 사실 오늘은 두 개를 만들고 나니 머리가 더 이상.. 작동(?)하지 않아서 공부를 멈췄

Today, I Learned 변수를 만든 뒤에 둘 중 true인 것을 넣고 싶을 때, 예를 들어, let val;val = [1,2,3] || false;이렇게하면, val에 true가 들어가지 않고, true를 가능하게 해준 [1,2,3]이 들어간다. 이 문법

Today, I Learned Graph, Tree, Binary Search Tree(BST) 복습 graph :

Today, I Learned 알고리즘 시간 복잡도 : 시간 복잡도란, 나만의 정의로 표현해보면, 자료의 크기의 증가에 따라 자료에 대해 작업을 하는 시간이 증가하는 정도(비례 정도)로 표현해볼 수 있다. 그래프를 하나 떠올렸을 때, 가로축에는 자료의 크기(n)이

Today, I Learned About prototype & prototype chaining 정리 링크 : 1, 2 기계어(010101) => 어셈블리어 => 고급언어(C, C++, JAVA) : 이러한 변화 및 발전 과정은 결국 컴퓨터가 쓰는

Today, I Learned

Today, I Learned sprint심화 학습으로 파리들을(?) 클릭하면 제거하는 로직을 짜봤다. elFly.addEventListener('click', (event) => { let body = document.body; recursion(body, event.target); })// 아래는 재귀함수 구현(...

Today, I Learned Object.entries(obj) : 이 메서드는 매개변수로 받는 객체의 키와 값 쌍을 배열 형태로 ([키, 값] 형태) 모아놓은 배열을 리턴한다. 이 메서드를 이용하면, for (const [key, value] of Object

Today, I Learned 오늘은 nQueens 스프린트를 진행했다. 배운건 많지만 오늘 포스팅하기엔 무리이기에.. 오늘은 Comment로 마무리해야겠다. (countNRooksSolutions까지 clear) Comment 집에서 공부하다보니(핑계지만) 나태해지는 케이스가 너무 많다. 사실상 내방에 책상이 있어서 그런지 학교로 치면 ...

Today, I will Learn nQueens Sprint 끝까지 풀기 풀면서 DFS, BFS, BackTracking 공부 문제 다 풀고 총복습

Today, I Will Learn HA test 풀기 HA test 오답 풀이 및 정리 nRooks, nQueens 재도저~언! Today, I Learned HA test 풀기(clear) : => HA라서 긴장했는데, 여태까지 한 스프린트에 대

Today, I Will Learn nQueens 마무리 'Self Guided Lessons - Basic CS' 를 통해 여태까지 스프린트 공부 및 부족한 부분 공부 Today, I Learned nQueens 마무리(clear) : 10:00~10

Today, I Will Learn 비동기 처리 sprint 마무리 이번 스프린트 내용 정리 Today, I Learned 비동기 처리? : 웹 서핑을 하다보면, 예를 들어, 유튜브를 보다보면, 재생버튼을 누르고=> 로딩이 길어지는 경우 => 귀찮아서

Today, I Will Learn Today, I Learned CORS 관련 공부사이트 : 코드카데미 CORS(Cross Origin Resource Sharing) : GET 요청으로 자료를 받아오거나 할 때, 하나의 호스트, 그리고 동일한 프로토콜,

Today, I Learned What is Node.js? : node.js는 javascript runtime(런타임) 중에 하나로(웹 브라우저도 해당됨), google이 제공하는 V8엔진을 바탕으로 빌드되었다. 좀 더 쉽게 말해보면, 자바스크립트를 실행하는

Today, I Learned CORS & npx serve (sprint advanced)계획대로 npx serve를 이용해서 CORS를 좀 더 깊게 알아보고자 했는데, 일단 CORS와 PREFLIGHT 체크 로직이 어떻게 이루어지는지는 더욱 자세히 알 수 있었

Today, I Learned fs(file system)모듈의 메서드 중에 fs.appendFile을 이용해서 txt파일에 자료를 추가했고, fs.readFile을 이용해서 그 txt파일을 불러왔다. 아직 DB를 배우지 않아서 이런식으로 DB 모형?을 구현해서

Today, I Will Learn server-client interface 관련 레슨들 복습하면서 노트에 정리 6,7part 복습 및 노트 정리 + socrative 문제 및 스프린트 코드 복습 => 시간 남으면 블로그 정리(이거는 아마 내일 해야할듯) T

Today, I Learned 기존의 twittler 구현 사이트를 이용해서 expressJS를 이용한 서버 및 클라이언트를 바탕으로 refactoring 했다. txt을 DB로 이용했고, setInterval을 이용해서 실시간으로 계속해서 정보가 업데이트되도록

Today, I Learned About React : - 리액트를 실험(?) 혹은 연습해볼 수 있는 사이트 : CodePen, CodeSandbox, Glitch, or Stackblitz. 리액트는 html파일에 script 태그를 통해, react, reactDOM, babel을 import해오고, text/babel 타입 태그를 통해 클래스 혹...

Today, I Learned 선언형 vs 명령형(절차형) 한번더 공부하기 : 참조 사이트 리액트(react)는 어제도 정리했지만, 자바스크립트 라이브러리로, 주요한 특징으로는 'User Interface(UI)' 를 Component 단위로 관리한다는 것이다

Today, I Learned 왜 state를 수정할 때는 setState를 써줘야할까? : setState로 수정을 해줘야만 React가 수정 사항을 '인식'할 수 있고, 그에 따라 render를 할 수 있음. setState로 수정을 안해도 state값은 수정이 되지만, React가 인식하고 render하지는 않는다는 차이가 있음. Class ...

Today, I Learned 오늘은 TIL.. 그래 말그대로 TIL 식으로 써보고자 한다. 나는 오늘 youtube API를 통해 youtube에 검색 request를 보내서 데이터를 받아와 렌더해주는 로직을 리액트를 통해서 만들어봤다. 사실 예전부터 API에

Today, I Will Learn Today, I Learned what is props? : prop-types 관련 React 공식 문서 JSON Viewer를 통해 웹 브라우저(크롬)에서 JSON 형태로된 url을 좀 더 깔끔하게 볼 수 있다. P

Today, I Learned fetch vs axios props check module : prop-types 노마드 코더의 클론 코딩(영화 웹 서비스) 해보기 clear : 내가 만든 사이트 링크 Planning to Study <

Today, I Learned 어제 만든 클론코딩 사이트에 검색 기능을 만들기에 도전했다. 그러다 하게된 삽질(?)에 대해서 정리해놓고자 한다.먼저, setState가 asynchronous, 즉, 비동기 처리라는 것을 알게 됐다. 그래서 setState를 해준 다음에 바로 this.state에서 값을 받아서 쓸 때는 비동기처리와 동기처리가 이루어지는...

Today, I Learned 오늘은 redux에 대해서 배웠다. 일단, 내가 이해한 redux는 state 끌어올리기를 통해서 관리 했던 이전의 react방식과는 달리, 상대적으로 좀 더 간단하고, 편리한 방법으로 state를 관리할 수 있도록 해준다. 먼저, 가계도를 생각해봤을 때 이전의 react방식은 가계도의 최상위 그러니까 예를 들면.. 할아...

Today, I Learned HA day, 사실 그렇게 어렵지는 않았다. 이전에 클론 코딩을 했던 부분이랑 겹치는 것도 많았고, youtube API를 써서 했던 recasy.ly 스프린트랑도 비슷했기에 어려움은 없었다. expressJS를 복습하기도 좋은 시간

Today, I Will Learn redux sprint 마무리 redux 스프린트 내용 정리 Solo Day 어떻게 활용할지? : 1) 먼저, redux 복습 제대로 하자. 분명히 효율적인 라이브러리이다. => 블로깅하기 2) asynchronous 부

Today, I Will Learn Toy problem 15번, 19번 풀기 redux + react로 toDoList 앱 만드는 법을 설계하기 (코딩x only 수기로 적어보기) Today, I Learned Toy 19번 : merge So

Today, I Will Learn Toy 19번 -정렬 공부 및 문제 제출 마무리 Toy 15번 -문제 풀기 Toy 20번 풀기 redux로 만든 toDoList 완성해보기 Today, I Learned Toy 19번 clear : 시행

Today, I Will Learn Today, I Learned css 반응형 폰트 사이즈 관련 참조 사이트 : css 반응형 폰트 크기 flex, grid는 온라인 쇼핑몰 상품 나열 페이지를 만들 때 와같이 뭔가가 늘어나거나, 줄어들거나, 즉, 변화가 있

Today, I Learned Toy Problem 20, 21, 22, 23번 도전 toDoList deploy에러 해결하고, list css 부분 고치기 인프런 강의로 온라인 쇼핑몰 만들어보기 Space Complexity = Auxiliary Sp

Today, I Learned css 크기 단위 Planning to Study Comment

Today, I Will Learn Toy Hash Table 풀기 Modal Component 구현하기 이메일을 써서 post하면 나의 resume 보내주기 + Contact 페이지 완성하기 모바일에서도 잘보이도록 반응형 설정하기 만든 기능 및 배

Today, I Will Learn Today, I Learned SQL 조건문 종류 SQL도 일종의 프로그래밍 언어이기에 내가 평소 쓰는 언어의 문법과 형태만 다를뿐 목적은 유사하다. 예를 들어, if문은 SQL에서는 WHERE와 같고, and 연산자 등은

Today, I Learned sql 쿼리문을 batch mode라고 해서 직접 터미널에 치지 않아도, 쿼리문이 쓰여진 파일을 알아서 읽은 뒤에 그 쿼리문을 실행해주는 모드가 있다. (관련 링크) 점점 스케일이 커지면서 집중력을 유지하는 것이 더욱 중요해졌다. 이제 클라이언트의 화면단(view)에서부터 서버 그리고 컨트롤러, 모델, 데이터베이스 ...

Today, I Will Learn SQL sprint 마무리 및 W3SCHOOL로 한번더 복습 포트폴리오 앱에 express js로 라우팅 및 SQL로 자료 관리하기 추가(포스트 부분) Toy Problems 2문제 풀기 Today, I Learned

Today, I Learned 좋은 글 쓰기 강연 요약 참고 블로그 깃에 productive-box와 waka-box를 이용해서 내가 깃을 얼마나 이용했는지(커밋량), 어떤 언어를 몇시간 공부했는지(vsCode와 연동하여 통계를 내주는 wakatime의 API

Today, I Learned node.js 의 Object Relation Mapper(ORM)인 sequelize에 대해서 배웠다.간략하게 정리해보면, sequelize는 지난번 스프린트 때 썼던, node.js와 mysql을 연결해주는 mysql 모듈과 유사

Today, I Will Learn Asynchronous & Promise 부분 복습 포트 폴리오 비동기처리 부분 수정하면서 공부한 부분 실습 sprint 복습(sequelize) Today, I Learned about dotenv 실제로 sequelize-cli를 통해 db:migrate를 할 때는 NODE_ENV를 expor...

Today, I Will Learn Toy Problem 27번 풀기 Solo Sprint 내용 완벽 숙지 후 풀기 Today, I Learned Toy 27번 clear - About Binary Heap : 트리와 달리 자식 노드 간의 대소는 상관없

Today, I Learned response에서 보내주는 일반적인 cookie와 세션 속의 쿠키?의 비교(헷갈림) [참고 자료] About JSON Web Tokens(JWT) Planning to Study Shortly-express sprint에 회원가입 및 로그인 그리고 유저 정보 받아오기 + 구글 및 깃 로그인 구현해보기

간략하게 소셜 로그인 방식에 대해서 설명해보면, 전통적인 인증(authentication)방식은 인증을 받고자 하는 서버 내에서 클라이언트로부터 정보를 받아서 인증을 해주는 방식이였다. 그러나, 매번 새롭게 회원가입을 해야하는 불편함 등에 따라 인증을 대행해주는 서

Today, I Will Learn Today, I Learned 여전히 쿠키, 세션, 토큰 헷갈리는 중.. 그래도 헬프 데스크에 좋은 글이 있어서 참고하자(혹시 지워질 수 있으니 복붙) **레퍼런스 : (주)코드스테이츠 깃헙 페이지 헬프 데스크 댓글정확히 짚어

Today, I Learned 토이 문제 28, 29, 30 클리어 그러나, 28번 문제 완전 탐색으로 구현해서 6번 케이스에서 시간 초과가 생김.. 완전 탐색에서 좀 더 효율적으로 탐색 회수를 줄일 수 있는 방법을 모색해야할 듯하다. Comment

Today, I Learned Toy 28번 문제 clear(시간 초과문제 해결)Toy 28번 시간 초과문제 해결. 완전 탐색 알고리즘을 만들었을 때 시간 초과문제가 발생해서 경로 탐색에 있어서 어차피 탐색해봤자 맞지 않는 길을 탐색하는 케이스들을 조건문을 걸어서

Today, I Learned 개발자의 적성 혹은 좋은 개발자의 조건을 정리해놓은 브런치 글 가끔 개발을 손절하고 싶을 때(?) 읽으면 다시 초심을 다지는 계기가 되는 글이라 링크를 걸어둔다. 브런치 링크내가 인상깊었던 부분을 바탕으로 정리해보면, 개발자에게 필요한 덕목은 여러개가 있지만, 그중에 내가 지키고자 하는 덕목은 논리력, 즉, 현상이나 동작...

Today, I Will Learn Today, I Learned 리액트 개발자 로드맵 참고 블로그 : 링크 목표를 세우고 그 목표를 이루

Today, I Learned Planning to Study References differences between dev-dependencies and dependencies : blog find 명령어 정리(리눅스 명령어) : link 실제 업무에

Today, I Will Learn CORS 공부하고 블로깅하기 shortly-express 뜯어보기(완벽 파악해보기) 알고리즘 문제 40번까지 도전(솔로데이 때 다 풀고, 플젝기간에는 복습 or 새로운 문제 풀기) Today, I Learned

Today, I Learned 내 블로그 내가 복습하기 플랜 (8/15부분까지 복습 완료) => 스코프 개념은 잘 기억이 나는데, 클로저랑 스코프 체이닝하는 원리가 잘 기억이 안남. 이부분 복습이 필요함. 생각해보니 재귀함수할 때 다음 재귀함수에서 이전 스코프에서의 변수를 인식 못하는 것도 스코프 체이닝 원리와 관련된 것!! RobotPaths 문제 ...

Today, I Learned 리액트에서 항상 함수를 정의해줄 때, constructor에서 binding을 해줬는데, 화살표 함수를 써서 함수를 정의하면 굳이 바인드 함수를 써서 바인딩을 안해줘도 됨. 일반 함수에서는 this가 자동으로 바인딩되지 않지만, 화살표 함수는 자동으로 바인딩 해주기 때문임! (참고 블로그) + 이분의 medium 블로그가...

Today, I Learned Number.MINVALUE : 표현할 수 있는 제일 작은 '양의' 숫자를 리턴함 !== Number.NEGATIVEINFINITY : 음의 무한대 값을 리턴함 => 최대값을 구할 때, 최대값 변수에 NEGATIVEINFINITY를

Today, I Learned react 개발할 때 css 클래스 이름이 겹치면 어디서 겹쳤던지 항상 갑자기 문제를 일으키고는 했는데, 그러한 부분을 일절 발생하지 않게 해주는 모듈을 찾았다 => CSS module + 팀 프로젝트를 할 때도 다른 사람과 클래스

https://dev.to/sivaneshs/add-google-login-to-your-react-apps-in-10-mins-4del

Today, I Learned const { matches } = window.matchMedia('(max-width: 48rem)'); 이 코드를 통해서 만약 웹으로 접속하면, 즉, max-width설정을 통해, 48rem 이하인 디바이스에서 접속하면(m

Today, I Learned Toy 39번 clear => 좀 더 심플하게 생각을 하자. 너무 복잡하게 생각하는 것은 그렇게 좋은 접근은 아닌 것 같다. 이제 예전만큼 나에게 어려운 것은 없다. 자신있게 문제를 대하자. window.location.searc

Today, I Learned Planning to Study Comment

Today, I Learned Spinner 사용법 : 서버로 요청을 보낼 때, spinner display를 보이게하고, finally에서, 즉, 서버 비동기 요청이 끝났을 때에 최종적으로 spinner display를 다시 none으로 돌려놓는 방법을 쓸 수

Today, I Learned README.md 파일을 깃 마크다운 언어로 작성해놓으면 깃헙 레포에서 README.md 파일을 html처럼 렌더링해서 보여준다. 여기에 해당 레포에 대한 간단한 설명 등을 적어놓으면 된다. 마크 다운 관련 문법 정리는 구글링하면 나

Today, I Learned 파이널 프로젝트 아이디어 생각중에 떠오른 아이디어들 정리1) 대학생들 중에서 마케팅 수업 등 리서치를 위한 웹 스크래핑 대리 서비스, 사이트에 사용자가 특정한 테이블명 등만 찾아서 입력하도록하면 스크래핑해서 엑셀시트 및 데이터 시각화까지 해주는 서비스. 예전에 조모임을 할 때, 여성 속옷 소비자들의 니즈를 파악하고자 무작...

Today, I Learned web socket.io 관련 유튜브 링크 : link Final Project Start! 1) 타입스크립트 책 30일 플랜 짜서 무조건 1회독하고, 프로젝트에서 써먹어보기 2) 리덕스 꼭 쓰기! 3) html, css 제대로 공

Today, I Learned 리액트 컴포넌트 설계 방법 먼저, UI를 바탕으로 컴포넌트를 분할해본다. 이 때, 기본 원칙은 하나의 컴포넌트는 하나의 역할을 한다는 것이다(단일 책임원칙). 뿐만 아니라 컴포넌트를 구성할 때에는 '재사용성' 측면을 고려해야한다. 예

Today, I Learned 플로우 차트 그릴 때 유용한 사이트 : link Planning to Study Comment

Today, I Learned -webkit-user-drag: none; 을 해놓으면 이미지를 끌어다가 움직이게 할 수 없다. 정확히 말하면 이미지 드래그를 막는 것!. 추가적으로, 텍스트 등을 드래그하면서 읽을 수 없도록 하려면 -webkit-touch-callout: none; -webkit-user-select: none; -kh...

Today, I Will Learn Today, I Learned infinite scroll 만들기 : link Planning to Study(In Project) infinite scroll 결국 구현 못했다..으휴.. 하지만 무조건 구현한다. 거의

Today, I Learned PostModal 창 관련 컴포넌트 구현 완료. 현재, 댓글 부분에서 글이 길어졌을 때 어떻게 처리할지는 아직 정하지 못함. 글의 길이가 길어지면 ...more로 만들어서 more를 누르면 늘어나도록 해야할지,, 아니면 아예 글 제한

Today, I Learned URL에 로고를 변경하는 방법 : public 폴더에 .ico 확장자로 이미지 파일을 올려놓고, index.html에 링크로&ltlink rel="icon" href="%PUBLIC_URL%/logo.ico" /&gt해주면 된다.

Today, I Learned react-easy-crop 구현 완료Unable to preventDefault inside passive event listener invocation. 이 에러가 브라우저에 계속 콘솔창에 뜨는데, 해결해놓자 Planning

Today, I Learned Crop vs Resize formData를 보낼 때는 multipart라고 헤더에 명시해줘야한다. const response = await axios({ method: 'post', url

Today, I Learned React.memo : 이전 props와 동일한 props로 리렌더링 되는 상황이 많은 컴포넌트를 React.memo로 리팩토링해서 얕은 비교, 즉, React.memo에 이전 렌더링을 저장해놓고, 다음 렌더링시에 이전 props와 props가 동일하면 이전에 저장해둔 것을 재사용하는 방식으로 더욱 빠른 re-rende...

Today, I Learned height를 무조건 100%으로 하지말자. 그것 때문에 오늘 많은 고생의 시간이 있었다. 모바일에서 input 창을 누르면 확대되는 자동 기능을 없애려면 => link jsx 내에서 모바일 반응형인 상황에서의 처리를 해줄 때는 const handleCommentFolder = () => { const ...

토요일 목표1) MyPageModal Mobile UI 좀 더 손보기(끝내놓기)2) 수정 버튼 클릭 안되는 문제 해결하기3) 댓글 input을 똑같이 새로 만들어서 대댓글 다는 케이스에는 따로 input 받기4) 댓글 부분 UI 어긋나는 것 고치기5) 이미지 슬라이드

Today, I Learned textArea 혹은 div 등에서 글자를 자동 줄넘김 시킬 때 단어를 기준으로 할지, 그냥 글자를 기준으로 할지 등을 결정하면서 줄넘김을 시키는 css property white-space: pre-wrap; overflow-

Today, I Will Learn 노마드 코더 영화앱 리팩토링 : 1) 모바일 UI 설계 완성(0) 2) 디테일 페이지 완성 3) 전체적인 디자인 재생성 및 인피니트 스크롤 만들기 4) 내 로고 생성해서 실제 사이트처럼 만들기 5) 다크 모드 만들기 6) 스피너 제대로 만들기 Today, I Learned 노마드 코더 영화앱 리팩토링 : ...

Today, I Learned 리트코드 1302. Deepest Leaves Sum 문제 풀이(한번에 푸는건 실패.. 페어 분의 도움을 받아서 풀었다) Planning to Study 면접 질문 리스트 공부하기(블로깅 하면서) Comment 생각해보니 코드스테이츠 끝나고 연말까지 조금 풀어진 것 같다. 이제라도 정신을 차렸으니 다행이다.....

Today, I will Learn LeetCode 문제 풀이 easy 2문제/medium 2문제/ hard 1문제 1) closure에 대해 설명해 주시고 example이 있다면 이야기해 주세요 2) js에서 this란 무엇이고 어디에 사용되나요 3) Dif

Today, I Learned npm vs npx먼저, npm은 nodeJS Package Manager로써 패키지 설치 및 실행을 가능하게 해준다. babel & webpack 관련 블로그 참조 링크 : link Planning to Study Comment

Today, I Learned Cannot read property 'match' of undefined 관련 에러해결 방법 : node_modules 폴더와 package-lock.json을 삭제 후에 npm install을 다시해주기. react로 dar

1) 윈도우에서 react 세팅하는 방법 : 맥이랑 다를바 없음. 일단은 node js 를 다운 받고, 그 다음에 npx를 이용해서 create-react-app을 해주던지, npm(node package manager)를 통해서 create-react-app을 다운

프론트 전부다 완성 시키기 자료 있다는 가정하에 인피니트 스크롤 등 전부다 완성해놓고, 자료를 받기만 하면(혹은 리덕스로 리팩토링을 하더라도) 끝날정도로 완벽하게 설계해놓기

1) 리액트는 다른 사람이 내 프로젝트를 받았을 때, package.json에 등록만 되어있다면, npm install 입력으로 패키지를 모두 설치할 수 있었는데, 파이썬 프로젝트에서는(장고) 어떻게 하나가 궁금했었다. 그와 관련한 링크 를 참조해서 알게 된 것은 "p

1) git 관련해서 초기 세팅할 때git config --global 로 해준다ex) git config --global user.name "yongki"git config --global user.mail yongkidev@stylebot.co.kr그 다음에 확인하

1) 모든 부분에 대해서 드래그를 못하도록 막는 body css 특성 -webkit-user-select: none !important; -moz-user-select: -moz-none !important; -ms-user-select: none !impo

1) 깃에서 특정 브랜치만 클론해오고 싶을 때 사용하는 명령어2) 리액트는 SPA이기 때문에 document 자체에 addEventListener를 써주면 다른 엔드 포인트에서도 해당 이벤트가 동작하게 된다. 따라서 특정 페이지에만 이벤트를 해주고 싶다면, useRef

python의 reversed, join, slicing(\[]) 모두다 O(N)의 시간복잡도를 가진다.문자열, 리스트를 뒤집을 때 ::-1로 뒤집는 방법이 있다.heapq 모듈에 대해서(참고 블로그): heapq는 우선순위 큐로 알려진 힙 자료구조와 같은 구조로 동작

section 태그는 구획을 나눌 때 쓰는데, 그 구획을 나누는 부분이 다른 구획과 연관성을 지니면서 독립성이 낮을 때 쓴다. article 태그 또한 구획을 나눌 때 쓰는데, section에 비해 독립성이 높고, 그 부분만 따로 떼어놔도 충분히 제 기능, 제 역할 혹

python에서 combinations 모듈을 처음 알았다. : 위와 같이 써주면 중복을 허용하지 않으면서 nums 배열에 있는 모든 요소를 가지고 만들 수 있는 모든 3개의 조합을 튜플 형태로 리턴함. i = (x,y,z) 형태로 리턴됨. \*\* itertools에

window.location.origin: 현재 페이지의 origin(cors에서 쓰는 그 origin 이라는 말과 같은 의미) 정보를 조회할 수 있다. 위를 보면 어떤식으로 쓰이고, 뭘 말하는지 알 수 있음.redux 구조로 react 프로젝트를 만들 때, Prese

Component 안에 Styled-Component를 넣으면 안된다. Styled-Component 자체도 하나의 컴포넌트 단위이기 때문에 컴포넌트 안에 또하나의 컴포넌트를 여러개 넣게 되면 에러가 발생한다. 실제로, 이렇게 했다가 무한 루프와 같은 렌더링 에러가 발

Redux 를 왜쓸까 ? : 사실 redux는 내가 작년에 스타트업에서 일하면서 너무나도 애용(?)했던 라이브러리였기 때문에 이제와서 이걸 왜쓸까라고 묻는 것은 앞뒤가 안맞긴 한 것 같지만, 정리해보면 다음과 같다. 먼저, 내 주관적인 생각으로는 component 내에

TIL Styled-Components : css-module 만 써왔던 나로서는 처음에는 styled-components를 배워야(?)해서 상당히 귀찮다고 생각했는데, 막상 써보니까 러닝 커브라는게 솔직히 거의 없는 것 같고, 바로 써먹을 수 있었다. 그중에서도 s

Polling(폴링)이란? : 본래 웹 통신(HTTP or HTTPS)에 있어서 socket.io 등을 이용하는 것이 아니라면 모든 통신은 100% '실시간'이 아니라는 것은 알고 있었다. 무슨 말인가하면, 예를 들어, 정각 9시에 수강신청을 하는 우리들의 대학시절을

Today I Learned 매일 사용하지만 신경을 쓰지 않는 이부분은 해당 어플리케이션이 처음 렌더링될 때 혹은 새로고침시에만 activate된다. 이후로는 re rendering 되는 부분에 대해서만 내부적으로 virtualDOM 비교를 통해 렌더 메서드를 다시

: 어제도 배웠지만, index.js는 웹앱이 처음 실행되는 시점 그리고 새로고침되는 시점에서만 activate된다. 그리고 그안의 ReactDOM.render()가 항상 궁금했는데, 보통 그안의 첫번째 매개변수로 &lt;App /> 가 오게된다. 이 때, 나는 원래

: 본래 state update or props 의 변동이 발생하면 해당 컴포넌트는 재실행이 되게 된다. 그렇게되면 함수 내의 모든 로직을 다시 실행하게 된다. 사실 함수는 호출할 때 함수 내의 로직을 매번 다시 실행하도록 설계됐기 때문에 이는 당연한 것이다. 하지만,

예를 들어, onClick 이벤트 등을 jsx 내부에 쓸 때 복잡한 로직의 함수를 넣는 등의 행동을 '지양'하자. jsx 내부 로직은 항상 lean하게 유지한다는 생각을 갖자.?? 무슨말일까. SPA 를 지원하는 리액트는 User의 interaction에 따라 화면을

나는 항상 props가 업데이트 되고 그 props를 가지고 특정한 값을 리렌더링해야 하는 경우에는 props에 대해서 useEffect의 deps에 넣고, 그 안에서 또 다른 state를 props 값을 커스텀한 값으로 업데이트 해주는 방식으로 이러한 로직을 구현했었

항상 solid한 코드를 작성하려고 리액트-리덕스 패턴 속에서도 노력했었지만 솔직히 정확하게 리액트 내에서 solid한게 뭔지도 잘 몰랐던 것 같다. \*\* Single Responsibility Principle 이란?What the single-responsibi

이 블로그를 참조해서 공부를 했는데, 리액트를 통해 좀더 유지, 보수하기 좋은 코드를 짜기 위한 고민을 해봤다.    The most common function of a container component is to obtain data. Obtaining data

이러한 특성을 가진 useRef를 보통 DOM을 참조 및 가져와서 쓰는데에만 사용했었는데, 개수를 센다던지, 회수를 센다던지의 값을 쓸 때 useRef를 이용해서 사용하면 좋을 것 같다. 이를 사용하면 딜레이의 걱정도 없고, 리렌더링이 될 일도 없기 때문이다.위와 같은

Today I Learned useReducer vs useState > The useReducer hook is usually recommended when the state becomes complex, with state values depending on ea

Today I Learned Redux-Thunk는 함수를 디스패치 할 수 있도록 해주는 미들웨어이다. Redux-Saga는 액션을 모니터링하고 있다가, 특정 액션이 발생하면 이에 따라 특정 작업을 하는 방식으로 사용한다.

사실상 리덕스를 일반 코드로 표현해보면 위와 같을 것이다. send는 우리가 흔히 아는 dispatch일 것이고, 그 안에 액션을 넣어주면, 그에 따른 액션을 dispatch한다. 그에 따라 store안에 전역 state가 변하게 된다. 이 때, state를 변화시키는

순수함수인 reducer에서 각기 다른 로직(api의 결과에 따른)을 만들면 순수하지 않은 함수가 되기 때문에 이를 reducer 외부에서 파이프라이닝(dispatch에) 작업을 통해 해결하는 아이디어를 사용한 것이 thunk이다. 그래서 시작 -> api 결과(성공)

Today I Learned Provider 내부나 어쨌든 Component 내부가 아닌 곳에서 setStateAction 타입을 호출한다해도 그 아래에 속한 하위 컴포넌트의 리렌더링에는 영향을 미치지 않는다. setStateAction이 리렌더링 시키는건 컴포넌트

GPU를 쓰도록 css 설정을 하고 싶을 때 '레이어 핵(Layer Hack)'을 쓸 수 있다. 예를 들어, 위와 같은 흔히 알고 있는 CSS style에 3d를 붙여주면 GPU 가속을 활성화시킬 수 있다고 한다. 그러나, GPU 가속을 사용하면 웹 페이지의 렌더링 속

contextAPI를 사용할 경우, Provider의 children 요소들은(바로 하위 컴포넌트) 반드시 리렌더링 된다(React.memo와 상관없이). 하지만 children의 children에는 메모가 적용된다. 이는 결론적으로 contextAPI를 쓰면 Prov

useEffect의 dependency로 static한 데이터를 넣었을 때, 만약 다른 setStateAction과 엮인 state가 업데이트 돼서 컴포넌트가 리렌더링되면 state에서 특정 객체 내의 특정 값을 dependency에 넣었을 때와 마찬가지로 특정 값이

++ 연산자 관련 알게된 사실 : 본래 이런식으로 ++ 연사자를 쓰면 num = num + 1 한 것과 같은 결과를 내는 것은 알고 있었다. 그러나, 이렇게 앞에다 ++ 연산자를 써도 같은 결과를 낸다는 것을 알게 됐다. 사실 ++ 연산자를 이렇게 써본적이 없었기에

1) 컴포넌트 단에서 위와 같이 쓰고 scss 에서 위와 같이 해주면 그대로 적용이 된다. scss를 css-module이랑 쓰면서 styled-component의 css control 간편성(?)이 그리웠는데, 이런식으로 css를 컨트롤 할 수 있는 방법이 있었다.

https&#x3A;//www.codeit.kr/roadmap/frontend-2023

https&#x3A;//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%

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

print-brave라는 모듈을 만들어서 publish 해본다.폴더 구조는 이렇게 간단하게 했다. index.js package.jsonREADME.md이렇게 폴더를 만들었으면 폴더에 접근하여 커맨드 창에 를 쳐준다.그러면 위와 같이 publish가 된다.마지막으로 실

ios 앱심사 리젝트 사유1) 스크린샷을 앱의 동작 흐름과 관련된 설명과 함께 좀더 디테일하게 찍어야한다. 예를 들어, 운동앱인 내 앱의 경우 실제로 어떤 식으로 앱의 메인 서비스인 운동 기록을 할 수 있는지에 대한 간략한 설명과 그 설명에 맞는 화면을 제공해야 한다.

forEach or map은 비동기 순차처리를 하지 못한다 : 애초에 for문이 아니면 map, forEach 등은 async, await 에 대한 순차처리를 하지 못한다. 단지 for 문처럼 블록안의 문을 순차적으로 실행할 뿐, await를 기다리지 않는다. 따라서위

: Proxy에 관련해서 공부를 하다 Object를 중간에 가로채서 get, set 등의 내부 메서드를 쓸 수 있다는 것을 알게 됐고, 이 로직을 이용하면 DOM API를 통해 코딩할 때 좀더 편리하게 리렌더링 로직을 짤 수 있을 것 같아서 직접 만들어봤다.이름을 입력

DOM Node들을 sorting 하는 방법에는 뭐가 있을까? : 혼자 토이 프로젝트로 vanilaJS 만을 써서 todolist와 비슷한걸 만들고자 했다. 이 때, todolist 제목을 기준으로 정렬하는 기능도 만들었는데, 여기서 dom api 가 제공하는 chil

알아두면 좋을 Chrome Console 기능들

: airbnb를 클론코딩 해보면서 바닐라 자바스크립트로 할 수 있는 것들을 토대로 html, css, js를 복습한다는 방향으로 공부해보자. : 먼저 위의 카테고리 header를 구현해보자.항상 정중앙 정렬을 할 때(물론 transform, top, left, pos

프랑스어로 빠르다(Quick)를 의미하는 vite!(그만큼 빠르다를 강조하고 싶었나보다). 특정 프레임워크에 종속된 것이 아니고 React, Vanilla, Svelte 등 프론트엔드 개발 어디서든 사용할 수 있다.vite는 크게 2가지 역할을 한다.Dev Server

The globalCompositeOperation property sets or returns how a source are drawn over a destination.: source(이제 그리려고 하는 것) 가 destination(이미 캔버스에 그려져 있는 것)

: 개발을 하던 도중 svg와 circle 태그로 만든 동그라미 마우스 커서에 attribute로 준 fill-color와 konvaJS로 만든 캔버스에 그은 Konva.Line의 stroke-color 값에 동일한 값을 줬음에도 커서의 색깔과 선의 색깔이 다른 에러를

: 이터러블과 관련해서 공부를 하다가 나온 지연 평가라는 말이 있다. 지연 평가란 일반적으로 loop를 돌 때 배열을 생성해놓고, 이를 순회하는 경우가 많은데, 이 경우처럼 데이터를 미리 메모리에 확보하는 게 아니라 데이터가 필요한 시점에 데이터를 생성한다는 의미라고

Today I Learned Svg, Circle 이용해서 도넛 모양 마우스 커서 만들기 canvas, svg의 viewBox Attribute 등을 보면 기본적으로 (0,0)을 기준으로(보통 화면의 왼쪽 상단이 0,0이 됨) 얼마나 떨어져 있는 지점에서 시작할건지를

Today I Learned window.screen.avail[Width/Height] : avail[Width or Height] 는 브라우저에서 작업 표시줄 등을 제외한 순수 화면의 사용 가능한 너비와 높이를 반환해준다. window.screen.availWid

: 골머리를 썩혀오던 문제를 Konva.Ring으로 해결할 수 있을 것 같다!. 내일 완벽하게 해결할 예정!https&#x3A;//konvajs.org/docs/shapes/Ring.htmlhttps&#x3A;//konvajs.org/docs/events/Pointer

기획을 확인하고, 모듈을 만들 때, 하나의 메서드에 하나의 기능 혹은 기획 단위를 넣으려고 했는데, 그것보다는 내 입장에서는 오히려 번거롭지 않을까? 스러웠던 세부 기능 단위로 쪼개서 메서드를 제공하는 편이 좋을 것 같다. 특정 기능 혹은 플로우 단위로 메서드를 만들면

: 기존재하던 프로젝트를 clone 받아서 작업을 할 일이 생겼는데, 해당 프로젝트의 노드 버전이 >= 18 이었다. 하지만, 다른 프로젝트에서는 다른 노드 버전을 쓰고 있었기 때문에 나중에 심신의 안정(?)을 위해 해당 프로젝트에서만 18.18.0을 쓰고자 했다. 이

: 생각해보면, 진지하게 고민해본적은 없다. redux 아키텍처를 만들면서 보일러 플레이트 코드라고 생각하고 쳤던 것들 중에 리듀서가 있었고, 그 역할에 대해선 이해를 하고 있었지만(특정 액션을 바탕으로 state를 어떻게 변화시킬지를 정의해놓고, 이를 통해 새로운 하

순수 VanillaJS 로만 작성한다.최대한 심플해야한다.https&#x3A;//velog-thumbnail-maker.vercel.app/벨로그 썸네일 생성기를 만들자width : 768px & height : 402px 로 고정이다.canvas를 굳이 활용할 필요는

https&#x3A;//velog-thumbnail-maker.vercel.app/

\-> clientHeight 속성은 세로 패딩을 포함하여 요소의 높이를 반환한다. 기본적으로 표시된 콘텐츠가 사용하는 실제 공간을 반환한다. backdrop filter를 먹인 div 레이어가 자꾸 브라우저 크기만큼만 영역을 차지하고 아래 스크롤 된 부분은 차지하지

https&#x3A;//dom-event-learning.vercel.app/

: 새로 맡게된 프로젝트가 JS로 돼있어서 이를 TS로 바꾸고자 한다. 이유는 직접 TS를 써보고 난 후에 든 주관적인 생각이지만, TS를 쓰면 오히려 복잡한게 많고, 제한도 많지만, 이에 따라 런타임에서 일어날만한 에러 요소들을 먼저 해결하고, 알아서 집어준다는 점에

: 프로젝트를 진행하다보면 전역 객체에 프로퍼티를 할당해서 쓰는 경우가 있다. 이 때, 타입스크립트를 쓰는 프로젝트라면 이에 대해서 에러가 발생하게 된다.보통은 위와 같은 에러를 낸다. 이 에러를 잡기 위해서는 window 단에 접근해서 해당 타입들을 지정해 줘야한다.

: 디바운스는 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 한다. 좀 더 쉽게 표현해보면 디바운스는 짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 마지막에 한 번만 이벤트

UTC 형식으로 온 날짜 데이터는 한국 시간보다 9일이 느리다. 따라서 이를 한국 시간으로 사용하려면 따로 계산을 해줘야한다. 위의 코드는 UTC 시간 데이터를 받아서 이를 한국 시간으로 바꾸고, 나름의 포매팅을 해서 리턴해주는 함수이다(자작). getMonth()는

mutationFn에서 api를 호출하는 로직을 넣어놨고, useMutation에서 onSuccess, onError 키값으로 성공과 실패 콜백을 넣어놨는데, 일부러 api endpoint를 이상하게 해서 넣어도 onError가 실행되지 않는 이슈가 있었다. 원인을 분

isFetching 이 isLoading을 포함하는 개념이다. 즉, isLoading은 isFetching의 부분집합이다.isLoading을 기준으로 보면 다음과 같은 2가지 개념을 만족시켜야 true 가 된다1) fetching 중이어야 한다.2) 현재 캐싱된 데이터

리액트 쿼리를 좀 더 효율적으로 쓸 수 있는 방법들을 정리해놓은 블로그 글 : 링크

https&#x3A;//www.aladin.co.kr/shop/wproduct.aspx?ItemId=251552545FE 개발자라면 한번쯤은 봤을 이 책을 가지고 5월 말 정도부터 시작해서 3명에서(회사 FE 동료분들과) 스터디를 진행했고 오늘 끝이났다.주 1회 1시간

iframe url을 서버로부터 받아오는 로직이 있었는데, 그 url이 결국 해당 page의 id 값을 통해ㅔ 만들어진 값이라 url 의 내용이 바뀌어도 url 자체는 변하지 않는 값이었다. 따라서, url의 내용(index.html의 내용물)이 바뀌었어도 url은 그

프로젝트를 마무리하면서 최적화 작업을 진행하고 있는데, 그 와중에 Enable Text Compression 쪽에서 점수를 엄청 갉아먹고(?) 있음을 알게 됐다. 물론 이게 배포를 하면 좀 나아지는데(서버쪽에서 자동으로 압축하는 로직이 있거나 한 것 같다), local

\*\* Go To Definition : IDE로 작업할 때 import SomeLayerTemplate from '@/components/Layer/SomeLayer.vue';위와 같이 경로가 있을 때 Ctrl + Mouse 왼쪽 클릭 으로 해당 경로의 파일로 바로

버튼을 누르면 보이지 않던 팝오버 형태의 콘텐츠가 화면에 보여진다.버튼을 누르고 콘텐츠를 화면에 띄운 뒤에 다시 버튼을 누르거나, 콘텐츠 영역 외의 부분을 누르면(콘텐츠 영역을 누르면 특정 url로 이동하고 결국은 닫힌다) 콘텐츠가 화면에서 다시 사라진다.:focus

: 이번에 흔히 말하는(?) 이미지 URL로 이미지를 업로드하는 기능을 만들고자 했다. 예를 들어, 위에 이미지처럼 이미지 주소 복사 기능을 이용해서 주소를 복사 한다음에 현재 운영중인 홈페이지에서 input tag에 해당 이미지 주소를 붙여넣기하고 업로드를 하면,

: 오늘은 TIL 컨셉보다는 여태까지 내가 노션에 정리해왔던 업무 관련 혹은 개발자 나름의 사회 생활(?) 혹은 다른 팀과의 협업 이라는 측면에서 배운점들을 진지하게 정리해보고자 한다.: 나는 같은 회사에서 현재 2년 N개월 정도의 연차인 개발자로 일하고 있지만, 여러