분류 전체보기 DarkTheme(다크모드) 적용하기 1편 (feat.useContext) 이번에 개인 웹사이트를 개편하면서 dark-theme도 한 번 적용해보려고 한다. 별 다른 이유는 없고 그냥 깐지나보여서ㅎㅎ light/dark모드를 오가기 위해서 먼저 toggle button이 필요하다. Toggle이라는 이름의 컴포넌트를 만들까 했지만 토글 버튼을 사용할 경우가 theme switching 해주는 경우 말고는 없는 것 같아 그냥 아예 ThemeToggle이라는 이름으로 컴포넌트를 만들었다. import React, { useState } from 'react'; import styles from './ThemeToggle.scss'; const ThemeToggle = () => { const [lightMode, setLightMode] = useState(true); const .. 더보기 React Router로 렌더링하는 컴포넌트에 prop 전달하기 포폴 개편 작업을 하다가 react-router를 사용하여 위와 같이 각 path 마다 컴포넌트를 뿌려줄 때, props는 어떻게 전달해주어야 하는지 찾아보았다. 예를들어, Education 컴포넌트에서 education이라는 prop이 필요하다고 가정해보자. Education 컴포넌트로 어떻게 전달해야할지 몰라 저렇게 일단 넣어보면 원하는대로 동작하지 않는다. React Router는 컴포넌트로 education이라는 prop을 전달해주지 않고 그냥 무시하기 때문이다. }/> 위의 방법이 먹히지 않았으니, 두번째 방법으로 적용해본다면 원하는대로 작동은 한다! 하지만 공식 docs에 따르면 performance측면에서 좋은 방법은 아니라고 나와있다. 이유는 component prop에 inline-fun.. 더보기 local storage, session storage, cookie local storage, session storage, cookie 모두 클라이언트 스토리지이며 SOP(same-origin-policy)를 따른다. SOP(Same-Origin-Policy, 동일출처정책)란 어떠한 문서나 스크립트가 다른 포로토콜 / 포트 / 호스트에 있는 리소스에 접근하는 것을 제한하는 정책이다. local storage와 sesseion storage는 상대적으로 새로운 API이며(즉 모든 브라우저들이 이를 지원하지는 않는다.) 서로 유사하다. 두 스토리지의 데이터는 읽기/수정이 쉬우므로 애플리케이션 안에 보안 관련 데이터나 민감한 정보를 저장하지 않는 것이 좋다. 🗳 local storage 5MB/10MB 클라이언트 사이드에서만 읽기가 가능하고, 자바스크립트나 브라우저를 통해 .. 더보기 create-react-app 없이 react project만들기 webpack이 뭔지 babel이 뭔지는 대충 알고 있지만 여태 개인 프로젝트로 CRA 없이 react 앱을 만들어 본 적은 없다. 그래서 쓰는 글! 이 글의 목표 - react app을 만들 때 webpack과 babel이 왜 필요한지 이해한다 - react app을 만들 때 webpack과 babel은 어떻게 쓰이는지 이해한다 1. 원하는 폴더로 가서 init -y를 통해 package.json을 만든다. -y flag는 package.json파일을 만들 때 모든 config option으로 default값을 사용한다는 것을 의미한다. init -y 2. react프로젝트니까 react와 react-dom 모듈을 설치해준다. 아래 명령어를 사용하면 package.json파일의 dependencies에.. 더보기 미디어 쿼리 사용하기 미디어 쿼리는 단말기의 유형과 화면 해상도, 뷰포트 너비 등에 따라 웹사이트나 앱 스타일을 수정할 때 유용하다. 미디어 쿼리는 대소문자를 구분하지 않으며 화면, 티비, 프린터와 같은 미디어 타입과 적어도 하나 이상의 표현식으로 구성된다. 표현식은 width, height, color와 같은 미디어 특성들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있다. 미디어 쿼리는 유형을 지정했다면 문서를 보여주는 미디어의 유형이 일치하고 모든 미디어 특성 표현식의 계산값이 참일 때 참으로 계산된다. 미디어 쿼리가 거짓을 반환하더라도, 스타일 시트는 다운로드 된다. 그렇지만 그 안의 내용은 쿼리의 값이 참이 되어야 적용된다. 기본적으로 @media구문은 css 내부의 구문으로, @media구문으.. 더보기 알고리즘 사이트 추천 - leet code https://leetcode.com/ LeetCode - The World's Leading Online Programming Learning Platform Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 국내 알고리즘 사이트는 간혹 문제가 javascript로 풀게끔 지원이 잘 안되거나, 문제 수가 적다는 단점이 있다. 코딜리티는 자바스크립트 지원은 잘되지만 문제수가 적고 해답 찾기가 힘들다. 찾다보니 해외에서는 leet code를 많이 사용하는 것 같아 알게되었다. 특히 .. 더보기 React life cycle method 생각의 흐름대로 정리하기 컴포넌트의 라이프사이클은 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드이다. 크게 마운트, 업데이트, 언마운트로 나눈다. 마운트 DOM이 생성되고 웹 브라우저 상에 나타나는 것을 마운트(mount)라고 함. 컴포넌트 만들기 → constructor → getDerivedStateFromProps → render → componentDidMount getDerivedStateFromProps: props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용, props로 받아온 값을 state로 동기화 시키는 용도로 사용 componentDidMount: 컴포넌트를 다 만들고 첫 렌더링 다 마친 후 실행. 다른 자바스크립트 라이브러리 or 프레임워크 함수 호출, 이벤트 등록, setTimeout.. 더보기 ECMAScript 와 JavaScript의 차이점 👀 들어가기 전에 알아보기 컴파일러 고급언어로 쓰인 프로그램이 컴퓨터에서 수행되기 위해서 컴퓨터가 이해할 수 있는 언어로 바꿔주어야 한다. 이러한 일을 하는 프로그램을 컴파일러라고 한다. 컴파일러는 소스를 한꺼번에 한 번만 읽고 분석한다. 인터프리터 컴파일러는 소스를 한 번에 기계어로 변환시키지만, 인터프리터는 코드 한 구문씩 기계어로 해석해나가면서 실행하는 프로그램이다. 스크립트 언어 스크립트 언어는 컴파일 과정을 요구하지 않는 언어이다. 예를 들면 C나 JAVA 같은 경우 작동하기 전에 컴파일이 필요하지만, 스크립트 언어인 JavaScript나 PHP는 컴파일이 필요하지 않다. 일반적으로 컴파일된 프로그램은 한 번에 기계어로 번역된 후 실행되기 때문에 인터프리터 언어보다 빠르다. 👉 JavaScrip.. 더보기 Programmers - 위장 / Javascript 🔍 문제 스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다. 예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다. 종류이름 얼굴 동그란 안경, 검정 선글라스 상의 파란색 티셔츠 하의 청바지 겉옷 긴 코트 스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요. 제한사항 clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다. 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다. 같은 이름을 가진 의상은 존재하지 않습니다. clothes.. 더보기 Programmers - 탑 / Javascript 🔍 문제 수평 직선에 탑 N대를 세웠습니다. 모든 탑의 꼭대기에는 신호를 송/수신하는 장치를 설치했습니다. 발사한 신호는 신호를 보낸 탑보다 높은 탑에서만 수신합니다. 또한, 한 번 수신된 신호는 다른 탑으로 송신되지 않습니다. 예를 들어 높이가 6, 9, 5, 7, 4인 다섯 탑이 왼쪽으로 동시에 레이저 신호를 발사합니다. 그러면, 탑은 다음과 같이 신호를 주고받습니다. 높이가 4인 다섯 번째 탑에서 발사한 신호는 높이가 7인 네 번째 탑이 수신하고, 높이가 7인 네 번째 탑의 신호는 높이가 9인 두 번째 탑이, 높이가 5인 세 번째 탑의 신호도 높이가 9인 두 번째 탑이 수신합니다. 높이가 9인 두 번째 탑과 높이가 6인 첫 번째 탑이 보낸 레이저 신호는 어떤 탑에서도 수신할 수 없습니다. 송신 탑(.. 더보기 이전 1 2 3 4 5 6 7 ··· 13 다음