남남이루의 고군분투 🌳

Q. tailwindCss 에서 속성을 추가할 때 권장하는 순서가 있다는 것을 아셨나요? 문제 상황tailwindCss를 사용하다보면, 한 엘리먼트에 대한 css 속성을 클래스명에 나열하게 됩니다. 이 때 클래스명이 한없이 길어지곤 합니다.가독성이 떨어진다.이는 단순히 읽기 어려운 걸 넘어서 어떤 속성을 부여했는지 일일이 파악해야 한다는 단점이 생깁니다. 특히 새로운 컴포넌트를 만들 때보다 유지보수할 때 혹은 수정이 필요할 때 순서가 잡혀있지 않은 어떤 청크를 읽는다는 것은 인지적으로 꽤나 소모가 크게 느껴집니다.상충되는 속성을 찾기 어렵다.따라서 상반되는 CSS 속성이 부여된다거나, 이미 앞쪽에서 부여한 속성을 뒤에서 한번더 추가하게 되는 실수가 생기기 쉽습니다.클래스명 사이에 더블 스페이스가 있어도 ..

새로 레포를 만들어서 git init 할 때마다 default가 master로 되어 있다면로컬 Git 설정 변경하기방법 1. config 설정 cmd 명령어git config --global init.defaultBranch main방법 2. config 설정 파일 수정하기git config --global -e : 로컬 Git 설정 파일 열기.gitconfig 파일 내부에 아래 내용을 입력하기[init]defaultBranch = main이미 만든 프로젝트의 로컬 default 브랜치를 master에서 main으로 변경하려면로컬 브랜치를 main으로 변경하고, 원격 저장소에 반영하기 git branch -m master main // 로컬 브랜치 변경git push -u origin main // ..

Next.js 폴더 트리 == url path 그간의 React 프레임워크를 사용한 개발에서는 별도의 라우팅 처리를 하게 되면 폴더 구조와 url path에 차이가 나기 마련이었다. ex. URL : xx.com/board/detail/1 실제 폴더 구조 : board ㄴ [id].jsx 그러나 Next는 폴더 구조를 그대로 가져가서 라우팅을 해줄 수 있다. 위 예시의 폴더 구조라면 {baseUrl}/board/1 이런식으로 주소에 접근하면 board의 하위 페이지를 불러오게 되는 것이다. 이 주소는 애플리케이션 내부에서 href의 값에 쓰일 때도, router에 들어가는 url 주소값에서도 동일하게 사용된다. 파일 위치가 "app/page.tsx" 라고 할 때, app폴더의 가장 상단인 page.tsx..

global 환경 세팅 파일 : .gitconfig// gitconfig 파일 vscode로 열기git config --global -e[user] name = namnameeroo email = nami.skageec@gmail.com[core] editor = code autocrlf = true[alias] st = status ss = status -s hist = log --graph --all --pretty=format:'%C(yellow)[%ad]%C(reset) %C(green)[%h]%C(reset) | %C(white)%s %C(bold red){{%an}}%C(reset) %C(blue)%d%C(reset)' --date=short ba = branch -a..

Intro 풀스택 인턴으로 근무하며 Web Frontend 개발을 처음 했을 때, 도대체가 JavaScript 파일에서 DOM을 조작하는 코드가 HTML의 스크립트 태그 선언 위치에 따라 언제는 페이지에 반영이 되고, 언제는 안 되는 오류를 겪은 적이 있다. 당시 (본인 제외 유일한 개발자였던) 백엔드 사수는 "스크립트 태그 위치 바꾸면 되던데요?"라고 해주셔서 해결은 했으나, 당시에는 그 이유를 명확히 밝히지 못했었다. 웹 사이트의 디자인을 맡는 것이 CSS, 구조를 맡는 것이 HTML이라면, 살아 숨쉬는 Action을 담당하는 것이 JavaScript라고 비유하곤 한다. 이 때 JavaScript가 서버와 데이터를 왔다리 갔다리 하기 위해서는 JS파일의 비동기 처리를 확실하게 이해해야 한다. "Jav..

| 실무에서 일하면서 느꼈던 헷갈리기 쉬운 기초를 모아보는 시리즈 포스팅 대상 독자 and 연산자, or 연산자를 사용할 때 결과를 별도로 찍어본다 조건에 따른 컴포넌트 분기 처리할 때 if문만 사용한다 도대체 falsy, nullish가 뭐야 요구사항 예시 Case 1 : 데이터가 있을 때는 데이터를 화면에 표시해주고 OR 데이터가 없을 때는 'no data'를 표시해줘요. Case 2 : 객체의 속성을 화면에 표시하고 싶은데 해당 속성이 없을 때 예외처리를 하지 않으면 에러가 나요. Intro 조건에 따라 다른 컴포넌트를 표시하는 일은 프론트에서 자주 겪는 문제입니다. 이 때 실무에서는 주로 && || 또는 삼항 연산자를 사용하는데요, 조건에 들어가는 데이터가 0인지, undefined인지에 따라 연..

타입스크립트의 기본 타입 Boolean, Number, String, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never 변수에 타입 지정 const name:string = 'Nami'; 변수명 바로 옆에 콜른으로 타입명을 작성함으로써 해당 변수의 타입을 지정할 수 있다 함수에 타입 지정 const Add(a:number, b:number): number { return a+b; } 함수명 바로 옆 괄호 내부에는 파라미터의 타입을 지정하고, 괄호가 끝난 다음에는 return값의 타입을 지정할 수 있다. 타입은 이렇게 바로 옆에 하나씩 지정하거나, 타입이나 인터페이스로 선언하고 해당 타입이나 인터페이스의 변수를 작성해줄 수 있다. interfac..

Day1 2023-07-10 기본 타입 외우기 - boolean, number, string, array, tuple, enum, any, void, null playground에서 실습하기let color: string = "blue"; let age: number = 12; let list: number[] = [1,2,3]; let list: Array = [1,2,3];let 변수명 : 타입 = 값; let 변수명 : 타입[] = [값]; 아니면 let 변수명 : 객체명 = [값]; self check 튜플로 선언하기 튜플은 언제 쓰는지 배열을 선언하기, 2가지 방법 집합에 사용하는 자료형 enum 선언하기 void의 사용 number로 선언된 변수에 null이 할당될 수 있다. (O/X) num..

작성일 2023. 5. 23 범위 Clean Code 도서, Chaper 10. 클래스 참고 자료 : groom의 CLEAN CODE JAVASCRIPT ES6의 클래스가 ES5의 함수보다 낫다? CASE 1: 상속이 필요하다 ⇒ 클래스 사용 CASE 2: 크고 복잡한 객체가 필요하다 ⇒ 클래스 사용 CASE 3: 그 외 ⇒ 함수 사용 즉, 때에 따라 쓴다. 상속 안 하고 크지 않은 객체라면 함수를 사용한다. 메소드 체이닝 사용하기 ex. 클래스 내부에서 메소드 체이닝을 구현하기 위해 return this 를 덧붙이면 된다. 메서드 체이닝을 사용하면 객체를 반복해서 작성하지 않고, 코드가 매우 깔끔해진다! 체이닝 X 예 class Car { constructor() { this.make = 'Honda'..

웹 코드에디터 code jar TypeScript 조건 처리 도와주는 ts-pattern 라이브러리 TypeScript 에러 더 보기 편하게 도와주는 pretty-ts-errors VScode 플러그인