๐Ÿฅฐ1์ฐจ ํ”„๋กœ์ ํŠธ ํ•˜๋ฉด์„œ ์•Œ๊ฒŒ๋œ ๐Ÿฏ๊ฟ€ํŒ!

Solmiiยท2020๋…„ 6์›” 24์ผ
3

TIP

๋ชฉ๋ก ๋ณด๊ธฐ
4/4
post-thumbnail

ํ”„๋กœ์ ํŠธ ์ง„ํ–‰ํ•˜๋ฉด์„œ ์•Œ๊ฒŒ๋œ, ๊ธฐ์–ตํ•˜๊ณ  ์‹ถ์€ ์ฝ”๋“œ, ๊ฟ€ํŒ๋“ฑ์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ด๋ณด๋Š” ์‹œ๊ฐ„~!


ย ย  config.js ํŒŒ์ผ! ย ย 

path, image ๋“ฑ์€ config.js ํŒŒ์ผ์—์„œ ๋”ฐ๋กœ ๊ด€๋ฆฌํ•œ๋‹ค!

config.js ์— ์ด๋Ÿฐ์‹์œผ๋กœ ์ด๋ฏธ์ง€, ํŒจ์Šค ๋“ฑ์„ ๋ณ€์ˆ˜์— ์ง€์ •ํ•ด์ค€๋‹ค! ์•ž์— export ๋ฅผ ๋ถ™์—ฌ์ค˜์•ผ ํ•œ๋‹ค.

export const TEST = '์ด๋ฏธ์ง€ url ์ฃผ์†Œ';

๊ทธ๋ฆฌ๊ณ  ํ•ด๋‹น ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•  js ํŒŒ์ผ์—์„œ...

import {TEST} from './config'; // ์‚ฌ์šฉํ•  ์ด๋ฏธ์ง€๋ฅผ ๋จผ์ € import ํ•˜๊ณ !

<img alt="test" src={TEST} /> // ์ด๋ ‡๊ฒŒ ์‚ฌ์šฉํ•œ๋‹ค!

๊ทธ๋Ÿฐ๋ฐ ๋งŒ์•ฝ, ์ด๋ฏธ์ง€๊ฐ€ ์ฃผ์†Œ๊ฐ€ url ํ˜•์‹์ด ์•„๋‹Œ, ๋‚ด local์— ์ €์žฅ๋œ ํŒŒ์ผ์ด๋ผ๋ฉด ์–ด๋–ป๊ฒŒ ํ• ๊นŒ?

๊ทธ๋Ÿฐ ๊ฒฝ์šฐ์—๋Š” config.js ์— export ์™€ ๋”๋ถˆ์–ด์„œ, import ๋„ ํ•ด์ค˜์•ผ ํ•œ๋‹ค.

import nav_logo from "Images/Nav/logo.svg";
export const LOGO = nav_logo;

์ด๋ ‡๊ฒŒ!
์‚ฌ์šฉํ• ๋•Œ๋Š” ์œ„์™€ ๋™์ผํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค!


ย ย  Object.entries(obj) ย ย 

{
  "productDetailInfo": [
    {
      "size": { "220": true, "230": false, "240": false, "250": false, "260": true, "270": false, "280": false },
      // ...
    }
}

๋ฐฑ์•ค๋“œ์—์„œ ์ด๋Ÿฐ์‹์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋„˜๊ฒจ์ฃผ๊ธฐ๋กœ ํ–ˆ๋‹ค!

size ๋ผ๋Š” key ๊ฐ’์— ๊ฐ์ฒด๊ฐ€ value๋กœ ๋“ค์–ด์˜ค๋Š”๋ฐ, ์ด ๊ฐ์ฒด์˜ key๋Š” ์‹ค์ œ ์‹ ๋ฐœ ์‚ฌ์ด์ฆˆ, value๋Š” ํ’ˆ์ ˆ ์—ฌ๋ถ€์ด๋‹ค.

์ด์ œ ์ด ๊ฐ์ฒด์˜ key๋งŒ ๋ฝ‘์•„์„œ ์‚ฌ์ด์ฆˆ ์„ ํƒ ๋ฒ„ํŠผ์„ map์œผ๋กœ ์ถœ๋ ฅํ•˜๊ณ ,
๊ฐ์ฒด์˜ value ๊ฐ’์„ ์ด์šฉํ•ด์„œ ํ’ˆ์ ˆ์ผ ๊ฒฝ์šฐ, ์ผ์‹œํ’ˆ์ ˆ ์„ ๋‚˜ํƒ€๋‚ด๋Š” ๋‹ค๋ฅธ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•ด์ค˜์•ผ ํ•œ๋‹ค.

๐Ÿคท๐Ÿปโ€โ™€๏ธ ์–ด๋–ป๊ฒŒ ํ•  ์ˆ˜ ์žˆ์„๊นŒ?

์—ฌ๋ ค๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ๊ฒ ์ง€๋งŒ ์Šนํ˜„๋‹˜์ด ์•Œ๋ ค์ฃผ์‹  Object.entries(obj) ๋ฐฉ๋ฒ•์„ ์ด์šฉํ–ˆ๋‹ค!

const obj = {"220": true, "230": false, "240": false, "250": false, "260": true, "270": false, "280": false};

์œ„์™€ ๊ฐ™์€ ๊ฐ์ฒด๊ฐ€ ์žˆ์„๋•Œ,

console.log(Object.entries(test))

์ด๋ ‡๊ฒŒ Object.entries() ๋ฅผ ์ž‘์„ฑํ•˜๊ณ , () ์•ˆ์— ํ•ด๋‹น ๊ฐ์ฒด์˜ ์ด๋ฆ„์„ ์ ์–ด์ค€๋‹ค!

์ง !!! ๋ณด์ด๋Š” ๊ฒƒ์ฒ˜๋Ÿผ, ๋ฐฐ์—ด์•ˆ์˜ ๋ฐฐ์—ด ํ˜•ํƒœ๋กœ ๋ณ€ํ™˜๋œ๋‹ค!

์ด์ œ index ๋ฅผ ์ด์šฉํ•ด์„œ ํŽธํ•˜๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

this.setState({
   sizeArr: Object.entries(this.state.productData.size),
});
-----
{this.state.sizeArr.map((size, idx) => (
   <SizeBtn size={size[0]} soldout={size[1]} key={idx} />
))}

์‹ค์ œ ์ฝ”๋“œ๋Š” ์ด๋ ‡๊ฒŒ ์ž‘์„ฑํ•ด์ฃผ์—ˆ๋‹ค!


ย ย  toLocaleString() ย ย 

๋‹ฅํ„ฐ๋งˆํ‹ด์—์„œ๋Š” ๊ฐ€๊ฒฉ์ด ์ด๋ ‡๊ฒŒ ๋‚˜์˜จ๋‹ค!!!

์ด๋ฅผ ๋ฐฑ์•ค๋“œ์—์„œ๋Š” number ํƒ€์ž…์œผ๋กœ ๋ณด๋‚ด์ค€๋‹ค! ( 119000 ์ด๋ ‡๊ฒŒ~!)

์šฐ๋ฆฌ๋Š” ์ด 119000 ์„ ๋ฐ›์•„์„œ ๋ญ”๊ฐ€ ๋ง‰ ๊ณ„์‚ฐ์„ ํ•œ๋‹ค!!

๋‹ค ํ•˜๊ณ  ๋‚˜์„œ ํ™”๋ฉด์— ๋ฟŒ๋ ค์ฃผ๋ฉด.....

๋„˜๋‚˜ ์•ˆ์˜ˆ์œ๊ฒƒ.......... ๐Ÿ˜จ

์—ฌ๊ธฐ์— , ๋ฅผ ๋ถ™์—ฌ์ฃผ๋ ค๋ฉด....๋ญ”๊ฐ€ split ํ•˜๊ณ  join ํ•˜๊ณ .... ํ•ด์•ผํ•  ๊ฒƒ ๊ฐ™์ง€๋งŒ!

JavaScript์˜ ๋‚ด์žฅ ํ•จ์ˆ˜์ธ toLocaleString() ์„ ์‚ฌ์šฉํ•˜๋ฉด!!!!!!!

{origin.toLocaleString()}

์ด๋ ‡๊ฒŒ ๋ฐ”๋กœ ๋‚˜์˜จ๋‹ค!!!!!1 ์šฐ์™•~~

toLocaleString() ์ด๋ž€!?
ํŠน์ • ์ž๋ฃŒ๊ฐ€ ๋“ค์–ด์™”์„ ๋•Œ, ์„ค์ •ํ•ด๋†“์€ ์ง€์—ญ์—์„œ ์ฝ๋Š” ํ˜•ํƒœ๋กœ ๋ฐ”๊ฟ”์ฃผ๋Š” ํ•จ์ˆ˜์ด๋‹ค!!

date๊ฐ€ ๋“ค์–ด์˜จ๋‹ค๋ฉด, ์„ค์ •ํ•œ ์ง€์—ญ์—์„œ ์ฝ๋Š” ๋‚ ์งœ ํ˜•ํƒœ๋กœ ๋ฐ”๊ฟ”์ค€๋‹ค!

number๊ฐ€ ๋“ค์–ด์˜จ๋‹ค๋ฉด~ ์ˆซ์ž๋ฅผ 1000๋‹จ์œ„๋กœ ๋Š์–ด ์ค€๋‹ค. ์ด๋ฅผ ํ™œ์šฉํ•˜๋ฉด ํ™”ํ ๋‹จ์œ„๋กœ ์†์‰ฝ๊ฒŒ ๋ฐ”๊ฟ”์ฃผ๋Š”๊ฒƒ!

< ์ถœ์ฒ˜ : wecode์˜ ์ž๋ž‘๐Ÿ‘, ํ”„๋ก ํŠธ์—”๋“œ์˜ ์‹ ์˜ˆโœจ, JS ์งฑ master๐Ÿ’†๐Ÿปโ€โ™‚๏ธ, ์ข…ํƒ ๋ฉ˜ํ† ๋‹˜๐Ÿคฉ๐Ÿคฉ๐Ÿคฉ >


ย ย  && ์™€ || ๋ฅผ ์กฐ๊ฑด๋ฌธ์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•˜๊ธฐ! ย ย 

&&

componentDidMount ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๋ฉด, ์ฒ˜์Œ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ!

์ฒ˜์Œ render ๋•Œ๋Š” ์•„๋ฌด ๋ฐ์ดํ„ฐ๋„ ์—†๋‹ค๊ฐ€ โ†’ componentDidMount ์‹คํ–‰ โ†’ ๋ฐ์ดํ„ฐ ๋“ค์–ด์˜ด โ†’ setState ๋ฐœ์ƒ โ†’ ์ƒˆ๋กœ render ๋จ โ†’ ๋ฐ์ดํ„ฐ๊ฐ€ ๋“ค์–ด์˜ด!

์œผ ์ˆœ์„œ๋กœ ์ง„ํ–‰๋œ๋‹ค!

๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์—, render ์•ˆ์—์„œ setStateEvent๋ฅผ ์‹คํ–‰ํ•˜๊ฑฐ๋‚˜, ๋ฐ์ดํ„ฐ์˜ [0] ๋ฒˆ์งธ ์š”์†Œ ๋“ฑ์— ์ ‘๊ทผํ•˜๊ฑฐ๋‚˜ ํ•˜๋ฉด error๊ฐ€ ๋œฌ๋‹ค!

์ด ๋•Œ! ๋ฐ์ดํ„ฐ๊ฐ€ ๋“ค์–ด์˜จ ๊ฒฝ์šฐ๋ฅผ ์กฐ๊ฑด์œผ๋กœ ๊ฑธ์–ด์„œ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, && ์™€ || ๋ฅผ ์ด์šฉํ•ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์กฐ๊ฑด๋ฌธ์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค!!!

let a = 10;
console.log(a && console.log("OK!"));

๋ผ๊ณ  ์ณ๋ณด๋ฉด ๋ญ๋ผ๊ณ  ๋‚˜์˜ฌ๊นŒ??

์šฐ์™€!!!!
๋ฌด์Šจ์ผ์ด ์ผ์–ด๋‚œ๊ฑธ๊นŒ????

a ๊ฐ€ true ์ด๋ฏ€๋กœ(0์ด ์•„๋‹Œ ์ˆซ์ž๋Š” boolean type = true) ๋’ค์— ๋‚˜์˜จ console.log("OK!") ๊ฐ€ ์‹คํ–‰๋˜์—ˆ๋‹ค.

์ฆ‰, && ์•ž์˜ ์กฐ๊ฑด์ด true ๋ผ๋ฉด, && ๋’ค์˜ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋œ๋‹ค.

๋Œ€์ฒด ์ด๊ฒŒ ์–ด๋–ป๊ฒŒ ๊ฐ€๋Šฅํ•œ ๊ฑด์ง€๋Š” ๊นŠ๊ฒŒ ๋“ค์–ด๊ฐ€๋ฉด ๋„˜๋‚˜ ์–ด๋ ค์›Œ์ ธ์„œ....(๋ผ๊ณ  ์Šนํ˜„๋‹˜์ด ๋ง์”€ํ•˜์‹ฌ)

๊ทธ๋ƒฅ ์ด๋ ‡๊ตฌ๋‚˜! ํ•˜๊ณ  ์ž˜ ์จ๋จน์œผ๋ฉด ๋œ๋‹ค!

์‹ค์ œ๋กœ๋Š” ์–ด๋–ป๊ฒŒ ์“ธ ์ˆ˜ ์žˆ์„๊นŒ???

{productData.originPrice && (
   <ProductForm
      originPrice={productData.originPrice}
      salePrice={productData.salePrice}
   />
)}

productData.originPrice (componentDidMount ๋กœ ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ)๊ฐ€ true ๋ผ๋ฉด โ‡’ && ๋’ค์˜ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋œ๋‹ค.

์ฆ‰, ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ์„ ๊ฒฝ์šฐ์—๋งŒ <ProductForm /> ์ด๋ผ๋Š” component์— props ๊ฐ’์„ ๋„˜๊ฒจ์ค€๋‹ค.


||

||๋Š” ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์„๊นŒ?

let a = 10;
let b = 0;
console.log(a || "NO?");
console.log(b || "NO?");

console์—๋Š” ์–ด๋–ป๊ฒŒ ๋‚˜์˜ฌ๊นŒ?

์šฐ์™€์˜ค!!!!!
๋ฌด์Šจ์ผ์ด ์ผ์–ด๋‚œ๊ฑธ๊นŒ????????

์ฒซ๋ฒˆ์งธ ๊ฒฝ์šฐ๋Š” a ๋Š” true ์ด๋ฏ€๋กœ console.log(a) ๊ฐ€ ์‹คํ–‰๋˜์—ˆ๋‹ค.

๋‘๋ฒˆ์งธ ๊ฒฝ์šฐ์—๋Š” b ๊ฐ€ false ์ด๋ฏ€๋กœ (0์ธ ์ˆซ์ž๋Š” boolean type = false) console.log("NO?") ๊ฐ€ ์‹คํ–‰๋˜์—ˆ๋‹ค.

์ฆ‰, || ์•ž์˜ ์กฐ๊ฑด์ด true๋ฉด ํ•ด๋‹น ์ฝ”๋“œ๋ฅผ ์‹คํ–‰, ์•ž์˜ ์กฐ๊ฑด์ด flase๋ฉด || ๋’ค์˜ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•œ๋‹ค.

login ๊ธฐ๋Šฅ์—์„œ access token ์„ ๋ฐ›์„๋•Œ ์ž์ฃผ ํ™œ์šฉํ•œ๋‹ค!

const token = localStorage.getItem("token") || ""

token ์ด๋ผ๋Š” ๋ณ€์ˆ˜์—, ๋งŒ์•ฝ ํ˜„์žฌ localStorage "token" ์ด๋ผ๋Š” ๊ฐ’์ด ์žˆ์œผ๋ฉด ์ด ๊ฐ’์„ ์ง€์ •ํ•˜๊ณ , ์—†์œผ๋ฉด ๋นˆ string์„ ์ง€์ •ํ•œ๋‹ค!

< ์ถœ์ฒ˜ : wecode์˜ ๋น›๐Ÿ‘, ํ”„๋ก ํŠธ์—”๋“œ์˜ ๋ณ„โœจ, ์ตœ๊ฐ• JS master๐Ÿ’†๐Ÿปโ€โ™‚๏ธ, ์Šนํ˜„ ๋ฉ˜ํ† ๋‹˜๐Ÿคฉ >


profile
ํ•˜๋ฃจ๋Š” ์น˜์—ดํ•˜๊ฒŒ ์ธ์ƒ์€ ์—ฌ์œ ๋กญ๊ฒŒ

0๊ฐœ์˜ ๋Œ“๊ธ€