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 February 13, 2024 08:21
javascript var, let, const 차이점

var, let, const 차이점은?

  • varfunction-scoped이고, let, constblock-scoped입니다.

  • function-scopedblock-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 11, 2024 06:46
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 March 20, 2024 01:03
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 May 1, 2024 22:17
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 November 12, 2023 23:00
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>