# TodayILearned

dataliteracy

Today 요약 채팅 앱 API 구현하기 API에 대해 설명하기 비동기 처리에 대해 설명하기 1. What I did? 1.1 채팅 앱 API 구현하기 슈퍼코딩 과제는 채팅 앱 API만 구현하는 것이였으나, 하면서 프론트 쪽도 만들어서 제대로 동작하게 만드는 것도 괜찮을 것 같다고 생각했다. 그래서 가볍게 구글링해서 채팅 UI 참고해서 일단 UI를 구현했다. 그리고 서버쪽은 flask를 사용해서 진행했다. 프론트코드를 가볍게 하려고 했으나, 바닐라 자바스크립트로 하려니까 아무래도 리액트보다는 구현하기가 힘에 부쳤다. 그래서 시간이 좀 더 걸렸다. 일단 프론트와 통신해서 서버에 저장하고 그걸 다시 프론트에서 렌더링해주는 부분까지는 완료했다. 아래 코드는 서버 코드다. 지금까지의 문제점은? 더 나아갈 방향은? 무엇일까? 과제에서도 그것에 대한 고민이 있었다. 2.

dataliteracy

Today 요약 과제 구현하기 1. What I did? 1.1 과제 구현하기 기존에 wordle 게임에서는 정답을 입력하고 나서 정답 글자에 대한 표시가 키보드 말고 게임판 위에서만 나타나도록 구현되어 있었다. 하지만 과제로 키보드에도 동일하게 정답 글자에 대한 표시가 나올 수 있도록 구현하라는 요구사항이 있었다. 한 2시간 정도를 고민해서 해결하기는 했다. 이번 요구사항을 해결하면서 기존 버그도 해결하려고 했지만, 실패했다. 그래도 오늘 과제의 요구사항은 해결했으니, 그 부분에 대한 걸 적어보려고 한다. 일단 기존에 정답 글자에 따라서 색깔이 변화되는 부분을 가지고 있는 함수 안에서 처리하는 것이 효율적이라는 생각이었다. 그래서 handleEnter 함수 안에서 처리할 수 있도록 하는 고민을 시도했다. 일단 키보드에 있는 모든 키 값을 받아 올 수 있어야 한다고 생각했다. 그래서 querySelectorAll로 keyboa

dataliteracy

Today 요약 모바일 반응형 웹 강의 CSS 스타일링 1. What I did? 1.1 모바일 반응형 웹 강의 오늘 추가적으로 다시 복습하면서 이해한 부분은 제공되어 있는 서버 api소스를 가지고 제대로 통신할 수 있도록 파이썬 코드를 잘 설정하고 그걸 프론트에서 fetch로 잘 받아와서 제대로 된 데이터를 웹 페이지에 렌더링 하는 것까지를 다시 한 번 시도해보았다. 만약 이제 적절한 백엔드 서버 코드가 주어진다면 그걸 잘 받아와서 적절하게 렌더링 해주는 부분은 어느 정도 잘 진행할 수 있을 것 같다. 2. What I Learned? 2.1 CSS 스타일링 css로 이미지 적용하기 전체적인 크기나 높이를 외부 div 태그에서 설정하고 그 아래 div태그를 하나 더 선언해서 그곳

dataliteracy

Today 요약 모던 자바스크립트 Deep Dive 정리 모바일 반응형 웹 강의 슈퍼코딩 과제 1. What I did? 1.1 모바일 반응형 웹 강의 다시 듣기 기존에 들었었던 모바일 반응형 웹 강의를 다시 들어봤다. 기존에는 flask로 서버를 만들어서 프론트와 통신하게 하고 몽고 DB로 데이터베이스를 생성한 것과 연동시키는 부분에 대한 것이였는데, 처음에 할 때는 제대로 해결을 하지 못했었다. 그랬다가 오늘 다시 보면서 제대로 크롤링 해오지 못하거나 서버 코드를 잘못 작성하거나 서버와 통신하는 프론트 코드(fetch 부분)에서 잘못된 부분을 받아오는 등의 삽질을 몇 번 하고 나서야 해결을 완료했다. 내일은 오늘 배운 걸 토대로 나머지 강의 부분을 참고해서 복습해보도록 해보자. 2. What I Learned<

dataliteracy

TIL202309_18 Today 요약 자바스크립트 공부 슈퍼코딩 1. What I did? 1.1 슈퍼코딩 오늘은 첫 날이다. 2팀으로 배정받았고, 팀원들이랑 잠깐 이야기를 나눌 시간이 있었다. 대부분 공부를 시작한 지 얼마되지 않은 사람들이 많았다. 아무래도 부트캠프다 보니까 그런 것 같다. F-Lab을 했을 때와는 사뭇 다른 분위기다. 일단 1~2주차는 10시부터 10시까지 하는 패턴에 익숙해지고, 3주차부터 본격적으로 한다고 생각하고 임하자. (그렇다고 1~2주차를 대충한다는 건 아니다.) 오늘은 대충 아래와 같이 진행했다. 강의는 듣지 않았다. 데일리 스크럼 겪어보기 9월 기수의 대부분의 사람들이 모여서 데일리 스크럼을 진행했는데, 앞으로도 매일 모든 사람들이 한 꺼번에 데일리 스크럼을 진행한다면 약간 비효율적일 것 같다. (체크업도 마찬가지.

aspyn

☝🏻오늘 배운 것 1. UML 모델링 : 모델을 만드는 작업을 뜻함. 즉, 현실 세계를 단순화 시켜 표현하는 기법 모델링의 필요성 의사소통 하기 좋다 다양한 형태들의 모델을 가시화 시켜 고객-개발자, 개발자-개발자 간의 의사소통을 원활히 하며 요구사항에 부합한 시스템을 개발할 수 있도록 해줌 대규모 프로젝트 구조의 로드맵(길잡이)을 만들 때 유용하다 로드맵을 통해 클래스와 클래스 간에 의존하는 관계 등을 개발자가 빨리 파악 가능 개발할 시스템 구축에 대한 기초를 마련할 수 있다 프로세스 과정 상 분석/설계 후 구현단계로 진행하게 되는데 모델링 단계에서 만들어낸 산출물을 통해 CASE도구에서 소스코드 생성 기능 같은 것들 제공 백엔드 문서용으로 제격이다 프로젝트를 다른 팀에게 넘기거나 이어서 맡는 경우 그 팀에게 유용 UML 통합 모델링 언어(UML, Unified Modeling Language) 소프트웨어 공학

aspyn

☝🏻오늘 배운 것 1. 함수 - 기본적인 함수의 선언, 정의, 호출 > function 함수명([매개변수]) { // 함수의 선언 > // 함수의 정의 } > 함수명(); // 함수 호출 - 익명 함수(이름이 없는 함수) > function([매개변수]){ // 함수의 선언 // 함수의 정의 } > 이름이 없는 함수이기 때문에 필요할 때 마음대로 호출 불가능 이벤트 핸들러와 같이 바로 동작하는 함수가 필요한 경우 사용함 - 즉시 실행 함수 > (function([매개변수]) { // 함수정의 })(); > 익명함수의 한 중류로써 함수가 정의되지마자 바로 실행되는 함수 - 화살표 함수 > 익명함수의 표현식을 간단히 표현한 표기법(ex6버전

leewoojye

평소에 노션에 필기한 내용들은 #TodayILearned 해시태그를 붙여 여기 벨로그에 공유하려고 합니다...! 구글이라는 우주에 우주쓰레기마냥 흩어져 있는 개념들을 처리하는 용도로 쓰세요 ゝ。∂） 중요하다고 느낀 부분은 ⭐별⭐, 📌핀📌 이모티콘, 밑줄로 표시했고 혼동될 만한 개념이나 용어들은 vs. 표시, 명령어나 폴더/파일명은 하이라이트로 표시했으니 참고해 주세요! 또 노트정리 포스팅은 우주쓰레기가 다 정리되는 그 날까지 꾸준히 업로드할 예정이니 많은 관심 부탁드려용 상속과 프로퍼티 오버라이딩을 알아보기 전에..! Swift에서 말하는 '프로퍼티'가 다른 언어와 조금 달라 프로퍼티에 대해 먼저 간략히 설명합니다 상속의 정의에 대한 내용은 다루지 않은 점 참고해주세요! 📌 Property ⭐ Swift에서는 프로퍼티가 저장, 연산 타입 크게 세 가지 프로퍼티 형태로 존재한다. 프로퍼티의 종류

leewoojye

평소에 노션에 필기한 내용들은 #TodayILearned 해시태그를 붙여 여기 벨로그에 공유하려고 합니다...! 구글이라는 우주에 우주쓰레기마냥 흩어져 있는 개념들을 처리하는 용도로 쓰세요 ゝ。∂） 중요하다고 느낀 부분은 ⭐별⭐, 📌핀📌 이모티콘, 밑줄로 표시했고 혼동될 만한 개념이나 용어들은 vs. 표시, 명령어나 폴더/파일명은 하이라이트로 표시했으니 참고해 주세요! 또 노트정리 포스팅은 우주쓰레기가 다 정리되는 그 날까지 꾸준히 업로드할 예정이니 많은 관심 부탁드려용 📌 상속 상속 관계는 is a 관계 혹은 kind of 관계라고 불리기도 한다. 예제로 확인해보자! ) 전자제품은 부모 클래스, 전자레인지는 자식 클래스이다

aspyn

☝🏻오늘 배운 것 1. 객체 - 자바스크립트 객체 > 자바스크립트의 객체는 {}내에 key : value가 모여있는 형태로 작성이 된다. {K:V, K:V, K:V...} > (참고) 자바스크립트 객체 모양의 문자열 JSON(JavaScript Object Notation) 자바스크립트 객체 표기법 =>" {K:V, K:V, K:V...} " > 자바스크립트에 객체를 생성하는 방법 {} : 객체 리터럴 표기법을 이용하여 생성 생성자를 이용한 생성 > * 중요 * 자바스크립트의 객체의 key는 무조건 String(묵시적) "Key" / 'key' / key 모두 String으로 인식 - 객체 생성 방법 1 ( {} 객체 리터럴 표기법으로 객체 생성 )

aspyn

☝🏻오늘 배운 것 1. 문자열 관련 함수 - 문자열(string 내장 객체) : 자바스크립트에는 문자열을 나타내는 객체(String)가 존재하며, 문자열과 관련된 기본적인 함수를 제공해준다. : 문자열.indexOf("str") -> 문자열에서 "str"과 일치하는 부분이 시작되는 인덱스를 반환. 없으면 -1 반환 : 문자열.substring(시작인덱스, 종료인덱스) -> 문자열 일부 잘라내기 (시작인덱스 이상 ~ 종료인덱스 미만) : 문자열.split("구분자") -> 문자열을 "구분자"로 잘라서 배열로 반환 2. 숫자 관련 함수 - 숫자(Math 내장 객체) 숫자(number)타입 리터럴 표기법 : 12(정수), 3.14(실수), Infinity(무한), N

aspyn

☝🏻오늘 배운 것 1. 간이계산기2 2. 간이계산기3 3. 이벤트 (Event) > 이벤트(Event) : 동작, 행위 -> 브라우저의 동작, 행위 : click, keyup, keydown, mouseover, drag, change, submit... https://www.w3schools.com/jsref/domobjevent.asp -> 다양한 이벤트 참조 이벤트 리스너(Event Listener) -> 이벤트가 발생하는 것을 대기하고 있다가 이벤트가 발생하는 것이 감지되면 연결된 기능(함수)를 수행하는 것 ex) onclick, onkeyup, onchange, onsubmit ...(on 이벤트명) 이벤트 핸들러(Event Handler) -> 이벤트 리스너에 연결된 기능으로 이벤트 발생 시 수행하고자 하는 내용을 작성해둔 함수 --> <!--

aspyn

☝🏻오늘 배운 것 1. JS개요 - 스크립트(script) 언어 > 기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도의 언어. 별도로 소스코드를 컴파일하지 않고, 인터프리터(interpreter)를 이용해 소스코드를 한 줄씩 읽어 바로 실행. -> 컴파일에 소용되는 시간이 없음 / 번역속도가 빠른 대신 프로그램 실행 시간이 느림. 컴파일 과정이 없기 때문에 프로그램을 실행시켜야만 오류를 알 수 있다. -> 코드가 문법적으로 틀리거나 수정할 필요가 있는 경우를 알려주지 못한다! 자바 스크립트(JS)란? > 웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어이다. ECMA Script 표준을 따르는 대표적인 웹 기술이다. -> ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어. 자바스크립트 작성 방법 브라우저 콘솔에서 직접 작성 html 내부에 script 태그를

leewoojye

평소에 노션에 필기한 내용들은 #TodayILearned 해시태그를 붙여 여기 벨로그에 공유하려고 합니다...! 구글이라는 우주에 우주쓰레기마냥 흩어져 있는 개념들을 처리하는 용도로 쓰세요 ゝ。∂） 중요하다고 느낀 부분은 ⭐별⭐, 📌핀📌 이모티콘, 밑줄로 표시했고 혼동될 만한 개념이나 용어들은 vs. 표시, 명령어나 폴더/파일명은 하이라이트로 표시했으니 참고해 주세요! 또 노트정리 포스팅은 우주쓰레기가 다 정리되는 그 날까지 꾸준히 업로드할 예정이니 많은 관심 부탁드려용 API (Application Programming Interface) 프로그램이나 서비스 간에 데이터를 교환하고 기능을 공유하기 위한 인터페이스, 또 소프트웨어 컴포넌트들이 상호작용하는 방법을 정의한 규약이다. 나무위키) API는 흔히 function, method 또는 operation 등으로 다양하게 불리는 '소프트웨어

leewoojye

평소에 노션에 필기한 내용들은 #TodayILearned 해시태그를 붙여 여기 벨로그에 공유하려고 합니다...! 구글이라는 우주에 우주쓰레기마냥 흩어져 있는 개념들을 처리하는 용도로 쓰세요 ゝ。∂） 중요하다고 느낀 부분은 ⭐별⭐, 📌핀📌 이모티콘, 밑줄로 표시했고 혼동될 만한 개념이나 용어들은 vs. 표시, 명령어나 폴더/파일명은 하이라이트로 표시했으니 참고해 주세요! 또 노트정리 포스팅은 우주쓰레기가 다 정리되는 그 날까지 꾸준히 업로드할 예정이니 많은 관심 부탁드려용 ⭐ 개발자가 수정한 코드가 테스트를 거쳐 서버에 반영을 하는 것을 배포라고 하며, 배포하기 위한 과정을 빌드라고 한다. 자바 파일을 빌드 한다는 것은

aspyn

유튜브 클론 코딩 html 코드 CSS 코드

aspyn

☝🏻오늘 배운 것 1. 글꼴(폰트) 관련 스타일 transform / scale / rotate / translate3d / transition / transition-duration / transition-delay 2. 시맨틱 태그 시맨틱(Semantic, 의미)태그 : 기존 영역 분할에 주로 사용되던 div, span 등의 태그는 태그 이름만 봤을 때 나눈다는 것 이외의 의미를 파악하기가 어려움. -> 태그만 봤을 때 태그의 목정을 알 수 없어서 id 또는 class를 반드시 추가해야했다. 이런 문제점을 해결하고자 태그 이름만으로 어느정도 어떤 역할을 하는지 알 수 있고, 웹 접근성(SEO)을 향상하는데에 도움이 되는 시맨틱 태그가 추가됨. [제공하는 태그] -header 태그 : 문서의 제목, 머리말 영역 -footer 태그 : 문서의 하단 부분, 꼬리말, 정보 작성 영역 -nav 태그 : 나침반 역할(다른페이지, 사이트 이동)의 링크

aspyn

☝🏻오늘 배운 것 1. flexbox 연습문제 3 2. flexbox 연습문제 4 3. flexbox 연습문제 5 4. 글자 관련 스타일

aspyn

☝🏻오늘 배운 것 1. 기타 선택자 - :only-child / :only-of-type / :empty / 여러 선택자 동시 선택 / 특정 요소 내부에 있는 특정 클래스만 선택 2. 선택자 우선 순위 기본적으로 CSS속성은 style태그 또는 css파일에 작성된 순서대로(위>아래) 해석이 진행되지만, 같은 요소에 여러 css속성이 설정되는 경우 우선 순위가 적용된다. 알아둬야 할 것 1) 동일한 우선 순위로 css속성이 설정된 경우 -> 제일 마지막에 작성된 css속성이 반영된다. 2) 여러 선택자를 이용해서

aspyn

☝🏻오늘 배운 것 1. css / html파일 연결하기 href에 들어갈 내용은 css파일 경로임 2. 기본 속성 / 자식 / 후손(자손) 반응 / 상태 / 동위 선택자 html파일 css파일 3. 문자열 속성 선택자 html파일 css파일 4. 일반 구조 / 형태 구조 / 부정 선택자 html파일 css파일