4기

[React] Key

결, 꼬재랑 함께하는 레벨2 방학 스터디 Key React에서 key는 컴포넌트 배열을 렌더링할 때 어떤 원소에 변동이 있는지 알아내기 위해 사용하는 값입니다. 따라서 key는 각 원소에 안정적인 고유성을 부여한다. key는 element를 만들 때 포함해야 하는 특수한 문자열 attribute이다. 다음과 같이 코드를 작성하면 React는 에러를 노출 시킨다. element에 고유한 key 속성 값을 넣으라는 에러 메시지가 나타나는데, 이때 index 값을 key 속성값으로 대입하면 에러 메시지는 나타나지 않으나 다음과 같은 문제가 발생한다. key값을 배열의 index로 하면 발생하는 문제! React 렌더링에서 재조정 시, 컴포넌트는 key를 보고 해당 element를 비교를 하는데 배열이 재배열 ..

자바스크립트에서 객체 지향을 하는 게 맞나요?

우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. https://yozm.wishket.com/magazine/detail/1396/ 자바스크립트에서 객체 지향을 하는 게 맞나요? | 요즘IT 이번 글에서는 객체지향 프로그래밍에 대해 이야기를 해보려고 합니다. 그리고 자바스크립트의 객체지향은 일반적인 객체지향 프로그래밍과는 어떻게 다른지 그리고 Javascript에서는 객체지향 yozm.wishket.com 우아한테크코스 슬랙 fe-4기 잡담 채널에 로이님께서 좋은 글을 공유해 주셨다. 해당 글을 읽고, 내 생각을 써보려고 한다. 자바스크립트에서 객체 지향을 하는 게 맞나요? 라는 제목에 끌려 오신 분들은 위에 있는 링크를 들어 가시는 걸 추천 드립니다. 목차 내가 고민 했던 객체지향 ..

우테코 4월 3주차 주간회고

우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. 지난주 회고 없음 이번주 회고 Facts (사실, 객관) 오프라인 서울로 상경 레벨2 React 시작 Feelings (느낌, 주관) 그 동안 방치되어 있던 자취방을 만나니 본가로 내려가고 싶다.(집에 가고 싶다) 레벨2에서는 React로 미션을 한다. 작년에 React로 일을 했지만 미션을 하면서 만난 React는 내가 알던 React가 아닌거 같다. 그냥 구현하기 위해 React를 사용을 했기 때문에 크루들과 토론을 할 때면 렌더링이 이렇게 된다고? Hook이 이거라고? 이렇게 되는 거라고? 이런 생각이 많이 든다. 공부를 많이 해야 한다는 압박감이 엄청나게 든다. 크루들과 대면으로 개발 관련 토론을 하니 빠르게 지식을 습득하는 장점..

우테코 3월 4주차 주간회고

우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. 지난주 회고 우테코 3월 3주차 주간회고 우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. 지난주 회고 게으름에 깜빡함...없음 이번주 회고 Facts (사실, 객관) 코어자바스크립트 클로저 학습 코어자바스크립트 this kit-developer.tistory.com 이번주 회고 Facts (사실, 객관) 타입스크립트 학습 typescript exercise 9까지 클리어 자판기 미션 step1 데이터 바인딩 개념 학습 Cascading Style Sheets Feelings (느낌, 주관) 이번 자판기 미션은 타입스크립트를 사용해야 한다는 요구 사항이 있다. 예전 부터 들어만 봤던 타입스크립트를 이번에 써본다길래 많은..

우테코 3월 3주차 주간회고

우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. 지난주 회고 게으름에 깜빡함...없음 이번주 회고 Facts (사실, 객관) 코어자바스크립트 클로저 학습 코어자바스크립트 this 절반 학습중 나만의 유튜브 강의실 미션 진행 클로저 학습 후, 토스트UI 코드에 적용함 코드 리뷰 모임 Feelings (느낌, 주관) 솔직히 우테코... 노가다 뛰는 느낌이다. 미션을 해결 하기 위해 코드를 작성하는 느낌 이랄까, 내가 성장을 하는 느낌이 안 드는 순간이 많았다. 난 작년에 현업에서 일을 했기 때문에 이런 생각이 드는 거라고 생각한다. 내 자신이 성장하고 있다는 만족감을 얻기 위해 책을 읽는 독서 모임, 코드리뷰 모임을 하는데 드디어 성장을 하고 있다는 느낌을 받았다. 자바스크립트을 했다면 ..

우테코 2월 3주차 주간회고

우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. 지난주 회고 없음 이번주 회고 Facts (사실, 객관) 보이는 라디오 발표 git 강의 시청 Level1 자동차 경주 미션 마무리 미션 코드 리뷰 반영 E2E 테스트 코드 학습 Cypress 학습 자바스크립트 비동기 처리 학습 하루에 정한 일정을 소화하지 못함 주말에 친구랑 술먹음 Feelings (느낌, 주관) 많은 일정 속에서 보이는 라디오를 발표 한다는 것은 시간적으로 여유가 없었지만 막상 하다보니 즐겁고 딱딱하게 느껴졌던 우테코 생활이 한껏 부드러워졌다. git 명령어는 너무나 다양하구나! 코드 리뷰를 하면서 네이밍은 너무나 어렵고 정말...내 코드가 부끄럽다. 리뷰를 해주신 리뷰어 분께 감사할뿐! Cypress를 학습하고 E2..

E2E테스트, Cypress, TDD

안녕하세요 우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고있습니다. 내가 만든 애플리케이션은 잘 작동 하는 걸까? 그동안 프로그램을 개발하면서 테스트 코드를 작성하고 테스트 프레임워크를 사용한 적은 없었습니다. 이번에 우테코에서 E2E테스트에 대해 학습 하면서 테스트의 중요성과 테스트 프레임워크의 한 종류인 Cypress에 대해 간략히 기록해 보겠습니다. E2E 테스트 E2E(End to End)테스트는 사용자의 입장에서 테스트를 하는 것을 말한다. 사용자가 버튼을 클릭 할 경우, 올바른 동작이 작동 되는지 등을 테스트한다. 왜 E2E를 해야 하나요? E2E테스트를 하면 사용자의 입장에서 동작을 생각하게 되므로 자연스러운 사용자 경험을 제공할 수 있다 테스트를 자동화 함으로써 테스트하는 시간을 ..

자바스크립트 비동기 처리

안녕하세요 우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고있습니다. 자바스크립트에서 비동기 처리에 사용되는 callback함수, Promise, async/await에 대해 간단히 알아본다. 동기식(Synchronous)? 비동기식(Asynchronous)? 동기식은 작업 실행의 순서가 정해져 있어 순서대로 실행되는것을 말한다 console.log('1') console.log('2') console.log('3') /* 출력 1 2 3 */ 비동기식은 작업 실행의 순서에 상관없이 다음 순서의 작업이 실행되는것을 말한다. console.log('1') setTimeout(()=>{ console.log('2') },1000) console.log('3') /* 출력 1 3 2 */ 자바스크립트 ..