Today I Learned

인텔리제이가 이클립스보다 생산성이 좋다고 생각하기때문에 3시간정도 인텔리제이로 전자정부프레임워크 적용을 시도했다. 하지만 처참하게 실패. 특정 전자정부 메이븐 디펜던시를 호출하지 못하고 있다. 이유를 모르겠지만 약간의 야근과 함께 구글링을 해보니 전자정부프레임워크 공식홈페이지에 인텔리제이 적용가이드가 있었다. 일단 이클립스와 인텔리제이는 의미는 같지만 명칭을 다르게 쓰는 용어가 있어서 이 부분을 인지해야했다. 이클립스: 워크스페이스 > 프로젝트 인텔리제이:프로젝트 > 모듈 대충 이런 개념이다. 그래서 전자정부프레임워크를 적용한 프로젝트를 만들고 해당 모듈을 적용해야 한다. 내일은 좀 일찍 출근해서 가이드대로 다시 도전해보고 오전내로 성공하지 못하면 이클립스로 진행해야겠다.

출퇴근거리 1시간 30분거리의 사무실에 첫 출근했다. 걱정반 긴장반으로 출근했지만 기대감으로 퇴근한다. 4개월동안 같이 프로젝트를 진행할 동료직원분들과 마음이 잘 맞을 것같은 느낌이 들었다. 아마 이 프로젝트는 나에게 기회인 것에 틀림없다. 앞으로의 일이 기대가 된다. 일단, 간단한 개발환경세팅은 끝났다.

1. 강의나 책을 보면서 남들이 작성한 코드를 그대로 따라 작성하자. (일단 돌아가게 만들자) 2. 강의나 책이 없어도 스스로 만들 수 있게 나만의 설명서를 남기자. 3. 중간에 에러나 버그를 만나, 삽질하게 된다면 그 에러의 원인, 상황, 어떻게 해결했는지를 기록하자. 4. 배운 기술을 써먹을 수 있을만한 프로젝트를 진행하자. 5. 내가 배운 기술들의 원리에 초점을 맞춰서 깊이 있는 학습을 진행하자. 유튜브 JSCODE 박재성 님의 내용을 참조하였습니다. https://www.youtube.com/watch?v=moeDDhqW5z0

vscode는 없으면 개발 못할 정도로 주로 쓰고 있는 개발 에디터이다. 그런데 간혹 위 이미지처럼 영어가 이상하게 입력되는 경우가 있다. 어떤 검색어로 검색해야할 지도 몰라서 한참을 고생하다가 겨우 방법을 찾았다. WIndow : [art] + [=] Max : [option] + [=] 해당 단축키를 입력하면 정상으로 돌아온다.

NextJs npx create-next-app@latest ReactJs npx create-react-app APP_NAME --template typescript npm i --save-dev @types/styled-components npm i styled-components@latest npm i recoil npm i react-router-dom npm i @types/react-router-dom npm i @types/react-helmet npm i react-helmet npm i react-hook-form npm i framer-motion npm i react-query

노마드코더 유튜브 클론코딩 #8.14 Bugfix 공부내용 정리 비디오 업로드시 유저비밀번호를 해시하던 현상 수정 유저가 비밀번호 변경시에만 해시되도록 수정 == isModified("password") userSchema.pre("save", async function () { if (this.isModified("password")) { this.password = await bcrypt.hash(this.password, 5); } }) 비디오 수정,삭제시 비디오 소유권자만 작업할 수 있도록 기능추가 story.owner의 타입은 object이고 _id의 타입은 String이므로 ' !== ' 연산자로 비교가 불가능하기 때문에 String으로 형변환을 해줘야한다. const { user: { _id..

스타트업으로 이직하고나서 퍼블리싱을 하게 생겼다. 부분수정은 할 줄 알지만 설계부터 시작해서 새로운 것을 만드는 것은 해본 적이 없다. 발 등에 불 떨어졌다. 노마드코더 니코선생님 강의를 보면서 10x19라는 사이트를 CSS 클론코딩했다. 단순히 보고 따라하는 수준으로 클론코딩을 하는 건 전혀 어렵지 않다. 하지만 웹개발 6년차인 내가 퍼블리싱 실력이 이렇게나 터무니없이 약하다는 걸 오늘 제대로 확인하게됬다. 실제로 퍼블리싱을 하게 됬을 때 얼마나 막막할 지 대충 감이 온다. 클론코딩을 하면서도 상황에 맞게 이해하려고 온 집중을 다했다. 현실자각은 최고의 동기부여는 현실자각만한게 없다 진짜... 코로나 양성으로 인해 1주일 쉬고 있는 지금, 미친놈처럼 퍼블리싱만 해서 감을 익혀야겠다. 10x19 10x1..

1. css 에러를 확인할 수 있다. scss를 사용하게되면 scss -> css 변환 작업 중 에러 발생시 콘솔에 에러를 출력해준다. 2. variables / nesting css를 javascript처럼 전역변수,부모 자식 개념을 활용할 수 있다.

https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com CSS Grid 공부하는 사이트. 총 28문제까지 있는데 초보자가 기본기 익히기에 정말 괜찮은 사이트인 것 같다. 문제를 풀고 다음문제로 넘어갈 때의 성취감이 상당히 짜릿하다. 초반 문제는 대부분 비슷한 해답을 가지고 있지만 후반부로 갈수록 여러방식의 정답이 있는 것 같다. 공부중인 css를 실제 업무에서도 능수능란하게 쓸 수 있도록 깊게 파고 들어야겠다.

/* CSS Grid를 배우는 이유 : element를 Flex를 활용하여 좌우배치, 중앙배치는 용이하지만 grid형태로구현하는 것은 어려움이 있기 때문 grid-template-columns : 한 열의 너비를 결정하는 property grid-template-row : 한 행의 높이를 결정하는 property gap (gap-row, gap-column) : grid의 행 또는 열의 간격을 결정하는 property grid-template-areas : header, content, nav, footer 4가지 영역으로 위치를 할당해줌 (tiles와 유사) repeat : 반복함수 grid-column-start, grid-column-end, grid-row-start, grid-row-end 를 ..