TIL

객체 let person = {name: 'me', age: 25, isStudent: true};배열let name = \['jabae', 'jihyu', 'hyupa'];함수도 타입이다!undefined도 타입이다!선언식표현식화살표 함수한 줄 일 때=== : c언어

문자열의 속성과 메소드를 이용해 원하는 형태로 만들 수 있다.yes!문자열의 length라는 속성을 활용해 길이를 확인할 수 있다. str.length문자열의 글자 하나하나에 접근할 수 있다. str1문자열을 합칠 수 있다. word1 + " " + word2templ

HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다.not nowHTML이 Markup language라는 것을 이해할 수 있다."구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.HTML의 구조

. 버튼을 활용하여, 소수를 입력받으세요.. 버튼을 연속적으로 눌러도 .은 처음 단 한 번만 입력되어야 합니다.정수부분없이 . 버튼과 숫자를 눌러서 작동시키는 경우 소수가 나타나야 합니다. (.5 === 0.5 )demicalFlag라는 변수를 만들어 주어서 숫자의 처

리눅스 터미널을 실행할 수 있다.yesCLI를 이용한 작업과 GUI를 이용한 작업이 동일함을 이해할 수 있다.CLI : Command Line InterfaceGUI : Graphic User InterfaceCLI 환경에서 파일을 지워도 GUI환경에서도 지워진다! (

배열에서 사용되는 다음 용어에 대해 정확히 이해할 수 있다.index : 배열의 순서, 0번부터 시작한다. element : 배열의 요소이다.length : 배열의 길이를 구할 수 있다. arr.length (index + 1)arr\[0] : 배열의 첫번째 요소 예시

배열과 객체의 구조를 이해하고 언제, 어떻게 사용하는지 이해할 수 있다.yes배열과 객체의 특징을 구분하여 사용할 수 있다.배열 : index에 요소가 담겨 순서를 가진다. 객체 : 각 key에 value를 한 쌍으로 담겨 의미를 가진다. 그럼 순서를 가질 순 없을까?

CSS의 기본적인 셀렉터 > (HTML)id -> (CSS)> (HTML)class -> (CSS). 이렇게 접근해서 예쁘게 만들어준다!절대 단위와 상대 단위를 구분할 수 있다.절대 단위: px pt cm in상대 단위: em ewm % vw vhCSS 박스 모델에 대

요즘 컴터만 해서 그런가... 사랑 뿜뿜하는 러블리하고 귀여운 화면을 만들고 싶었다. 뭔가 엉성하지만 그래도 최선을 다했다...! 계속 계속 만지면 조금씩 나아지는 게 보이니까 재미있었다!(ux ui의 악몽인가...) 시간이 너무 금방 가버려서 탈이다.😮‍💨 만들고

Achievement Goals DOM의 개념을 이해할 수 있다. DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다. HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다. `` 태그가 적용되는 위치에 따라서 실행

Achievement Goals🙋‍♀️🔑 DOM 기초 실습을 통해, 구체적인 사용법을 익힐 수 있다. querySelector를 활용하여, HTML 엘리먼트 정보를 가져올 수 있다. oncilck, onkeyup 속성이나 addEventListener 메소드로 이벤

일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다.yes! 🙌 변수에 할당할 수 있다.다른 함수의 인자로 전달할 수 있다.다른 함수의 결과로 리턴될 수 있다.고차 함수(higher-order function)에 대해 설명할 수 있다.고

React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.선언형이다.컴포넌트 기반이다.범용성이 좋다.JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.왜 명시적일까? JavaScript의 문법과 HTML의 문법을 동시에 이용 가능하므로 기능과 구조를 한번에

SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다.yes! 👌SPA는 서버로부터 파일을 받아와 크롬 화면에 뿌리는데(랜더링), 이때 중복되는 부분은 빼고 필요한 부분만 불러오는 것이다. SPA의 장, 단점에 대해 이해하고 설명할 수

state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.state : 내부에서 변화하는 값이다. 리액트 컴포넌트는 state가 변경되면 리렌더링을 한다! 컴포넌트 안에서 구조분해 할당으로 초기화하고,state 변수는 함수가 끝나도 사라

버튼을 누르면 사라지게 하고 싶어! (삼항연산자, 불리언으로 풀기)removeTweet(!showTweet) 이렇게 쓰면, 플래그처럼 사용할 수 있다. true일 때, false로 false일 때, true로 바꿈!이러면 버튼을 눌렀을 때, HandleRemoveCon

클래스와 인스턴스라는 용어를 이해할 수 있다.yes! 🙌 전체적인 청사진, 원형을 클래스라고 한다. 인스턴스는 클래스를 바탕으로 만드는 것이 인스턴스 객체이다. 객체를 영어로 하면 인스턴스다. new 키워드의 사용법을 이해할 수 있다.class 키워드의 사용법을 이해

재귀의 의미에 대해서 이해하고, 자바스크립트에서 재귀 호출을 할 수 있다.yes!재귀란 실행 과정 안에서 자기 자신을 실행하는 것이다. 예를 들어, 5! = 5\*4\*3\*2\*1 인 팩토리얼을 재귀로 호출하는 함수를 만들어 보았다.재귀를 언제 사용해야 하는지 알고

어떤 경우에 중첩된 callback이 발생하는지 이해할 수 있다.클라이언트와 서버가 비동기적으로 여러가지 일을 수행하게 하기 위해서(예를 들면 유튜브 영상의 로딩을 기다리면서 댓글을 보거나 좋아요를 누르거나 추천 영상을 보거나 ... 이렇게 여러가지 일은 하는 것!),

fetch API? 비동기 요청의 대표적인 네트워크 요청 사례로 URL로 요청하는 경우가 가장 흔하다. URL로 요청하는 걸 fetch API가 가능하게 해 준다.위와 같이 다른 메뉴들은 그대로 이지만 네모박스 안에 있는 정보는 시시각각 변한다! (최신뉴스와 날씨 같은

클라이언트-서버 아키텍처를 이해할 수 있다.클라이언트 : 리소스를 사용, 서버에 데이터를 요청한다.서버 : 리소스를 제공, 클라이언트의 요청에 응답한다.이렇게 리소스를 사용하는 앱과 존재하는 곳을 분리시킨 것이 클라이언트-서버 아키텍처(2-Tier 아키텍처)이다. 일반

REST API에 대해 이해할 수 있다.(Representational State Transfer의 약자) API 대표 아키텍처로,웹에서 사용하는 데이터나 리소스를 HTTP URL로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식이다. REST API를

React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.리액트의 특징 중 하나는 데이터는 위에서 아래로 하향식(top-down) 흐름을 갖는다는 것이다. 데이터를 전달하는 주체는 부모컴포넌트이고, 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지

HTTP 요청/응답을 브라우저를 통해 확인할 수 있고, 해당 내용을 읽을 수 있다.yes! 🙌 이제 요정도는... 다 알잖아? 🥴HTTP 다양한 요청 방식과, 응답 코드에 대해 이해할 수 있다.HTTP의 메소드 GET POST PUT DELETE(CRUD)와 OPT

Express 시작하기앱의 가장 상위 파일 app.js에서 3001포트를 이용해 서버와 연결해보자!이걸 기본 틀이라고 생각하고 // something...에 라우팅을 해줘서 클라이언트의 request에 맞추어 분기를 만들어줄 수 있다.그럼 라우팅은 어떻게 하느냐? 만약

컴포넌트 기반 Bottom-up 방식 개발이 무엇인지 이해한다.Component Driven Development (CDD) : 재사용할 수 있는 컴포넌트를 먼저 생성하고, 이렇게 만들어진 컴포넌트를 결합하고, 페이지를 조립해 나가는 Bottom-up 방식 개발 방법이

프로젝트를 하면서 git 때문에... 정말 망할 깃... 알면 쉽지만 협업을 하면서 에러를 처음 만나니까 정말 당황스러웠다. 내가 잘못했다가는 다른 팀원들이 한 것도 꼬일까봐... 🥺 꽤 많은 고생을 했는데 정리를 해놔야 나중에 안 까먹을 것 같아서 써 본다.이건 정

프로젝트를 하면서 버튼을 누르면 상세페이지로 넘어가도록 만드는 것이 필요했다. 상세페이지 틀은 컴포넌트로 만들어 놓고, 클릭하면 해당 정보만 넘어가서 보여주도록 만들고자 했다. 그래서 Link to로 연결하고, props로 데이터를 보내주려고 했는데...한참을 구글링한

상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.상태를 이해하기 위해서 일단 공식문서 'React로 사고하기' 읽기Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.Store : 상

functional CSS vs Inline-style 시멘틱 클래스명, 의미가 있는 이름 짓기...(AppWrap, ContentWrap, PageWrap, TitleWrap ...) 의미 있는 이름 짓기라 하지만 사실 재사용도 잘 하지 않고 온갖 Wrap으로 지저분

정적 웹사이트와 동적 웹사이트가 어떻게 다른지 이해할 수 있다(Server Side Rendering) 웹 페이지를 브라우저에서 렌더링하는 대신에, 서버에서 렌더링한다. 사용자가 브라우저의 다른 경로로 이동할 때마다 서버에서는 렌더링 작업을 반복한다.\-> 동적 웹사이

사용 권한과 소유자에 대해 이해하고, 사용 권한을 변경할 수 있다.yes! 🙌 파일의 소유자와 파일에 적용된 사용 권한을 확인하고 이해할 수 있다. ls -l터미널에서 ls -l을 입력하면 다음과 같은 목록을 볼 수 있다.여기 맨 앞에 폴더와 파일의 사용권한을 알 수

프로젝트로 로그인 페이지를 구현하려고 하는데, OAuth를 사용하기로 했다. 나같은 새싹은 처음 접했기 때문에 우선 공부한 이론을 정리하고자 한다. (써먹으면서 추후 차차 추가하기로 하자!🐣)인증을 위한 프로토콜의 한 종류이다. 보안된 리소스에 접근하기 위해 클라이언

Git 브랜치의 개념을 이해할 수 있다.yes! 🙌 Git 으로 협업하며 브랜치를 나누는 이유를 이해할 수 있다.yes! 👍 한 소스코드에서 동시에 다양한 작업을 할 수 있게 해준다.소스코드의 한 시점과 동일한 상태를 만들고, 브랜치를 넘나들며 작업을 수행할 수 있

Achievement Goals 3 Tier Architecture 를 이해한다. > 출처 : https://docs.aws.amazon.com/whitepapers/latest/serverless-multi-tier-architectures-api-gateway-la

Learn SQL SQL 주요 문법을 이해할 수 있다. > yes! 🙌 조회, 삽입, 갱신, 삭제 구문을 자유자재로 사용할 수 있다. > + 조회 : SELECT > + 삽입 : INSERT INTO > + 갱신 : UPDATE SET > + 삭제 : DELETE 조

Model-View-Controller 의 약자로, 소프트웨어가 돌아가는 방식에 대한 패턴을 의미한다. 각 기능별로 분리되어 있기 때문에 고유한 역할을 수행한다. 이러한 역할 분리의 장점으로는 크게 두 가지가 있다.각 기능별로 나누어 분업하여 작업하기 쉽고, 또한 코드

❓ NoSQL관계형 테이블과는 다른 방식으로 데이터를 저장하는 데이터 저장소이다. 테이블을 행과 열이 아닌, 체계적인 방식(document, key-value, wide-column, graph 등)으로 저장한다. 관계에 중점을 둔 SQL 데이터베이스보다 자유로운 형태

📌 CREATE > + insert() : 새로운 도큐먼트를 추가한다. ⚡️ 모든 도큐먼트가 "id" 필드를 기본값으로 반드시 가지고 있어야 한다. 값이 똑같아도 "id"가 다르면 다른 도큐먼트로 취급되며, 값이 다르더라도 "id"가 같으면 같은 도큐먼트로 간주되며

📌 비교연산자 쿼리 연산자는 데이터베이스 내에서 데이터를 찾는 다양한 방법을 제공한다. 비교 연산자를 사용하면 특정한 범위 내의 데이터를 찾을 수 있다. 비교연산자를 특정하지 않으면 $eq가 기본 연산자로 사용된다. 1. 문법 > 2. 종류 | operator |

💬 문자열 아스키코드(ASCII) 영문 알파벳을 사용하는 대표적인 문자 인코딩으로, 7bits(2^7=128)로 모든 영어 알파벳, 숫자, 제어문자 등을 표현할 수 있다. 아스키 코드는 영문자만을 표현할 수 있으므로 영어가 아닌 언어를 표현할 수 없다. 그래서 전 세

💻 운영체제(OS, Operating System) 컴퓨터나 스마트폰(하드웨어)는 그 자체로 혼자할 수 있는 일이 없다. 하드웨어의 설계를 바탕으로 하이웨어에게 일을 시켜야 하는데, 이 하드웨어에게 일을 시키는 주체가 바로 운영체제이다. 대표적인 운영체제로는 Wi

가비지 컬렉션이란 프로그램에서 더 이상 사용하지 않는 메모리를 자동으로 정리하는 것이다. 동적 할당된 메모리 영역 가운데 이상 사용하지 않는 영역을 탐지해 자동으로 해지하여 메모리 누수를 막을 수 있다. 이 기능을 가진 언어(혹은 엔진)는 자바, C대부분의 가비지 컬

42서울의 과제를 점점 진행하면서, 만들어야 되는 함수의 수도 늘어나고 그에 따라 파일의 양도 늘어 났다. 42서울 노메넷의 기준에 따르면 한 파일에 함수 5개, 함수는 25줄 이상 넘으면 안 될 것, 인자는 5개 아래, 변수 선언도 5개 아래로만 가능하다. 이렇다보니