코드스테이츠 FE 이야기

분명 OT날도 회고록을 작성하려고 했는데 벌써 하루 빼먹게 되었다... OTL오늘부터는 성장하는 새싹개발자가 되기 위하여 매일 회고록을 작성할 예정이다.지렁이 화이팅!목적 코딩 시 매번 반복되는 작업을 줄여, 효율성 및 가독성을 높이기 위해 사용데이터를 담는 저장소 개

변수, 타입, 함수에 이어서 오늘부터는 본격적인 조건문과 반복문에 대해 배우게 된다.뭔가 오늘부터 페어프로그래밍 퀴즈 난이도가 훅 올라갈 것 같은 불길한(?) 예감이 들지만..이제부터 시작이다!!: 참/거짓으로 판별나는 값: 두가지 조건이 한번에 적용되는 경우!(조건)

시작하며3일 동안 페어프로그램을 진행하면서 다양한 알고리즘 공격에 치이다 오늘은 리프레쉬 느낌으로 HTML/CSS 언어 학습시간이 도래하였다~! 아 이 좋 아 > \_<웹 개발에 있어 확실히 시각적인 요소가 흥미유발에 중요한 부분이기도하고 나 역시도 HTML/CS

시작하며오늘은 어제 배운 HTML에 이어 CSS를 배울 차례다.프론트엔드 개발자가 되려면 CSS가 기본이면서도 CSS를 정말 잘해야한다는 말이 있다.오늘도 의지를 불태워본다...웹페이지의 사용자경험(UX)을 극대화시켜줄 수 있는 스타일시트 언어HTML로 웹페이지의 뼈대

시작하며지난번 CSS Selector를 넘은 것으로 큰 산은 넘었다 생각했는데 오산이었다. 허허이젠 Flexbox라는 더 큰 산을 넘을 예정이다. 또르르.....그래도 Flexobox 사용법을 마스터하면 드디어 웹어플리케이션의 기초 단계인 와이어프레임을 잡고 이를 구현

1. 오늘의 생각 시작하며 페어 경민님과 각자 만든 목업에 대해 내용을 공유하며 각자의 목업을 업그레이드하기로 하였다. 오늘은 목업 마무리에 올인할 예정이다~! > # 2. 오늘의 학습내용 1) 목업 화면(2차 수정 ver.) 1-1) 디폴트 화면 1-2) i

시작하며/마치며오늘은 목업 계산기에 생명력을 입히는 첫단추를 끼는 작업을 하였다.코드스테이츠에서 마련한 js코드를 기반으로 계산기 로직을 구현하였다.개발자의 실력 상승 그래프는 계단식이라고 하던데.. JavaScript가 정체기의 첫 단계인 것 같은 느낌이 확 든다..

시작하며/마치며오늘 배운 내용은 백엔드와 프론트엔드의 중간지점 어딘가에 있는 느낌이다...무엇보다 터미널에서 명령어로만 작업을 수행하다보니 : 대량의 서버 컴퓨터와 같은 클라우드 컴퓨팅을 다룰 때 유리: 컴퓨터를 조작하기 위한 입력과 출력 장치: 터미널에서 키보드의 입

시작하며주말에 복습 겸, 부족한 내용을 돌아보고자 2주차 회고록을 작성하다 내용이 너무 많아(모르는게 너무 많은건가 ^^...) 우선 절반 정도만 작성하고 마무리하였다. 아무래도 JS 부분에서 부족한 점을 많이 느끼고 있었는데, 이번주는 JS핵심 개념 및 주요 문법을

시작하며/끝나며오늘은 ES6의 주요 문법 중, 심화 내용을 다루었다.시간이 지날수록 점점 이해의 폭이 넓어지는 느낌이 든다.사실 오늘과 내일의 중요한 내용은 JS문법을 직접 적용해보는 Koans 과제다!내일의 회고록에 본격 오류사항과 해결방법을 적어 볼 예정이다.내용을

: javascript에서는 함수가 정의되는 위치에 따라서 어떤 변수를 참조할지가 결정된다.과제를 진행하면서 () 없이 함수명만 호출해도 함수가 실행된다는 사실을 깨달았다.const innerFn = outerFn();: 더불어 outerFn 함수 안에 중첩되어 있는

: XML, HTML 문서에 접근하기 위한 일종의 인터페이스: HTML 코드 내 script 요소는 등장과 함께 실행된다. (html 코드에서 script 코드를 만나면 html 코드 실행을 멈추고 script 코드를 실행한다.)document.createElement

유효성 검사부분 로직을 구현하며 계속해서 오류가 나는 난관을 겪었다 ㅠㅠ 계속해서 이 부분때문에 머리를 쥐어 뜯었지만.. 주말을 할애하여 결국!! 이 부분을 해결해서 날이 갈수록 코딩이 재밌어지고 있다 > < 아무래도 Javascript 쪽 공부는 막히는 부분이

마치며어제 오늘 솔로 프로젝트를 진행하며 아주 진땀을 뺐다...ㅠGithub 사용법이라던가 JS 다루는 것 등 아직은 미숙한 부분이 많다.그래도 정해진 시간내에 무사히 마무리한 것에 의의를 두며.. 이번주는 복습에 매진해야겠다.이틀간은 솔로프로젝트로 나만의 아고라스테이

: 객체 내에 매소드를 호출하는 방법: 재사용성을 높이기 위한 클로저 모듈 패턴클래스: 객체지향 프로그래밍에서의 '청사진' 역할: 함수 형태로 생성하며, '대문자'를 사용하여 선언인스턴스: 객체지향 프로그래밍에서의 '객체' 역할(instance object)속성: 't

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또 다시

Underbar 과제가 악명 높다고 들었는데, 좋은 페어분을 만나고 그간 복습했던 것도 빛을 발해서 그래도 시간 내에는 Bare minimum 과제를 모두 끝낼 수 있었다. 덕분에 코딩에 조금씩 자신감이 붙고 있다. 후후비동기로 넘어가면서 프론트보다 백엔드에 가까운 내

setTimeout(callback, millisecond): 일정 시간 후, callback 함수를 실행시켜 줌delay 함수와 sleep 함수의 차이점은?(동일 기능)delay : Callback 함수를 사용하여 setTime 매소드 구현sleep : Promise

: 컴포넌트 내부에서 변할 수 있는 값useState 불러오기useState 사용하기체크박스 표시여부에 따라 값 변경하기이벤트 사용 시, 카멜케이스(camelCase) 사용함수로 이벤트 처리 함수(Event handler) 전달: input/textarea/select

리소스가 존재하는 '서버'와 리소스를 사용하는 '클라이언트'로 나뉜 구조를 의미하며 '클라이언트-서버' 아키텍쳐라 부름. (클라이언트는 웹, 앱 등과 같은 플랙폼으로 구분 됨)리소스가 전달해주는 '서버'와 리소스를 사용하는 '클라이언트'에 리소스 저장공간인 '데이터베이

오늘의 학습 내용 1. REST API 란? 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 2. REST API 디자인(REST 성숙도 모델) 이미지 출처(코드스테이츠) 1)

오늘의 학습내용 1. CORS 1) 개념 2) CORS, SOP 3) 동작 방식 4) 설정 방법 2. Mini Node Server 3. Refractor Express 1) Express 2) Middleware

2) 포인트

오늘의 학습내용 My Agora States 서버 구축하기 1. 코드 리뷰 1-1) Express 설정(app.js) 1-2) ID로 필터링하기

자기 자신을 호출하는 함수반복되는 부분의 끝 지점, 더 이상 쪼갤 수 없는 지점의 가장 작은 단위의 return 값Base case를 기준으로 반복되는 재귀식 작성동일한 구조의 더 작은 문제로 나눌 수 있는 경우반복되는 작업의 중첩 횟수를 알 수 없는 경우

UX는 UI를 포함하는 상위 개념서비스와 상호작용하는 시스템(User Interface)사용자가 그래픽을 통해 PC와 정보를 교환하는 작업 환경인 GUI(Graphic User Interface)가 대표적임.사용자가 서비스를 이용하면서 느끼는 경험(User Experi

시간 상 모든 user flow의 작성이 어렵기 때문에, 메인화면에서 바로 접근할 수 있는 페이지들을 기준으로, 최소한의 user flow를 작성했다.시스템 상태의 가시성 (Visibility of system status)사진 업로드 시, 업로드 상태를 확인할 수 있

부품단위로 UI 컴포넌트를 만들 수 있음컴포넌트 재사용이 가능함상향식 개발에 적합함terminalpackage.jsonimportReact에서 state가 변경될 때, 렌더링이 일어나게 됨. 이때 컴포넌트들의 내부 변수들은 초기화 되는데, useRef를 이용하면, 값에

\* Bundling: 여러개의 모듈로 작업한 파일들을 하나의 파일로 묶는것을 '번들링'이라고 한다. 이와 같은 과정을 통해, 파일 크기를 줄이고 네트워크 소요 시간을 단축시킬 수 있어 사용자 경험을 최적화 할 수 있다.\* Webpack: 번들링 작업을 해주는 번들러

: 웹 개발에서의 최적화는 화면을 최대한 빠른 속도로 표시하게 하는 것을 의미함.사이트 이탈률 감소전환율 증가수익 증대UX 향상DOM tree 가볍게 만들기: tree의 깊이를 증가시키는 불필요한 부분을 없애자CSS 인라인 스타일 지양하기불필요한 CSS제거하기: CSS

Code > Build > Test > Release > Deploy > Operate자동화 프로세스의 지속적인 통합을 의미함Code - Build - Test 단계에 해당: 지속적인 서비스 제공/배포를 의미함Release - Deploy - Operate 단계에 해당

실제 서비스되는 앱의 데이터베이스(live data)의 보안을 위해 CORS 정책이 실행된다.Proxy를 이용하여 이를 우회할 수 있다.package.json에 proxy 설정 코드 추가fetch/axios 도메인 부분 제거http-proxy-middleware 설치R