728x90 반응형 Javascript7 for in vs for of 반복문 비교, Array .. in이 가능해서 생기는 문제 오늘 Typescript를 계속 공부하는 중에 갑자기 이상한 버그...는 아니고 미묘한 문법 차이로 생긴 1시간의 삽질을 방지하기 위해서 이 글을 올린다. 우선 이분의 글을 참고하였으니 좀 더 자세한 설명을 원하면 여기로 가면된다. https://jsdev.kr/t/for-in-vs-for-of/2938 자바스크립트 for in vs for of 반복문 정리 ES6 공부하면서 for in 과 for of 차이점이 뭔지 궁금해서 찾아보다가 정리해보았습니다. 잘못된 부분이 있으면 커멘트 부탁드려요~ http://itstory.tk/entry/Javascript-for-in-vs-for-of-반복문 foreach 반복문 foreac jsdev.kr 바로 본론을 이야기하면 이렇다. 분명 JS배울 때 같이 배웠을.. 2024. 3. 24. FlowForge(GTDList) 01-09 일지 컨트롤러 작성 및 TDD 환경 조성 흔해빠진 기능마저도 구현하는 데는 참 노력이 많이 들어가는 듯하다. 이메일 확인 절차를 만들기로 결정했는데, 생각보다 고려해야 할게 많았다. 나중에 이메일 확인 절차 같은 건 자동으로... 자동으로...? 잠시만... 그나마 답변을 보니 외부의 뭔가를(Firebase라던가 AWS Congnito라던가) 경우도 있어서, 완전 노력이 헛되는 않은 것 같다. 하여간에 그것을 위해서 새로운 모델을 넣기로 하기도 했고 해서, 컨트롤러를 더 수정해야 할 것 같다. - 오늘의 개발 커밋로그는 간단한 편이지만 추가된 것은 많다. 라이브러리를 보면서 설명하면 좋으니까 package.json 의 일부도 가져왔다. 1. 이메일 토큰을 자동으로 발급하기 위한 crypto 2. 입력값의 확인을 위한 joi 3. 환경설정을 위한.. 2024. 1. 10. FlowForge(GTDList) 01-07 일지 모델 확정 및 sequelize 활용 오늘은 예고했던 대로 백엔드를 만지기 시작했다. 우선 아직 완벽하지 않은 user, task, global-value 테이블의 기본적인 모델을 확실히 확정하기로 했다. - 모델 정리 이럴 때야 말로 내 머리로 직접 일일이 생각하기보다는 GPT를 이용할 때다. user에 대한 스키마는 흔해빠졌지만 일일이 생각하기 귀찮기 때문이다. GPT에게 물어본 질문은 이렇다 (문법적으로 틀린 문장이 있다면 ㅈㅅ) : Here is another question. What attribute of user model will usually get when making a webpage? I mean, there is gotta be more than just username and password, right? 답변은 이.. 2024. 1. 9. joi 라이브러리로 입력값 검증, messages로 커스텀 메시지 작성하기 이번에 같이 개발하게 된 친구와 함께 협의한 것 중 하나는 우선 서로 같이 쓸 수 있는 개발일지를 만들어서 배포해 보자는 것이었다. 그래서 실제로 코드를 지금 github organization에서 공유하게 되었고, 적어 둔 TODO 중에서 제일 만만해 보이는 걸로 우선 스타트를 끊기로 했다. 그 만만하다는 작업이 "비밀번호 입력값 검증 강화"이다. 이미 joi 라이브러리를 이용해서 기본적인 입력값 검증을 하고 있었기 때문이다. const schema = Joi.object().keys({ username: Joi.string() .alphanum() .min(3) .max(20) .required() password: Joi.string() .min(6) .max(20) .required() }); 이.. 2024. 1. 5. GTDList 개발 로그 12 - 30 기본 CRUD 두번째 개발일지다! 이번에는 2일치 작업 분량을 한번에 올릴 예정이다. 28일에 작업한게 많지 않은 것도 있지만, 그래도 CRUD를 구현했다는 점에서 하나의 마일스톤을 달성했기 때문에, 여기서 정리를 다시 하는게 맞다고 생각했다. 우선 현재의 구현 상태는 이렇다 : 시연 동영상 2 다행히 27~28일 동안 리팩토링에 노력을 기울인 만큼 딱 나온 것 같다. 추가된 기능은 1. 플러스 마이너스 눌러서 CREATE, DELETE 가능. 2. 각각의 데이터 형태마다 다른 input 렌더링, 조작 가능. 정도 긴 한데, 쓰면서 느끼는 거지만 노력 대비 추가된 기능은 적은 듯... 하다. 그러거나 말거나 앞으로 해결해야하는 문제점은 2가지이다. 1. 실제 백엔드에 저장하기 위해서 Ctrl + S 혹은 메뉴에서 저장.. 2023. 12. 30. [반응형] CSS 간단한 가변 요소 크기 단위 정리 요즘에는 프런트엔드의 기본기(HTML, CSS, JS)를 한번 전부 다져두었다. 간단한 건 클론코딩을 하고 조금 만져보는 것으로도 꽤나 경험이 되는 것 같다. 물론 프로젝트도 진행하고 있지만. 이번 주 안에는 최소한의 기능을 넣은 앱을 배포해보고 싶다. 어차피 남아도는 게 시간이라. 각설하고, 그래도 지금은 CSS쪽을 더 파고 싶었다. 일단 적어도 앱을 출시하기 위해서는 보이는 것, 적당히 모던해 보이는 게 필수라고 생각했기 때문이다. 물론 "반응형" CSS를 공부하는 건 다른 맥락에 있을 수도 있겠지만, 대충 그런 느낌이라는 것만 알아두면 된다. 도서관에서 책을 빌려서 지속적으로 보고 있는데, 빌린 책이라서 기록을 더 해두고 싶은 것도 있는 것 같다. 웹페이지 디자인을 기획할 때 간단하게 쓸 수 있는 .. 2023. 12. 28. [ES6] function 함수와 화살표 함수의 차이 - JavaScript function으로 만들어진 함수의 this는 자신이 포함된 객체를 가리킨다. function BlackDog() { this.name = '흰둥이'; return { name: '검둥이'; bark: function() { console.log(this.name + ': 멍멍!'); } } } const blackDog = new BlackDog(); blackDog.bark(); // 검둥이 : 멍멍 json 객체가 상위 객체로 있기 때문이다. 화살표 함수의 경우는 이렇다 : function WhiteDog() { this.name = '흰둥이'; return { name: '검둥이'; bark: () => { console.log(this.name + ': 멍멍!'); } } } const whit.. 2023. 11. 24. 이전 1 다음 728x90 반응형
