위코드

HTML (HyperText Markup Language)웹페이지를 만들기 위한 언어이다 (웹페이지의 구조 설계)이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성한다이미지나 텍스트를 그려주기 위해 필요하다<태그이름>내용</태그이름> (시작태그

원래 위치를 기준으로 배치, 속성을 부여하기 전까지 어느 위치로 이동하지 않는다위치를 이동시켜주는 top, right, bottom, left라는 프로퍼티가 있을때만 적용된다가장 가까운 상위 요소를 기준으로 절대적인 위치에 둘 수 있다 (부모중에 position이 re

웹페이지의 구조를 정의하고 설계하는 것은 HTML이다그렇지만 HTML만 있다고해서 웹페이지가 돌아가지는 않는다 (정적인 페이지)텍스트만 있고 하나의 페이지만 괜찮지만, 우리가 알고있는 모든 페이지에는 JavaScript 코드가 들어가 있다JavaScript는 웹 페이지

함수란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록이다(특정 용도의 코드를 한 곳에 모아 놓은 것)처음 한번만 작성해 놓으면 나중에 필요할 때 재사용이 가능하다function 함수 이름() { }함수의 용도(동작) 정의함수 이름();정의된 함수를 호출해

JS 코드에 숫자와 연산자를 사용해서 수학 계산을 할 수 있다\++ : 변수 값을 1씩 증가\++을 피연산자 앞에 사용하면 1을 더한 값을 반환 (++y)피연산자 뒤에 ++을 사용하면 1을 더하기 전 값을 반환하고, 피연산자를 1을 더한 값으로 만든다.그래서 다음에 피

문자열을 서로 연결하려면 + 연산자를 사용해서 연결하거나ES6부터 추가된 template literal 방법을 사용할 수 있다"텍스트" + "텍스트" = 텍스트텍스트변수 = "텍스트"변수 + "텍스트 = 텍스트텍스트숫자를 "", '' 안에 넣으면 문자가 된다JS에서 넥

if문(조건문)은 지정된 조건에 따라 작업을 수행한다특정 조건일 때 코드를 실행하며 조건의 결과값 따라 다른 코드를 실행할 수 있다주어진 조건이 거짓일 때 실행되는 코드맨처음 주어진 조건이 거짓이면 그 다음 조건으로 넘어가 참인지 거짓인지 판별하여 실행되는 코드

값을 비교할때 쓰이는 연산자이다=== 값, 타입까지 서로 같은지 비교하는 연산자이다값과 타입까지 같아야 True를 반환한다== 값이 같은지 비교하는 연산자이다=== 보다는 느슨하며 값만 같으면 True 를 반환한다!==은 값이 다른지 비교해 다르면 True를 반환한다(

let 변수명 = \[ ];배열이란 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한것이라고 할 수 있다배열안에 들어있는 각각의 데이터를 요소(el

반복문은 정지 조건이라는 지정된 조건에 도달할 때 까지 주어진 명령을 반복하는 프로그래밍 문법이다프로그래밍에서 반복문은 매우 중요하다예를들어 1~100까지의 숫자가 들어있는 배열이 있고 그 배열의 요소를 출력해야된다반복문이 없다면 일일히 위와 같은 코드를 100번이나

자바스크립트에는 아래와 같은 데이터 타입이 있다정의되지 않았다는 뜻이다 (null과는 다른용도로 값이 없다는 것을 나타낸다)var, let, const를 사용해 변수를 정의할 때,초기화 하지 않았다면 변수에 undefined가 할당된다비어있는 객체로 값이 없음을 나타

어떤 데이터가 '' 이나 "" 으로 둘러쌓여 있으면 String 타입의 데이터이다둘 중 아무거나 써도 상관없지만 회사에 따라 다르므로 회사 규정에 맞춰서 처리하는것이 좋다참고자료 : <a href="https://github.com/airbnb/javas

자바스크리트는 데이터 타입을 신경쓰지 않는다그래서 다른 언어보다 편하기도 하면서, 코드를 잘못 짜면 오류가 날 상황이 많아진다다른 언어 (C, Java)에서는 한번 변수의 type이 확정되면,그 후에 다른 type의 값을 할당할 수 가 없다그런데 자바스크립트는 많이 역

프론트앤드 개발을 할 때, 날짜와 시간을 다루는 경우가 많다회원가입을 한 날짜와 시간글을 작성한 시간휴대푠의 현재 시간 등날짜와 시간을 저장하고 보여줄 때는 날짜 객체를 사용한다참고자료 : Date MDNnew Date()은 날짜 객체를 생성한다new 연산자 다음에 D

같은 프론트앤드 개발자여도 어느 분야에서 일하느냐에 따라 주로 사용하는 함수가 달라진다고 한다예를 들어 쇼핑몰이나 브랜드 사이트를 구현하는 경우,사용자의 행동(마우스 클릭)을 처리하는 event 함수를 많이 사용한다핀테크 회사나, 금융회사, 데이터를 많이 다루는 사이트

정의객체는 key와 value로 구성된 프로퍼티들의 집합key의 이름은 중복될 수 없다설명위와 같은 표를 화면에 구현한다고 하면 아래와 같이 데이터를 저장해야 한다이중에서 하나의 plan을 선택해 아래와 같이 console에 출력하려고 하면이런 식으로 해당 플랜에 대한

변수를 사용할 수 있는 범위!!사용할 수 있는 범위에 맞게 변수를 설정하고 관리하는 것 중요안그러면 오류 값을 낼 수 있기 때문에참고자료 w3schools - ScopeMDN - ScopeMDN - Variable내가 정리한거..scope변수의 사용이 가능한 범위 (변

클래스는 객체지향 프로그래밍의 핵심이다객체지향 프로그래밍이란, 프로그램을 객체들로 구성하고,객체들 간에 서로 상호작용하도록 작성하는 방법이다Class는 객체를 만들기 위한 설계도 (틀)이며,Class의 속성(객체 고유의 특성)은 constructor() 메서드 내에 할

ES6 에서 도입된 새로운 함수 작성법호출할 때는 es5나 es6나 같다 (getName())()안에 있는 매개변수가 인자를 받아 =>로 {}함수 블록에 전달 한다는 의미인 것 같은데..참고자료MDN arrow functionarrow function은 function

참고자료MDN HTML

html에서 js파일 불러오기html script태그 내에서도 JavaScript 코드 작성이 가능하나,별도 외부 파일로 작성해서 분리하는 것이 유지보수에도 좋다html script태그에서 js코드 작성하기DOM이란 웹페이지의 HTML을 계층화 시켜 트리구조로 만든 객

특정 요소에 interactive한 반응을 할 수 있게 하는 것을 이벤트라고 한다interactive한 반응은 무엇일까?예를 들어 쇼핑몰에서 사진 위에 마우스를 올렸을때(mouse over) 다른 각도의 제품 사진으로 바꿔서 보여주는 것이다위의 기능은 html, css

git은 간단히 아래와 같이 정의할 수 있다컴퓨터 파일의 변경사항을 추적, 관리여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템소스코드의 효과적인 관리가 가능한 무료, 공개 소프트 웨어소스코드를 여러 개발 PC와 저장소에 분산해서 저장

수정 후 재 업로드 할 때이미 존재하는 remote origin 다시만들기 -> 바로 기존 remote origin을 삭제git remote rm origin

오후에 위스타를 끝내고 git 업로드 후 아래와 같은 문제가 발생하였다변경사항이 있을때 마다 위의 사진처럼 Source Control의 숫자와 목록의 변경내역이 기하급수적으로 늘어나고,config 등 이상한 메시지가 자꾸 출력되고,자동적으로 commit이 되는 것 같았

작은 페이지라도 구조를 직접 짜본다는 것이 쉽지 않았다<script></script>는 </body> 바로 위에 놓아야 js파일에서 이벤트 생성 시addEventListner 함수 밖에 변수 선언시Uncaught TypeError : Cannot rea

무언가 페이지를 짜보는건 처음이라 어떻게 해야될지 감이 안왔다..사실 어떤 태그를 써야하는지 아직도 감은 안온다기본적인 시맨틱 태그에 대해서 공부가 필요하다html 구조를 잘짜야 css 적용할때도 편리, 여러 페이지를 보면서 공부하기새로 배운 것2-1-1. time 태

자료구조데이터에 편리하게 접근하고 조작하기 위해 -> 데이터를 저장하거나 조작하는 것자료구조에는 여러가지 종류가 있으며,언어별로 지원하는 양상이 달라서,각각의 자료구조가 갖는 장점과 한계를 잘 이해하고,상황에 맞게 올바른 자료 구조를 선택하고 사용하는 것이 중요하다자료

심플앱 실행vscode 리액트 시작하는 법react 폴더 열고vscode 터미널 열고npm run start 하면 아래와 같이 뜨고종료하고 싶을땐 Ctrl + c다시 실행하고싶으면 run npm start

예제파일에서 pure.html 생성app.js 파일 들어가서class를 만들어 component를 상속시킨 다음render 함수안에return 값을pure.html의 각 태그header, nav, article 별로 각각 Componet 생성마지막 클래스에 추가npm

터미널에서 원하는 디렉토리 들어가서npx (npm 상위 버전) + creat-react-app + 프로젝트명 (대문자 안됨)npx create-react-app westargram-react하면 CRA 설치 완료 (happy hacking 뜨면 설치 완료)npm run

나중에 정리 맨처음 예리님 세션HyperText Transfer ProtocolHTML문서를 교환하기 위해 만들어진 protocol (통신 규악)웹상에서 네트워크로 서버끼리 통신할때 어떻게 할지 규정해 놓은 통신 형식 or 구조프론트엔드 서버, 클라이언트간의 통신에 사

render() jsx 반환하는 함수jsx는 화면에 보이는 모든것jsx는 최상위 부모가 있어야함 setState 는 이벤트가 있어야함수 인자로 전달할때는 () 붙이지말기이름만전달내가 맨처음에 댓글추가 했을때 () 붙이니 오류이벤트걸때 콘솔로 먼저 찍어서 확인해보기arr

String 형인 str 인자에서 중복되지 않은 알파벳으로 이루어진 제일 긴 단어의 길이를 반환해주세요.str: 텍스트return: 중복되지 않은 알파벳 길이 (숫자 반환)예를 들어,str = "abcabcabc"return은 3=> 'abc' 가 제일 길기 때문str

로그인 이벤트 * id : @가 포함되어야하고 , pw : 5글자 이상이어야 로그인 버튼색 활성화* constructor 생성 super(); React.Component의 메서드 상속 this.state로 component 속성의 상태 지정 id, pw input

메인 이벤트 * 댓글 입력 창에서 게시 버튼 누르거나 엔터누르면 댓글 업로드 * constructor 생성 super(); 로 React.Component의 메서드 상속 (부모클래스 생성자의 참조, super을 호출하기 전에는 this를 사용할 수 없음) this

각 과정에서 git 용어를 사용하면 명령어 힌트를 드릴 수 있어서 일부러 애매모호하게 작성했습니다."올린다, 이동한다, 생성한다, 만든다.. 등등" 문맥을 잘 파악하시고 git 시험을 진행해주세요.github에서 "git-test" 라는 repository를 만든다.내

React 2 - Component와 Props

set은 array, list 처럼 순열(서로 다른 n개의 원소에서 r ≤ n 개를 뽑아 한 줄로 세우는 경우의 수) 자료구조 이다그러나 순서라는 개념이 존재하지 않는다 (index가 없음)set의 특징을 살펴보면데이터를 비순차적(unordered)으로 저장할 수 있는

여러 페이지를 로드하고싶을때 router를 사용한다설치가 완료되면 package.json에 다음과 같이 생성된 것을 확인할 수 있다Routes.js 파일을 생성해 component를 구현한다코드React 를 'react'에서 import 하기 (react 사용을 위해)

인증, 인가는 API에서 가장 자주 구현되는 기능 중 하나이다Private API, Public API 둘 다 기본적인 인증, 인가를 요구한다인증(authentication)은 유저의 신원(identification)을 확인하는 절차(쉽게 설명하면, 유저의 아이디와 비

인자로 받는 요소 하나하나를 한 배열에 담아서 리턴리액트에서는 배열을 기준으로 컴포넌트를 리턴할 때 사용 가능예를 들어 나이키 홈페이지의 상품 소개 부분을 하나하나 리턴 가능실제로 나오는 결과가라이프사이클 잘 알기componentDidMount() 컴포넌트의 마운트가

component 재사용, props 연습에 아주 좋은 것 같다map 과제를 먼저 수행하기 위해서는 fetch() 함수를 알아야 한다기본구조는fetch는 데이터를 가져오는 하나의 요청이다참고 : MDN fetch

GET내가 원하는 데이터를 달라고 요구 "http://10.58.1.33:8001/users/log-in" 여기서 end point(users/log-in) 내가 원하는 정보디폴트값은 GETend point 명은 프론트 리스트가 와야될 곳이니 명확하게 알 수

리액트 할때 map 중요컴포넌트를 재사용하기 위해서 map 사용리액트에서는 컴포넌트의 복제품이 배열의 개수만큼 생긴다예를들어 props 를 사용하면컴포넌트 맵 돌릴때 key 있어야됨!!!!!props 넘겨주는것처럼 넘겨야됨key는 고유값나중에 필요한 부분만 렌더할려고

설치 디렉토리 이동 -> npx create-react-app 한 다음에 폴더이름 써주기쓸데없는 파일 삭제 (시작인 index.js 빼고)index.js에 있는 주석이랑 삭제한 파일 import도 제거정리되면 파일 추가.env모든 파일이 src폴더에서 부터 시작할 것이

로마자에서 숫자로 바꾸기1~3999 사이의 로마자 s를 인자로 주면 그에 해당하는 숫자를 반환해주세요.로마 숫자를 숫자로 표기하면 다음과 같습니다.Symbol ValueI 1V 5X 10L

https://gollumnima.github.io/posts/wecode8_2TIL_git_rebasehttps://woowabros.github.io/experience/2017/10/30/baemin-mobile-git-branch-strateg

display기본적으로 flex 로 설정expo는 교육용 - 처음 한 달 동안? 많이 쓰임style 튜토리얼expo 튜토리얼<a href="https://reactnative.dev/docs/text초기 세팅 (공식 문서 참조)expo 공식 문서터미널이렇