DEV 25

[git] 원격 커밋 삭제하기

💻 결과 $ git reabse -i HEAD~3 현재 체크아웃된 위치에서 수정해야 할 커밋 범위를 지정한다. (HEAD~개수) pick 7b778ab Summary 페이지 생성 pick ace7464 Summary 클래스 추가 drop 89217d0 WIP SummaryAccount 상단에 불러온 커밋들 중에서 제거하고 싶은 커밋의 앞에 명시된 값을 pick에서 drop으로 변경하고 저장 후 빠져나온다. (vi 명령어 사용) · vi 명령어 순서 1. i 키를 눌러 입력모드 전환 2. 필요한 부분 수정 3. esc 키를 눌러 명령모드 전환 4. : 키를 눌러 마지막 행 모드 전환 후 wq 명령어를 입력하여 저장 후 종료 $ git push -f origin main 현재 커밋의 변경된 사항을 원격 서버..

DEV/DevelopSystem 2023.10.19

[CSS] 이미지를 원하는 색상으로 필터 씌우기

💻 결과 (CodePen) See the Pen CSS filter generator to convert from black to target hex color by Barrett Sonntag (@sosuke) on CodePen. 출처: https://stackoverflow.com/questions/42966641/how-to-transform-black-into-any-given-color-using-only-css-filters/43960991#43960991 📝 console.log(history) 회사 프로젝트를 진행하다 보니 특정 상태에 대한 색상을 나타내야 하는 경우가 생겼다. 일정하게 정해진 이미지들은 그대로 사용해도 무방했지만 사용자가 임의로 설정하여 사용하는 색상의 경우 대응할 방법..

DEV/CSS 2023.10.18

[CSS] Autofill 속성 수정하기

회사에서 프로젝트를 진행하던 중 고객의 요구사항으로 input을 사용하고 있는 부분의 autofill CSS를 수정해야하는 상황이 생겼다. autofill과 관련하여 작업한 적이 있었지만 기억이 나질 않아 구글링을 통해서 전에 작업했던 것과 같은 코드를 발견했다. box-shadow를 통해서 배경색을 흰색으로 변경하여 사용했는데 현재 프로젝트에서는 배경색이 투명이라 적용이 불가능했다. :autofill로 접근하여 직접 수정하는 방법을 생각해보았으나 autofill의 속성들은 브라우저에서 important로 지정하여 바꾸는 것이 불가능했다. 더보기 https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill :autofill - CSS: Cascading Sty..

DEV/CSS 2023.09.05

[React.js] 소셜 로그인 구현 - 카카오

만약 사용한다면 가장 사용자가 많은 것 같은 카카오 서비스를 구현해 봤다. Developer 사이트가 깔끔하게 정리되어 있어서 자료 찾기가 편했다. 위 이미지는 카카오에서 제공하는 카카오 로그인에 대한 프로세스 흐름이다. 그래서 위 이미지와 비슷하게 프로세스를 구성하여 프로젝트에 구현하였다. 로그인에 대해서 처리하는 방법은 다양하지만 해당 프로젝트에서는 로그인을 처리할 페이지를 따로 만들고 그 페이지로 redirect 하여 로그인을 처리하는 방식을 사용했다. 플랫폼 탭에서 현재 프로젝트가 실행되고 있는 도메인을 입력해 준다. 카카오 로그인 사용 시 REST API를 사용할 예정이므로 도메인은 https로 지정되어 있어야 정상적으로 사용가능하다. (localhost로 테스트하는 것은 사용이 가능하다) 타 ..

DEV/WebProgramming 2023.04.28

[React.js] Viewport와 동적으로 meta 태그 수정하기

많이 부족했지만 웹 애플리케이션 기능을 모두 구현한 후에 모바일에 대응하는 작업을 했습니다. 다른 일반적인 기능 페이지의 경우 미디어 쿼리를 사용하여 반응형으로 쉽게 구현할 수 있었습니다. 🤔 크기가 고정된 문서를 어떻게 한눈에 보여줄까? 문제는 다른 프로젝트에서 문서와 관련된 기능을 현재 프로젝트에 옮겨 사용 중에 있었는데 해당 문서는 크기가 cm로 지정되어 있어 모바일에서 보기엔 맞지 않는 큰 크기였습니다. 당장 떠오르는 해결방식은 크게 두 가지였습니다. 페이지 크기를 수정하여 적용하는 방식 문서의 스케일을 줄이는 방식 페이지 크기를 수정하는 방식은 이미 잘 구성되어 있는 문서를 각 부분 다시 크기를 수정하고 맞춰야 하기 때문에 시간상 불가능할 것이라 판단했습니다. 그래서 문서의 스케일을 줄이는 방식..

DEV/WebProgramming 2023.01.31

[React] Table 사용기

인턴 하게 되어 회사에서 프로젝트를 진행했습니다. 로그인, 회원가입 화면 구성 및 기능 구현하는 등 프로젝트의 일부분을 전담하면서 회사 일을 시작하게 되었습니다. 🤦‍♂️ 실무에서의 table 첫 대면, 오류 발생 그중에 일부 만들어진 기능을 현재 프로젝트로 옮겨야 하는 작업을 하게 되었습니다. 같은 React로 만들어진 기능이라 손쉽게 옮겨질 줄 알았는데 브라우저 콘솔창에 문제를 맞닥뜨리게 되었습니다. 사실 바닐라 js에선 문제없던 부분이기도 했고 React도 js이기 때문에 문제가 없을 거라고 생각했지만 다음과 같은 오류를 보게 되었을 때는 의아했습니다. 🤔 해당 오류는 왜 발생하나? 해당 오류는 태그나 태그가 태그 바로 밑에 오게 되면 생깁니다. 즉, React에서는 꼭 , 태그가 , 태그 내부에 ..

DEV/WebProgramming 2022.12.27

[TypeScript] TypeScript란, React에 적용하기

기존 emotion-diary 프로젝트를 적용해보려 했지만 TypeScript가 익숙하지 않고 완성된 프로젝트에 적용하기엔 힘들다고 판단하여 새로운 프로젝트를 만들며 처음부터 적용해보려 한다. 목차 0. TypeScript란 1. TypeScript 적용 2. TypeScript 사용하기 TypeScript란 // 예시 (코딩앙마 Typescript #1 영상 중) // 기존 javascript 실행시 function add(num1, num2){ console.log(num1 + num2); } add();// NaN add(1);// NaN add(1,2);// 3 add(3,4,5);// 7 add("hello", "world");// "helloworld" // typescript 적용 funct..

DEV/WebProgramming 2022.07.28

[React] Index.html 파일 수정하기

인프런, 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지의 내용 중 Index.html 파일 수정에 대한 내용을 정리한다. 목차 1. // 페이지마다 제목을 수정할 경우 각 페이지에서 아래와 같이 설정 useEffect(() => { const titleElement = document.getElementsByTagName("title")[0]; titleElement.innerHTML = `페이지 제목`; }, []); Open Graph 설정하기 프로젝트의 링크를 입력했을 때 사이트에 대한 간략한 썸네일과 제목, 설명을 Open Graph를 통해 설정할 수 있다. Open Graph를 설정하거나 수정 후 반영되지 않을 때는 Open Graph 캐시를 초기화해야한다.ㅁ 프로젝트 마..

DEV/WebProgramming 2022.07.14

[React] 프로젝트 빌드 및 배포

인프런, 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지의 내용 중 프로젝트 빌드 및 배포에 대해 내용을 정리한다. 목차 1. 프로젝트 빌드하기 2. Firebase를 이용하여 배포하기 프로젝트 빌드하기 프로젝트 배포에 앞서 프로젝트에서 필요한 파일을 추리고 파일 내용의 각종 공백을 삭제함으로써 용량을 줄여 압축하는 빌드 작업이 필요하다. pakage.json 파일에서 스크립트에 build 명령어가 존재한다. 해당 명령어를 통해 프로젝트를 빌드한다. serve 명령어를 통해 로컬에 배포하여 테스트가 가능하다. serve 명령어는 기본적으로 설치되어 있지 않기 때문에 글로벌 플래그를 사용하여 설치한다. 만약 배포된 파일에서 수정이 필요하다면 프로젝트 수정 후 다시 빌드하여 배포한다. ..

DEV/WebProgramming 2022.07.12

[React] Local Storage

인프런, 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지의 내용 중 Local Storage에 대해 내용을 정리한다. 목차 1. Web Storage API 사용하기 2. Local Storage 확인하기 3. 프로젝트에 적용하기 Web Storage API 사용하기 따로 데이터 베이스가 없다면 페이지를 테스트하고 난 후 껐다 켜거나 새로고침 할 경우 데이터가 처음 그대로 돌아가게 된다. 이럴 때 Web Storage API를 사용하여 LocalStorage에 데이터를 저장시키고 불러와 데이터를 보존한다. Web Storage API에는 두 가지로 나뉜다. session storage와 local storage가 있으며 session storage는 브라우저가 열려있는 동안 데이터를..

DEV/WebProgramming 2022.07.08