에이미의 성장기록

이번주는 솔직히 공부량이 적었다. 인정... (대체 언제 많아져?) 이번주는 면접이 조금 많았다. 매일 있었다. 있으면서 저녁에는 약속이 있었다. 이번주는 자소서를 따로 쓰지는 않았는데, 이전에 썼던 곳들에서 연락이 오기도 했고, 학원에서 면접을 보라고 매칭시켜준 회사도 있었다. 그래서 면접을 보러다니면서 질문을 받았던 것 중에 충격적으로 대답 못했던 기술에 대해서 TIL로 공부했다. 그리고 우리 스터디원들 3명이 이번주에 합격 소식을 들려주었다. 다들 면접보느라 이번주는 스터디가 없었다. 아쉬웠기도 했지만, 다들 좋은 결과를 가져와서 기뻤다 :) 다음 스터디는 서울권에서 퇴근 후 타입스크립트 오프라인 스터디로 만나자고 기약했다. ✨배운점 - 여러개의 비동기처리를 해야할 때, 어떻게 하겠는가? 예를들어 ..

오늘 공부는 JS나 리액트 관련 공부가 아니다. 요새 뜨는 기술인 메타버스가 무엇인지?에 대한 공부도 해보고싶어서 주제를 정해보았다. 영풍문고에 다녀왔는데, IT/섹션쪽 가자마자 매대에 깔려있는 책이 메타버스 관련 책이다. 옆에 사람들이 "메타버스~ 어쩌구" 하는것도 들었는데 그만큼 요새 핫한 기술인 것 같아서 나도 샀다. 아직 40p 밖에 못읽었는데(ㅋㅋㅋㅋㅋㅋㅋ) 그냥 메타버스에 대해 찾아본 것들을 바탕으로 간단한 TIL을 쓰고, 다 읽으면 감상문을 남기는걸로! 메타버스 메타버스는 초월 혹은 가상의 뜻을 담은 ‘메타’와 세계를 의미하는 ‘유니버스’의 합성어로 3차원 가상세계를 뜻한다. 코로나19 팬데믹으로 비대면 생활이 일상화되면서 국내외를 막론하고 주목 받고 있다. 가상현실과 컴퓨터 그래픽 기술, ..

이런 질문을 받았다. 로그인 할 때, 유저의 id와 비밀번호를 서버에 전달 할 때, 비밀번호에 어떤 보안 처리를 하였는가? 생각해보니 처리 하지 않았다. 해커가 마음먹고 공격하면 유저의 비밀번호를 획득하기 쉽겠다는 생각을 했다. 누가 그런 사이트를 이용하겠는가? 🙄 보안에 대한 지식과 개념이 부족하다고 생각했다. secure cookie, http only cookies 등이 있는 것 같지만 오늘은 http only cookies에 대해 공부하려고 한다. 쿠키 나는 JWT 방식을 이용하여 서버로부터 JWT Token을 받아 쿠키에 저장했다. 쿠키는 서버에서도 생성이 가능하고, 나 처럼 클라이언트에서도 생성할 수 있다. 일단 쿠키가 한번 생성되면 브라우저는 쿠키 정보를 기억하게 된다. 그리고 이후의 모든 ..

콜백큐(Callback Queue) - 콜백큐란 자바스크립트 런타임 환경에서 처리해야하는 명령어를 임시로 저장하는 대기 큐로 비동기적으로 실행된 콜백함수가 보관되는 영역이다. 예를들어 setTimeout에서 타이머 완료 후 실행되는 함수, addEventListener에서 click 이벤트가 발생했을 때 실행되는 함수들이 보관된다. 큐(Queue) - 컴퓨터의 기본적인 자료 구조 중 한 가지로, 먼저 집어 넣은 데이터가 먼저 나오는 FIFO(First In First Out) 구조로 저장하는 형식 - 콜백이 큐(Queue) 형태로 쌓인다. 선입선출(FIFO) 구조이다. 콜백큐는 하나인 것 처럼 보이지만 사실 여러개로 구성되어있다. 🧡Task Queue(Event Queue) 태스크 큐, Microtask..

한번에 여러 개의(5개) 서버 요청을 하고, 모든 요청에 대한 응답을 다 받았을 때, 그 때 화면을 렌더링 하려면 어떻게 해야하냐는 처리에 대답을 하지 못했다. 끙... state를 요청 갯수만큼 만든다고 했는데 정말 비효율적인 대답이었다. (대답하고 속으로 매우 좌절함) 그리고 버스타고 가는 도중 자바스크립트 스터디원 중 한 분이 단톡방에서 promise.all 메서드에 대해서 얘기했는데, 순간 그 질문이 떠올랐다. 유레카! ! ! 아 맞다 프로미스 올..... 그래.... 드림코딩 엘리 인강 들으면서 배웠었지! 비동기의 병렬처리! 대답 못했으면 제대로 모르는 것이므로, 다음번에는 잘 대답하기 위해 오늘의 공부는 promise.all() 로 정했다(. ❛ ᴗ ❛.) promise.all() Promis..

컴포넌트를 사용하는 방식은 두가지이다. 하나는 함수형 컴포넌트이고, 또 다른 하나는 클래스형 컴포넌트이다. 플젝에서는 함수형 컴포넌트만 사용했지만, 클래스형 컴포넌트도 알아두어야 할 것 같아서 "리액트를 다루는 기술"을 다시 보며 한번 정리해보고자 한다. 클래스형 컴포넌트의 선언 방식 class App extends Component { constructor(props){ super(props); this.state = { //state로 지정해 줄 데이터 foodList: ["피자", "치킨", "복숭아", "아이스크림"] } } render() { console.log(this.state); //foodList: ["피자", "치킨", "복숭아", "아이스크림"] 내가 제일 좋아하는 음식 //원하는 ..

오호 WIL을 얼마만에 쓰는거지? ㅎㅎ 매번 써야지 써야지 했는데 결국 한달이나 밀렸다. 꺼이꺼이 다시 열심히 써야지... 이번주는 면접이 있었고, 그래서 멘탈이 조금 음.. 마음이 싱숭생숭했다. 그래도 덕분에 자바스크립트 공부랑 면접 질문은 틈틈히 공부한 것 같다. 이것마저 안했으면 이번주는 WIL 쓸게 없어.... 고마워 자바스크립트 스터디... ☜(ﾟヮﾟ☜) 🧡 ✨배운점 - 알고리즘에서 배운건데 숫자타입을 문자타입으로 바꾸는 방법중에 String 이런 메소드 말고, "" 그냥 빈 문자열 하나 써도 문자열로 바뀐다. "" + 10 + 20 이런식으로 쓰면 30이 아니라 1020이 됨! - ES6에서 등장한 화살표 함수는 단순히 함수를 짧게 쓰기 위함이 아니다!!! this를 정적으로 바인딩 해버린다...

TIL을 쓰는 날짜가 하루씩 밀리는 것은 기분탓이다(ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ) 어찌됬든 일주일에 5번쓰면 되니깐~~ \(@^0^@)/ 껄껄 arrow function을 쓰면서 나는 오 function 키워드 쓰는 시간도 아끼라고 ES6에 좋은 문법이 나왔구나~ 라고만 생각했다 ㅎ 무식하면 용감하고 밝다 ㅎㅎㅎ this 챕터를 스터디 하면서 화살표 함수가 this를 바인딩 하지 않는다고 스치듯이 지나갔는데, 조금 더 구체적으로 알고 싶었다. 화살표 함수에는 this가 없다 함수 내부에서 this는 window로 결정되기 때문에 우리는 this를 바꿔주기 위해 call, apply, bind 메서드를 통해 첫번째 매개변수로 this를 정해줬다. 그러나 ES6에서는 호출된 방식과 상관 없이, 화살표 함수를..

객체형 프로그래밍은 자바스크립트를 공부하면서 조금씩은 봤지만, 함수형 프로그래밍은 자세히 공부한적이 없었다. 비교 영상이나 글은 많이 보았지만, 함수형 프로그래밍의 특성만 조금 더 자세히 알고 싶어서 오늘은 함수형 프로그래밍으로 정했다. 프로그래밍 패러다임? 프로그래머에게 프로그래밍의 관점을 갖게하고 코드를 어떻게 작성할 지 결정하는 역할을 한다. 새로운 프로그래밍 패러다임을 통해서는 새로운 방식으로 생각하는 법을 배우고, 이를 바탕으로 코드를 작성한다. 크게 2가지로 구분한다. 1) 명령형 프로그래밍 - 무엇을 할것인지(What) 나타내기보다는 어떻게 할건지(How)를 설명하는 방식 절차지향 프로그래밍: 수행되어야 할 순차적인 처리 과정을 포함하는 방식(C, C++) 객체지향 프로그래밍: 객체들의 집합..

자바스크립트 스터디를 위한 자료 준비. 이번 챕터는 실행 컨텍스트 중에서 생성 과정에 대해 공부했다. 실행 컨텍스트가 실행할 코드에 대한 환경 정보들을 모아놓은 객체라는 말이 와닿지 않았는데, 콜스택을 직접 그려보면서, 표로 EC(creation phase와 execution phase)에 뭐가 담기는지 그려보니, 식별자(변수 등) 및 this 등이 EC에 담기는구나를 알 수 있었다. 그리고 자바스크립트의 콜스택은 실행 컨텍스트가 어떻게 담기는지, 자료 구조상 함수가 쌓이고 가장 top에 있는 코드부터 실행되고, 결국 전역 컨텍스트가 사라지면서 어플리케이션이 종료되는 과정까지 그림으로 그려보았다. 호이스팅은 var의 선언부과 함수 선언식을 통째로 끌어올리는 것이다. 함수의 실행 컨텍스트가 생성되는 생성단..