남남이루의 고군분투 🌳

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

작년 2023 인프콘은 아파서 낑낑거리면서 오전부터 마지막 세션까지 꽉 채워서 들었다. 그래서 내년에는 꼭 꼭 네트워킹도 적극적으로 참여해봐야겠다고 다짐을~ 다짐을~했더랬다.   빨리 성장하는 주니어는 그 분야에 대해 항상 호기심을 잃지 않는다고 한다. 그리고 이러한 호기심은 최대한 양적인 input을 많이 하는 것과 자연스럽게 그 분야에 대해 꾸준하게 학습함으로써 생기는데, 결국 선순환이 이루어져 학습 효율을 극대화 한다고 한다.그런 의미에서 인프콘은 매년 놓칠 수 없는 행사다! 작년 FeConf에서 인상깊었던 AB180의 이찬희님, 항상 관심가지고 있는 디버깅 관련 세션, 웹 전반에 대한 이해에 가장 큰 도움이 됐던 널널한 개발자님, 마지막으로 작년에 동료로 함께 일했던 조은님의 발표까지 듣고 싶은 ..

1. Billing우선 가장 먼저 해야할 일은 API key 발급과 billing method를 연결하는 것입니다.저는 처음 가입할 때 18$를 무료로 받았고, limit에 18$가 써있었지만 만료된 것인지 API 호출을 해도 429에러를 뱉더라구요. 결국 구글링을 하다 보니, 무료 사용분이 만료되어도 limit에는 사용가능한 것처럼 뜨기도 한다는 것을 알게 되어 결국 card를 연결하고 보증금을 10달러 정도 넣었습니다. 토이 프로젝트로 연결을 하는 것이라, 가장 최소 금액으로 맞추기 위해 세팅은 이렇게 했습니다. 한 달에10달러가 넘어가면 request가 거절되도록 했어요. (기본 세팅은 $120) 2. API 키 발급https://platform.openai.com/api-keysAPI 콜을 하기 ..

새로 레포를 만들어서 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..

프로젝트 계기 최근 가족들의 티켓팅을 몇번 도와주며, 반복적으로 폼을 채우는 일이 잦았다. 필요한 인적사항을 미리 메모장에 정리해두고, 때가 됐을 때 누구보다 빠르게 내용을 한 줄씩 복붙하는 것이 관건이었다. 별거 아니지만, 어떤 내용을 클릭이나 단축키만으로 클립보드에 복사하는 프로젝트를 시작해보려고 한다. 기대 효과 - 전체 프로젝트 사이클을 경험하고, 정리함으로써 실무에서 기초가 될 지식들을 단단하게 만든다. - 로컬 환경에 데이터를 저장하고, 불러오는 동작을 익힌다. - CSS를 빠르게 입힐 수 있는 라이브러리를 탐색하고 적용한다. - 일단 작게 만드는 훈련의 일환! 완벽한 애플리케이션보다 어찌저찌 재밌게 하나의 애플리케이션을 완성해봄으로써 작은 성공을 경험한다. 기술 Set - React (202..

2023 인프콘을 다녀오고 정리했던 내용을 공유합니다. 김영한님 세션에서는 주니어로서 성장의 방향성을 갈피를 잡는 데 도움이 되었어요. 여러 시니어 분들과 대화하며 반복적으로 나오는 메시지는, "(기술의) 이유를 아는 것"과 "(첫 개발은) 단순하게 반복하는 것"이네요. 키워드 : #질문이_있습니다 #비즈니스를_이해하는_개발자 #거북이_마음 주니어의 성장과 고민에 대한 세션 by. 김영한님 김영한님의 커리어 이야기 Mabatis VS JPAJPA가 훨씬 코드 중복이 줄어드는데, 왜 안쓸까?라는 생각을 하게 됨 (기술 변화의 시점)⇒ 직접 사내에서 교육을 하면서 기술을 도입하게 됨 ⇒ 국내 개발 환경을 바꾸기 위해 JPA 책까지 쓰게 되었고 현재는 JPA가 95%를 차지함 ⇒ 교육에 문제가 있다는 생각을 ..

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