티스토리

Awesome Soo

검색하기

블로그 홈

Awesome Soo

awesome-soo.tistory.com/m

프론트엔드개발자 블로그입니다. 🚀

구독자: 2

방명록 방문하기

반응형

주요 글 목록

[VScode] Open a folder or workspace... (File -> Open Folder) 간단하게 테스트 하고 싶은게 있어서 VScode 새 창을 만들어서 작업된 내용을 띄워 보려고 했다. 사용된 확장프로그램은 'Live Server' 이다. 마켓플레이스에서 Live Server를 찾아 검색 후 설치해준다. 문제 단축키가 생각이 나지 않아서 실행시키고자하는 코드에서 우측 클릭 후 아래와 같이 Open with Live Server 를 클릭 해준다. 단축키는 Atl + L 을 누르고, Alt + O 를 누르면 된다고 되어 있다. 그런데 아무리 해도 서버가 실행이 안된다 ㅠㅠ 해결 이유가 뭔지몰라서 잠깐 헤매다가 오른쪽 아래에 뜬 오류메시지를 나중에 봤다. (급하게 테스트 한다고 대충 작업 창켜고해서 세로 화면의 길이가 너무 길어 안보였다.) Open a folder or workspace..... 공감수 2 댓글수 0 2023. 2. 7.
[react-router-dom] Uncaught TypeError: (0 , react_router_dom__WEBPACK_IMPORTED_MODULE_5__.withRouter) is not a function 문제 Uncaught TypeError: (0 , react_router_dom__WEBPACK_IMPORTED_MODULE_5__.withRouter) is not a function 위의 내용 처럼 에러가 났다. withRouter 를 사용해서 문제가 생긴 것 같다. 원인 react_router_dom 의 v6 에서 withRouter를 지원하지 않아서 생기는 문제였다. 라우트가 아닌 컴포넌트에서 라우터에서 사용하는 객체 - location, match, history 를 사용하려면, withRouter 라는 HoC 를 사용할 때 사용한다. 이제는 match를 객체로 받아오는 것이 아니라 useParams를 사용해야한다. import { withRouter } from 'react-router-dom.. 공감수 1 댓글수 0 2022. 10. 21.
string에 있는 특수문자 변환하는 법(Entity code) 개발을 할 때 string에 특수문자가 있을 경우 원하는 값으로 출력이 되지 않을 때가 있다. 이럴 경우 특수문자를 Entity code로 치환해주어야 한다. 사용법 ctrl + f 를 눌러 아래 표(특수문자 코드표)에서 원하는 표현문자를 찾아서 해당 숫자표현을 복사 후 작업하던 내용에 붙여넣기 해서 사용해주면 된다. 특수문자 코드표 (Entity code) 표현문자 숫자표현 문자표현 설명 - - - 사용하지 않음 space - 수평탭 space - 줄 삽입 - - - 사용하지 않음 space - 여백 ! ! - 느낌표 " " " 따옴표 # # - 숫자기호 $ $ - 달러 % % - 백분율 기호 & & & Ampersand ' ' - 작은 따옴표 ( ( - 왼쪽.. 공감수 6 댓글수 0 2022. 10. 20.
[VScode] 쌍따옴표 자동완성 설정 변경 작은 따옴표(')를 사용했는데 자동완성으로 큰 따옴표(")가 나와서 이를 변경하기 위해 찾아봤다. Ctrl + , 를 눌러 '설정'을 열어주거나, 왼쪽 하단에 톱니바퀴 버튼을 눌러 '설정'을 찾아 열어준다. 설정에서 quote 를 입력해서 Quote Style을 찾아서 single로 바꿔준다. 나는 아래와 같이 사용하는 타입스크립트, JSX 도 변경해주었다. 공감수 5 댓글수 0 2022. 10. 19.
[Redux] redux createStore 취소선과 해결 방법 문제 리덕스를 사용하려고 하는데 createStore 에 취소선이 그어져있다. import { createStore } from "redux"; const store = createStore(rootReducer, composeWithDevTools); import { createStore } from "redux"; const store = createStore(rootReducer, composeWithDevTools); 원인 이유는 createStore 를 더이상 사용하지 않기 때문이라고 한다. 위 설명에 따르면) createStore를 대체하는 @reduxjs/toolkit 패키지의 configureStore 메소드를 사용하는 것이 좋다. Redux 툴킷은 스토어 설정, 리듀서, 데이터 가져오기 .. 공감수 0 댓글수 0 2022. 10. 18.
[React] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined 에러 문제 오래전에 작업하던 프로젝트에 yarn 설치를 하고 yarn start 를 하니 아래와 같이 에러 메시지가 떴다. TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined at new NodeError (node:internal/errors:371:5) at validateString (node:internal/validators:119:11) at Object.join (node:path:429:7) 원인 reac.. 공감수 0 댓글수 0 2022. 10. 14.
[GitHub] README.md에 이미지를 추가하는 방법 repository에 관한 설명을 위해 이미지를 등록할 때가 있다. README.md 파일에 이미지를 등록할 때마다 잘 생각 안나서 정리했다. 방법 1. ![alt text](http://url/to/img.png) 위의 내용처럼 ![alt text]( ) 를 작성후 이미지 URL을 적는다. 방법 2. repository에 저장되어 있는 경우 이미지의 직접 연결할 수 있다. ![alt text](https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true) 위의 내용처럼 username, reponame, branch, img.jpg 를 수정하여 이미지를 불러와준다. 그 외에도 여러 방법이 있는것 같다. https://stackove.. 공감수 0 댓글수 0 2022. 10. 13.
gh-pages로 react app 배포 시, 경로를 참조하지 않을 때 문제 gh-pages로 react app 을 배포하려고 했다. npm run deploy 를 실행 했는데 경로를 참조하지 못해서 화면이 이상하다. 해결 그럴 때는 BrowerRouter에 basename={process.env.PUBLIC_URL} 를 App.js에 추가하면 된다. App.js // 예시 import { BrowserRouter } from "react-router-dom"; ... 공감수 2 댓글수 0 2022. 10. 12.
[JavaScript] 간단한 보이기, 숨기기 기능 구현 간단하게 state를 사용해서 보이기, 숨기기 기능을 만들어 볼거다. 초기 구성 컴포넌트를 생성하여 단순하게 버튼과 내용을 만들었다. const TestShowHide = () => { const css = { width: 100, height: 90, backgroundColor: 'tomato', margin: 20, }; return ( 보이기 내용 ); }; export default TestShowHide; 보이기 이제 상태에 따라 보여주기 기능을 만들 것이다. 처음 시작할 때 내용을 숨겨주고, 보이기 버튼을 클릭하면 내용이 나오도록 할거다. import React, { useState } from "react"; const TestShowHide = () => { const [isShow, s.. 공감수 0 댓글수 0 2022. 9. 30.
[React] Todolist 만들기 정리(3) Context 를 만들어주었으니, 이제 Context 와 연동을 하여 기능을 구현하자. TodoHead.js Context 에 있는 state 를 받아와서 렌더링을 하고, 필요한 상황에는 특정 액션을 dispatch 하면 된다. TodoHead 에서는 done 값이 false 인 항목들의 개수를 화면에 보여준다. 추가로 날짜가 보여지는 부분을 작업해준다. import React from 'react'; import styled from 'styled-components'; import { useTodoState } from '../TodoContext'; const TodoHeadBlock = styled.div` padding-top: 48px; padding-left: 32px; padding-rig.. 공감수 4 댓글수 0 2022. 9. 29.
[React] Todolist 만들기 정리(2) Todolist 만들기 정리(1) 에 이어서 작업을 할 예정이다. 이전 게시글에는 UI 작업이었다면 이번 편은 기능적인 것을 보여줄 것이다. 리듀서 만들기 useReducer 를 사용하여 상태를 관리하는 TodoProvider 라는 컴포넌트 생성한다. src/TodoContext.js import React, { useReducer } from 'react'; const initialTodos = [ { id: 1, text: '프로젝트 생성하기', done: true }, { id: 2, text: '컴포넌트 스타일링하기', done: true }, { id: 3, text: 'Context 만들기', done: false }, { id: 4, text: '기능 구현하기', done: false } ].. 공감수 1 댓글수 0 2022. 9. 28.
[React] Todolist 만들기 정리(1) 벨로퍼트님의 https://react.vlpt.us/mashup-todolist/01-create-components.html 보고 직접 구현했던 과정들을 정리하려고 한다. cra설정 yarn create react-app react-todolist 이번 프로젝트에서 필요한 라이브러리 react-icons 와 styled-components 를 설치. $ cd react-todolist $ yarn add react-icons styled-components 컴포넌트 정리 TodoProvider useReducer 를 사용하여 상태를 관리하는 컴포넌트이다. TodoTemplate 투두리스트의 레이아웃을 설정하는 컴포넌트이다. 페이지 중앙에 그림자가 적용된 흰색 박스를 보여준다. TodoHead 오늘의 날.. 공감수 4 댓글수 0 2022. 9. 28.
[React] Context API Context API 활용한 상태관리를 작업 중에 개념 정리의 필요성을 느꼈다. Context React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법. 사용하게 되면 중간에 있는 엘리먼트들에게 props를 넘겨주지 않아도 된다. 사용하기 전에 고려할 것 context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 써야한다. https://ko.reactjs.org/docs/context.html Context – React A JavaScript library for building user interfaces ko.reactjs.org 공감수 1 댓글수 0 2022. 9. 27.
[React] 데이터를 저장하는 방법 변수에 데이터 넣기 변수( const, let )에 데이터를 넣는다. 매번 렌더링 될 때마다 다시 만들어진다. useState 1번째 마운트에서 초기화 됨. state 값이 변경되면 리렌더링 발생. ✨ react에서 리렌더링이 일어나는 경우? props, state가 변경되었을 때. useRef 1번째 마운트에서 초기화 됨. 값을 변경해도 리렌더링이 되지 않음. 더 나아가기 https://ui.toast.com/weekly-pick/ko_20211214 공감수 1 댓글수 0 2022. 9. 27.
[HTML] <a> 태그 target="_blank" 사용 시, rel="noreferroer noopener" 역할 noreferroer noopener는 target="_blank"할 때 붙여서 써야 한다. Awesome-soo Page Open 이유? 그래야 새 창을 열었을 때 어떤 창으로부터 넘어왔는지 그 정보가 전송된다. 공감수 0 댓글수 0 2022. 9. 27.
[React] 데이터 내용을 선택적으로 table 안에 보여주기 보호되어 있는 글입니다. 공감수 0 댓글수 0 2022. 9. 27.
[PowerShell] yarn : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\user\AppData\Roaming\npm\yarn.ps1 파일을 로드할 수 없습니다. 문제 컴퓨터를 바꿔가면서 이것 저것 작업 중인데 다른 환경에서 vscode를 깔고 yarn 을 설치하고 yarn start를 실행하니 아래와 같은 에러가 나왔다. yarn : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\user\AppData\Roaming\npm\yarn.ps1 파일을 로드할 수 없습니다. 자세한 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID= 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID= 135170)를 참조하십시오. 위치 줄:1 문자:1 + yarn start + ~~~~ + Categ.. 공감수 1 댓글수 0 2022. 9. 27.
[vscode] 괄호 색상으로 구분과 색상 변경 새 pc에 vscode를 다시 설치하니 코드를 보기 좋게 세팅하는 법을 까먹었다.. vscode의 괄호값의 구분이 어려워서 색상의 차이를 두려고 한다. Ctrl + , 를 눌러 '설정'을 열어주거나, 왼쪽 하단에 톱니바퀴 버튼을 눌러 '설정'을 찾아 열어준다. 설정창에서 colorization검색. 체크해주기! 변경전에는 색이 동일하다가 아래와 같이 나온다 🎉 공감수 0 댓글수 0 2022. 9. 24.
[vscode] 주석 색상 변경 vscode의 주석이 잘 안보여서 색상을 변경할 것이다. Ctrl + , 를 눌러 '설정'을 열어주거나, 왼쪽 하단에 톱니바퀴 버튼을 눌러 '설정'을 찾아 열어준다. 설정창에서 json 검색. settings.json에서 편집 클릭. 그러면 문서가 열린다. 아래 코드를 입력해준다. "editor.tokenColorCustomizations": { "comments": "#5f84b4" //원하는 색상 색상값은 원하는 걸로 바꿔서 사용하면된다. 공감수 2 댓글수 0 2022. 9. 24.
[React Native] StyleSheet와 CSS의 주요 차이점 StyleSheet와 CSS의 주요 차이점 셀렉터라는 개념이 없다. 모든 스타일 속성은 camelCase로 작성한다. display 속성은 기본적을 flex이며 , 다른 값은 none 밖에 없다. flexDirection 속성의 기본값은 웹에서는 rew이지만, 리액트 네이비트에서는 column 이다. 리액트 네이티브에서 스타일링할 때 숫자 단위는 dp 뿐이다. background 대신 backgroundColor를 사용해야 한다. border 대신 borderWidth, borderStyle, borderColor 등을 따로따로 설정해야 한다. (축약형이 없다.) 리액트 네이티브에서는 별도의 CSS 파일에 스타일을 작성하지 않고, 자바스크립트 파일 안에서 StyelSheet라는 것을 사용한다. const.. 공감수 0 댓글수 0 2022. 8. 8.
웹표준, 웹접근성 검사하기 퍼블리셔 공부를 하게되면 자연스럽게 배우게 되는게 웹표준과 웹접근성인 같아요. 웹 표준 ? (웹 표준화 단체인 W3C가 권고한 표준안에 따라) 사용자가 어떤 브라우저나 기기를 사용하더라도 내용을 동일하게 볼 수 있도록 하는 것. 웹 접근성 ? 모든 사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것. 내가 작성한 마크업이 웹표준, 웹접근성에 맞추어 잘 작성했는지 확인해보려면? HTML 웹표준 검사 HTML은 W3C Validator HTML 마크업 검증 사이트를 이용하면 됩니다. http://validator.kldp.org/ The W3C Markup Validation Service 파일 업로드로 유효성 검사 주의: Windows XP SP2 의 몇몇 IE 에서는 업.. 공감수 1 댓글수 0 2022. 7. 17.
[React] props 와 state 차이점 props 와 state의 차이점? props, state 데이터를 다룰때 사용되는 개념이다. 일반 JavaScript 객체이다. 차이점? props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면, state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리한다. props 부모 컴포넌트가 자식 컴포넌트한테 전달하는 데이터이다. (자식 컴포넌트 입장에서) 읽기 전용이다. - 읽기 전용. - 부모요소에서 설정하는 것. - propTypes를 통한 props 검사가 가능. 예제 자식 컴포넌트 import React from 'react'; const MyProps = (props) => { return 안녕하세요. 제 이름은 {props.name} 입니다.; }; export default MyProp.. 공감수 0 댓글수 0 2022. 6. 29.
[JavaScript] 배열 게시판 같은 목록들은 어떻게 구현될까? 예제 배열[1,2,3,4,5] 의 각 요소를 제곱해서 새로운 배열 생성하기 var 숫자들 = [1, 2, 3, 4, 5]; var 요소를제곱하기 = 숫자들.map(function(num){ return num * num; }); console.log(요소를제곱하기); // 결과 // [1, 4, 9, 16, 25] 위의 내용을 ES6 문법으로 작성해보기 const 숫자들 = [1, 2, 3, 4, 5]; const 요소를제곱하기 = 숫자들.map(num => num * num); console.log(요소를제곱하기); // 결과 // [1, 4, 9, 16, 25] 배열 컴포넌트를 위한 map() 함수 사용법 const 먹어야하는과일목록 = [ { 과일이름: '사과.. 공감수 0 댓글수 0 2022. 6. 28.
[React] 리액트 dependency 'react-img-zoom' 배경 jquery.zoom(http://www.jacklmoore.com/zoom/) 를 대체할만한 것을 추천 받아서 이를 공유해보려고 합니다. http://www.jacklmoore.com/zoom/ jQuery Zoom jQuery Zoom A plugin to enlarge images on touch, click, or mouseover. Demo Hover Grab Released under the MIT License, source on Github (changelog) Download Compatible with: jQuery 1.7+ in Chrome, Firefox, Safari, Opera, Internet Explorer 7+. Install via www.jacklmoore.com .. 공감수 0 댓글수 0 2022. 6. 27.
[React] 리액트의 생명 주기 (Life Cycle) 리액트를 처음 공부한다면? 라이프 사이클 메서드 란? 리액트의 라이프 사이클은 기본 개념이라서 정리하고 가려고 리액트 공식 사이트를 찾아 봤는데. 흐름을 그림으로 정리한 것이 있지만, 처음 접한 사람들에게 바로 바로 각인이 되지 않아서 같이 공부하는 분들에게 도움을 드리고자, 설명을 달아서 만들어 봤습니다. 저와 같이 공부하시는 분들께 도움이 되었으면 좋겠네요. 자주 사용되는 생명주기 메서드 입니다. Life Cycle 참고로 공식 리액트 문서에서 말하는 잘 사용하지 않는 생명주기 메서드는 제외하고 만들었습니다. https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ React Lifecycle Methods diagram Fully interac.. 공감수 0 댓글수 0 2022. 6. 27.
인터넷 익스플로러를 떠나 보내며 최근에 가장 재미있게 봤던, 유쾌한 기사가 있어서 가져와봤다. 바로 익스 플로러의 사망(?)을 추모하는 묘비를 만든 한국에 어떤 소프트웨어 엔지니어에 대해서 CNN에서 기사를 쓴 것이다. 너무 웃겼다. ㅋㅋㅋㅋ 익스 플로러 때문에 마크업 개발을 할 때 고군분투 했던 나의 과거가 생각나서 그 추억과 함께 나도 애도하는 마음을 담아 포스팅을 해본다. 잘가. 덕분에 고생 좀 했지만 많은 발전을 했던 것 같아. https://edition.cnn.com/2022/06/18/asia/internet-explorer-gravestone-viral-south-korea-intl-hnk/index.html Internet Explorer's final resting place: as a 'world-class joke.. 공감수 0 댓글수 0 2022. 6. 23.
Apple에서 악성 소프트웨어가 있는지 확인할 수 없기 때문에 열 수 없습니다 macOS를 사용하고 있는데 보안 시스템의 문제인지 다른 곳에서 다운로드한 파일은 실행이 제한되었습니다. 회사에는 도와줄 사람이 아무도 없어서 혼자 찾아보다가 다른 분들과 함께 공유하면 좋을 것 같아서 오늘도 기록합니다. 문제 "Apple에서 악성 소프트웨어가 있는지 확인할 수 없기 때문에 열 수 없습니다." 해결 1. "터미널" 실행 2. sudo spctl --master-disable 입력 sudo spctl --master-disable 3. 엔터(실행) -> 맥 비밀번호 입력 후 엔터(실행) 4. "시스템 환경설정" 클릭 5. "보안 및 개인 정보 보호" 클릭 6. '다음에서 다운로드한 앱 허용: ' 에 '모든 곳'이라는 항목이 없다가 생성 되었을 거에요. 7. '모든 곳' 체크. 공감수 0 댓글수 0 2022. 6. 18.
[React] sh: react-scripts: command not found 오류메시지 프로젝트를 실행하는데 오류메시지가 떴습니다. 문제 1 sh: react-scripts: command not found 해결 npm install 문제 2 음.. 또 오류군요 errno SELF_SIGNED_CERT_IN_CHAIN 해결 npm config set strict-ssl false -g 회사에서 보안 프로그램 때문에 힘들었지만 해결했네요!! 공감수 0 댓글수 0 2022. 6. 8.
[프로그래밍] 객체 지향 프로그래밍 OOP '객체 지향 프로그래밍' 많이 들어 봤고, 실무에 적용해서 사용도 해봤지만 정작 설명을 하라고 하면 아직도 잘 못하겠더라고요... (자신감 하락) 기억력이 좋지 않은 저와 객체 지향 프로그래밍을 배우시는에게 도움이 되었으면 하는 바람입니다. OOP 란? Object Oriented Programming의 약자로 직역하게 되면 '객체 지향 프로그래밍'을 뜻합니다. 주어 동사 형태로 프로그래밍하는 것이라고 생각하시면 쉽습니다! OOP의 대표적인 특징 OOP에는 4가지의 중요한 특징이 있습니다. 캡슐화 (Encapsulation) 상속 (Inheritance) 추상 (Abstraction) 다형성 (Polymorphism) 1. 캡슐화 (Encapsulation) 캡슐화는 데이터와 기능을 하나의 객체로 묶는 .. 공감수 1 댓글수 0 2022. 2. 25.
[JavaScript] a 태그 href="javascript:void(0); 경로이름 기존 소스를 분석하는 과정에서 위와 같은 내용을 보게 되었는데요. 그 중에서 경로이름 위와 같은 부분이 눈에 띄었습니다. void(0) 을 사용하면? 결과 값 undefined를 얻게 됩니다. 즉, 해당하는 링크가 정상적으로 동작하지 않게 만들기 위하여 이처럼 undefined를 사용한다고 보면 됩니다. # 을 쓰면 되지 않을까? 경로이름 해쉬기호인 #을 void(0) 대신에 쓰게 되면 링크는 이동하게 됩니다. #뒤에 아이디로 쓰지 않는 텍스트를 넣으면, 오브젝트의 이동도, 스크롤 이동도 하지 않습니다. 경로이름 #을 작성했을 때 스크롤이 위로 올라가는 문제점을 return false로 무력화했습니다. 경로이름 공감수 1 댓글수 0 2022. 2. 18.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.