yunicornlab

예제 코드 중에, 배열 타입인 상태 변수에서 하나의 요소(처음 또는 마지막 요소)를 제외한 나머지 요소들로만 업데이트하고 싶을 때shift나 pop을 사용하거나 slice를 사용했었는데, 구조분해할당으로 더 간단한 방법도 알게되었다.const [del, ...remain] = imgSet;이렇게 두고, setImgSet(remain) 이렇게 나머지만 넣어주면 된다. React Hook - useEffectuseEffect의 첫 번째 인자에는 콜백함수가 들어가고, 두 번째 인자에는 의존성 배열이 들어간다.콜백함수에는 먼저 컴포넌트가 생성될 때(또는 의존성 배열 인자가 변경될때마다) 실행할 로직을 작성한다.그리고 return 문에는 컴포넌트가 삭제될 때 실행할 로직을 작성해준다.이 return문에 작성한 함..

오늘 배운 건 여러 번 복습해야겠다는 생각이 들었다. 특히 Form 구성하는 연습을 많이 해보아야 겠다. 저번 시간에 만든 starter를 이용해서 새 프로젝트를 생성해보았다!https://github.com/Attainy/react-ts-tailwind-starter GitHub - Attainy/react-ts-tailwind-starter: React + Vite + TypeScript + TailwindCSS + Tailwind-Merge 기본 세팅React + Vite + TypeScript + TailwindCSS + Tailwind-Merge 기본 세팅 - Attainy/react-ts-tailwind-startergithub.commkdir 폴더이름cd 폴더이름code .git clone ..

한 번 배우고 프로젝트도 해봤으니까 어느 정도 알고있다고 생각했는데, 강사님께서 꼼꼼하게 알려주시고 팁도 많이 알려주셔서 굉장히 새로운 기분으로 듣게 되고, 내가 몰랐던 부분들을 채워가고 있어서 너무 좋았다.오늘은 Children과 조건부/반복/이미지 렌더링하는 법에 대해 배웠다. ChildrenReact에서는 컴포넌트에 데이터를 전달할 때 props를 사용할 수 있는데, children은 컴포넌트의 props로 전달되는 특수한 prop이다.props는 어느 정도 전달할 수 있는 타입이 한정되어있는데, children은 전달할 수 있는 데이터가 더 자유로워서 여러 요소나 컴포넌트도 전달할 수 있다.children을 사용할 땐 React.ReactNode로 타입을 지정해주면 된다. HTML Form 관련 ..

오늘은 (연습용) 프로젝트를 새로 시작하고 환경 설정한 후에 스타일링하는 법에 대해 배웠다. Vite로 React 프로젝트 시작하기React 프로젝트 시작할 때 이제는 Create React App을 사용하지 않고 Vite를 사용하는 것이 좋다. Vite를 사용해야 하는 이유는 https://ko.vitejs.dev/guide/why ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.dev vite로 프로젝트를 시작하려면 npm create vite@latest 폴더이름(새 폴더 안만들고 현재 폴더에 설치하고싶으면 마침표(.) 붙이기 이후 npm install 까지 입력하면 패키지들이 설치가 된다. 참고로, npm install 패키지이름 이렇게 하면 지정한 패키지가 설치되는 것이고 npm i..

오늘은 TypeScript, 패키지, 리액트 기본 문법에 대해서 알려주셨다. TypeScript - interface vs. type Alias인터페이스는 자동 병합되는 특징이 있어서, 같은 이름으로 여러번 선언해도 에러가 발생하지 않고 자동으로 병합된다.그리고 extends 키워드를 사용해서 상속도 가능하다.하지만 type은 두 번 이상 같은 이름으로 선언하면 안 되고 extends 키워드도 사용할 수 없다.대신 & 연산자를 사용해서 병합할 수는 있다. (ex. TUser & TJob)그런데 interface로 선언한 변수에 마우스를 올리면 아무 정보도 나오지 않지만,type으로 선언한 변수에 마우스를 올리면 type의 구성을 자동으로 보여주는 편리함이 있다.interface는 이름 첫 글자를 I로 두..

[유데미X웅진씽크빅X스나이퍼팩토리] 프론트엔드 프로젝트 캠프 : React 2기사전직무교육 1일차 강의 내용이다.오늘은 개발환경 구축과 ES6에서 추가된 기능과 TypeScript의 기본 문법에 대해 배웠다.강의내용을 복붙하기보다 딥다이브를 참고하면서 적어보려구 한다. ES6 - (1) let과 const이제 var 키워드는 쓰지 않는다! (코딩테스트에서는 본 것도 같지만) 현업에서 var로 도배되어있다면 빨리 탈출하기를 권하셨다.그럼 var는 대체 문제가 무엇일까?문제의 키워드는 #중복선언가능 #함수레벨스코프 #호이스팅이다.먼저, var 키워드는 선언을 여러번 할 수 있다.좋은 코드란, 개발자가 의도한대로 동작하는 코드이다. 하지만 중복선언이 허용되면 먼저 선언된 값이 바뀌어버릴 수 있다.그리고 var..

아니~~~!!? 교육비를 내기는 커녕 훈련수당도 주고 실제 기업에서 요청하는 프로젝트를 해볼 수 있는 과정이라니!! (광고 아닙니다)그것도 단기속성으로 시간낭비 없이 6주만에 끝낼 수 있는 좋은 교육과정을 지인이 추천해주어서 신청하게 되었다.지원서 작성과 면접을 보고 합격을 해서 8/19(월) 오늘부터 시작하게 되었다! 이 교육과정(정확히는 일경험 프로그램)은 크게 2개의 Part로 나눠진다.처음 2주동안은 평일 9시부터 18시까지 TypeScript와 React에 대해 필수적인 문법을 배우는 사전직무교육시간이다.오늘 OT 진행 후에 바로 강의가 시작됐다!유투브 수코딩 채널을 운영하시는 김기수 강사님께서 진행해주셨는데, 설명도 꼼꼼하게 잘 해주시고 연습도 충분히 하게 해주셨다. 다음 Part는 프로젝트 ..

모던 자바스크립트 딥다이브 책에 있는 실행 컨텍스트를 공부하면서 예시로 나온 코드 일부를 Gif로 직접 만들어봤다. 실행 컨텍스트 동작 애니메이션  실행 컨텍스트 동작 세부예시 코드에는 전역 스코프에 선언된 변수 x, y와 함수 foo가 있고, 함수 foo 안에 지역 변수 x, y가 선언되어있다. 코드를 실행하면, 인터프리터가 코드를 한줄 한줄 실행하기 전에, 먼저 "평가" 단계를 거친다.큰 순서로는 "전역 코드" -> "함수 코드" 이고, 매 단계마다 "평가 단계"와 "실행 단계"로 구분되어 진행된다.평가 단계에서는 선언된 변수나 함수를 먼저 렉시컬 환경에 등록하고 (그렇기 때문에 호이스팅이 발생한다.)실행 단계에서는 인터프리터가 코드를 한 줄 한줄 실행한다. 항상 전역 코드 부터 시작한다. 그래서 "..

1) 취지의도 : 직장인처럼 주5일 하루에 8시간을 공부시간에 투자해보기혼자서 하루에 8시간을 취업준비에 투자해보려고 노력하던 중에, 점점 지치는 게 느껴짐책임감을 가지고 혼자가 아니라 함께 공부한다면 더 부지런하게 움직일 수 있는 힘이 생길것이라 생각해서 개설하게 됨일단 2주 진행해보고, 괜찮으면 2주 단위로 늘릴 예정2) 스터디장약 1년의 AI 개발 업무 경험이 있고, 프론트엔드로 전향하게 되어서 중고 신입의 위치부트캠프는 5월에 수료했지만, 아직 취업 준비 중8월 중순 이후부터는 공격적으로 서류 접수를 할 예정그동안은 띄엄띄엄 지원하긴 했지만, 서류 합격은 어느정도 되는 상황인데, 코테에서 광탈해버려서 코테에 집중하고 있는 상황수료 후 지금까지의 약 3달동안 수많은 시행착오를 겪음사실 지금 취업 시..

디스코드 서버를 개설하고, 아래 사진과 같이 채널들을 만들었다.각각 목적이 있는 채널들이다. 정보 채널📌 공지사항 : 스터디 운영과 관련된 내용 게시📌 자기소개 : 스터디 멤버들의 간단한 자기소개 글 채팅 채널🗣️ 대화 : 자유롭게 대화하는 채널📚 취업정보 : 테크 이슈나 기업 소식 및 취업과 관련된 팁 등의 정보 공유하는 채널🛠️ 기술 : 개발에 필요한 기술 관련 내용을 공유하는 채널✔️ 인증 : 하루가 끝날 때 기록 시트에 활동을 체크하고 캡쳐를 올려서 인증하는 채널🔖 메모 : 공부하는 중에 자유롭게 메모장처럼 사용하는 채널음성 채널🖥️ 모각공 : 스터디 시간에 사용할 채널🌱 휴식 : 자유시간에 사용할 채널🐾 서브 : 질문에 대한 답변을 해주는 등의 서브 공간 채널