티스토리

the murmurous sea

검색하기

블로그 홈

the murmurous sea

themurmuroussea.tistory.com/m

lunacer 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

React state vs. Redux state https://spin.atomicobject.com/2017/06/07/react-state-vs-redux-state/ React State vs. Redux State: When and Why? Even if you choose to use Redux in your project, you will still need to make decisions on how much of your data is stored in Redux. spin.atomicobject.com "Redux manages state and state transformations and is often used with React, but React has its own concept of state." "Even if you c.. 공감수 0 댓글수 0 2021. 5. 26.
How to kill a port To find the process ID, try: sudo lsof -i :portNumber Kill the process which is currently using the port using its PID kill PID and then check to see if the port closed. If not, try: kill -9 PID I would only do the following if the previous didnt work sudo kill -9 PID @ stackoverflow.com/questions/12397175/how-do-i-close-an-open-port-from-the-terminal-on-the-mac 공감수 0 댓글수 0 2021. 4. 16.
app.get() vs. router.get() app.get app.get can be used to create routes for your application at the top level. express.Router From the documentation about express.Router; Use the express.Router class to create modular, mountable route handlers. A Router instance is a complete middleware and routing system; for this reason, it is often referred to as a “mini-app” A router needs to be mounted to an app. @ expressjs.com/th/g.. 공감수 0 댓글수 0 2021. 4. 15.
UX/UI: Branding www.youtube.com/playlist?list=PLXC_gcsKLD6nhtwautRzatzcNrht3w0Pp Trust The Process - Design Documentary www.youtube.com result: www.doubleyou.life/ youtube.com/playlist?list=PLXC_gcsKLD6mgmJKaLCsFzBTvBJv4LGJB Web Design Process - Start To Finish The full process we went through to redesign the website of https://www.openmindlearning.com/ From content strategy, to wireframes, design & development.. 공감수 0 댓글수 0 2021. 1. 26.
UX/UI: what makes good web design youtu.be/GJN7TemsZtY 1. Navigation : It's important to show what you can do on this website in the first 15 sec. By glancing at the navigation, the user can know what features are services on the site. : Also, users should always know where they are. 2. Hierarchy : The content should have a clear hierarchy, the user eye should be able to follow what we intend to lead them to. : Navigate the user.. 공감수 0 댓글수 0 2021. 1. 23.
UI: Responsive layout grid material.io/design/layout/responsive-layout-grid.html#breakpoints Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io 공감수 0 댓글수 0 2020. 10. 28.
UI: button padding & spacing ux.stackexchange.com/questions/104560/fixed-width-for-buttons-or-proportional-with-the-text Fixed width for buttons or proportional with the text? What is the best practice for a UI, to make all the similar buttons with a fixed width, no matter how long is the text (with the condition to fit) or make the width proportional with the text and a... ux.stackexchange.com digitalsynopsis.com/design/ui.. 공감수 0 댓글수 0 2020. 10. 28.
어플리케이션 제작 과정, A부터 Z까지 blog.wishket.com/%ec%96%b4%ed%94%8c%eb%a6%ac%ec%bc%80%ec%9d%b4%ec%85%98-%ec%a0%9c%ec%9e%91-%ea%b3%bc%ec%a0%95-a%eb%b6%80%ed%84%b0-z%ea%b9%8c%ec%a7%80-%ed%95%9c-%eb%88%88%ec%97%90-%ec%82%b4%ed%8e%b4%eb%b3%b4%ea%b8%b0/ 어플리케이션 제작 과정, A부터 Z까지 한 눈에 살펴보기 이번 시간 위시켓은 어플리케이션 제작 과정을 A부터 Z까지 천천히 알려드리면서, 여러분의 아이디어를 어떻게 구현해서 앱으로 만들 수 있을지 가이드를 해드리고자 합니다. 어디서도 알려주�� blog.wishket.com 어플리케이션 제작 과정, A부터 Z까지 한 눈에 .. 공감수 0 댓글수 0 2020. 10. 20.
mySQL: MySQL 접속 오류 gmlwjd9405.github.io/2018/12/23/mysql-tips.html 공감수 0 댓글수 0 2020. 9. 21.
Nodejs: path.parse path.parse('path') : path에 경로가 있는 경우에 해당 경로의 상세정보를 쪼개서 object에 담아주기 때문에, 필요한 파일 이름만 뽑아서 사용함으로써 경로가 외부에 의해 직접 주입되는 사고를 방지한다. (라고 이해함 20.09.18) OT: opentutorials.org/course/3332/21150 GFG: www.geeksforgeeks.org/node-js-path-parse-method/ 공감수 0 댓글수 0 2020. 9. 18.
Nodejs: require vs import www.geeksforgeeks.org/difference-between-node-js-require-and-es6-import-and-export/ 공감수 0 댓글수 0 2020. 9. 18.
DOM Events: mouseover/out & mouseenter/leave Events mouseover/mouseout, relatedTarget :These events are special, because they have property relatedTarget If we don’t examine event.target inside the handlers, then it may seem that the mouse pointer left #parent element, and then immediately came back over it. But that’s not the case! The pointer is still over the parent, it just moved deeper into the child element. If there are some actions.. 공감수 0 댓글수 0 2020. 7. 28.
flex vs. grid 공감수 0 댓글수 0 2020. 7. 17.
DOMContentLoaded vs. load The DOMContentLoaded event fires when the document is loaded and the DOM tree is fully constructed. The load event fires when all subframes, images, stylesheets, scripts, etc have been downloaded. The lifecycle of an HTML page has three important events DOMContentLoaded : the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures and stylesheets may be not yet.. 공감수 0 댓글수 0 2020. 7. 6.
Reasons for setTimeout()/setInterval() delays longer than specified 1. Timeouts throttled to ≥ 4ms : In modern browsers, setTimeout()/setInterval() calls are throttled to a minimum of once every 4 ms when successive calls are triggered due to callback nesting (where the nesting level is at least a certain depth), or after a certain number of successive intervals. : In Chrome and Firefox, the 5th successive callback call is clamped; Safari clamps on the 6th call;.. 공감수 0 댓글수 0 2020. 7. 1.
setTimeout vs. setInterval 1. The setInterval() function is commonly used to set a delay for functions that are executed again and again, such as animations. You can cancel the interval using WindowOrWorkerGlobalScope.clearInterval(). 2. If you wish to have your function called once after the specified delay, use WindowOrWorkerGlobalScope.setTimeout(). To call a function repeatedly (e.g., every N milliseconds), consider u.. 공감수 0 댓글수 0 2020. 6. 30.
async vs. fetch https://dev.to/shoupn/javascript-fetch-api-and-using-asyncawait-47mp JavaScript Fetch API and using Async/Await dev.to : when using fetch, it could be chaining of .then()'s and this can lead into what is often referred to as callback hell, or nested callbacks. : But with Async/Await can have better readability. https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tuto.. 공감수 0 댓글수 0 2020. 6. 25.
json.parse() vs. response.json - Use JSON.parse() to parse the response for AJAX. : AJAX works with callbacks, fetch with Promises. Use JSON.parse() to parse the response for AJAX. - Use json() to parse the response for fetch. json.parse() 1. method 2. Synchronous 2. parses a JSON string, constructing the JavaScript value or object described by the string. 3. An optional reviver function can be provided to perform a transform.. 공감수 0 댓글수 0 2020. 6. 25.
JS: match() vs includes() includes() String.prototype.includes() : method determines whether one string may be found within another string, returning true or false as appropriate. : Polyfill(method) has been added to the ECMAScript 2015 specification and may not be available in all JavaScript implementations yet. However, you can easily polyfill this method. Syntax str.includes(searchString[, position]) - searchString : .. 공감수 0 댓글수 0 2020. 6. 24.
RegExp 1. object (In JavaScript, regular expressions are also objects. ) 2. is used for matching text with a pattern. 3. Regular expressions are patterns used to match character combinations in strings. 4. used with the exec() and test() methods of RegExp, and with the match(), matchAll(), replace(), replaceAll(), search(), and split() methods of String. 5. Starting with ECMAScript 6, new RegExp(/ab+c/.. 공감수 0 댓글수 0 2020. 6. 24.
JS ES6: Promise vs. Async await https://medium.com/better-programming/should-i-use-promises-or-async-await-126ab5c98789#:~:text=Promise%20creation%20starts%20the%20execution,have%20any%20effect%20on%20it. JavaScript: Promises or async-await A set of rules for when to use which medium.com https://medium.com/better-programming/understanding-promises-in-javascript-13d99df067c1 Understanding Promises in JavaScript An in-depth look.. 공감수 0 댓글수 0 2020. 6. 15.
JS: instance? "JavaScript는 객체(인스턴스)와 객체 간의 상속 관계를 자유롭게 설정할 수 있습니다." from https://opentutorials.org/module/4047/24626 객체 간의 상속 - JavaScript 객체 지향 프로그래밍 수업소개 JavaScript는 객체(인스턴스)와 객체 간의 상속 관계를 자유롭게 설정할 수 있습니다. 이 수업에서는 클래스가 아닌 객체를 통해서 상속하는 방법을 알아봅니다. 강의1 자바스크립트의 � opentutorials.org instance : An “instance” means a reference to an “object” created by “new” or the equivalent. from https://www.quora.com/What-is-an-.. 공감수 0 댓글수 0 2020. 6. 10.
JS ES5: strict / non-strict(sloppy) mode https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode Strict mode JavaScript's strict mode, introduced in ECMAScript 5, is a way to opt in to a restricted variant of JavaScript, thereby implicitly opting-out of "sloppy mode". Strict mode isn't just a subset: it intentionally has different semantics from normal code. Brow developer.mozilla.org https://m.blog.naver.com/on21.. 공감수 0 댓글수 0 2020. 6. 10.
JS OOP: class Person { constructor (name, first, second) { this.name = name; this.first = first; this.second = second; } } const Kim = new Person(Kim, 10, 20); console.log('Kim:', Kim); 위의 코드처럼 const나 let을 사용하면 temporal dead zone에 있게 되어 코드를 실행할 수 없음 class와 const/let 모두 ES6에서 새로 추가된 기능인데, 왜 같이 사용할 수 없지...? 어떻게 해야 같이 사용할 수 있지? 공감수 0 댓글수 0 2020. 6. 9.
JS ES6: Array.from() 1. method 2. creates a new, shallow-copied Array instance from an array-like or iterable object. 3. The length property of the from() method is 1. 4. In ES2015, the class syntax allows sub-classing of both built-in and user-defined classes. : As a result, static methods such as Array.from() are "inherited" by subclasses of Array, and create new instances of the subclass, not Array. [Syntax] Arra.. 공감수 0 댓글수 0 2020. 6. 5.
Event: keydown, keypress, keyup 검색어를 칠 때 버튼을 누르고 난 직후에 검색이 되게 하려고 함 keydown은 검색어를 입력한 직후는 앞에 값을 보여줌. 그 다음 문자를 넣어야 전에 입력한 것이 출력됨. keyup은 누름과 동시에 값이 출력됨 왜 그렇지....?? >> because of the firing moment. The key value adds later when I use keydown in the event listener. Because the default comes later than key event. keydown keypress keyup This event has been deprecated, no longer recommended. Use beforeinput or keydown instead. firin.. 공감수 0 댓글수 0 2020. 6. 5.
JS ES6: Hoisting, Temporal dead zone The study started from: I can't hoist const function...?! Why...? A. Declaring Variables www.youtube.com/watch?v=dzEieWaOJE0&t=5s www.youtube.com/watch?v=j-9_15QBW2s B. Temporal Dead Zone It's because of : Unlike variables declared with var, which will start with the value undefined, let variables are not initialized until their definition is evaluated. : Accessing the variable before the initia.. 공감수 0 댓글수 0 2020. 6. 3.
JS: about Event What is Event? - The Event interface represents an event which takes place in the DOM. - An event can be triggered by the user action or can also be triggered programmatically. - Event itself contains the properties and methods which are common to all events. - 이벤트는 이벤트 대상, 이벤트 종류, 이벤트가 발생했을 때 실행되는 함수, 이 3가지로 구성 Constructor Event() How to add 1. HTML tag - inline: add the function to the tag pro.. 공감수 0 댓글수 0 2020. 6. 3.
JS: EventTarget.addEventListener() (empty) https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener 공감수 0 댓글수 0 2020. 6. 3.
(Q)Is null a primitive data type in JS? About null. https://developer.mozilla.org/en-US/docs/Glossary/Primitive Primitive In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods. There are 6 primitive data types: string, number, bigint, boolean, undefined, and symbol. There also is null, which is seemingly primitive developer.mozilla.org "There also is null, which is seemingly.. 공감수 0 댓글수 0 2020. 6. 3.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.