프로그래밍 공부내용 (33) 썸네일형 리스트형 css에서 소수점 px에 관해서 우테코를 하면서 소수점 픽셀을 무심결에 사용했었던 적이 있다. (나는 css와 js가 우테코 준비하면서 시작해서 경력이 짧다.. 이런거 첨이야..) 브라우저에서 적용이 안되는것 같았고, 코드리뷰를 받았을 때 수정해달라는 요청이 있었다. 근데 궁금했다. 분명 1px은 크기인데, 소숫점을 나타낼 수는 없는걸까? 글들을 많이 찾아봤다. '반올림 시켜준다' 라는 말이 정말 많았다. 답변이 시원찮아서...(왜냐면 브라우저는 대기업에서 만드는건데, 소수점 픽셀정도는 지원해줘도 괜찮잖아?) 재밌는 글을 찾아서 직접 실험해 봤다. 실험코드는 다음과 같았다. (리액트로 작업중에 받아서 하던 플젝에서 시험해서 리액트 코드다) const arr = Array.from({ length: 100 }, (v, i) => i); .. Create-React-App(CRA) 설정 뜯어보기 들어가기 Create-React-App(이하 CRA)를 하게 되면 index.js 와 index.html 등을 만들어 주고 react에 필요한 dependacy들을 설치해 주고 react-scripts 를 이용한 리액트 명령어를 추가해준다. 또 간단하게 아래와 같은 것들도 설정해준다. 아래의 것들은 그중에서 필요한가? 싶었던 것들과 이게 뭔데 싶은 것들을 정리한 것이다. git ignore ##.gitignore # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.js # testing /coverage # production /bu.. clone 에 관하여 fork 떠오거나 한 걸 clone해서 내 local에서 진행할 수 있음. 빈 폴더에 진행해야 한다. - 일반적인 방법 git clone {저장소 URL} {local의 폴더위치} 처음에 썼을 때 좀 당황했는데 git branch 로 branch를 확인하면 main브랜치만 가져와 진다. git branch -a 를 이용해야 숨겨진 branch가 모두 보인다. 그냥 똑같이 checkout해주면 알아서 checkout 됨 stackoverflow에 아주 잘 정리돼 있으니 참조 https://stackoverflow.com/questions/67699/how-to-clone-all-remote-branches-in-git How to clone all remote branches in Git I have a .. SPA과 CSR, SSR 에 관하여 SPA SPA(Single Page Application) 입니다. 이름에서 쉽게 알 수 있듯, 한장의 페이지로 이루어진 사이트를 spa라고 합니다. SPA 와 MPA 한 장 이라는 의미가 조금 모호할 수 있는데, 사이트를 쓰다보면 화면이 전환될 때 깜빡이는 경우가 있습니다. 이것은 html을 여러장 준비해두고, 페이지 변화(사용자 요청)가 일어나면 정적인으로 이미 구성된 요소(HTML, CSS, JavaScript)를 불러오는 방식으로 구성됐기 때문에 일어나는 일입니다. 이런 식으로 구성하는 것을 MPA(Multiple Page Application)이라고 합니다. SPA 를 써야하는 이유 쓰잘데기 없이 왜 spa를 써야하는 궁금증이 들 수 있습니다. spa를 쓰는 이유는 사용성 때문입니다. 가장 큰 .. 깃 pr merge 이후 맨날 헷갈려서 직접 적는다.. 1. 본론이다. merge 이후에 어떻게 해야하는가. https://github.com/woowacourse/woowacourse-docs/blob/master/maincourse/review-step3.md 2. 저번에 한번 머지 후 rebase 하지 않고 작업해버려서 고생을 한 이후로는 test branch를 만들어서 rebase가 잘 돼서 pr conflict가 없는지 확인하고 브랜치를 하나 더 따는 습관이 생겼다. 그런데 test branch가 pr conflict 가 안됐을때도 문제가 생겼다. 이놈을 지우는 법을 모르겠던것;; 로컬 삭제는 쉽다. git branch -d 브랜치명 삭제된 브랜치 사항을 바로 원격에 반영할 수도 있다. (거슬리니까 삭제해주는게 좋음) .. 타입스크립트 문제풀이 #2 문제 - Type "Person" is missing, please define it and use it in persons array and logPerson function in order to fix all the TS errors. 내 문제 풀이 interface User { name: string; age: number; occupation: string; } interface Admin { name: string; age: number; role: string; } export type Person = User | Admin; export const persons: Person[] = [ { name: 'Max Mustermann', age: 25, occupation: 'Chimney swe.. 타입스크립트 문제풀이 #1 포코에게 추천을 받은 타입스크립트 문제로 배우기..! 첫 예제이다 문제 Given the data, define the interface "User" and use it accordingly. 일단은 찬찬히 문제를 읽어보자. object type unknown이라는 에러 메세지가 뜬다. user라는 object의 type이 정해져 있지 않아서 생기는 문제같다. 내 문제 풀이 type을 정해주면 간단하게 해결 될 것 같았다. 다행히 어디를 손봐야 할지 문제에서 알려주었다. User를 정의하라고 한다. export type User = { name:string, age:number, occupation:string, }; export const users: User[] = [ { name: 'Max Must.. [Git] 커밋 메시지 규약 독해 정리하기(the AngularJS commit conventions) 깃을 이용한 커밋은 일기장에 적는 일기가 아니기 때문에 일관되게 작성해야 정보를 명확하게 전달할 수 있습니다. 개략적으로 알기 쉽고 다음에 다시 볼때도 효과적입니다. The Angular JS Commit Convention 을 읽고 나름대로 정리 해 보도록 하겠습니다. 1. 포맷 예시로 이해하는게 가장 쉽기 때문에 포맷부터 뜯어보는 게 개인적으로 편했습니다. (): 포맷은 이런 형태로 이루어집니다. 가독성을 위해 각 줄은 100글자를 넘지 않도록 한다. 1-1. type - feat(feature) : 새로운 기능 개발 - fix(bug fix) : 버그 수정 - docs(documentation) : 문서 작성 및 수정 - style(formatting, missing semi colons, ...).. 이전 1 2 3 4 5 다음
