본문 바로가기
반응형

Front-end22

[CSS] 애플 웹사이트 인터랙션 클론! (인프런 강의 추천 및 후기) 듣게 된 계기 항상 css가 너무 부족하다라는 생각이 들었다. 그래서 CSS 실력을 키우려고 여기저기서 개념들을 익히고 따라해보았지만, 잘 와닿지 않았다. 막연하게 따라하는 것보단 역시 실제로 하나의 웹사이트를 만들어보는 것이 좋을 것 같았다. 어떤 사이트를 만들어야 도움이 될까 여기저기 찾아보다가, 잘되어있는 웹사이트 중 하나는 애플 사이트라며 따라해보라는 유튜브 영상이 있었다. 마침 회사분 한분이 유사한 내용의 인프런 강의를 소개시켜주셔서 듣게 되었다. 애플 웹사이트 인터랙션 클록! - 인프런 | 강의 애플 웹사이트 인터랙션 클론! - 인프런 | 강의 애플 웹사이트에 자주 등장하는 고급 인터랙션 효과들을 처음부터 직접 개발하는 방법을 배울 수 있습니다., - 강의 소개 | 인프런... www.infl.. 2022. 6. 15.
[React] history 사용하여 component 이동시, 화면은 바뀌지 않고 url만 변경될 때 해결법 현재 쇼핑몰을 만들고 있는데 문제가 생겼다. Header 부분에 있는 제품 카테고리를 선택하면, 그에 맞는 제품 렌더링 되어야 하는데.... url 만 변경되고 제품 리스트는 그대로 있는 것이 아닌가!.. 그래서 부랴부랴 구글에 검색해보니까 나와 유사한 상황이 많았다. 수정한 코드 1. Route 변경 [변경전 코드] 변경전에는 Route로 하드코딩을 다 박아뒀었다. (얼마나 무식한 방법이었던가 T_T) url로 parameter를 변경하기 위해서 다음과 같이 했었는데.. 해당 코드를 다음과 같이 바꾸었다. // App.js // =============== 변경전 코드 =============== [변경후 코드] // App.js // =============== 변경후 코드 ==============.. 2022. 4. 7.
[React] Functional Component 외부 함수 vs 내부 함수 코드를 짜다가 문득 궁금한게 생겼다. import React from 'react'; const ex1() {}// component 외부 함수 export default function Join() { const ex2() {}// component 내부 함수 return( ) } 하나의 컴포넌트안에서 함수를 쓸 수 있는 방법이 두 가지가 있는데, 하나는 외부에서 정의하는 것이고 또 다른 하나는 컴포넌트 내부에서 정의하는 것이다. 아직 리액트에 대한 기초가 부족한터라 혹시나 두 가지 차이점이 있나 찾아봤는데 결론은... 차이점이 없다. 단순히 가독성을 위해서 다르게 쓰일 수 있다고 한다. 참고 사이트 * React 컴포넌트 외부 vs 내부에 변수 및 함수 정의 차이 https://velog.io/@ad.. 2022. 4. 4.
[Javascript] 이벤트 처리 방법 onClick vs EventListener 차이점 Button을 클릭 후, 실행할 함수를 정의하기 위해선 onClick 혹은 eventListener로 함수를 정의할 수 있다. 그러면 다음 두가지의 차이점을 무엇일까? onClick의 경우는 하나의 콜백만 지정할 수 있으나, EventListener의 경우에는 여러 개의 콜백을 지정할 수 있다. onClick onClick 이벤트 핸들러를 두번 사용하게 되면 가장 나중에 선언한 이벤트 핸들러가 작동하게 된다. var btn = document.getElementById('btn'); btn.onclick = function() { alert('onclick-1'); } btn.onclick = function() { alert('onclick-2'); } 즉, 다음 코드를 실행할 경우, alert 창에 .. 2022. 4. 3.
[Javascript] 배열에서 특정 값 찾기 배열 속 값 탐색하기 indexOf let arr1 = ['apple', 'banana', 'peach', 'tomato']; console.log(arr1.indexOf('banana')); // 결과값: 2 console.log(arr1.indexOf('lemon')); // 결과값: -1 indexOf 메서드는 배열 안에서 특정 문자열에 해당하는 위치를 찾을 수 있다. 일치하면 값이 배열 속 문자열이 존재하는 위치를 나타내며, 일치하지 않으면 -1이 결과값으로 나타난다. find // 배열일 경우 const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // callback(element, index, array) array.find(v => v > 5); // 6 fin.. 2022. 3. 31.
[Javascript] Callback, Promise, Async await 차이점과 사용법 Callback, Promise, Async await를 살펴보기에 앞서... 자바스크립트 엔진은 코드를 동기적으로 실행하기 때문에, 코드 중간에 엄청난 로직의 함수를 실행한다면 병목 현상이 생길 것이다. 그래서 사용하는 것이 비동기 함수다. Callback 매개변수를 변수가 아닌 함수로 받는 함수 function callbackFun(inputFun) { console.log('매개변수 받는 함수'); inputFun(); } function inputFun(){ console.log('매개변수 함수'); } Promise 비동기 작업을 처리하는 함수 const promise1 = new Promise((resolve, reject) => { resolve(); }); promise1 .then(() .. 2022. 3. 19.

티스토리툴바