반응형

전체 글 101

React 공식문서로 디테일 잡기 #8

Memoization 메모이제이션 메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동인한 계산의 반복 수행의 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. https://ko.wikipedia.org/wiki/%EB%A9%94%EB%AA%A8%EC%9D%B4%EC%A0%9C%EC%9D%B4%EC%85%98 // App.js import "./App.css"; import Memo from "./components/3-8.Memoization/Memo"; function App() { return ( ); } export default App; // Memo.jsx import React, { useState } from "react"; im..

React 라이브러리 #6

Emotion emotion.js는 CSS-in-JS의 종류 중 하나로 JavaScript 안에서 스타일을 작성할 수 있게 해준다. emotion.js는 주로 Framework Agnostic(*쉽게 말하면 프레임워크를 사용하지 않는 것)과 React 두 가지 방식으로 사용된다. CSS-in-JS 사용하는 이유 component로 만들어서 재사용 용이 중복되는 className 해결(Global namespace) JS에서 쓰이는 상수, props, 함수 공유하기 상속에 의한 영향이 없도록 격리 (Isolation) 미사용 코드 처리(Deard Code Elimination) 설치 # Framework Agnostic $ npm install @emotion/css # React $ npm install..

멜론 클론 코딩 챌린지 Assignment 01

기획안 작성하기 SMART 방법론 소개 Specific(구체적) Measurable(측정 가능한) Achievable(달성 가능한) Realistic(현실적) Time-bound(기한이 있는) 저는 제공해주신 노션 템플릿을 이용해서 정리하였습니다 https://nomadcoders.co/faq/challenge/schedule-contest FAQ › 클론코딩 컨테스트 진도표 – 노마드 코더 Nomad Coders 챌린지 소개. 과제 제출 방법. 수강생 후기 및 졸업작품 등. nomadcoders.co 진도표를 기준으로 기획을 작성하였으며, 마크업 작업은 가능하면 1일 이상 넘기지 않게 할 것이며, 기능 구현에 조금 더 우선순위를 둘 것입니다. 기능 관련에 대해서는 깃의 이슈를 이용해서 정리 및 적용을 ..

콰트로 치즈 생크림 빵 후기

생크림빵을 좋아해서 가끔 편의점에서 2+1 으로 사먹었던 생크림 빵의 새로운 맛이 나와서 먹어보았다. 항상 초코크림, 생크림을 많이 먹었는데, 치즈라니! 궁금해서 바로 사서 먹어보았다. 치즈에 와인이니, 그 느낌으로 포도쥬스도 같이 ㅎ 크림이라서 그런지 지방이 높다. 그래도 맛있으면 0칼로리! 기존빵들과 다르게 윗면에 뭔가 뿌려져 있는 듯하다. 비주얼의 변화는 있는거 같지만 맛에는 크게 다른 점은 못 찾았다. 역시! 크림이 한가득 들어있다! 바람직한 모습 맛은 ... 치즈를 생각하면서 먹으면 느껴지는 정도의 치즈맛이였다. 4가지 치즈가 들어갔다고 해서 약간 찐한 치즈맛을 기대했는데, 그 정도는 아니였다. 약간 뽀또? 그 맛이 나는거 같은 느낌도 살짝 들었다. 초코랑 기본 생크림이 제일 맛있는거 같다 ㅎ

멜론 클론코딩!

내일 부터 시작하는 "노마드 클론코딩 컨테스트" 오랜만에 다시 HCJ 할 생각에 조금 걱정이 된다. 중간에 포기하지말고 완주를 목표로 ! https://nomadcoders.co/c/melon-contest/lobby Watch Now – 노마드 코더 Nomad Coders nomadcoders.co 관심있고, 같이 코딩 공부하고 싶은 사람들이 많이 많이 참가했으면 좋겠다! 내일부터 시작이니! 얼른 참가하세요!!

React 라이브러리 #5

sass 전에 css를 사용할 때 불편했던 점들을 확장기능을 이용해 해결하고 효율적으로 작성할 수 있도록 도와주는 프로그래밍 언어 css 전처리기(preprocessing) Variables body { font: 100% Helvetica, sans-serif; color: #333; } .inverse { background-color: #333; color: white; } // _base.scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } scss는 css와 sass를 합쳐놓은것. 앞에 $표시를 줘서 변수처럼 사용. 계속 확장 되더라도 코..

짱구 흰둥이 우유 푸딩 후기

어제 유튜브를 보는데 갑자기 푸딩을 먹는 영상을 보고 급! 먹고 싶어져서 편의점에 다녀왔습니다. 주관적인 맛평가이니! 참고만 해주세요. 본론으로 바로 가장~ 짱구가 흰둥이 처럼 옷을 입고 있어서 귀여움이 배가 된다. 짱구랑 흰둥이 완벽한 조합 몰랐는데 안에 짱구씰이 들어있다고 한다. 뭐가 들어있을까 ! 두근 두근 종이포장을 제거하면 안에 숟가락과 짱구씰이 들어있다. 어떤 씰인지는 마지막에 공개 예정! 말랑말랑 탱글탱글 딱! 푸딩의 정석을 보여주는 말랑 말랑 탱글 탱글 식감도 흔히 알고 있는 식감과 비슷했다 맛은 우유보다는 바닐라맛이 좀 더 강하게 느껴졌다 햄버거집에서 파는 소프트 아이스크림정도 생각하면 비슷할거 같다 특히 버거킹 소프트 아이스크림 맛과 비슷한거 같다 츤츤 철수 당첨 짱구나 흰둥이를 원했는..

Redux & Redux toolkit

Redux A state management system for cross-component or app-wide state 우리가 상태, 즉 ! 우리의 애플리케이션을 변경하고 화면에 표시하는 데이터를 관리하도록 도와주는 상태 관리 라이브러리 우리가 데이터를 다수의 컴포넌트나 심지어 앱 전체에서 관리하도록 도와준다 유동적인 상태 관리 라이브러리 Redux 작동 방식 중앙 데이터 저장소(store)은 하나뿐이다. 컴포넌트는 저장소를 구독하고 변화를 감지한다. 변화된 데이터를 가져와서 UI에 보여준다. UI상 변화가 생기면 action 을 통해 reducer 순수 함수에 전달. 순수 함수로만 state 변경이 가능하다. Redux 사용하기 Redux 는 JavaScript(자바스트립트) 상태관리 라이브러리이..

Virtual Dom

Virtual Dom Virtual Dom이란? Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다. 그러나 React는 컴포넌트 트리에 대한 추가 정보를 포함하기 위해 “fibers”라는 내부 객체를 사용합니다. 또한 React에서 “virtual DOM” 구현의 일부로 간주할 수 있습니다. Design Principle 합성 React의 핵심 기능은 컴포넌트의 합성입니다. 컴포넌트에서 state나 생명주기 메서드를 사용하는 것에 대해 “나쁜 것”은 없습니다. 다른 강력한 기능과 마찬가지로 적당히 사용해야 할 필요가 있지만, 우리는 그것들..

반응형