에이미의 성장기록

TIL에 대한 규칙을 정했다. (ㅋㅋㅋㅋㅋㅎㅎㅎㅎ) 1. 너무 바쁘거나 힘들어서 skip 하는 날은 그냥넘기는 것으로 2. 그리고 회사에서 쓰고 집에 가자... 집 가서 노트북 여는 것이 참 힘들구나 껄껄 여튼 오늘은 회사 출근 5일차이다. 정말 정말 못하는 나를 혼내지 않으시는 사수님과, 학원 동기가 비슷하게 입사했고, 계속 챙겨주시고 알려주시려는 직원분들이 있어서 5일을 잘 견뎌냈다(?) 회사의 깃 코드를 보면서 ㅠ 개발 천재들이 짠 코드를 구경했는넫 와 나 이거 짤 수 있나 하는 생각도 들고, 이런 코드를 보고 배울 수 있음에 감사해야겠다는 생각도 들었다. 이것저것 재밌겠다 싶은 기능들이 있는데 망칠까봐 섣불리 먼저 해보고 싶다고 말하기가 망설여지는 하루하루다. 처음에 회사를 고를때 메타버스 관련된..

사실 무엇 하나를 특정하게 공부했다기보다는 자바스크립트를 활용한 스크롤 이벤트 등을 만들었다. 구글링하면 나오는 코드들이 많지만 온전히 이해한 코드를 바탕으로 코드를 계속 곱씹으며 짰다. 제일 싫어하는 빨간 에러 계속 나오고 ㅎㅅㅎ!! 정말 신기하게 점심먹고 일하면 저녁이고, 저녁먹고 시간보면 10시가 훌쩍 넘어있다..! 여튼 오늘의 느낀점은, 내게 주어진 일에 최선을 다한 결과물을 만들고, 주어진 태스크 외에도 다른 코드에도 관심을 가지자! 특히 오늘 다른 분들이 짜신 코드를 보고 와 이렇게도 짤 구 있구나.. 이건 무슨 자바스크립트 문법일까ㅠ 천재인가? 하고 생각했다. 나도 언능 궤도에 오르고 싶ㄷ ㅏ.. 차근차근 하면 되겠지? “신입은 원래 못한다” 라고 리액트 튜터님이 말씀해주셨다,, 조금 위안이..

TIL을 모바일로 처음 써본다... 퇴근하고 집에 오니 벌써 시간이 이렇게 되어서 노트북을 켤 힘이 없다(는 핑계)ㅋㅋㅋㅋㅋ 오늘 하루종일 앉아있어서 소화가 안되는 것 같아 퇴근하고 동네 공원을 4바퀴 정도 걸었다. 더 걷고싶었지만 덥기도 하고 내일 일찍 출근해야할 것 같아서 들어왔다. TIL을 앞으로 밀릴것 같다는 예감이 들어서 그날그날의 일기나 아니면 배운거 하나라도 기록하는 느낌으로 써야할 것 같다. 오늘은 브랜치의 종류와 pull/push 그리고 merge의 차이를 알게되었다. 플젝할때 마스터 브랜치 하나 만들어서 git add, commit, push, pull 만 했었는데 브랜치가 많아서 당황스러웠다. 괜히 남의 브랜치에 잘못 push 할까봐 git 명령어를 아주 조심스럽기 입력했다. git ..

오늘은 처음으로 출근했다. 웹스톰을 사용했고, 맥북을 처음으로 써봤다. 그램만 쓰다가 맥북쓰니까 너무 헷갈렸다. 근데 맥북 터미널 진짜 편하다. 왜 개발자들이 맥북쓰는지 알겠다ㅠㅠ 구동환경에 조금만 더 익숙해지면 편할 것 같았다. 오늘은 맥 조금 더 만져보고 git 개념 공부좀 해야겠다. 명령어 위주로 알았는데 깃의 개념을 아는 것이 중요하다고 하셨다. 그래서 오늘 공부는 git 개념에 대해서 좀 딥하게 공부해보고, 남는 시간에는 코드를 쭈욱 따라서 읽어봐야겠다!!!!!!!! 그리고 오늘 맥 초기화 해봤는데, 엄청 헤맸다ㅠㅠ이제 완벽하게 할 수 있음. 여기에만 시간을 엄청 쏟았다 아까버ㅠㅜ - branch 브랜치는 독립적인 어떠한 작업을 진행하기 위함이다. 각각의 브랜치는 서로 다른 브랜치에 영향을 끼치..

오늘 공부는 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: ["피자", "치킨", "복숭아", "아이스크림"] 내가 제일 좋아하는 음식 //원하는 ..

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