일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 메타버스
- 한글이 두 번 입력됨
- 백트래킹
- 동적 계획법
- __proto__ 접근자 프로퍼티
- 시간
- 함수 객체의 프로퍼티
- float: right
- Tanstack Query
- 낙관적 업데이트
- 2522
- 유클리드 호제법
- 비동기
- javascript
- 백준
- 프로그래밍
- 한글 입력 시 이벤트 두 번 발생
- 9610
- python
- 자바스크립트
- prototype 프로퍼티
- C++
- 백준 9610번 파이썬 문제 풀이
- 동기
- css
- 알고리즘
- backtracking
- 파이썬
- 최소공배수
- dp
- Today
- Total
목록Front-End (27)
염딩코
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/kTgXG/btspg1gXAAA/nzy56zdOJX7St8FpbPkCb1/img.png)
var 키워드로 선언한 변수의 문제점 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다. var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. var y; console.log(x) // 100 console.log(y) // 1 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생할 수 있다. 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 따라서, 함수 외부에서 var 키워드로 선언한 변수..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dnT0zh/btspmVfpuyT/H35MjKnIxelHqDnLwWPYG1/img.png)
전역 변수의 무분별한 사용은 위험하다. 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다. 목표: 전역 변수의 문제점, 전역 변수 사용 억제 방법 변수의 생명 주기 지역 변수의 생명 주기 변수: 선언(생성) -> 초기화 -> 소멸 = 생명 주기(Life Cycle) 이처럼 변수도 생명 주기가 존재한다. 변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다. // 변수 x의 생명 주기 시작 function foo() { var x = 'local'; // 변수 x 생성 및 값 할당 console.log(x); // local return x; // 변수 x 소멸 } // 변수 x의 생명 주기 끝 foo(); consol..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bC8Yvl/btso7iXrdg8/WAK4OALUz8hOJN3bCLGqm0/img.png)
오늘은 블로킹과 논블로킹 그리고 동기와 비동기에 대해서 배워봅시다! 그리고 이들이 서로 어떻게 연관되어 있는지 알아봅시다! 블로킹과 논블로킹, 동기와 비동기에 대해서 공부하기 전에 먼저 알아야 하는 개념이 있습니다. 제어권 함수의 코드를 실행할 권리. 제어권을 가진 함수는 자신의 코드를 끝까지 실행한 후, 자신을 호출한 함수에게 돌려줍니다. 리턴값을 기다리는 것 A 함수에서 B 함수를 호출했을 때, A 함수가 B 함수의 리턴값을 기다리느냐의 여부를 의미합니다. 콜백 함수 비동기 작업이 끝난 후에 실행되며, 해당 작업의 결과를 전달받아 필요한 처리를 수행하는 함수입니다. 블로킹(Blocking) 블로킹은 특정 작업이 완료될 때까지 다른 작업들이 기다려야 하는 상태를 의미합니다. 블로킹 작업은 해당 작업이 ..
https://stackoverflow.com/questions/36182635/making-a-flex-item-float-right" target="_blank" rel="noopener" data-mce-href="http:// https://stackoverflow.com/questions/36182635/making-a-flex-item-float-right">http:// https://stackoverflow.com/questions/36182635/making-a-flex-item-float-right Making a flex item float right I have a Ignore parent? another child The parent has .parent {... stackover..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bWFywl/btskuPYmKhH/ffwrNN94GsoW8A1vu8A77k/img.png)
오늘은 trello-clone을 하던 중 발생한 에러에 대해서 알아보려고 합니다! 제가 예전에 작업한 프로젝트인 trello-clone입니다. To do list에서 수정 버튼을 추가해줬고, 문자열이 특정 길이가 되면 수정버튼이 아래로 이탈하는 경우가 있었습니다. 위와 같이 이탈하는 경우였습니다. 해결 방법은 간단했습니다. html을 작성할 때, 오른쪽 영역의 코드와 가운데 영역의 코드의 순서를 바꿔주면 해결이 되었습니다. 참고 https://windcjg.blogspot.com/2022/09/align-center.html
오늘은 웹어셈블리에 대한 내용을 다뤄보려고 합니다. 아마 처음 들으시는 분들도 있을 거라고 생각합니다. 저도 얼마전에 지인을 통해서 알게된 개념이고 정리하고 싶어서 글을 작성하게 되었습니다. 웹어셈블리란? WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드이며 새로운 기능과 성능에서 큰 이점을 제공합니다. 직접 코드를 작성하는 것이 아니라 C, C++, RUST 등의 저급 소스 언어를 효과적으로 컴파일 하도록 고안되었습니다. 이는 웹 플랫폼에 큰 영향을 미칩니다. 이전에 불가능했던 웹에서 실행되는 클라이언트 응용 프로그램을 사용하여 웹에서 여러 언어로 작성된 코드를 네이티브에 가까운 속도로 실행하는 길을 제공합니다. 게다가 웹어셈블리 코드를 사용하여 이를 활용하는 방법을 알 ..
Client Component 파일 최상단(중간x)에 **‘use client’**라 적으면 그 아래 생성한 컴포넌트는 모두 client 컴포넌트이다. HTML에 Javascript 기능넣기가 가능하다. useState, useEffect 등 사용 가능 Server Component 아무 곳에서 만든 component는 모두 server 컴포넌트가 될 수 있다. HTML에 Javascript 기능넣기가 불가능하다. ex) onClick={} useState, useEffect 등 사용할 수 없음. 그럼 그냥 Client Component가 좋은거 아닌가? 기능적 제한이 server component에 비해 없어서 개발하기는 편하다. Page 로딩 속도 느리다. Javascript가 많이 필요하기 때문이다..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/kUMhE/btr8NdkLLHM/p8yaykvwKk2yl8STtmqLu1/img.png)
☺️ vw와 vh란? CSS 작업을 할 때, 주로 사용하는 단위는 픽셀(px)이다. 하지만, px는 고정 단위이고 이를 대신해 유동 단위인 %를 사용하면 조금 더 유연한 코드를 만들 수 있다. 예를 들어, width: 50%로 지정해두면 항상 부모의 절반 사이즈를 가지니까 이것 역시 좋은 반응형 CSS이다. %말고도 유연한 값을 가지는 단위들 중 vw, vh를 알아보자. v, 뷰포트를 기준으로 하다. 이들의 풀네임은 Viewport Width / Viewport Height 이다. 이름에서 유추할 수 있듯이 뷰포트를 기준으로 한 단위이다. 뷰포트는 ‘보여지는 영역’이라고 했으니, 결국 보여지는 영역에서 얼마만큼 차지할 것인지를 지정하는 단위라 할 수 있다. 1vw = 뷰포트 너비의 1%로 계산된다. 그렇..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/o7TBV/btr2toroyBE/1UzIcoQ4rdEuZyQpWXUjL1/img.gif)
const name = person && person.name; JavaScript에서 optional chaining은 프로퍼티나 메소드를 참조할 때 발생할 수 있는 에러를 방지하기 위한 문법입니다. 이전에는 다음과 같은 방식으로 프로퍼티를 참조했습니다. const name = person && person.name; 위와 같은 코드는 person이 null이나 undefined일 경우, name 변수는 undefined가 되어 프로그램이 중단될 수 있습니다. 이 문제를 해결하기 위해 optional chaining 연산자(?.)가 등장하였습니다. optional chaining을 사용하면 다음과 같은 코드로 에러를 방지할 수 있습니다. const name = person?.name; 위 코드에서 p..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bxjEwG/btr1WlhmyWT/CR9sRqfFpAhgTXa8p5NG1K/img.png)
useRef란 뭘까요? React는 사용자 인터페이스를 만드는 데 필요한 많은 기능을 제공합니다. 그 중 하나가 useRef입니다. useRef는 React Hook 함수 중 하나로, DOM 노드나 다른 React 요소에 대한 참조를 만들기 위해 사용됩니다. React를 처음 시작하는 사람들은 이 개념이 어려울 수 있지만, 간단한 예제를 통해 이해해 보도록 하겠습니다. 예제를 위해, 다음과 같은 코드를 작성합니다. import React, { useRef } from 'react'; function TextInput() { const inputRef = useRef(null); const handleClick = () => { inputRef.current.focus(); }; return ( Focus..