본문 바로가기

Til38

2021.06.29 TIL (feat. 1- 6월의 TIL도 포함) 무척 오랫만에 TIL을 남기는 기분. 6개월 사이에 Instagram 클론 Web / Mobile / Server 를 마쳤다. 노마드 코더의 수업에서 다룬 내용보다 실제 인스타그램 웹앱과 휴대폰 앱을 보면서 실제 기능들을 더 구현해보기도 했다. 컴퓨터 코드로 웹이나 휴대폰에서 눈에 보이는 UI, UX를 만드는 일은 대단히 흥미로웠다. 인스타그램 클로닝을 하며, 느낀 5가지 CSS에 할애하는 시간이 길었는데 CSS기초가 부족했구나 원래 계획에 없는 반응형 웹사이트로 전환하는 과정에서 반응형 웹사이트를 제대로 만들어 보고 싶다는 것 Docker를 사용한 적이 없었는데, 해당 서버를 docker를 배워서 업데이트 하고 싶다. 배포하는 AWS에 대해서 좀 더 배워보고 싶다. Git을 활용을 잘 못하고 있는 것 .. 2021. 6. 29.
2020.12.02 TIL 매년 연말마다 있는 본사 임원 총 회의가 이틀 앞으로 다가와서 정신 없이 보낸지 10일째다. 오늘 자료를 최종 마무리 지어 본사에 전달해서 드디어 한 숨 돌렸다. 그동안 미뤄왔던 코딩을 다시 시작했다. 무려 9일 만. 검색창을 이용한 유저검색 / 태그 검색을 분리하여 표기하는 부분을 마무리지었다. 노마드 코더의 강의를 적극 활용하되, 가급적 인스타그램 최신 버전을 반영하려고 노력했다. 12월 연말까지 인스타 클로닝을 마무리지으려고 하는데, 시간이 될지 모르겠다. 가급적 끝낼 수 있도록 남은 연말 알차게 활용해야겠다. 2020. 12. 3.
2020.10.18 TIL z-index는 포토샵의 layer 라고 생각하면 된다. 만약, 서로의 엘리먼트의 요소가 겹칠 경우, 어떤 엘리먼트를 맨 위로 표현할 것인지를 z-index를 통해 지정해주면 된다. 숫자가 낮을 수록 최 상단에 노출된다. 0이 제일 위로 올라오며, 숫자가 커질수록 밑에 깔려 표현된다. order는 flex된 children 요소들에게서 사용할 수 있다. 순서를 바꿀 수 있다. modifier 를 이용해서 가급적 코드를 재활용하도록 하자. 얇게 알던 CSS를 하나하나씩 따라해보면서 그간에 무식하게 하나씩 적용했던 지루한 CSS에 흥미가 생겼다. CSS는 기존에 코딩 중에서도 가장 재미없고, 반복적이라고 생각했는데 그건 CSS를 제대로 할 줄 몰라서 였다... 내일 정도면 kakao talk css 클로닝이.. 2020. 10. 19.
2020.10.14 TIL 카카오톡 클로닝 CSS 하는 중인데, 그동안 지루하고 재미 없다고 생각했던 CSS도 막상 하나씩 따라해보니 흥미가 생겼다. 그동안 노가다로 하나씩 했던 것들을 단축키를 사용한다거나, 변수명 지정을 통해서 코드의 재활용성을 높일 수 있게 되었다. 다른 사람들이 사용하는 변수명을 그대로 써보면서, 나중에 내가 변수명을 창조해야 할 때 도움이 될 것 같다. 내일 오늘 발생했던 margin-collapse 현상과 BEM 변수 정하는 방법에 대해서 포스팅할 계획이다 2020. 10. 14.
2020.08.23 TIL 사이드 프로젝트로 지금 다니고 있는 회사의 엑셀로 수기 작업하는 일들을 자동화 하는 웹 앱을 만들고 있다. 빨리 만들어서 엑셀로 3번 반복하는 일들을 줄여보고 싶은데 좀처럼 속도가 나지 않는다. 그동안 클라이언트 부분을 확실히 안한게 티가 나는 것 같다. 로그인 파트 간단한데도 하루를 꼬박썼다. 하다 보면 또 익숙해지겠지! - Formik과 Yup 을 이용해 폼의 유효성 검사를 하는데, 좀처럼 익숙해지지 않다가 마지막에 알것 같은 느낌 - typescript를 어떻게 하면 효과적으로 쓸 수 있을지 고민. 지금까진 js 와 거의 차이나지 않는다. - twoSum 금요일에 풀이를 런타임을 어떻게 줄일 수 있을지 고민하기로 했는데, 결국 시간이 나지 않아 패스 - 운동은 웨이트 1시간 20분. 예전처럼 자주 .. 2020. 8. 24.
09Feb2020 TIL body-parser 모듈 (urlencoded, extended 옵션) : POST 로 요청된 body를 쉽게 추출할 수 있는 모듈이다. 만약 해당모듈을 사용하지 않았을 경우라면, 다음과 같은 이벤트를 등록해줘야 한다. request .on("data", chunk => { body += chunk; }) .on("end", () => { body = JSON.parse(body); }); 그러나 body-parser 모듈을 이용해 bodyParser.urlencoded() 를 등록하면, 자동으로 request에 body 속성이 추가되고 저장한다. urlencoded()의 옵션에는 중첩된 객체 표현을 허용을 할 것인지를 표시할 수 있다. 최근 node.js 4.16 상위버전부터는 body-parser .. 2020. 2. 9.