Today I Learned

두번째 til이다 괜히 다른블로그에 대충 써놓아서 두번 일하는 느낌이지만 기분좋게 써보겠다 :)............ semantic html에서 기본적으로 맥락, 단락의 구분을 위해 사용하는 방식들이 많이 존재한다. h1~h6라거나 (글자크기 마다 의미가 있음. 기

3번째이다. 이제 얼추 알았으니 구조를 한번 파악해봤다.출처:https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure구체적으로는 이러하다

csshtml을 꾸며주는 것전자출판을 위해 만들어진 markuplanguage의 정보 + 디자인으로 진화함에 따라 간편한 코드 분할을 위해 정보:Html 디자인:css로 분할 되며 생김.Selector(선택자)css 에서 html 에 선언한 attribute를 직접 콕

Flex Flex설정을 위해서는 wrapper div 에 height 가 필요하다 Flex direction 은 기본적으로 row(가로) 방향이므로 column(세로)으로 설정하고 Flex-d

what is javascript javascript- 웹에서 쓸 수 있는 유일한 언어이다 :) (백엔드라면 파이썬이나 루비 등등이 또 있음) 게임도 만들기 가능 deprogrammed.org 참고 es5 es6? ecmascript 5 설명문 같은것임 javasc

✔️ javascript 함수를 작성해보면서 자주 쓰이는 문법 패턴을 익힌다✔️ javascript에서 array, object, string의 개념에 대해서 익힌다✔️ 각각의 method를 익힌다javascript에서 var, let, const를 이용해 변수를 선언

시계를 만들 div를 그안에 h1을 html에 새로이 작성한다. 이렇게하면 시계가 생긴다.setInterval(함수, 실행시간간격miliseconds)textliner 및 mini if else(삼항연산자?)를 이용한 시간앞에 생기는 공백 9 - >09로의 변형삼항연산

이해가안된다 그러나 한번시작한거 끝을봐야하니 몇번 돌려보고 최대한 이해한것으로 작성해봐야겠다. 코드 많음 주의 JavaScript HTML

배경화면을 바꾸기 위해 일단 image 다섯가지를 저장하였다이미지는 unsplash.com을 이용하였다.각 이미지의 파일명을 숫자로 바꿔줬다(바꾼이유는 Math를 사용하기 위해서임)쿼리셀렉터를 이용하여 body tag전체를 불러왔으며 IMG_NUMBER를 변수로 만들어

www.geeksforgeeks.org랜덤으로 생성된 숫자를 맞춰주는 프로그램을 만들어 자기소개 사이트에 넣기로 했다아래는 사이트 주소https://sanghunlee-711.github.io/wecode1stweek/PROJECTS.html먼저 random숫

BOM, DOM, Javascrpit core DOM(Document Object Model) 웹페이지상의 문서 body ,img etc.. 등등 을 제어하는 역할을 한다. BOM(Browser Object Model) 윈도우 객체의 프로퍼티에 저장 되어있음 그중 d

반복문, 조건문, 배열 1. 반복문 * for initialization, condition, final-expression 말만 보면 번지르르 하고 어렵다. 예제를 알아보자 ex1) 여기서 직관적으로 이해하기 쉽다. 문자그대로 initiallization

그림판을 만들어보자대충 이렇게 생겼다.크게 3개의 div와 하나의 canvas로 나뉘어져있고 캔버스에는 캔버스 다른하나에는 레인지 input 다른하나에는 버튼 다른하나에는 색깔(파레트?)들이 있다.색깔들은 또 각자의 div로 나뉘어졌다.css는 간단하니까 패스

포스팅에 앞서 오늘 충격적인 영상을 발견하여 공유링크 남기고 시작합니다.자바스크립트 공부를 시작할때 이것만한게 없을 것 같습니다 ..https://youtu.be/Ukg_U3CnJWI벽돌깨기 게임은 전적으로MDN 의 힘을 빌렸습니다.(총 10편입니다)우선 ht

1. 자료형 int, float, complex로 숫자를 나타내는 세가지 str, list, tuple set, dictionary 군집을 나타내는 세가지 Boolean 참 거짓을 나타내는 한가지가 존재한다. 1.1 int, float ,complex in

error 발생 예상 시 try & except를 이용하여 에러가 발생하는 것에 대한 커멘트를 만들어 놓기except뒤의 부분을 비워놓아도 상관은 없으나에러의 이름을 알고 싶을 경우Exception as ex로 excpet뒤에 선언해주면 된다실행흐름을 깨뜨려 필요한 값

list Value값을 통해 index위치를 알 수 있다.list1= 135,462,27,2753,234if 50 in list1: list1.index(50)else: print("Check the list value {}".format(list1))list1= 13

상속(Inheritance) 상속하는 클래스를 부모 클래스, 상속받는 클래스를 자식 클래스, 자식클래스가 부모클래스의 내용을 가져다 쓸 수 있는 것이다. 아래에 중복되는 것을 피하기 위해 animal클래스를 새로 만들었다. 아래 human과 dog 클래스의 괄호안에

List comprehension 파이썬의 list와 관련한 유용한 도구들을 보자! list method 이때까지 배운걸로 정사각형 넓이를 구해보자 이것보다 간단하게 만들어보자 for문을 돌며 i를 가져오고 계산할 식을 i*i 에 넣는 것임. 이렇게 list의 사

datetime 날짜와 시간을 사용하게 해주는 라이브러리 import datetime 아래와 같이 사용하면 된다. 어떤 클래스인지 알아보자 repalce repalce는 이미 만들어진 것을 바꾸기 위한 용도로 사용됨. 초기부터 설정값으로 만들기 만들 때 부터 설

참고 1. Relevant words iterable 자신의 멤버를 한번에 하나씩 리턴할 수 있는 객체이며 list tuple ,string, dict가 여기에 속한다. Sequence int type인덱스를 통해 원소에 접근할 수 있는 iterable이며 iterab

1. sorted 원본을 유지한채, 정렬된 리스트를 구하는 방법 보통의 다른언어는 deepcopy 와 sorted함수를 이용한다고 한다(다른언어를 이렇게 까지 해본경험이 없다 ..) 다른언어의 예시는 파이썬은 간단하게 이렇게 가능하다. 2. zip 이차원함수의 l

dictionary 값 할당 키리스트와 값 리스트를 zip함수를 이용하여 묶는 방법을 익히기 위해 문제를 풀어봤다. a 와 b의 input값이 주어지고 a 는 string 원소로된 list를 b는 float원소로된 list를 가지고 있다. 이때 두가지를 결합한 dic

평균과 평균보다 큰 수 입력: 첫째줄에 비교할 정수의 개수 입력, 둘째줄에 공백으로 구분하여 정수하나씩 입력 출력: 평균(소수점첫째)출력하고 공백으로 구분하여 평균보다 큰 수의 개수를 출력 이 문제를 보고 처음 든생각이 분명 더 간단한 방법이 있을 것 같은데 생각이

파이썬코딩도장을 보며 공부한것을 정리한 것 입니다 :)pprint 메소드 및 함수를 통해 리스트를 원하는 모습으로 사각 출력할 수 있다.다양한 방식으로 이차원리스트를 출력하는법 (for , while,이중 for)반복문으로 1차원 리스트 만들기다양한 방식으로 2차원 리

파이썬으로 파일을 생성하고 문자열 넣기 문자열 읽기 매번 close로 닫으면 귀찮으니 with as 사용하여 자동으로 파일객체 닫기// with as 사용하면 파일을 사용한뒤 자동으로 파일객체를 닫아준다. 문자열 여러줄을 파일에 넣기 리스트에 들어있는 문자열을 파일에 써넣기 파일의 내용을 한줄씩 리스트로 가져오기 유의해야할 점은 read는 내용을 ...

페이지의 레이아웃을 완성시키기위해(또는 페이지 내의 요소의 배치를 위해) 필요한 기본 개념들을 정리해본다. 기존에 중구난방으로 공부하던 것을 한곳에 정리할 수 있는 좋은 기회인 것 같다. layout의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것이라고한다.

1. tag, content, attribute, element 1.1 tag, content 보통 내용(content)이 들어가는 것을 감싸는 것을 말하며 용도에 따라 그에 알맞는 태그가 존재한다 등이 이에 해당하며 사용은 아래와 같이 된다. closing ta

background-image는 말그대로 배경이미지를 사용하기 위해 사용하면 된다.일단 두 tag모두 동등하게 이미지를 불러올 수 있는데 다르게 사용하는 이유몇몇가지가 존재한다. 만약, 에러가 발생하였을시 이 에러로 인해 페이지가 전달하고자하는 의미(semantic)

⚱️ 1. function 1.1 함수의 정의 add라는 이름을 가진 함수이며 해당 함수가 어떤 동작을 하게 될지를 정의하는 것. a,b는 매개변수(parameter)이다. > 합계를 return 해준다. 1.2 함수의 실행 parameter안에 들어갈 1,2

1. JavaScript 소개 > HTML : 웹페이지의 구조 정의를 하는 markup language javascript: 웹페이지의 상호작용을 하도록 만들어진 언어이며 사용자의 행동처리, 데이터 저장, 네트워크의 응답과 요청을 처리하는 역할을 한다. 상호작용의

웹서버를 통해 HTMl page전체를 클라이언트(웹브라우저 등..)에게 전송하였다.초창기 웹사이트및 서비스는 html css등 단순 정보 제공위주였기에 특별한 기능이 많지 않았으며무엇보다 user interation이 많이 요구되지 않았다.웹 서비스의 발전에 따라 ht

my mental 1. Introduction to HTML 1.1 Definition of Html and function > Html(Hyper Text Markup Language): Html은 웹페이지의 구조를 잡을 수 있는 하이퍼 텍스트이다. * 하이퍼텍

mac: cmd + option + i or F12 key Elements pannel 페이지와 스타일 검사 및 편집, url이나 img 따오기 좋음. 스타일 수정 좌측 html 우측 css select element button 을 통해 원하는 요소의 코드를 곧바로

DOM(Document Object Model) 돔(DOM)이란 웹페이지의 html 을 계층화 시켜 트리구조로 만든 객체(Object)(키와 값이 있겠지?) '모델'이다. 이 '모델'을 통해 Js는 웹페이지에 접근하고 페이지를 수정할 수 있다. 따라서 다시 말하면

Guide for using > 깃은 버전관리 시스템으로 시간이 지남에 따라 파일의 변경사항을 추적하는 도구이다. 깃 허브는 깃을 사용하는 프로젝트를 위한 플랫폼 사이트라고 생각하면 쉽다 쉽게 말해서 깃이라는 저장된 파일들을 공유하기 위한 sns사이트가 깃허브라고

😎웹의 동작에는 크게 요청과 응답이 존재한다.사용자의 요청, 브라우저의 요청, 서버의 응답, 브라우저의 응답 등이 존재한다.요청과 응답에 있어 배포, 호스팅, URL, IP등에 대한 이해가 필요하다.(면접에도 자주 나온다니 열심히 기억해보자:🚀)만약 브라우저에 ww

js로 이벤트를 구성할 때 매번 실수하는 것들을 좀 정리해보려 한다. 일단 첫번째로 addEventlistener를 통해 특정이벤트를 구현시키기 위해서는 해당하는 콜백함수가 미리 선언되어야 한다. 해당 함수를 선언할때는 알고리즘에서 풀었던 방식과 동일하게 함수를 조

🦋Target > http통신이 어떻게 구성되고 사용되어야 하는지 알자 1. HTTP란? > Hyper Text Transger Protocol로 html문서를 교환하기 위해 만들어진 통신규약(protocol)이다 웹상에서 네트워크를 통해 서버끼리 통신 시 어떤

library vs framework 프레임워크는 기반구조를 뜻하며 특정개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성 된 상호 협력하는 클래스와 인터페이스의 집합이다 라이브러리는 단순활용 가능한 도구들의 집합을 말한다. 개발자가 만든 클래스에서 호출하여

인증과 인가는 API에서 가장 자주 구현되는 기능중 하나이며 대부분의 API는 인증과 인가를 요구한다고 보면 된다.인증(Authentication)은 쉽게 말해 유저의 아이디와 비밀번호를 확인하는 절차이다.인가(Authorization)는 유저아이디와 비밀번호 생성유저

일단 React는 실행이 된다면 class 내의 constructor, render, componentDidMount순으로 호출이 되며 setstate 발생시 rerender가 된다!

map forEach etc..

2차프로젝트(킨포크 사이트)를 하며 알게된 얕은 css 지식들

git rebase 브랜치 두개를 합친다 featrue가 생성되었던 base위치를 바꿔주는 것임 master 브랜치의 특정시점에서 브랜치를 생성한 시점이 존재함 그 이후 마스터도 업데이트 브랜치도 업데이트 된 상태에서 feature의 베이스를 마스터의 최종 업데이

undefine막으려고a??a.map 쓰던걸 a?map으로 쓰기 가능

스크롤이벤트를 위한 커스텀훅 사용기

모듈(Module)이란?단지 하나의 파일에 불과하며 스크립트 하나는 모듈 하나라고 보면 된다.모듈에는 특수한 지시자 import 와 export가 있는데 이를 적용하면 다른 모듈을 불러와 모듈에 있는 함수를 호출하는 것과 같은 기능들의 공유가 가능하다.모듈은 항상 엄격

vue 기초 구조

window scroll Event 특정 버튼을 누르면 작동하는 함수를 작성하고 있는 와중 알게된 기능이다. window.scroll에 접근하여 따로 값을 주는 여러 코드들을 보다가 알게 된 것인데 이라는 속성에 값을 주면 각 해당의미를 가진 행동을 하며 scroll

Resource server & Resource Owner & Client Resource server : 구글과 같이 서버를 제공해주는 회사들을 말하는 것, 이쪽에서 access token을 넘겨주는데 Resource Owner가 Resource server에 있는

axios interceptor, Spinner

Carousle

1st CloningProject Routing, AWS review

삽질의 개요 태어나서 웹개발 분야의 첫 협업프로젝트이다보니 서비스 단 마다의 협업 구성이 어떻게 되는지 몰랐습니다.

면접으로 바쁜나날이라 다양한 정리들을 노션으로 간단하게 진행하고 있는 요즘이다. 그럼에도 불구하고 이 글을 쓰는 이유는 면접에서 꼭 찾아보면 좋다고 하셔서 필수 기본지식 중 하나라여겼기 때문이다🧐. 일단 MDN을 찾아봤다. MDN에서는 호출스택(call sta

회사 레거시 관리를 위해 배워야 하는 친구다.

php 공부를 하자 (회사 레거시 관리를 위해 배워야 하는 친구다. v2)

생활코딩 강의를 참고하여 DataBase와 MySQL을 알아보자.(매우 심플버전)

기회가 되서 타입스크립트로 간단한 프로젝트를 만들었다.

swift pdf 다운 및 열기 리뷰

Swift Json 처리방법과 삽질일기

브라우저 작동방식을 알아보자

RegularExpression

모두가 알고 있다. HTTP는 위험하다.

개인공부를 위해 정리한 내용입니다 :)