전체 글
[Webpack] 웹팩 alias 단축 별명으로 절대 경로 설정하기
[Webpack] 웹팩 alias 단축 별명으로 절대 경로 설정하기
2022.02.10🎯 웹팩 단축 별명으로 절대 경로 설정하기 :: alias 파일들을 import 할 때 "./../../../assets/icon..." 이렇게 경로가 길어지는 것을 별칭으로 줄여줄 수 있다. 📝 웹팩 설정 :: alias resolve: { alias: { "@": path.resolve(__dirname, "src"), // "별칭": path.resolve(__dirname, "설정할 경로"), }, }, 특정 모듈을 더욱 쉽게 import 또는 require 하기 위해 alias를 생성 "별칭": path.resolve(__dirname, "설정할 경로") 이렇게 작성해주면 된다. // 변경 전 import DefaultFarm from "./../../../assets/icon/farmPictu..
[TIL] 엘리스 SW 엔지니어 트랙 Day 071
[TIL] 엘리스 SW 엔지니어 트랙 Day 071
2022.02.08📖 오늘 배운 내용 - 2022.01.29 폴더구조 결정 웹팩, 바벨 설정 공부 초기 CSS 세팅하기 (GlobalStyles, styled-reset, ThemeProvider) 📝 폴더구조 ├─public │ index.html │ ├─src │ │ App.js │ │ App.test.js │ │ index.js │ │ │ ├─assets │ │ │ ├─components │ │ └─Name │ │ idnex.js │ │ style.js │ │ │ ├─pages │ │ ├─page1 │ │ │ index.js │ │ │ style.js │ │ ├─page2 │ │ │ index.js │ │ │ style.js │ │ │ │ │ └─page3 │ │ index.js │ │ style.js │ │ │ └..
[styled-components] 초기 CSS 세팅하기(GlobalStyles, styled-reset, ThemeProvider)
[styled-components] 초기 CSS 세팅하기(GlobalStyles, styled-reset, ThemeProvider)
2022.02.08🎯 Styled-Components 전역 스타일링 (Global Style) & styled-reset & ThemeProvider createGlobalStyle Styled Components는 createGlobalStyle()라는 함수를 제공하고 있다. 여러 컴포넌트에 걸쳐 공통된 css를 작업할 때 사용한다. styled-reset 프로젝트 시작할 때 css 초기화를 위해 Normalize 파일을 사용해본 경험이 있을 것이다. 이러한 부분을 npm으로 다운로드하여서 손쉽게 리액트에 적용할 수 있다. ThemeProvider Context API 기반으로 이루어진 Styled-Component에서 제공하는 Theme Provider이다. themeProvier로 감싼 Component들은 them..
[TIL] 엘리스 SW 엔지니어 트랙 Day 070
[TIL] 엘리스 SW 엔지니어 트랙 Day 070
2022.02.08📖 오늘 배운 내용 - 2022.01.28 피그마 작업 CRA 없이 리액트 보일러 플레이트 구성 연습 프론트엔드 오피스아워 💡 오늘 깨달은 것 오피스아워 때 api를 호출할 때의 성능 문제 해결방법으로 리액트 쿼리를 사용할 것을 추천해주셨다. 모바일 화면에서 창을 키워 데스크톱 화면으로 넘어가면서 모든 기능이 한 화면으로 들어간다면 라우터 부분에서 문제가 생길 수 있다는 말씀을 듣고 앱, 태블릿 사이즈만 구현하기로 결정했다. 타입스크립트 공부하면서 프로젝트에 도입하는 것을 추천하지 않는다. 제한된 시간 안에 플젝하기도 바쁜데 공부하는 것은... 시간이 부족하다..! 또는 일부만 TS를 도입해도 괜찮은 방법 중 하나다. 나중에 도입해도 늦지 않는다. CRA를 사용하면 웹팩이나 바벨 등을 커스텀하는데 제한적..
[TIL] 엘리스 SW 엔지니어 트랙 Day 069
[TIL] 엘리스 SW 엔지니어 트랙 Day 069
2022.01.28📖 오늘 배운 내용 - 2022.01.27 와이어 프레임 작업 💡 오늘 깨달은 것 오늘도 어제와 같이 와이어 프레임 작업을 이어나갔다. 만들면서 기능 구현에 대해서도 짧게 생각할 수 있었다. 그리고 React & TS 강의를 봤는데 어렵게 느껴지면 한없이 어렵고, 쉽게 사용하고자 하면 어렵지는 않다. 내일 와이어 프레임 작업 완료하고 CRA 없이 리액트 앱을 구성하는 부분을 볼 예정이다.
[TIL] 엘리스 SW 엔지니어 트랙 Day 068
[TIL] 엘리스 SW 엔지니어 트랙 Day 068
2022.01.27📖 오늘 배운 내용 - 2022.01.26 와이어프레임 제작 💡 오늘 깨달은 것 피그마로 와이어프레임 제작했다. 이전에는 발사믹이랑 카카오 오븐을 통해 제작했는데 피그마는 처음 사용해봤다. 피그마 커뮤니티에 아이콘 등 자료가 많으며, 실제 구현할 화면의 아이콘, 색상 등 동일하게 작업할 수 있다는 점이 가장 좋았다. 와이어프레임을 작업하면서 앱의 동작을 이해할 수 있었고 기획을 더 구체화할 수 있었다. 또한, 구현 방법에 대해서도 생각할 수 있어서 좋았다.
[TIL] 엘리스 SW 엔지니어 트랙 Day 067
[TIL] 엘리스 SW 엔지니어 트랙 Day 067
2022.01.26📖 오늘 배운 내용 - 2022.01.25 프로젝트 안내 & 개발 코칭 프로젝트 1일 차(주제 및 기술 스택 선정) 📝 프로젝트 안내 & 개발 코칭 소통 능력 자신의 관점을 명확하고 논리 정연하게 설명하는 것 자신과의 다른 의견, 새로운 관점을 환영하고 더 나은 방향일 경우 겸허하게 수용 시간, 태스크 관리 능력 주어진 기한 내에 최대한의 퍼포먼스를 내기 위해서는 선택과 집중 논리력 사용하는 기술 스택과 코드의 작성 방식에는 논리가 필요, 왜 이 기술 스택인지, 왜 이런 코드 구성인지를 논리적으로 설명할 수 있어야 한다. 학습 능력 근본이 되는 언어 기본기와 문제 해결 능력을 갖추고, 개발 과정에서 추가적으로 필요한 기술 스택, 언어가 생긴 경우, 짧은 시간 내에 스스로 배울 수 있어야 한다. 💡 오늘 ..
[TIL] 엘리스 SW 엔지니어 트랙 Day 066
[TIL] 엘리스 SW 엔지니어 트랙 Day 066
2022.01.25📖 오늘 배운 내용 - 2022.01.22 styled-components 페이지네이션 - offset 방식 📝 재사용한 스타일을 커스텀하기 import styled, { css } from "styled-components"; export const Container = styled.div` background-color: white; border: 1px solid #f0f1f3; border-radius: 8px; width: 296px; height: 407px; box-sizing: border-box; padding: 28px 24px 20px; position: relative; display: flex; flex-direction: column; ${props => props.large &..
[React] Debounce와 Throttle이란?
[React] Debounce와 Throttle이란?
2022.01.25🎯 Debounce와 Throttle이란? onChange 이벤트로 인해 글자가 작성될 때마다 api를 호출하게 된다면 서버에 과부하를 줄 수 있다. 이는 성능상의 문제가 발생될 수 있으며 유저의 사용성을 해치게 된다. 또한 비용적인 문제도 있다! 즉, Debounce와 Throttle는 이벤트 핸들러가 많은 연산을 수행하는 경우 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 하는 기술이다. 디바운스(debounce)와 스로틀(throttle)은 시간이 지남에 따라 함수를 몇 번이나 실행할지를 제어하는 유사한 기술이지만 서로 다르다. 📝 Debounce란? 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것 이벤트를 그룹화하여 특정 시간이 지난 후 하나의..
[React] 리액트 페이지네이션 :: offset 방식
[React] 리액트 페이지네이션 :: offset 방식
2022.01.24🎯 페이지네이션 :: offset 방식 페이지네이션을 구현하는 방법 중 하나인 offset 방식을 알아보자. 📝 페이지네이션 핵심 코드 살펴보기 {getPageNumbers(currPage, pageCount).map((page) => { return ( onClickPage(page)} > {page+1} ) })} 현재 페이지와 page가 같다면 active가 true로 되면서 배경색 설정 onClick 하면 현재 페이지로 상태 변경 function getPaginationArray(currentPage, total) { const resultList = [currentPage]; let idx = 1; while (resultList.length < Math.min(9, total)) { if (c..
[TIL] 엘리스 SW 엔지니어 트랙 Day 065
[TIL] 엘리스 SW 엔지니어 트랙 Day 065
2022.01.22📖 오늘 배운 내용 - 2022.01.21 styled component SCSS in styled component 📝 인접 요소 연산자(Adjacent sibling combinator) [CSS] 인접 요소 연산자(Adjacent sibling combinator) 🎯 인접 요소 연산자(Adjacent sibling combinator) One Two! Three li:first-of-type + li { color: red; } 📌 참고 Adjacent sibling combinator - CSS: Cascading Style Sheets | MDN lakelouise.tistory.com 📝 SCSS in styled component const SCSSStyledDiv = styled.div`..
[CSS] 인접 요소 연산자(Adjacent sibling combinator)
[CSS] 인접 요소 연산자(Adjacent sibling combinator)
2022.01.22🎯 인접 요소 연산자(Adjacent sibling combinator) One Two! Three li:first-of-type + li { color: red; } 📌 참고 Adjacent sibling combinator - CSS: Cascading Style Sheets | MDN