TIL

프론트엔드 부분에서는 따라잡을만했는데 백엔드로 넘어가고서는 좀 많이 헤맨 것 같다.

6주 차인 오늘 EC2 서버를 이용해서 실습을 했다.

그전에 공부한 CSS 파트의 Box model 에 이어서 dispaly 와 positioning 에 대해 공부하였다.

Colors, Typography

Typography, Grid 복습

뭐든 자기 스타일에 맞게만 공부하면 되니까🙋‍♀️

며칠간 Grid를 붙잡고 헤매다가 겨우 끝날 때쯤부터 이해가 가기 시작했다

grid 관련 예제를 풀어보면서 헷갈리는 부분이 많았다. 공부하면서 빠트린 부분을 더 살펴봐야겠다.

Javascript 시작

계획한대로 공부하는게 생각보다 어렵다🤦‍♀️

javascript 공부중

Javascript 공부중 벌써 목요일이라니...🤦‍♀️

html과 css 복습을 꾸준히 하쟈

월요일부터 늦잠...ㅎㅎ

자바스크립트 조건문 공부

함수 어렵다..🤦‍♀️

자바스크립트...

화살표함수

javascript 2주째😇

자바스크립트는 배울때마다 새롭다...

파이썬 공부 시작

자바스크립트 프로젝트 시작🙆‍♀️

거의 하루종일 개인 프로젝트 페이지 수정했다🔥

파이썬과 자바스크립트 병행하는 중😵

자바스크립트 프로젝트 열심히 하기

끝나지않는 자바스크립트...ㅎ

깃 공부하쟈

html&css 공부

input은 type으로 속성을 정한다 type 은 text, password, number 등이 있고 placeholder로 input 안에 문자를 입력할 수 있다(실제 값이 아니라 예시 느낌) 실제로 값을 넣을 수도 있는데 value로 넣으

배열은 \[] 에 감싸져 있다배열은 순서를 가지고 있어서(0부터 시작) index를 사용해 요소를 가져올 수 있다array 의 길이는 .length 로 구할 수 있다(1부터 시작)배열의 마지막 요소를 선택하려면 .length-1 을 하면 된다배열에 요소를 추가할 수도

semantic 이란 컴퓨터가 정보에 더 효율적으로 접근하기 위해 전체적인 레이아웃을 잡는 것이다.모든 웹 사이트가 그렇듯이 검색 엔진에서 높이 랭킹해 있을수록 사용자의 접근도 쉽다. 그러기 위해서는 전체적인 웹 사이트의 레이아웃을 잘 잡아줘야 하는데 이때 semant

객체{ }는 순서가 없다 순서가 있는 데이터는 배열 배열은 index 로 접근 가능하다 arr = 'a', 'b', 'c';arr1 <= 'b'객체는 key 와 value 로 이루어져 있다

객체{ }는 순서가 없다 순서가 있는 데이터는 배열 배열은 index 로 접근 가능하다 arr = 'a', 'b', 'c';arr1 <= 'b'객체는 key 와 value 로 이루어져 있다

DOM (Document Object Model)dom 은 웹페이지와 javascript 를 서로 이어주는 역할을 한다document객체로 element 와 속성에 접근할 수 있다해당 요소의 내용은 innerHTML 로 접근해 수정할 수 있다innerHTML 을 사용하

리눅스란?리눅스 Linux 1991년에 개발된 시스템을 운영하는데 가장 널리 사용되는 오픈 소스 운영체제이다 따로 구입을 할 필요가 없다 리눅스는 유닉스 운영체제를 모델로 만든 운영체제로 유닉스와 마찬가리로 다중 사용자, 다중 작업을 지원한다 서버에서 작동하는데 최적화

git/GitHub 란? VCS(Version Control System)란?git 이란 소스코드를 효과적으로 관리할 수 있게 도와주는 버전관리 앱이다 모든 변경사항을 스냅샷 형태로 저장하기 때문에 특정 시점으로 갈 수 있다 분산해서 저장할 수 있어 하나의 프로젝트에

object 객체 리터럴 이라고 부르는 {}를 사용하여 객체는 다른 데이터 타입처럼 변수에 저장할 수 있다 객체는 순서가 없다 순서가 있는 데이터는 배열이다 배열은 index로 접근해서 불러오거나 추가가 가능하다 > 객체는 키(key) - 값(value) 의 쌍으

var, let, const javascript에서 변수를 선언하는 방법은 var, let, const 이렇게 세가지가 있다 먼저 var 는 같은 이름의 변수를 한 번 더 선언해도 에러가 나오지 않는다

Arrow function ES6에서 연산자를 사용해서 간결하게 함수를 생성할 수 있다 인자가 하나일때는 () 생략 가능 함수가 return만 한다면 return 키워드 생략 가능 map map은 배열을 요소의 개수 만큼 반복해준다

인스타그램 로그인 부분의 버튼 이벤트를 넣었다 id 와 pw 의 value 값을 가져와서 value가 비어있으면 버튼이 활성화 되지 않도록 구현하였다 버튼 스타일이 변하는 부분은 css에 미리 클래스를 만들어 놓고 add로 추가하는 방법으로 효과를 주었다

리액트에서는 virtual DOM 을 사용해서 업데이트가 필요한 곳의 ui를 렌더링한다 그리고나서 실제 dom과 비교해 차이가 있는 곳을 찾아 패치시킨다

삼항 연산자 if문 처럼 특정 조건에 따라 값이 달라지는 식에서 if문 처럼 삼항 연산자를 사용할 수 있다 기본 구성 => 조건 ? true일때 : false일때;

사용자가 브라우저에서 요청하면 서버가 응답해 콘텐츠들을 보내주는 형식이다 인터넷도 항상 연결되어 있어야 하고 절대 꺼지지 않는 컴퓨터가 필요하다 그런것을 담당하는 서비스가 있다 (웹 호스팅 서비스 AWS ec2/S3, cafe24 호스팅센터 등)

component 는 대문자로 시작해야 한다props 란 component 에 넣는 것들 html과 비슷한 방식(div class="name")이다 props 는 argument 로 간다props 에는 string 말고도 boolean 등 넣을 수 있다

배열은 저장된 데이터들이 순서를 가지고 있어 인덱스로 접근 가능하다 배열은 length 로 반복문을 돌릴 수 있다 하지만 객체는 순서가 없다 key 와 value 로 구성되어 있다

class 로 객체를 생성할 수 있다

state state 는 동적 데이터와 함께 작업하는 object 이다 state 는 class component 와 함께 사용한다 class component 는 render 안에 return 이 있는 구조이다

React Component 의 Lifecycle 컴포넌트를 class 로 생성하면 아래의 순서를 따라서 진행된다

한 태그에 여러 클래스가 존재하는 경우 부모 위치에 클래스 스타일을 지정해줘야 둘 다 적용된다 함수에 숫자 배열과 특정 수를 인자로 넘기면 숫자 배열 안에서 두 수를 더해서 특정 수가 나오는 index 를 배열에 담아 리턴

props 사용자가 컴포넌트를 사용하는 입장에서 중요한것state 는 props 의 값에 따라서 내부의 구현에 필요한 데이터컴포넌트가 실행될 때 constructor 함수가 먼저 실행되서 초기화를 시킨다Database 란 데이터를 저장 및 보존하는 시스템을 말한다

react에서 array 에 데이터를 추가할때는 push를 쓰면 좋지 않다push를 쓰면 값이 추가되기는 하지만 결국 가리키고 있는 배열은 똑같기 때문에 react 가 업데이트를 비교할 수 없다 그래서 새로운 배열을 만드는 concat 을 사용하는 것이 좋다

특정 배열에서 중복되는 수 중 과반수를 반환하는 코드trello 협업할 때 같이 사용하는 투두리스트 같은 것상황에 따라 바꿀 수 있는 툴

서버에서 불러온 댓글 map 돌리는 함수componentDidMount 에서 불러온 데이터를 setState 로 저장해서 그 데이터를 Map으로 돌리는 코드인데 자꾸 map에서 에러가 났다 확인해보니 props 로 전달되는 값이 없었다 그래서 다시 살펴보니 Lifecy

westagram clone coding 로그인과 회원가입 기능 코드리뷰로그인 코드 리뷰회원가입한 정보를 바탕으로 로그인 기능을 구현하였다post로 input 창에 들어온 정보를 보내 응답 메세지에 따라 메인 화면으로 이동하도록 구성하였다 한 input 창에 세가지 정