티스토리

Blog 프로그래밍

검색하기

블로그 홈

Blog 프로그래밍

proglish.tistory.com/m

Jace.K 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

DOM image 출처 : https://simplesnippets.tech/what-is-document-object-modeldom-how-js-interacts-with-dom/ 공감수 0 댓글수 0 2022. 3. 2.
CSS 적용 우선순위 CSS의 특성상 어떤 태그에 속성이 중복되어 설정될 수 있는데요, CSS는 어떤 속성이 우선되어 적용되는지 미리 명시하고 있습니다. 우선순위는 아래와 같습니다. 속성 값 뒤에 !important 를 붙인 속성 HTML에서 style을 직접 지정한 속성 #id 로 지정한 속성 .클래스, :추상클래스 로 지정한 속성 태그이름 으로 지정한 속성 상위 객체에 의해 상속된 속성 같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용됩니다. !important 우선순위를 무시하고, 꼭 적용 시키고 싶은 속성이 있다면, 속성 값 뒤에 !important 를 붙여서 적용시켜주면 됩니다. .normal { color: blue } .compulsi.. 공감수 0 댓글수 0 2021. 10. 27.
The Complete 2021 Web Development Bootcamp What you'll learn Be able to build ANY website you want. Craft a portfolio of websites to apply for junior developer jobs. Build fully-fledged websites and web apps for your startup or business. Work as a freelance web developer. Master backend development with Node Master frontend development with React Learn the latest frameworks and technologies, including Javascript ES6, Bootstrap 4, MongoDB. 공감수 0 댓글수 0 2021. 10. 25.
Hide, Show and Toggle in ReactJs https://www.youtube.com/watch?v=UGSN6o29fPo Hide, Show and Toggle in ReactJs 공감수 0 댓글수 0 2021. 10. 14.
React and Typescript: Build a Portfolio Project React and Typescript: Build a Portfolio Project 공감수 0 댓글수 0 2021. 9. 28.
Webpack Crash Course https://www.youtube.com/watch?v=lFjinlwpcHY 공감수 0 댓글수 0 2021. 9. 28.
Javascript | Fetch vs Axios 차이점 비교 Javascript에서 HTTP Requests 를 위한 방법에는 Fetch 와 Axios 두가지가 있습니다. Fetch 가 Built-in APIs 로서 별도의 설치 없이 모던 브라우저에서 사용이 가능하지만, Axios 가 사용하기 쉽고 브라우저 하위 호환성 등 몇몇 이유로 인해 개발자들 사이에서 많이 사용이 되고 있는데요. 네이티브 APIs 를 선호하는 개발자라면 Fetch 를 별도의 설치나 임포트 없이 사용하고 싶어 할 것입니다. 그러나 Axios 에서 쉽게 구현이 가능한 기능들에 대해서 Fetch에서는 기본적으로는 제공이 되지 않거나, 추가적인 로직 구현이 필요한 것들도 있어 Axios를 사용하는 경우도 많은 것 같은데요. 그래서 Fetch 와 Axios 에 대한 각각의 특징과 어떤 차이점이 있는.. 공감수 0 댓글수 0 2021. 9. 8.
JavaScript 이벤트 처리 속성 정리 공감수 0 댓글수 0 2021. 9. 3.
JavaScript - Map() map은 forEach와 마찬가지로 Array의 각 요소를 순회하며 callback 함수를 실행합니다. 다만, callback에서 return 되는 값을 배열로 만들어냅니다. 1. [].map(callback, thisArg) 기본적인 map의 사용법은 아래와 같습니다. const arr = [0,1,2,3]; let squaredArr = arr.map(function(element){ return element * element; }); // 혹은 arrow 함수 가능 squaredArr = arr.map(element => element * element); console.log(squaredArr); // [ 0, 1, 4, 9 ] 위 코드를 보면 배열 속 숫자들이 제곱되어 새로운 배열이 생성되는.. 공감수 0 댓글수 0 2021. 8. 11.
React - Cocktails 공감수 0 댓글수 0 2021. 8. 2.
리액트 리덕스 (Redux) 튜토리얼 https://youtu.be/wSbjROmXTaY 공감수 0 댓글수 0 2021. 8. 2.
codecademy - HTML, CSS, JavaScript 코스 HTML, CSS ,JavaScript 이해도를 높이기위해 Codecademy코스를 시작했다 학원, 유튜브로 공부를 했지만 다시한번 반복하고 확실히 이해하기위해 수업을 듣기시작했다 가장 기본적인 HTML, CSS, JavaScript를 잘 다룰수 있어야 진정한 프론트엔드 개발자라는 많은 사람들의 조언이 있었다 아직은 클론코딩으로 웹사이트를 만드는 수준이지만 계속 실력을 쌓아서 스스로 모든 사이트를 만들 수 있도록 노력해야겠다. 공감수 0 댓글수 0 2021. 8. 2.
React Life Cycle 정리 React Life Cycle 정리 리액트 라이프 사이클이란? 리액트의 각 컴포넌트는 라이프사이클을 가진다. 리액트를 사용해 화면에 뷰가 그려지는 과정은 단순히 보았을때 컴포넌트를 작성한다. 컴포넌트를 ReactDOM.render()를 이용해 그려낸다. const App = () => { return ( Hello World ); }; ReactDOM.render(, document.querySelector("#root")); App이라는 컴포넌트가 DOM에 그려지고 없어지기 까지 과정(Life Cycle)이 있고 리액트에선 이 과정 중 하고싶은 일을 정의 하게 해 줄 수 있다. 어떻게? LifeCycle Methods를 이용해서 Source: https://github.com/wojtekmaj/reac.. 공감수 0 댓글수 0 2021. 7. 26.
Arrow Functions ES6 introduced arrow function syntax, a shorter way to write functions by using the special “fat arrow” () => notation. Arrow functions remove the need to type out the keyword function every time you need to create a function. Instead, you first include the parameters inside the ( ) and then add an arrow => that points to the function body surrounded in { } like this: const rectangleArea = (widt.. 공감수 0 댓글수 0 2021. 7. 18.
Return When a function is called, the computer will run through the function’s code and evaluate the result of calling the function. By default that resulting value is undefined. function rectangleArea(width, height) { let area = width * height; } console.log(rectangleArea(5, 7)) // Prints undefined In the code example, we defined our function to calculate the area of a width and height parameter. Then.. 공감수 0 댓글수 0 2021. 7. 14.
Parameters and Arguments some functions can take inputs and use the inputs to perform a task. When declaring a function, we can specify its parameters. Parameters allow functions to accept input(s) and perform a task using the input(s). We use parameters as placeholders for information that will be passed to the function when it is called. Let’s observe how to specify parameters in our function declaration: In the diagr.. 공감수 0 댓글수 0 2021. 7. 12.
Calling a Function a function declaration does not ask the code inside the function body to run, it just declares the existence of the function. The code inside a function body runs, or executes, only when the function is called. To call a function in your code, you type the function name followed by parentheses. This function call executes the function body, or all of the statements between the curly braces in th.. 공감수 0 댓글수 0 2021. 7. 11.
React - Gagu Store Preview : 사이트방문 : https://gagustore.netlify.app/ 개발목표 가구 이커머스 사이트를 구현하는것을 목표로 하였습니다. React-Router-dom을 이용하여 각각 페이지를 나누고 auth0웹 서비스를 이용하여 로그인 기능을 추가하였습니다. 상태관리는 context / reducer을 사용하였습니다. 여러 페이지에 들어가는 공통된 로직들을 한곳에 모아 관리 했습니다. 구현기간 : 2021-06- 28 ~ 2021-07-07 Skills : React, HTML, CSS , JavaScript(ES6) 배포 : Netlify 시연영상: https://youtu.be/eJQh8qo2u6c Code : https://github.com/bellcastle88/ReactGagu.. 공감수 0 댓글수 0 2021. 7. 5.
flat() 사용법 정의 flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성합니다. 구문 const newArr = arr.flat([depth]) 예시 const arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] const arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]] const arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); // [1, 2, 3, 4, 5, 6] const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]; arr4.flat(Infinity); // [1, 2, 3, 4, .. 공감수 0 댓글수 0 2021. 7. 2.
localeCompare()란? localeCompare 메서드는 참조 문자열이 정렬 순서에서 앞 또는 뒤에 오는지 또는 주어진 문자열과 같은지를 숫자로 반환 referenceStr.localeCompare(compareString[, locales[, options]]) referenceStr이 compareString보다 앞에 있으면 -1, 뒤에 있으면 1, 같으면 0 반환 'a'.localeCompare('b') // -1 , 'b'.localeCompare('a') // 1 'c'.localeCompare('c') // 0 공감수 0 댓글수 0 2021. 7. 1.
sort() 란? arrayobj.sort(sortFunction) arrayobj는 임의의 Array 개체이다. sortFunction는 요소 순서를 결정하는 데 사용되는 함수의 이름이다. 생략하면 오름차순, ASCII 문자 순서로 정렬된다. sortFunction 인수에 함수를 지정하면 아래의 값 중 하나가 반환된다. 첫 번째 인수가 두 번째 인수보다 작을 경우 - 값 두 인수가 같을 경우 0 첫 번째 인수가 두 번째 인수보다 클 경우 + 값 문자 정렬 let fruit = ['orange', 'apple', 'banana']; /* 일반적인 방법 */ fruit.sort(); // apple, banana, orange 숫자 정렬 let score = [4, 11, 2, 10, 3, 1]; /* 오류 */ score.. 공감수 0 댓글수 0 2021. 7. 1.
.substring() 설명 .substring() .substring()은 문자열에서 특정 부분만 골라낼 때 사용하는 메서드입니다. 문법 string.substring( start, end ) start와 end로 문자열에서 골라낼 부분의 처음과 끝을 지정합니다. 예를 들어 var str = '123456789'; document.write( str.substring( 1, 4 ) ); 는 234를 출력합니다. start 값은 필수이며, end 값이 지정되지 않으면 문자열의 끝까지를 의미합니다. 예제 공감수 0 댓글수 0 2021. 7. 1.
Array.from() 사용하기 Array.from 을 이용하여 빈 배열을 초기화 하는 코드 Array.from( {length: 20}, () => Array(10).fill(0) ); 직관적으로 0 으로 초기환된 20x10 짜리 2차원 배열을 리턴한다는 것을 알 수 있었지만, 다소 생소한 표현법이어서 어떻게 동작하는지 한번 알아보았습니다. Array.from Array.from 은 유사 배열 객체를 배열로 바꾸는데 자주 사용했었는데요, MDN 에 나와있는 대표적인 사용 예는 다음과 같습니다. 1. Array.from('Tei'); //["T", "e", "i"] 2. Array.from([1, 2, 3], x => x + x); //[2, 4, 6] 먼저 1 의 예시는 문자열을 인자로 받아 이를 배열로 반환해 주고 있습니다. 오늘 .. 공감수 0 댓글수 0 2021. 6. 30.
React - React-Router란? 리액트 라우터 설치 우선 기본 리액트 앱을 만들었다고 가정하겠다(CRA 이용). 해당 폴더에 아래와 같이 입력해 라우터를 설치하자. npm install react-router-dom 리액트 라우터 기초 BrowserRouter 우선 BrowserRouter를 import 시킨다. 그 옆에 필요한 도구들을 계속 import 할 예정이다. BrowserRouter은 SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어준다. 그리고 App 컴포넌트를 BrowserRouter 컴포넌트로 감싸준다. App.js 기본 셋팅 import React from 'react'; import ReactDOM from 'react-dom'; import {BrowserRouter} from 'rea.. 공감수 0 댓글수 0 2021. 6. 28.
React - PropTypes란? PropTypes 사용하기 React 공식 문서 기본 사용법 import PropTypes from 'prop-types'; const Greeting = ({ name }) => { return ( Hello, {name} ); } Greeting.propTypes = { name: PropTypes.string }; isRequired .isRequired를 types뒤에 붙여주면 필수 prop으로 인식하고, 값이 없거나 잘못되었을 경우 콘솔 창에서 오류를 확인할 수 있다. Greeting.propTypes = { name: PropTypes.string.isRequired }; 복잡한 배열이나 객체 string이나 number같은 원시자료형의 경우 PropTypes를 위 기본 사용법처럼 그대로 써도.. 공감수 0 댓글수 0 2021. 6. 28.
React - useFetch란? useFetch payload 변수, loading 변수, error변수 useEffect는 componentdidmount처럼 쓰려고 []을 전달해준다. 해당 배열안에는 트레킹할 변수들을 넣어주면. 그 변수가 바뀔때만 update가 된다. 해당 변수가 비어있으니, didmount만 하고 끝~ function useFetch(url) { const [payload, setPayload] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(""); const callUrl = async () => { try { const { data } = await Axios.get(url); s.. 공감수 0 댓글수 0 2021. 6. 28.
React - Stripe Preview : 사이트 방문 : https://stripe-withreact.netlify.app/ 소개 : Hover기능을 활용한 Landing page입니다. stripe.com사이트를 모티브로 제작하였고 반응형기능이 추가되었습니다. 구현기간 : 2021-06-25 ~ 2021-06-25 Skills : React, HTML, CSS, JavaScript(ES6) Code : https://github.com/bellcastle88/ReactStripe 공감수 0 댓글수 0 2021. 6. 25.
React - Sidebar/Model Preview : 사이트 방문 : https://sidebar-modal-withreact.netlify.app/ 소개 : 목록을 볼 수 있는 SIdeBar와 Modal을 볼수있는 APP입니다. useContext를 활용하여 여러 component에서 사용할 수 있는 Provider생성하여 만들어졌습니다. 구현기간 : 2021-06-24 ~ 2021-06-24 Skills : React, HTML, CSS, JavaScript(ES6) Code : https://github.com/bellcastle88/ReactSidebar-Model 공감수 2 댓글수 0 2021. 6. 24.
React - useReducer란? useReducer useState처럼 상태를 업데이트할 수 있습니다. 차이점으로는 useState는 다음 상태를 직접 지정하지만, useReducer는 액션이라는 객체를 기반으로 상태를 바꾸어줍니다. useReducer 선언하기 import React, { useReducer } from "react"; const [number, dispatch] = useReducer(reducer, 0); number는 현재 상태값, dispatch는 액션을 발생시키며 reducer에는 함수를, 0에는 초기값을 나타냅니다. useReducer 사용하기 useReducer(function, dependencies); function에는 실행할 함수를, dependencies에는 의존할 값을 나타냅니다. functio.. 공감수 0 댓글수 0 2021. 6. 24.
useRef 란 ? useRef 란 리액트 Hooks 중의 하나로 useState나 useEffect 만큼 자주 사용되는 훅은 아니지만, 보다 심도 있는 react 코딩을 위해서는 알아두는 것이 좋은 hooks 입니다. useRef의 주 기능은 기존 바닐라 자바스크립트에서 특정 DOM을 사용하던 것처럼 특정 엘리먼트의 속성을 활용하는 것입니다. function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); }; return ( Focus the input ); } 위의 코드.. 공감수 0 댓글수 0 2021. 6. 23.

문의안내

티스토리
로그인
고객센터

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