아로마의 개발 스토리

명탐정코난 시리즈 정주행은 솔직히 엄청 어렵다. 1기만 해도 78편이다. 그런데 꼭 봐야하는 편만 보는 방법이 있다. 그럼 한 시리즈에 열 몇 편으로 줄어든다. 그치만 정주행 가이드나 위키 하나하나 찾아가면서 찾기가 너무 힘들고 내가 어디까지 봤는지도 알기 어렵다. 명탐정코난 정주행 기록명탐정코난 정주행watch-conan.netlify.app 그래서 결국 하나하나 찾아가며 보다가 내가 너무 불편해서 만든 프로그램이다. 내가 불편해서 만든 거지만 다른 코난 정주행러들도 사용할 수 있도록 공개 배포하였다. 참고로 나는 티빙에서 정주행 중이라 tving으로 바로 연결되도록 만들었다. 기본적으로 전체 시리즈 목록을 볼 수 있다. 우측 상단에 중요한 편만을 누르면 중요한 편만 필터해서 볼 수 있다. 원하는 기수..

user의 기본 언어로 설정된 언어로 간단히 다국어 지원하도록 설정해보았다. navigator.language일단 웹에서 지원하는 navigator.language을 사용한다. import React, { createContext, useContext, useState, useEffect } from 'react'; import { texts } from './texts'; export type Language = 'en' | 'ko'; interface LanguageContextType { language: Language; texts: { [key: string]: string }; t: (key: string) => string; } const LanguageContext = createConte..

사용자에게 버튼 클릭이 작업을 수행하고 있음을 시각적으로 알려주는 것이 중요한 경우가 많다. 스켈레톤이나 전체를 덮는 로딩도 많이 사용하지만 필요에 따라서 이렇게 버튼 위에서 로딩을 보여주는 것도 필요했다. 내 경우엔 react-icons 을 사용했다. 다음 명령을 사용하여 설치할 수 있다. npm install react-icons 아래는 사용 예시이다. 실제로 api 호출 등 시간 걸리는 걸로 교체하면 된다. import React, { useState } from 'react'; import { FaSave, FaSpinner, FaCheck } from 'react-icons/fa'; const SaveButton = () => { const [loading, setLoading] = useSta..

React에서 styled-components를 사용하여 조건부 스타일링 하려면 이렇게 할 수 있다: import styled from 'styled-components'; interface HeaderContentProps { $showBackButton?: boolean; } const HeaderContent = styled.div` ${({ $showBackButton }) => $showBackButton ? 'padding: 0 20px;' : 'margin: auto;'} `; export default HeaderContent; HeaderContent 컴포넌트가 받을 수 있는 props를 지정하는 인터페이스 HeaderContentProps를 정의한다. styled-components에서..

this.state = { mode: 'welcome', subject: //... //... } render() { if(this.state.mode === 'welcome'){ //... } else if(this.state.mode === 'read'){ //... } } - props의 값이나 state의 값이 바뀔 때마다 그 컴포넌트의 render()함수가 다시 호출되고, 그리고 그 하위에 있는 컴포넌 트들의 render()도 호출되기 때문에 화면이 싹 다시 그려진다. - console.log('...'); 하면 콘솔에 프린트를 할 수 있다. - debugger; 를 만나면 브레이크 포인트 쓰듯이 실행 시 저 부분에서 멈춘다. - HTML로 보이지만 이건 유사 HTML이다. 규칙을 따라야한다. ..

- state는 props와 함께 가장 헷갈리는 부분 - component가 실행될 때 초기화를 담당하는 부분: constructor() constructor(props){ super(props); this.state = { subject:{title:'WEB', sub:'World Wide Web'} } } - 외부에서 볼 수 없게 은닉하는 방법이다. - 상위 component의 state 값을 하위 component의 props로 전달할 수 있다. - state는 바꿀 수 있지만 props는 전달 받기만 하고 직접 바꿀 수는 없다. // App의 consturctor 안 this.state = { contents: [ {id:1, title: 'HTML', desc: 'HTML is blar blar..

[Component 만들기] - App.js에 있는 class App에서 시작한다. 마치 main() 같은 건가? - html과 js처럼 작동을 하지만 굉장히 가독성이 좋다. - create-react-app이 알아서 변환해준다고 생각하면 된다. 깔끔히 정리해주는 역할. - 다들 props와 state에서 절망을 많이 하는 것 같다. 헷갈리는 부분인 것 같으니 집중해야겠다. {this.props.title} {this.props.sub} - 이렇게 하면 customize한 나만의 props를 속성으로 사용할 수 있다. 오픈튜토리얼스 이고잉님 강의 https://opentutorials.org/module/4058/24737 컴포넌트 제작 - React 수업소개 React의 핵심 기능인 컴포넌트를 제작하는..