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;과 동일한..

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

몇 개의 프로젝트에서 타입스크립트를 쓰고 나서부터는 이제 타입스크립트 이전으로 돌아가지 못하고 있다. 그런데 또 체계적으로 타입스크립트를 써온 게 아니라, 쓰는 타입만 쓰고, 그때 그때 에러를 해결해 나가면서 체득한 것인지라 시간이 나면 잘 정리된 문서들을 읽으면서, 문법을 익히려고 한다. 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"..

타이포그래피 디자인으로 된 포스터를 웹에 띄우게 되어서 세로로 글자를 정렬하는 방법을 찾아보던 중에 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 서버 설정 페이지에서 단 한 번의 클릭으로 해결할 수 있는 ..