티스토리

Code&Data Insights

검색하기

블로그 홈

Code&Data Insights

challenge-change.tistory.com/m

paka_corn 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[React] 이미지 로드 실패 시, 이미지 처리 방법 (img onError) [문제]: 웹에서는 잘 보이는데, 안드로이드 어플에서 엑박뜸--> img onError 처리해서 이미 아예 display.non하던가 대체 이미지 넣어줘야함 [해결법]여기 링크의 방법을 제일 많이 참고했는데, 제시하는 해결 방법은1) 대체이미지를 넣거나2) 깨지는 이미지를 숨김처리하는 방법이 있다. https://github.com/vercel/next.js/discussions/14772 tag onError function doesn't work · vercel next.js · Discussion #14772" data-og-description="Bug report Describe the bug I'm trying to render an image if it exist and not show .. 공감수 0 댓글수 0 2024. 8. 6.
[Backend] URL Convention - URL 주소는 kebab-case와 소문자로 구성하기 백엔드에서 API개발할때 camelCase로 썼는데,, kebab-case가 컨벤션인 것을 알게되었다.. 기본적인 것이지만 기록해두기!!! /user/userWalletDetail 이런 네이밍은 안됨! URL 주소는 kebab-case && 소문자 사용해야함!! https://www.theserverside.com/blog/Coffee-Talk-Java-News-Stories-and-Opinions/Why-you-should-make-kebab-case-a-URL-naming-convention-best-practice Why you should make kebab case a URL naming convention best practiceThey say there are only two difficu.. 공감수 0 댓글수 0 2024. 7. 29.
[Git] git rebase해도 계속 예전 커밋이 PR에 포함되는 현상 해결하기 git rebase -i fbf2cea (돌아가고 시점 커밋 선택해서 rebase창 뜨면 선택하고 forced push하기 git push 할때 항상 명시하기 (origin head, upstream master ~ )git reset --hard upstream/master force (-f)는 내 local에서만 하기 head는 branch명 명시 안해도 현재 branch를 가리킴 체리픽 되있을 경우 버리기 : cherry-pick --abort 킵하고 싶은 commit cherry-pick 해놓고 (커밋 여러개일 경우 과거 역순 제일 과거 -> 최신순) git reset --hard 돌아가고 싶은 commit 으로 origin에서 (NOT upstream!!! ) git reset -.. 공감수 0 댓글수 0 2024. 7. 10.
[Git] PR merge후 deploy, Attempt : < Run failed: deploy, Attempt #5 - master > merge 하면 바로 브랜치 삭제하기.. ㅎㅋ 타입에러 나면 그거 다 잡고 올리기.. --no-verify 조건 무시하고 커밋하는거라 타입 안잡고 나중에 PR merge까지 하고 개고생... 여튼, 이미 merge된 브랜치 계속 실패.. ** 이미 merged된 브랜치면 새로운 수정사항 있을때, master에서 작업하고 (back-end, front-end 둘다 최신으로 유지..!) 바로 push git push origin head -f type은 직접 수정하지 말고,, yarn import-type으로 . 꼭잡기...! git fetch upstream mastergit log --oneline : 커밋한거 확인 (내 경우에 마지막 커밋만 적용되면 됐지만, 기존 이미 merged된 브랜치에서 .. 공감수 0 댓글수 0 2024. 6. 28.
[Git] git stash 관련 에러 & 해결 방법 git stash 관련 ==> stash pop: 하고 나면 파일들 삭제==> stash apply: 다음을 위해서 파일 꺼내고 나서도 삭제하지 않음 merge conflict 나면, git stash pop을 해도 git stast apply로 알아서 적용되서 저장됨..! 그럼 평소에 git stash list를 하는게 좋은가? ㄴㄴ 어차피 없어져도 살릴 방법이 있음 그냥 stash pop하기!! 내가 stash 잘 가져왔는지 보려면? git stash list git stash show 혹시 몰라서 reset --hard할때 불안하다면 txt 파일로 저장해두기==> git diff > a.txt==> git stash apply 문제상황 - 내가 했던 작업 상황들 git stash 해놓고.. 공감수 0 댓글수 0 2024. 6. 27.
[error 해결하기] library 설치 후, JSX children 에러메세지 react-slick 라이브러리 깔았는데 Slider > 이부분에 에러가.. 1) 시키는 대로 잘 깔았음yarn add react-slickyarn add slick-carouselyarn add @types/react-slick (타입스크립트 써서) 2) 이것저것 찾아보다가 이거 넣었음 -> 그래도 안됨..! 3) 왜죠..? https://www.npmjs.com/package/react-slick react-slickReact port of slick carousel. Latest version: 0.30.2, last published: 4 months ago. Start using react-slick in your project by running `npm i react-slick`. .. 공감수 0 댓글수 0 2024. 6. 26.
[Git] error: failed to push some refs to <my repo(fork 한)> 해결하기 문제 상황branch 생성 후 git pull upstream master 이후 로컬에 push (git push --set-upstream origin feat/rss-news) 하려고 하자 에러 발생 원인? 원격 저장소에 푸시하려는 브랜치가 로컬 브랜치와 일치하지 않을 때 발생==> 이 문제는 주로 다른 사람이 원격 저장소에 푸시한 변경 사항을 로컬 저장소가 반영하지 않았기 때문에 발생! 문제 해결 방법 1) 로컬 브랜치가 최신인지 확인: git push --set-upstream origin feat/rss-news==> same error! 2) 만들었던 기존 브랜치 삭제하고 다시 만듬 (1) 마스터 브랜치로 이동 => git checkout master (2) git pull upstre.. 공감수 0 댓글수 0 2024. 6. 23.
[Git] Git으로 협업하기 - Pull Request(PR) | branch naming convention 협업시 새로운 기능을 개발할 때, master branch에서 작업하지 않음! (1) 내 계정으로 fork 한 뒤 git clone,-> 새 기능의 branch를 생성한다. 로컬 repository 에서 브랜치생성git branch git switch * branch 생성 후 & 작업 중간중간 pull 해오기 ** (2) 변경 사항 local에 push(push 전 yarn format, yarn tsc 타입 잡기..!) => 현재 만들어진 새 브랜치에서 작업해서 푸시할 경우git push origin head (브랜치 이름 넣을 필요 X) (3) PR (Pull Request) 생성github에서 'New Pull Request' 생성하기 Merge 요청 (4) 코드리뷰 받기, Merg.. 공감수 0 댓글수 0 2024. 6. 12.
[TypeScript] TypeScript 공부하기 [ Implicit Type vs Explicit Type ]변수 선언할때는 굳이 type을 지정해줄 필요 없음 => typescript의 typechecker가 inter추론하게 두는게 더좋음! // implicit typelet x = 5;// explicit typelet x: number = 5; [ object type에서 변수를 선언할때, 선택적으로 사용할 경우 ]?를 넣어주면 됨! ==> 변수 ? 로 사용할 경우, 변수가 존재하는지 확인하고 쓰는 과정이 필요!const person = { name : string, email?: string }if ( person.email && person.email.includes('google') {} [ 똑같은 형식의 객체를 계속 생성할 경우 -.. 공감수 0 댓글수 0 2024. 6. 12.
[Git] 협업 시 git conflict 해결하기 - git rebase 문제상황- git pull 안하고(다른사람이 변경한거 체크안하고..ㅋㅎ: 내실수) 커밋해서 conflict 남 - 다시 commit했는데 처음꺼 그대로 남아있고 내가 올리고 싶지않은 다른 파일로 다시 커밋이 되버림 해결방법1) 리베이스 시작:git rebase -i HEAD~2 (or git rebase -i HEAD^^): 최근 두개 커밋을 보여줌, 내가 삭제하고 싶은 커밋 pick -> drop으로 수정-> esc 안먹힘, 그냥 :wq 치고 (write(저장)와 quit(종료)) 엔터 누르면 된다 -- 푸시하기 전에 잘 없어졌는 지 확인 가능! -- 2) 리베이스 OK, 원격 저장소에 변경사항을 푸시하기git push origin master --force 완료!! (교훈: Git Pull .. 공감수 0 댓글수 0 2024. 5. 30.
[NodeJS] NodeJS 기본 개념 정리 NodeJS 란? : 크롬의 자바스크립트 해석 엔진 V8로 이루어져 있음 -> 자바스크립트 실행 환경(런타임) (ex) 유저가 공지 페이지에 접속했을 때, 공지를 띄어주는 것 app.get('/notice', function(req, res){ res.send('공지입니다')}) NodeJS를 쓰는 이유? : 브라우저 말고도 다른 환경에서도 JS를 실행 할 수 있게 도와줌 - 큰 처리를 필요로 하는 요청이 들어올 시, 대기 시간/처리 시간이 오래 걸림, 요청을 다 처리할 때 까지 다른 요청을 받지 않음 => 반면, NodeJS는 Non-blocking IO=> 요청 순서대로 처리하는 것이 아닌, 처리 순서가 빠른 것 부터 처리함, 요청을 계속 받음 - 코드가 짧고 쉬워서 빠른 개발이 가능하지만, 웹.. 공감수 1 댓글수 0 2024. 5. 29.
[Git] 일부 파일 staged에 올리고 changed 파일이 남아있을때 commit 후 push 하기 | 'fatal: not a git repository (or any of the parent directories): .git' 오류 해결 아주 기본적인 실수지만,그래도 기록하기..! 커밋할 때, vscode에서 staged에 올려야 되는데, 일부 수정 반영 필요 없는 파일들을 올리지 않을 경우 commit해도 바로 push 버튼이 활성화가 안된다! -> 명령어로 push 해도 되는데 처음이라 여러 방법을 찾다가 파일을 다 삭제해버림.. ㅋㅎ 문제가 된 명령어 git rm --cached . -rf 인덱스에서 모든 파일을 제거하기 때문에, 잘못 사용하면 다음 커밋에서 모든 파일이 삭제된 것으로 나타날 수 있음! 사용시 주의!!! [ 해결 방법 ] (1) 내가 커밋한 내용들도 같이 사라졌기 때문에, git init 하기전에 저장해야 함 (따로 저장해놓기) (2) 깃 초기화 하기 - git init (3) 기존 저장소 다시 연결git rem.. 공감수 0 댓글수 0 2024. 5. 22.
[Git] Git Pull과 Git Pull --Rebase | Git commit convention git pull : git fetch + git merge 두 명령어의 조합 - git fetch : 원격 저장소의 변경사항을 로컬로 가져옴 - git merge: 가져온 변경사항을 현재 브랜치에 병합 => 커밋 히스토리가 꼬여버린 경우..git reset --hard로 하고 -> git pull git reset 하면 잘 안됨 -> git reset --hard로 하고=> git pull 하기! ** hard는 절대 절대!!! local에서만 실행하세요..!!! 안된다고 원격 repo에서 했다가 대참사가 일어날 수 있습니다..(웬만하면 원격 repo에서 작업하지 마세요..ㅎ) git pull --rebase: git fetch + git rebase 두 명령어의 조합 - git fetch : 원격.. 공감수 0 댓글수 0 2024. 5. 22.
[React] 상태관리 라이브러리 - Redux | Zustand | Recoil | Jotai 상태관리 라이브러리를 상황에 따라 선택해야됨! 각 라이브러리에 맞게 성능 향상 방법을 고민하는 것이 중요함! [ 라이브러리 분류 ] 1) Flux: Redux, Zustand2) Proxy: Mobx, Valtio3) Atomic: Recoil, Jotai Redux - 모든 상태 업데이트를 액션으로 정의하고, 액션 정보에 기반하여 리듀서에서 상태를 업데이트하기 때문에 상태를 더욱 쉽게 예측 가능하게 하여 유지보수 측면에서 좋음 - 서버 사이드 렌더링이 가능- redux toolkit [단점]- 보일러 플레이트와 장황한 코드가 필요함 - 방대한 코드량, 익숙하지 않은 원리와 직관적이지 않은 코드 => 러닝 커브 높음 - 리액트 전용 라이브러리가 아니기 때문에, 리액트 내부 스케줄러에 접근하기 어려웠음-.. 공감수 0 댓글수 0 2024. 5. 19.
[JavaScript] 비동기 프로그래밍 - Callback 함수, Async/Await, Promise 동기(Synchronous) vs 비동기(Asynchronous)동기(Synchronous) 프로그래밍- 코드가 작성된 순서대로 차례대로 실행- 각 작업이 완료될 때까지 다음 작업이 시작되지 않음 비동기(Asynchronous) 프로그래밍- 코드가 작성된 순서와 상관없이 실행- 한 작업이 완료될 때까지 기다리지 않고 다른 작업을 동시에 수행할 수 있음 비동기를 사용하는 주요 이유? => 멀티태스킹을 구현하여 시스템 자원을 효율적으로 사용하기 위해서! => 여러 스레드나 프로세스가 동시에 실행됨 비동기 프로그래밍의 발전 순서 1) Callback 함수: 함수를 등록하고, 어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출해서 실행하는 함수 - 초기 비동기 프로그래밍에서는 콜백 함수를 .. 공감수 0 댓글수 0 2024. 4. 29.
[React] 리액트의 상태관리 - Flux 패턴, Redux, context API Flux 패턴 & 단방향 데이터 흐름: 리액트는 단방향 데이터 흐름(Action → Dispatch → Reducer → Store)을 기반으로 하는 Flux 패턴을 사용 Action: 상태 변경을 트리거하는 객체Dispatch: Action 객체를 Store에 전달하는 함수Reducer: Action에 따라 상태를 업데이트하는 함수Store: 애플리케이션의 전역 상태를 관리하는 객체View: Dispatch된 Action을 통해 상태를 변경하고, 상태가 변경되면 UI가 자동으로 업데이트됨 Redux: Flux 패턴을 구현한 라이브러리로, 애플리케이션의 상태를 단방향 데이터 흐름으로 관리 [장점]- 컴포넌트끼리 상태를 공유할 때 여러 컴포넌트를 거치지 않고 전달할 수 있어 효율적- 상태 변경이 예측 가능.. 공감수 0 댓글수 0 2024. 4. 28.
[React] 리액트 상태관리 - 상태 관리 범위와 도구 상태(State)와 상태 관리란?State: 컴포넌트의 데이터 상태(ex) 사용자가 입력한 값이나 버튼 클릭 상태 상태 관리 : 화면을 변경하는 데 필요한 데이터를 관리하는 과정 [ 상태관리의 필요성 & 효과 ]- 상태가 변경될 때, Virtual DOM을 사용하여 관련된 DOM만 효율적으로 업데이트함 => 불필요한 DOM 접근최소화- 상태관리를 통해 코드 간결화와 유지보수성 강화가 가능 => 상태 관리는 필요한 상태만 관리하는 것이 중요! 최소한의 상태를 관리 : 불필요한 상태를 관리하면, 코드가 복잡해지고 렌더링 성능이 저하됨! 상태 관리의 범위1) 로컬 상태 (Local State) => useState: 각 컴포넌트 내에서만 사용되는 상태- 사용자가 입력한 데이터를 처리하거나 UI의 동작을 제어하.. 공감수 0 댓글수 0 2024. 4. 27.
[React] React란? React의 특징 React란?: Meta(구 Facebook)이 개발한 UI 라이브러리 주요 특징 Keyword (1) 컴포넌트 기반 구조(2) Virtual DOM 바탕의 성능 최적화(3) SPA 개발에 필요한 기능과 도구를 제공=> SPA(Single Page Application) : 하나의 HTML 페이지를 처음에 로드한 뒤, 페이지 이동이나 추가 데이터가 필요할 때 자바스크립트를 이용해 서버와 소통하여 필요한 부분만 업데이트하는 방식 React의 특징1) 컴포넌트를 기반으로 UI를 표현할 수 있음 -> 유지 보수 측면에서 매우 효율적임-> 페이지를 컴포넌트 단위로 개발할 수 있음 2) 화면 업데이트 구현이 쉬움-> 리액트는 선언형 프로그래밍(목적만 깔끔하게 명시, 코드가 간결함)의 방식으로 동작함==> 업데이.. 공감수 1 댓글수 0 2024. 4. 23.
[JavaScript] ECMAScript 5 & ES6 (1) "use strict": strict mode 선언시, 선언되지 않은 변수를 사용할 수 없음 (2) 문자열 인덱싱 (string index): 문자열의 특정 인덱스에 접근가능=> str[0] (3) string literal break up : 문자열을 여러 줄로 나누어 작성이 가능" hello" + "hh" => return hello hh (4) 예약어를 속성 이름으로 사용 가능 (5) 배열의 모든 요소를 합산하거나, 특정 로직을 적용하여 값을 축약할 수 있음=> Array reduce(), reduceRight() : sum of all numbers in an array (6) 배열의 모든 요소가 특정 조건을 만족하는지 확인=> Array every() : numbers.every(.. 공감수 0 댓글수 0 2024. 4. 22.
[Web] 웹 개발 필수 개념 알기 - 브라우저의 렌더링 과정 | 웹팩 | 바벨 | 빌드시스템 HTTP와 HTTPS의 차이점 및 HTTPS의 장점=> 현재 웹에서는 대부분 HTTPS를 사용한다.주요 웹사이트와 브라우저들이 보안을 강화하기 위해 HTTPS를 기본으로 요구하고 있으며, HTTP로 접속할 경우 "안전하지 않음" 경고가 표시되는 경우도 많음.=> (24.10 update) 데이터 암호화를 가능하게 해줌 : 중간자 공격 방지 브라우저 렌더링 엔진의 HTML, CSS, JavaScript 해석 순서: 파일을 웹페이지로 변환하기 위해 브라우저가 따르는 흐름- DOM : 요소들의 위치, 배치, 모양에 관한 모든 정보가 담겨 있음=> 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를.. 공감수 0 댓글수 0 2024. 4. 11.
[Web] 웹 개발 필수 개념 알기 - 클라이언트의 데이터 저장 방식 | 렌더링 방식(CSR, SSR)의 차이점 웹 애플리케이션은 클라이언트(웹 브라우저)와 서버 간의 요청-응답 사이클로 작동한다. 클라이언트가 서버에 정보를 요청하면, 서버는 필요한 리소스를 처리하여 클라이언트에게 반환한다. 이러한 과정 덕분에 사용자는 웹 페이지를 보고 상호작용할 수 있게 되는 것이다.Web 브라우저의 데이터 저장 방식웹 스토리지웹 애플리케이션은 사용자 데이터를 저장하기 위해 여러 가지 스토리지 옵션을 제공한다.세션스토리지: 세션스토리지는 현재 열려 있는 브라우저 창에서만 데이터를 유지한다. 창을 닫으면 데이터는 삭제되며, 약 5MB의 용량을 제공한다. 일시적인 데이터를 저장하는 데 적합하며, 역시 HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다. 일반적으로 폼 정보나 장바구니와 같은 휘발성이 강한 데이터를 저장하는 데 .. 공감수 0 댓글수 0 2024. 4. 11.
[Web] 웹의 역사 - HTML, CSS, JavaScript의 역할과 등장배경 1. 웹이란 무엇인가?: 웹은 인터넷을 통해 전 세계적으로 정보를 공유하고 접근할 수 있는 시스템=> 하이퍼텍스트로 연결된 문서들의 집합체 2. 웹이 탄생한 이유?: 웹은 1989년에 팀 버너스리에 의해 제안되었으며, 정보를 공유하고 연결하는 데에 초점을 맞췄습니다. 그 당시에는 정보를 공유하기 위해서는 주로 이메일이나 FTP와 같은 방식을 사용했는데, 이러한 방식은 사용자가 직접 해당 서버에 접속해야 했고, 정보를 찾는 과정이 번거로웠습니다.그러나 웹은 하이퍼텍스트를 이용하여 문서들을 링크시키고, 이를 통해 사용자가 쉽게 정보를 찾고 연결할 수 있게 하였습니다.=> 하이퍼텍스트로 연결된 문서들의 집합체 3. 초기 웹페이지의 형태는? : 초기의 웹페이지는 단순하고 정적인 형태였습니다. 대부분의 페이지는 .. 공감수 0 댓글수 0 2024. 4. 5.
[Git] Git 기본 (2) Git 기본 컨셉 Working Directory : 작업하는 파일이 있는 디렉토리Staging Area : Git에 등록할(커밋) 파일들이 올라가는 여역Local Repository : 로컬 git 프로젝트의 메타데이터와 데이터 정보가 저장되는 영역Remote Respository : Github 등의 서비스를 통한 온라인 상의 저장소 Git의 동작 원리** Github상에서 만들어진 것은 Remote Repository / 내 PC에 저장되있는 것은 Local Repository Git 명령어Local Repository: 내 PC에 파일이 저장되는 개인 전용 저장 공간 저장소(Repository)?- 파일이나 폴더를 저장하는 곳 - Git 저장소는 파일 변경 이력 별로 구분되어 저장 Local.. 공감수 0 댓글수 0 2022. 7. 17.
[Git] Git 기본 (1) Git 이란?? - 형상관리도구(Configuration Management Tool) 중 하나이다. => 형상관리도구 = 버전관리 시스템 - 프로젝트 소스코드를 효과적으로 관리할 수 있는 시스템- 여럿이 작업하더라도 문제가 없게 함- 소프트웨어의 여러 버전을 동시에 관리 할 수 있다.- 프로젝트 진행의 모든 로그를 볼 수 있으며 해당 시점으로 되돌리는 것도 가능하다. Git을 사용하는 이유- 프로젝트 시 어떤 기능을 빼고 더하고 고치고 수정하는 과정은 필수이다.기능을 되돌리게 될 수도 있고, 서로 다른 기능의 버전을 유지해야 하는 경우도 있다. 1. 코드 관리 측면- 변경된 이력 확인 / 이전 이력으로 되돌리기 / 현재 최종이 어느 시점인지 표현할 수 있음 2. 협업의 측면 - 각 기능별로 분업 후.. 공감수 0 댓글수 0 2022. 7. 17.

문의안내

티스토리
로그인
고객센터

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