Under the Sign of Saturn

전체 동의 우선 제일 먼저 태그의 type 속성을 checkbox로 둔다. 위 코드는 전체 동의를 위한 checkbox input 예제 코드. TailwindCSS와 섞어 써서 몇 가지를 설명하자면, sr-only : 라벨 내 태그 텍스트는 스크린 리더 사용자에게만 읽히도록 한다. rounded-full : border-radius: 50%;와 동일. 체크 박스 이미지를 둥글게 만든다. checked:bg-green-default : green-default라는 변수명으로 tainwind.config.js 파일에 등록해둔 색상으로 background-color를 지정해준다. 단, checked가 true일 때만 활성화하는 코드이다. appearance-none : appearance: none;과 동일한..

2월 17일 일곱 시 반에 Udemy에서 주최하는 개발자의 성장 방법에 대한 zoom live를 들었다. 첫 번째 세션에서는 Maker Jun님의 에 대해서, 두 번째 섹션에서는 Poco Jang님의 에 대해서 들었다. 올해 들어서 어떻게 하면 개발을 더 효율성 있게, 더 정확하게 올바른 방향으로 해나갈 수 있을지 고민이 많았는데, 그때마다 테스트 코드를 써보는 건 어떨까라는 아이디어가 뒤따르곤 했다. 테스트 코드가 대체 뭐인지 알 수가 없어서, 막연하게만 생각하고 그쳤는데, 의외의 곳에서 테스트 주도 개발론에 대한 영감을 얻을 수 있어서 흥미로웠다. 원래 TDD를 둘러싼 이야기에 대해 아는 바는 "테스트 코드 쓸 바에 프로덕션 코드를 바로 쓰고 만다" vs "테스트 코드 작성이 오히려 개발 공수를 줄여..

react 프로젝트에 관리자 대시보드 템플릿을 하나 가지고 와서 커스텀하려고 준비 중에 만난 ESLint 에러. tailwindCSS로 스타일링도 하고 있다. label-has-associated-control 태그가 텍스트 라벨 + 관련 있는 control로 구성되도록 강제하는 룰이다. 만일 이게 되지 않으면, 해결하는 방향은 두 가지가 있다. 안에 control 태그를 감싸는 방법 태그 안에 htmlFor 속성을 추가하고 컨트롤 태그에 DOM id를 붙이는 방법 위 예시에서 htmlFor와 id를 둘다 쓰고 있다. Reference eslint-plugin-jsx-a11y에서 더 자세한 설명을 볼 수 있다.

최근에 react-router-dom을 쓰려고 보니 버전 업이 되어서 기존에 알던 v5의 사항들이 많이 바뀐 것을 알았다. 가령 Switch가 Routes로, Redirect가 Navigate 등으로 대체되는 것이 있었는데, 좀 더 확실히 이해 가능한 컴포넌트 이름으로 변경되기도 했고, 기존 rediect 문제를 해결하기 위해 Navigate API가 도입되기도 했다. 아래는 공식 문서를 읽으면서 필요한 내용만 정리해보았는데, 더 자세한 내용은 이곳에서 확인할 수 있다. 공식 문서에서 말하길, 우선 v5와의 하위 호환성을 유지하기 위한 패키지는 조금 시일이 걸릴 것 같다고 한다. 몇 가지 추가되는 routes가 있을 것인지, 변경될 것이 있을지는 모르겠지만..! We recommend waiting fo..

리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 3 (CRA + TypeScript + Prettier + ESLint + husky + lint-staged + Storybook + chromatic) TypeScript를 기반으로 하는 Create React App 준비는 첫 번째 시리즈에서 다뤘고, ESLiint와 Prettier는 두 번째 시리즈에서 다루었다. 2022.01.28 - [분류 전체보기] - [Storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 1 2022.02.04 - [🛠/Dev Tool] - [storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 2..

리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 (CRA + Prettier + ESLint + TypeScript + Storybook + chromatic) 2022.01.28 - [🛠/Dev Tool] - [Storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 1 [Storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 1 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 (CRA + ESLint + TypeScript + Storybook + chromatic) 예전 프로젝트에서 디자인이 수시로 변경되었는데, 디자인 버전 관리 uiyoji-jou..

아래처럼 props를 펼침연산자(spread operator)를 쓰는 것도 ESLint에서 권장하는 패턴은 아니다. 코드의 가독성과 유지보수를 위해서는 어떤 prop을 내려주고 있는지 일일이 명시하는 것이 좋다. Disallow JSX props spreading (react/jsx-props-no-spreading) Enforces that there is no spreading props for any JSX attribute. This enhances readability of code by being more explicit about what props are received by the component. It is also good for maintainability by avoiding p..

아래 같은 패턴의 코드는 no-unstable-nested-components 에러를 만나게 된다. Creating components inside components without memoization leads to unstable components. The nested component and all its children are recreated during each re-render. Given stateful children of the nested component will lose their state on each re-render. function Component() { function UnstableNestedCOmponent() { return } return ( ) } 이런 패..

리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 (CRA + ESLint + TypeScript + Storybook + chromatic) 예전 프로젝트에서 디자인이 수시로 변경되었는데, 디자인 버전 관리 체계도 제대로 이루어지지 않아서 어느 것이 최신 버전인지, 유효한 디자인인지 확인하기 어려웠다. Theme이 세 가지나 다른 디자인에 대해 각각 컴포넌트와 페이지를 다루기가 너무 난감했다. 작성하고 있는 컴포넌트는 재사용을 위한다고 가면, 너무 많은 prop이 걸려서 번번히 테스트 코드도 없는 와중에 디버깅 하기가 힘들었다. 그래서 이번 프로젝트에서는 디자이너와 협업 효율도 높이고, 시각적으로 컴포넌트들을 따로 볼 수 있으며, 개별적으로 개발해서 bottom-up 방식으..

몇 개의 프로젝트에서 타입스크립트를 쓰고 나서부터는 이제 타입스크립트 이전으로 돌아가지 못하고 있다. 그런데 또 체계적으로 타입스크립트를 써온 게 아니라, 쓰는 타입만 쓰고, 그때 그때 에러를 해결해 나가면서 체득한 것인지라 시간이 나면 잘 정리된 문서들을 읽으면서, 문법을 익히려고 한다. React Native를 할 때 가장 TS를 많이 썼는데, 이때는 거의 interface로 점철하다시피했다. type과 interface가 거의 비슷하다는 것은 알고 있었지만, 딱 거기까지어서 이번 기회에 정리해봤다. Interface interface는 object 타입을 정의하는 다른 방법이다. 이름과 나이를 받는 user라는 이름의 객체 정보가 있을 때 아래처럼 interface를 선언할 수 있다. interfa..

2022.01.20 - [👩‍💻/KNOU] - [방송통신대학교/컴퓨터과학과] 2022년 1학년 2학기 수강신청 [방송통신대학교/컴퓨터과학과] 2022년 1학년 2학기 수강신청 사실 원래 나는 전공이 어문계열이었다. 한 십 년도 더 전에는 번역하겠다고, 이런 저런 공부도 했는데, 타겟 언어에 그다지 매력을 못 느끼고, 지금까지 영어만 쭉 해왔다. 그러다가 컴퓨터 사 uiyoji-journal.tistory.com 2022년 1학기 수강신청을 마치고 이제 등록 기간을 기다리면서, 개편된 교재는 뭐가 있는지 등 신학기를 준비하다가, 성적 우수 장학금 선발 내역을 이제 확인했다! 직전 학기 성적은 [방송통신대학교 홈페이지 -> 상단의 맞춤정보 -> 학사정보 -> 당해학기 성적 조회] 에서 확인할 수 있다. 막상..

사실 원래 나는 전공이 어문계열이었다. 한 십 년도 더 전에는 번역하겠다고, 이런 저런 공부도 했는데, 타겟 언어에 그다지 매력을 못 느끼고, 지금까지 영어만 쭉 해왔다. 그러다가 컴퓨터 사이언스를 하게 되고, 지금은 웹/앱 개발자가 되어 있다. 실무에서는 그때 그때 업데이트된 신기술과 공식 다큐먼트에 충실하면 어느 정도 해결이 되는 경우가 많았지만 더 배우고 싶어서 컴퓨터 과학과를 방통대를 통해 전공해보기로 했다. 어느 정도 시간의 여유가 생긴 작년 여름, 1학년부터 시작하게 됐는데, 대체로 다른 사람들은 편입생으로 들어오는데, 1학년부터 학교를 다니려니, 어떻게 일과 공부 시간을 조율하지라는 생각 반, 대체 언제...졸업하지 ? 라는 생각이 반이었다. 그래도 추후에 하고 싶은 공부가 생겼을 때 학사 ..

작년 말부터는 웹 개발보다는 앱 개발을 더 열심히 하는 해다. 네이티브에 대한 지식이 없어서, 되도록 빨리 만들어야 하는 MVP 앱은 리액트 네이티브+엑스포 스택으로 시작하게 되었는데, Expo 프레임워크가 제공하는 expo-constants library 사용 중에 만난 타입스크립트 에러이다. 리액트 네이티브의 Aniamted 모듈을 사용해 backgroundColor를 지정할 때 발생했는데, 이때 App.json에 미리 작성한 시스템 배경색을 가지고 오려고 했다. 주석을 처리하지 않은 코드에서 보면 모든 객체들이 체이닝되어 키들을 잘 따라가고 있는데, 에러가 나서 App.json으로 다시 가서 확인해봤다. "splash": { "image": "./src/assets/images/splash.png"..

맥으로 개발을 하기 시작한 지 몇 달은 된 것 같은데, 아직 터미널 토글 단축키를 안 만들어두고 있어서, 불편하던 차에 예전에 썼던 글이 생각나 검색했더니, 관련 포스팅을 한 적이 없었다. 여러 터미널을 사용하는 방법에 대한 단축키 설명만 있길래 새로 포스팅을 한다. https://uiyoji-journal.tistory.com/32 [VSCode] VSCode에서 터미널 여러 개 사용하기/디폴트 터미널 설정하기 삽질 몇 번 끝에 드디어 비주얼 스튜디오 코드 내에서 external 방식이 아닌 integrated 방식의 다중 터미널 사용 세팅을 완료했다. 끝내고 나니 별 어려운 게 아니었는데, argument 설정에서 길을 잃었 uiyoji-journal.tistory.com 1. VSCode를 열고 C..

2022.01.10 - [🛠/Dev Tool] - [JetBrains] 방송통신대학교 계정으로 JetBrains 교육용 무료 라이센스 등록하기 [JetBrains] 방송통신대학교 계정으로 JetBrains 교육용 무료 라이센스 등록하기 작년 가을학기에 처음 등록해서 이제 두 번째 학기를 앞두고 있다. 방송통신대학교 재학생일 때 누릴 수 있는 많은 것들이 있는데, 내가 학생이라는 자각이 계속 안 들어서, 번번히 놓치곤 한다. uiyoji-journal.tistory.com 방통대 계정으로 JetBrains IDE를 무료로 사용하기 위한 절차를 등록한 뒤, 내친김에 Github Pro로 업그레이드 하기로 했다. GIthub은 원래 무료 계정으로 사용하고 있던 개인 계정이 있었기 때문에, 여기에 학생 계정을 ..

작년 가을학기에 처음 등록해서 이제 두 번째 학기를 앞두고 있다. 방송통신대학교 재학생일 때 누릴 수 있는 많은 것들이 있는데, 내가 학생이라는 자각이 계속 안 들어서, 번번히 놓치곤 한다. 그 중 하나는 해야지 생각만 하다가 미룬 JetBrains 무료 교육용 라이센스 플랜을 등록하는 것이다. 아래는 젯브레인 홈페이지 JetBrains: Essential tools for software developers and teams JetBrains is a cutting-edge software vendor specializing in the creation of intelligent development tools, including IntelliJ IDEA – the leading Java IDE, an..

타이포그래피 디자인으로 된 포스터를 웹에 띄우게 되어서 세로로 글자를 정렬하는 방법을 찾아보던 중에 writing-mode 속성을 알게 됐다. 기본 정렬만 사용하다보니 해당 속성을 쓸 일이 없었는데, 원래 쓰고자 했던 값은 deprecated되었지만, 추후에 레퍼런스용으로 블로그에 남기기로 했다. Can I use에 검색해보니 2021년 12월 기준 Opera Mini만 제외하고 거의 다 쓸 수 있는데, 그중 sideways-lr, sideways-rl은 파이어폭스만 제외하고 사용할 수 없었다. A B C D E A B C D E 가 나 다 라 마 가 나 다 라 마 .alignment-lr { writing-mode: vertical-lr } .alignment-rl { writing-mode: vert..

Add Binary Input: a = "11", b = "1" Output: "100" Input: a = "1010", b = "1011" Output: "10101" String 타입으로 주어지는 이진수를 더해서 String 형식으로 출력하는 문제이다. /** * @param {string} a * @param {string} b * @return {string} */ // First Try var addBinary = function(a, b) { let carry = 0 const res = [] const aLen = a.length; const bLen = b.length; for (let i = aLen - 1, j = bLen - 1; 0 = 0 ? Number(a[i]) : 0; let..

리팩토링할 일이 있어서 여러 파일을 삭제했는데, 커밋을 위해 스테이징할 때 일일이 하나씩 해주기 귀찮아서 찾아보니 한 줄의 명령어로 deleted된 파일들만 스테이지에 올리는 방법이 있었다. git add `git ls-files --deleted` 테스트 폴더와 테스트 자바스크립트 파일을 만들고, 삭제를 진행하면 이렇게 D 라는 표시와 함께 삭제된 change 기록이 보이는데, 이게 여러 개일 경우, 위에 써둔 명령어를 실행하면 이렇게 Staged Changes로 올라온 것을 볼 수 있다. Test로 생성하고 삭제하기 위한 과정이었으니,git log를 통해서 되돌아갈 커밋 히스토리를 확인한다. 상단의 지우고자 하는 commit이 819545a이므로, 그 이전 커밋 id인 05ecdc2를 활용해 git ..

자주 마주치는 CORS 오류 프론트엔드 프로젝트를 할 때 자주 마주치는 오류 중 하나로 CORS가 있다. 토이 프로젝트를 할 때 API를 가져가 쓸 때도 빈번하게 발생했고, 현업에서 백엔드/프론트엔드 서버를 다르게 구축하고 개발할 때도 마찬가지이다. 토이 프로젝트를 할 때는 한 줄 코드를 넣어 프록시를 우회하도록 하며 API를 쓰거나(a), webpack 설정 파일에 개발 시에 사용할 수 있게 proxy 설정(b)을 해주곤 했다. 좀 더 큰 규모의 프로젝트를 진행하면서는 백엔드 개발자에게 CORS 해결을 위해 협조를 요청해서 해결했다. (사전 지식이 부족했을 때 프론트엔드 단에서 실수인가 싶어서 온갖 자료를 찾아보면서 방법을 강구해봤지만 AWS 서버 설정 페이지에서 단 한 번의 클릭으로 해결할 수 있는 ..