본문 바로가기

전체 글178

git github 처음부터 다시 배우기 - 1. git 배경 git/github 를 처음 쓰게된 시점이 과제로 팀프로젝트를 처음 하게 되었을 때인데 개발도 익숙치 않던 상황에 git 은 물론이요 github 를 얕고 빠르게 GUI 위주로 다뤘었다 그러다 보니 슬슬 한계를 느껴 처음 배우는 것처럼 하나부터 열까지 천천히 다시 배워보려 한다 git 은 무엇인가 깃(Git /ɡɪt])은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 스냅샷 스트림 기반의 분산 버전 관리 시스템 혹은 명령어를 의미한다. VCS : Version control system (버전관리 시스템) ※ 부가 설명 Git과 다른 VCS(Subversion 및 그 친구들 포함)의 주요 차이점은 Git이 데이터에 대해 생각하는 방식입니다. 개념적으로.. 2023. 2. 5.
nextjs 기타 지원 기능 12 버전 기준으로 정리한 내용이므로 주의 13 버전은 일부 바뀐 내용이 있습니다. 개념만 참고 추천 nextjs 기본 및 페이지 개념 에서 이어지는 내용 css 관련 css-module, sass, css in js 등등 지원함 Adding a Global Stylesheet pages/_app.js 에 style 을 적용하면 됨 Import styles from node_modules v9.5.4 부터 node_modules 에 있는 css 파일 가져와서 적용 가능 ex) bootstrap, antd import 'bootstrap/dist/css/bootstrap.css' layout 레이아웃 감싸는 것도 따로 만들어 둠 꽤 편리함 13 버전에는 layout 파일을 생성해서 적용 가능.. 2023. 2. 2.
nextjs 기본 및 페이지 개념 12 버전 기준으로 정리한 내용이므로 주의 13 버전은 일부 바뀐 내용이 있습니다. 개념만 참고 추천 Next.js 는 무엇인가 Next.js is a flexible React framework that gives you building blocks to create fast web applications - 공식문서 소개 부분 Next.js는 서버 사이트 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다. - [출처] 위키 백과 (https://ko.wikipedia.org/wiki/Next.js ) 정리: React 를 효율적인 사용하기 위한 프레임워크 이며 SSR 을 구현하는데 많이 사용함 설치 npx.. 2023. 2. 2.
next-redux-wrapper 이해하기 nextjs 에서 redux 를 사용하기 위해서는 next-redux-wrapper 가 필수적으로 필요한 이유가 궁금했다. 본문 일부 내용 번역 정적 앱용 Redux 를 설정하는 것은 다소 간단하다 모든 페이지에 제공되는 단일 Redux 저장소를 만들어지기 때문에. Next.js static site generator or server side rendering 이 관련되면 Redux 연결 구성 요소를 렌더링하기 위해 서버에 다른 저장소 인스턴스가 필요하기 때문에 작업이 복잡해지기 시작합니다. 또한 초기 값 관련해서 redux 의 store 에 접근해야 할 수 도 있다. next-redux-wrapper 는 자동으로 스토어 인스턴스를 생성하고 모두 동일한 상태를 갖도록 합니다. 이해 과정 실제로 처음 n.. 2023. 2. 2.
react 에서 inline style 의 단점 직접 carousel 만들던 중 콘텐츠를 움직이기 위해 태그의 inline style left 속성을 변경하는 방법을 사용했었는데 리팩토링 하고자 자세히보니 불필요한 리랜더링이 있었고 찾아보니 react 에서 inline style 을 사용시 같은 값이더라도 리랜더링이 일어나 사용하지 않는 것이 좋고 styled-component 등을 활용하는게 좋다고 한다 3 줄 정리 간단하게 react 는 새로운 document와 기존 document 구조를 대조해서 리랜더링 여부를 판단 후 변경한다. js 세상은 {} !== {} 이 성립하며 inline style 은 객체형식이다 inline style 을 적용시키는 코드가 있다면 어떤식이든 리랜더링이 될 것이고 무의미하거나 불필요한 리랜더링일 가능성이 높으니 고.. 2022. 10. 12.
ESLint 와 prettier ESLint ES + Lint es : Ecma라는 기구에서 만든 Script = 표준 Javascript Lint : 에러가 있는 코드에 표시를 달아놓는 것을 의미 ESLint는 자바스크립트 문법에서 에러를 표시해주는 도구입니다. 일종의 가이드라인 코드상 문제가 되는 부분만을 지정할 수도 있고 , 아니면 에러 기준을 직접 지정할 수도 있다 또한 간단하고 전반적인 코딩스타일(ex. tab은 몇 칸을 기준으로 할 것인가? / ; 여부 등)까지 지정할 수도 있다. 예를 들어 함수 정의할 때, 일반 function 키워드의 함수로 정의할 수도 있고, arrow function을 쓸 수도 있다. 또 배열의 반복문을 돌릴 때 일반 for문을 돌릴 수도 있지만, forEach, map 등 Array 내장 함수를 사.. 2022. 9. 2.
[GitHub] git private clone 인증 관련 오류 : Support for password authentication was removed on August 13, 2021. remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication. private repository clone 하려던 중 아이디, 패스워드 치는데 오류가 났다. 패스워드 틀린줄 알고 한참 삽질하다 뒤늦게 발견하고 찾아보니 말 그래도 인증방식이 바뀌었단다. 오류를 소중히하자 비밀번호가 토큰(P.. 2022. 8. 30.
스로틀(Throttle)과 디바운스(Debounce) 단도직입적으로 말하자면 스로틀(Throttle)과 디바운스(Debounce)는 이벤트를 기반으로 실행하는 자바스크립트 특성상 이벤트(event)를 효과적으로 제어(제한)하는 방식(기술)이다. 짧은 시간 내에 반복되는 이벤트로 인한 발생하는 연산들을 제어하여 성능저하를 막고 의도한 만큼만 실행 하기 원할 때 사용한다. 디바운스(Debounce) 순차적으로 반복되는 이벤트를 그룹화하여 끝나는 시점에 실행시켜 제어하는 방식 ※ 예시 : 창 크기 resize 스로틀(Throttle) 일정시간 동안 이벤트가 한번만 실행되도록 제어하는 방식 ※ 예시 : 무한 스크롤링 둘의 차이점 스로틀(Throttle)과 디바운스(Debounce) 의 가장 큰 차이점은 스로틀(Throttle) 은 적어도 X 밀리 초마다 정기적으로.. 2022. 8. 28.
MPA 와 SPA , SSR 와 CSR MPA (multi page application) 여러 페이지로 구성된 웹 어플리케이션으로 사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html 을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식 SSR 방식을 사용함 SPA (Single Page Application) 하나의 페이지로 구성된 웹 어플리케이션으로 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식 SSR 과 CSR 그리고 SEO 간의 관계 SEO (search engine optimization) SEO 통칭(검색 엔진 최적화)는 검색엔진으로 부터 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정을 말한다. .. 2022. 8. 28.
[CSS] 이미지 테두리에 그림자 원 형태의 소셜 로그인 이미지 버튼에 그림자를 주려했으나 box-shadow 을 주니 네모난 모양의 그림자가 생겨 방법을 찾으니 기존에 박스형태의 태그에 그림자 주는 방식은 box-shadow 속성을 주었지만 이미지에 그림자를 주려면 CSS filter 속성 중 drop-shadow을 주면된다. ※ CSS filter : 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용하며 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 사용됨 + 최신브라우저만 지원하므로 확인하고 사용해야한다 drop-shadow(x y blur color) styled-component 로 적용한 모습 const ImgBox = styled.div` width: 200px img { width: 100%; filter: .. 2022. 8. 28.
사수라는 신기루 그저 유희를 위한 픽션 2022. 8. 26.
유사 배열 객체와 반복 작업 가끔 반본적인 객체형태의 데이터를 반복 작업해야 한다면 골머리가 아프다 배열형태라면 쉽게 처리하기 쉽지만 객체형태라면 쉽게 처리가 힘들기에 되도록 배열형태로 값을 주고받곤 했다. 그러던 와중 유사 배열 객체와 이 객체를 반복작업을 할 수 있는 메서드를 알게되었고 유사 배열 객체 (array-like object) 라는 한정적인 객체의 형태(?) 만 가능한 작업으로 보이나 알아두면 좋을 듯 하여 정리하게 됨 쓰게될지는 모르겠음 가장 큰 특징으로 lengh 속성이 따로 가지고 있다는 것과 키값이 순서가 눈에 띈다 그것을 제외하면 객체와 다름 없어 보인다. 실제로 [[Prototype]]: Object 특별하게 다른놈은 아닌듯 하다. // 유사 배열 객체 모양 const arr_like = {0: 'I.. 2022. 8. 26.

티스토리툴바