본문 바로가기

Study

(114)
Next.js styled-components compile error 해결 Next.js에서 styled-components를 사용하는데 새로고침 할 때 마다 다음과 같은 에러를 발생했습니다. Next.js 12버전부터 babel 대신 swc를 사용하여 컴파일하도록 변경되었기 때문입니다. .babelrc가 있다면 babel을 사용하게 되므로 아예 babelrc를 제거한 다음, next.config.js 에서 styledComponents 설정만 해주면 swc를 사용하면서 문제를 해결할 수 있습니다.
Next.js Link Error 해결 - Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Next Link Error Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? - Next/Link의 children으로 component를 줬을때 생기는 error 입니다. 1. component를 a tag로 감싸줍니다. 2. a태그를 styledComponents로 감싸주면 a tag의 lint error가 사라집니다. https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-functional-component next/link | Next.js Enable..
macOS 터미널에서 내 IP 주소 확인하기 내부(사설) IP 주소 확인(ipconfig, ifconfig) ipconfig getifaddr en0 ifconfig | grep inet 외부(공인) IP 주소 확인 curl ifconfig.me 참조 https://iidaroo.tistory.com/entry/Mac-%ED%84%B0%EB%AF%B8%EB%84%90%EC%97%90%EC%84%9C-IP-%EC%A3%BC%EC%86%8C-%ED%99%95%EC%9D%B8%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95
Clean Code 작성하기 “우리는 저자이다. 저자에게는 독자가 있다. 그리고 저자에게는 독자와 잘 소통해야할 책임이 있다.” ⌈Clean Code⌋의 저자, Robert C. Martin 클린코드란? 클린 코드란 코드를 읽는 사람들이 이해하기 쉽도록 작성된 코드라고 정의할 수 있습니다. => 유지 보수(코드 파악, 디버깅, 리뷰)의 시간을 단축할 수 있는 코드 가독성이 중요한 이유? 일반적으로 기존 코드를 변경하고자 할 때, 해석하는 시간과 수정하는 비율이 10:1이라고 합니다. 코드를 변경하는데 걸리는 전체 시간이 10시간이라고 하면, 코드를 분석하는 시간이 9시간 이상 걸린다는 말 입니다. 해석이 어려운 코드는 그만큼 분석하는 시간이 더 오래 걸리고 또한, 대부분의 결함은 기존 코드를 수정하는 동안에 발생한다고 합니다. 그러..
Jira 와 Github 연동하기 Jira Cloud와 연동할 Github OAuth 정보 생성 Jira Cloud와 Github 연동을 위해서는 OAuth 정보 연동이 필요합니다. Jira 와 Github 둘다 관리자 권한이 필요합니다. Github의 사용자 정보 메뉴 선택 Settings 메뉴 선택 3. 좌측 하단의 Developer settings - OAuth Apps 메뉴를 선택. 4. 우측 상단의 New OAuth App 선택. 5. 생성하고자 하는 OAuth 정보 입력 후 Register application 선택 OAuth 예시 - Application name : OAuth 이름 - Homepage URL : 연결할 Jira Cloud URL 정보 ex) https://aaa.atlassian.net - Authoriza..
Jenkins로 CI/CD Pipeline 구축하기 - 통합본 CI/CD 란? CI 란? 개발자를 위한 자동화 프로세스인 지속적인 통합 ( Continuous Integration ) 어플리케이션의 새로운 코드 변경 사항이 정기적으로 빌드/ 테스트 되어 공유 Repository에 (ex. git,github) 통합하는것을 의미한다. 다수의 개발자가 작업할 경우 레포지토리에 쌓이는 commit들이 충돌하는 것을 자동화된 빌드와 테스트로 방지할수 있다. CD 란? 지속적인 배포 ( Continuous Deployment ) “수동적" 으로 배포하는것을 지속적인 제공이라 하는데, 이것을 “자동화”하는것이 지속적인 배포 ( Continuous Deployment ) 이다. 📌 어플리케이션 개발 단계 부터 배포 때 까지 모든 단계들을 자동화를 통해서 사용자에게 배포 할수있도..
CSS - boarder gradation 다음과 같은 Board gradation을 사용하게 되었는데, 좀처럼 되지 않아 구글링을 해봤다. //html //css .borderDiv { width: 100px; height: 100px; border: 3px solid; border-radius: 50px; border-image: linear-gradient( 180deg, #0485ff -32.14%, #7d5cf8 53.24%, #ec033f 150% ); border-image-slice: 1; } 다음과 같이 코드를 작성하였고 결과물은 아래와 같습니다. border-image로 gradient를 줬지만 border-radius가 먹지 않는다. 찾아보니 border-image와 border-radius는 두개가 혼용 될 수 없다고 합니다..
JS - Array.prototype.map() 구현하기 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. - mdn const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, 32] 다음과 같이 배열의 요소 하나하나에 원하는 함수를 넣어서 그 결과로 새로운 배열을 만드는 map 함수를 직접 구현해보겠습니다. const arr = [1,2,3,4,5]; 먼저 임의의 배열을 먼저 추가해줍니다. Array.prototype.map2 = function(callback) { return null;..