Skip to content

Instantly share code, notes, and snippets.

View qkreltms's full-sized avatar
๐Ÿ’–
Happy coding

JungHoonPark qkreltms

๐Ÿ’–
Happy coding
View GitHub Profile
@Venryx
Venryx / Example.tsx
Last active February 9, 2023 22:36
Using "useImperativeHandle" in a React functional component, with automatic TypeScript typing
import {forwardRef, useImperativeHandle, ForwardRefExoticComponent, RefAttributes, Ref} from "react";
export type Handle<T> = T extends ForwardRefExoticComponent<RefAttributes<infer T2>> ? T2 : never;
export const Parent = (props: {})=> {
let childHandle: Handle<typeof Child>;
return (
<div onClick={()=>childHandle.SayHi()}>
<Child name="Bob" ref={c=>childHandle = c}/>
</div>
@eastenluis
eastenluis / map-item.js
Created December 6, 2017 15:18
Mongoose GeoJSON schema example
const mapItemSchema = new mongoose.Schema({
name: String,
location: {
// It's important to define type within type field, because
// mongoose use "type" to identify field's object type.
type: {type: String, default: 'Point'},
// Default value is needed. Mongoose pass an empty array to
// array type by default, but it will fail MongoDB's pre-save
// validation.
coordinates: {type: [Number], default: [0, 0]}
@LeoHeo
LeoHeo / var-let-const.md
Last active December 15, 2024 01:07
javascript var, let, const ์ฐจ์ด์ 

var, let, const ์ฐจ์ด์ ์€?

  • var๋Š” function-scoped์ด๊ณ , let, const๋Š” block-scoped์ž…๋‹ˆ๋‹ค.

  • function-scoped์™€ block-scoped๊ฐ€ ๋ฌด์Šจ๋ง์ด๋ƒ?

var(function-scoped)

jsfiddle ์ฐธ๊ณ ์ฃผ์†Œ

@dreamorosi
dreamorosi / standardJS-in-CRA.md
Last active August 16, 2022 17:33
Add Standard JS to create-react-app project

Standard JS in create-react-app

I've been using create-react-app lately as I find it very useful to kick things off while starting a project. I almost always follow JavaScript Standard Style and I found myself googling it so I figured out I should write it down.

Get Standard JS

I really like keeping dependencies as local as possible but if you prefer you can install it globally.

yarn add standard --dev

or

@markerikson
markerikson / render-logic.js
Last active January 1, 2024 06:20
React render function organization
// See https://blog.isquaredsoftware.com/presentations/react-redux-ts-intro-2020-12/#/36 for slides
// My basic render function structure:
function RenderLogicExample({
someBoolean, // 1) Destructure values from `props` object
someList,
}) {
// 2) Declare state values
const [a, setA] = useState(0);
const [b, setB] = useState(0);
@gaearon
gaearon / connect.js
Last active April 24, 2025 04:39
connect.js explained
// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
// It lets us inject component as the last step so people can use it as a decorator.
// Generally you don't need to worry about it.
return function (WrappedComponent) {
// It returns a component
return class extends React.Component {
render() {
return (
@chantastic
chantastic / on-jsx.markdown
Last active November 10, 2024 13:39
JSX, a year in

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

@marocchino
marocchino / 094607.md
Last active July 19, 2022 14:25
ES6์‹œ๋Œ€์˜ JavaScript

ES6์‹œ๋Œ€์˜ JavaScript

์•ˆ๋…•ํ•˜์„ธ์š”. ์‚ฌ์›์‚ฌ์—…๋ถ€์˜ ๋งˆ๋ฃจ์•ผ๋งˆ@h13i32maru์ž…๋‹ˆ๋‹ค. ์ตœ๊ทผ์˜ Web ํ”„๋ก ํŠธ์—”๋“œ์˜ ๋ณ€ํ™”๋Š” ๋งค์šฐ ๊ฒฉ๋ ฌํ•ด์„œ, ์กฐ๊ธˆ ๋ˆˆ์„ ๋• ์‚ฌ์ด์— ์ ์  ์ƒˆ๋กœ์šด ๊ฒƒ์ด ๋‚˜์˜ค๊ณ  ์žˆ๋”๋ผ๊ตฌ์š”. ๊ทธ๋Ÿฐ ๊ฒฉ๋ ฌํ•œ ๋ณ€ํ™”์ค‘ ํ•˜๋‚˜๊ฐ€ ES6์ด๋ผ๋Š” ์ฐจ์„ธ๋Œ€ JavaScript์˜ ์‚ฌ์–‘์ž…๋‹ˆ๋‹ค. ์ด ES6๋Š” ํ˜„์žฌ ์žฌ์ •์ค‘์œผ๋กœ ์ง‘ํ•„์‹œ์ ์—์„œ๋Š” Draft Rev31์ด ๊ณต๊ฐœ๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค.

JavaScript๋Š” ECMAScript(ECMA262)๋ผ๋Š” ์‚ฌ์–‘์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌํ˜„๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ ๋ชจ๋˜ํ•œ Web ๋ธŒ๋ผ์šฐ์ €๋Š” ECMAScript 5.1th Edition์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ JavaScript์‹คํ–‰ ์—”์ง„์„ ํƒ‘์žฌํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋‹ค์Œ ๋ฒ„์ „์ธ ECMAScript 6th Edition์ด ํ˜„์žฌ ์žฌ์ •์ค‘์œผ๋กœ, ์•ฝ์นญ์œผ๋กœ ES6์ด๋ผ๋Š” ๋ช…์นญ์ด ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

@roachhd
roachhd / README.md
Last active April 20, 2025 21:54
EMOJI cheatsheet ๐Ÿ˜›๐Ÿ˜ณ๐Ÿ˜—๐Ÿ˜“๐Ÿ™‰๐Ÿ˜ธ๐Ÿ™ˆ๐Ÿ™Š๐Ÿ˜ฝ๐Ÿ’€๐Ÿ’ข๐Ÿ’ฅโœจ๐Ÿ’๐Ÿ‘ซ๐Ÿ‘„๐Ÿ‘ƒ๐Ÿ‘€๐Ÿ‘›๐Ÿ‘›๐Ÿ—ผ๐Ÿ”ฎ๐Ÿ”ฎ๐ŸŽ„๐ŸŽ…๐Ÿ‘ป

EMOJI CHEAT SHEET

Emoji emoticons listed on this page are supported on Campfire, GitHub, Basecamp, Redbooth, Trac, Flowdock, Sprint.ly, Kandan, Textbox.io, Kippt, Redmine, JabbR, Trello, Hall, plug.dj, Qiita, Zendesk, Ruby China, Grove, Idobata, NodeBB Forums, Slack, Streamup, OrganisedMinds, Hackpad, Cryptbin, Kato, Reportedly, Cheerful Ghost, IRCCloud, Dashcube, MyVideoGameList, Subrosa, Sococo, Quip, And Bang, Bonusly, Discourse, Ello, and Twemoji Awesome. However some of the emoji codes are not super easy to remember, so here is a little cheat sheet. โœˆ Got flash enabled? Click the emoji code and it will be copied to your clipboard.

People

:bowtie: ๐Ÿ˜„

@paulallies
paulallies / gist:0052fab554b14bbfa3ef
Last active August 3, 2024 16:45
Remove node_modules from git repo
#add 'node_modules' to .gitignore file
git rm -r --cached node_modules
git commit -m 'Remove the now ignored directory node_modules'
git push origin <branch-name>