슈슈코딩

[카테캠] 2025 카카오테크캠퍼스 3기 프론트엔드 트랙 회고

슈슈버거 — Wed, 4 Feb 2026 12:22:51 +0900

부트캠프가 끝난지는 3개월 정도가 지났지만 저장함에 보관해두었다가 이제라도 공개해보는 회고.

<진행 단계>

1단계: 온라인 학습 위주

2단계: 모각코, 과제 시작

3단계: 팀 프로젝트

카테캠은 크게 이렇게 3단계로 나누어 볼 수 있고 각 단계별로 내가 느낀 주요 활동은 위와 같다.

1단계

1단계 때는 앞으로 남은 단계들을 진행하기 위해, 팀원들과 제대로 협업하기 위해 내가 갖추어야 할 기본/심화 역량을 가르쳐주는 느낌이었다.

Javascript 부터 시작해서 React 에 대한 개념들을 정해진 기간 내 자율적으로 들으면 되는 방식이었다.

처음에는 '아 학교 다니면서 자율적으로 강의 듣는 거면...내가 좀 나태해지지 않을까'하는 나름의 걱정을 가지고 있었는데

강의 사이트에 들어갈 때마다 내 진도율과 다른 사람들의 평균 진도율을 비교해서 보여주는 것 덕분에

'평균보다 앞서고 싶다'라는 욕심이 생겼고 혼자서도 꾸준히 강의를 들을 수 있는 동력이 된 것 같았다.

무엇보다 React에 대해서 제대로 강의를 들어본 적이 없었는데 이번 기회를 통해 기존에 내가 가지고 있던 경험인 html&flutter에서 React까지 확장했다는 점이 아주 좋았다.

영상들을 듣다보면 중간중간에 토의/실습이라는 카테고리가 붙어서 미니 과제 느낌으로 활동하는 것들도 있었는데

부담이 가지 않는 수준이라서 무리 없이 들을 수 있었던 것 같다.

마지막 즈음 가서는 팀원들과 직접 만나서 식사도 하며 마무리해서 좋은 경험이었다.

2단계

카테캠에 대해서 물어볼 때면 늘상 들어왔던 바로 그 말 "2단계부터가 진짜야!"

2단계는 방학 기간을 포함해서 진행이 되었다.

다들 떨어져 있어서 대면으로 모이지 못할 때 스터디를 하기 좋은 방법인 "모각코"를 2단계에서 실행했다.

모각코의 경우, 충남대학교에서 방학마다 하던 경험이 있었기 때문에 방법/집중력 부문에서는 문제를 겪지 않을 수 있었다.

4명으로 조가 이루어져서 정해진 시간에 zep라는 메타버스 플랫폼에서 만나 각자의 공부를 진행하고 학습 일지를 기록하는 방식이다.

조원들은 각각 자신의 역할을 열심히 수행하게 되는데 나의 경우 "메이커"라는 역할을 맡았다.

메이커란, 노션에 있는 각종 양식들의 작성을 주로 담당하는 역할이다. 쉽게 말해 서기? 느낌이다.

개별로 학습 일지를 작성할 텐데 최종적으로 조원들의 학습 일지를 모두 모아서 팀의 주차별 보고서를 작성하는 업무의 비중이 가장 컸다.

팀원들이 모인 사진을 찍거나 팀원들이 빠뜨린 부분에 대한 작성 요청을 해야 했기에 모든 팀원들과의 지속적이고 잦은 소통을 담당했다.

이 과정에서 사소한 부탁일지라도 서로의 기분을 상하지 않게 할 수 있도록 소통하는 방법에 신경쓰며 활동했다.

그 덕분일까, 팀 내에서도 그리고 다른 팀들에게서도 '이 팀 메이커 누구에요? 너무 잘하는데?'라는 칭찬을 들을 수 있었다.

이런 환경이었다. 채팅이나 음성으로 서로 모르는 것을 물어보거나 알면 좋은 팁들을 공유해주는 시간을 가졌다.

2단계에서는 특강도 자주 들었다.

모각코가 오후에 진행되는 활동이었다면 특강은 저녁에 진행되었는데 zoom을 통해 실시간으로 참여하며 진행했다.

React와 같은 이론적인 부분에 대한 특강, 현업자들이 얘기해주는 실제 이야기들까지 들어볼 수 있어서 소중한 경험이었다.

이때 항상 부산대의 어떤 분이랑 나랑 막 새벽 시간대에도 ZEP에 접속해서 공부하고 그랬던 기억이 ㅋㅋㅋㅋ

같이 하는 사람이 있다는 게 생각보다 큰 동기부여가 되더라.

이때부터는 GIT을 활용해서 코드 작업을 하는 과제도 시작되었다.

주차별로 과제가 제공되면 시간 내에 작업을 해서 GIT에 올리고 담당 멘토님께 리뷰를 요청드린다.

그러면 멘토님께서 피드백을 남기시고 알려주시는데 그 피드백들에 대해서 내 의견을 남기기도 하고 내가 잘못한 부분들이 있었다면 더 나은 코드로 개선을 해서 다시금 제출하기도 했다.

리뷰를 하며 여쭤보고 싶은 게 있었다면 궁금증을 해소할 수 있기도 했다.

멘토님들께서 바쁘신 와중에도 빠짐없이 리뷰를 해주셔서 감사했고 신기했다.

그 바쁜 와중에 담당하는 학생이 2,3명씩은 있었을텐데 그 모든 학생들의 코드를 정말 세세하게 읽고 매우 자세하게 피드백을 남겨주셔서 앞으로도 이 피드백들을 다시금 돌려보며 작업해 나갈 것 같다는 생각이 들었다.

실제로도 많이 돌려보기도 했다.

항상 과제가 나오면

- 내가 해야 하는 것이 뭔지

- 그걸 하기 위해서는 어떤 기능이 필요한지

- 그 기능을 구현하려면 어떤 컴포넌트에 접근해야 하는지

- 해당 컴포넌트에서 어떤 부분에 코드를 작업해야 할지

이 순서로 작업을 구체화시키고 때로는 AI의 도움을 받으며 코드 작업을 해나갔다.

그 과정에서 예상치 못한 부분에서 코드 작업에 애를 많이 먹어서 시간에 대한 압박을 느끼며 최종 버전을 올리기도 했다.

다행히 다음 주차로 연장되는 경험은 하지 않을 수 있어서 다행이었고 다시 한 번 시간 관리의 중요성을 느낄 수 있었다.

3단계

카테캠의 최종 단계인 3단계가 막이 올랐다.

한 마디로 말하자면 앞선 1, 2단계에서의 경험/학습을 총집합시키는 느낌이었다.

지금까지는 FE는 FE끼리 소통하고 BE는 BE끼리 소통하는 느낌이었는데 이번 3단계에서는 FE + BE가 협력해서 하나의 프로젝트를 완성해내는 것이었다.

우리 팀의 경우 FE 3명, BE 3명으로 구성되었고 역시나 팀이 구성되면 각자가 맡아야 할 역할이 있다.

나의 경우 다시 한 번 "메이커"를 맡았다.

메이커를 맡은 이유는 단순했다.

프로젝트의 처음부터 끝까지의 과정을 기록해보는 것

그게 내가 해보고 싶은 거였다.

물론 학교를 다니면서 친구들, 선후배들과 하는 프로젝트 역시 기획부터 개발까지 경험해보긴 했다.

하지만 조금 더 전문적인 지식과 경험이 생긴 지금의 내가 진행하는 프로젝트는 뭔가 다를 것 같았다.

또 FE만 공부하던 나에게 BE와의 협업이라는 것은 매우 흥미로운 유혹이었기에 프로젝트의 과정을 기록하며 복기할 수 있는 메이커를 맡고 싶다고 어필하였고 담당하게 되었다.

총 14주차의 일정이 진행되었고 가장 굵은 행사를 꼽아보자면 "아이디어톤", "최종 발표회"라고 볼 수 있다.

아이디어톤의 경우 모든 대학교가 한 자리에 모여서 진행되었고 각자의 팀이 선정한 아이디어, 주요 기능, 사용할 기술 스택 등을 발표하는 자리였다.

무박 2일로 진행되었던 행사

팀원이 모여 사전에 발산했던 아이디어를 발전시키는 과정이 이어지고 그 과정에서 2단계 때 만나뵈었던 멘토님들, 카카오에 재직하고 계시는 현업자 분들의 시선에서 피드백을 반복해서 받아보았다.

'이거 실제로 나오면 저도 쓸 것 같은데요' 라고 긍정적인 피드백을 주시기도 하고

'타겟팅을 이렇게 한 이유가 무엇일까요?' 라고 우리가 한 번 더 생각해볼 수 있는 피드백을 주시기도 하고

'이거 기술적으로 어려울 걸' 라고 매우 현실적으로 접근하는 피드백을 주시기도 했다.

모든 종류의 피드백을 수용하면서 빠짐없이 기록해나갔고 그 피드백들을 바탕으로 우리가 수용할 것/지금은 고려 대상이 아닌 것 등을 구분하며 착실하게 작업을 진행해나갔다.

그 결과 아이디어톤에서 전체 팀 중 우수상이라는 쾌거를!!!

이 덕분에 우리 팀이 조금 더 신나게(아니면 조금 더 간절하게) 실제 코드 작업에 들어갈 수 있었던 것 같기도 ㅎㅎ

팀 내 테크리더들의 주도하에 매주 고정적인 회의뿐만 아니라 유동적인 추가 회의까지 진행해 나갔고

프로젝트 진행 보고서를 나와 BE 메이커의 주도하에 체계적으로 적어나갔다.

중간중간에 진행되는 멘토링 역시 일지화 시켜서 우리가 어떤 것을 물어봤는지, 어떤 답변과 조언을 받았는지를 기록해두고 반복해서 볼 수 있었다.

점점 프로젝트가 서비스화되어서 실체가 보이기 시작할 때마다 설레는 감정이 들었다.

우리가 상상하던 것들이 실제로 누구든 이용할 수 있는 서비스가 되어간다라는 것이 확 체감되자마자

'아 이래서 내가 개발을 좋아했지'라고 다시금 떠올릴 수 있었다.

BE와 서로 팀 디코를 통해서 거리낌 없이 소통했다.

- 지금은 무엇을 하고 있는지

- 요청드리고 싶은 것이 있는데 이것은 언제까지 가능할지

- 이런 것을 하고 싶은 생각이 있다

- 이런 부분은 조금 후순위로 미뤄도 될 것 같다

되게 다양한 것들로 소통하기도 하고 API 요청 단계에서는 원하는 API와 그에 대한 응답 구조를 FE인 우리가 적어서 BE에 전달해주면 BE 측이 반영해주기도 했다.

API에 대한 구성 작업을 우리가 다같이 진행했었기 때문에 차후에 추가적으로 API에 대한 요청이 필요하더라도 수월하게 가능했던 것 아닐까 싶다.

서로에 대한 이해도가 이래서 중요하구나를 체감했달까

정말 하루종일 노트북/휴식/노트북/휴식 이 루틴으로 반복하며 살다보니 어느덧 끝이 다가왔고

최종 발표회의 수상은 전체 대학 통합해서 진행했고 발표는 각 학교별로 진행했다.

충남대학교에서 다른 팀들의 발표를 듣는데 우리와 사용한 기술이 비슷한 팀도 보이기도 하고

기술보다는 기획에 중점을 두어서 발표하는 팀도 있고

기획보다는 기술에 중점을 두어서 발표하는 팀도 있어서 (우리) 다양한 발표 유형을 볼 수 있어 좋았다.

우리 학교의 발표가 끝나고 팀원들끼리 수고했다 수고했다 인사를 나눈 뒤 최종 결과를 기다렸다.

우리 학교가 제일 처음 발표한 학교였기에 최종 결과에 대한 기대감을 크게 가지지 않고 있었는데 이게 웬일이야!!

우수상을 탔다!!!

아이디어톤에 이어서 최종 발표회에서도 우수상을 타게 되었다!!

프로젝트를 할 때 중요한 건 아이디어도 중요하지만 사람이 제일 중요한 것 같다고 느끼게 되었다.

팀원들 모두가 한 명도 대충하는 사람 없이 필요하다면 새벽까지 함께하며 서로의 역할을 수행하고 도움을 주고받았다.

작업을 분배할 때도 빠지지 않고 각자가 할 수 있는 최선을 다하고 서로 소통하며 작업 내용과 범위를 공유하기도 했다.

그 덕분에 일정이 밀리지 않았고 우리가 지금 어디까지 했는지 앞으로 뭘 해야 하는지가 공유가 될 수 있었던 것 같다.

거의 1년에 가까운 시간 동안 이론적인 능력도 향상시켰지만 협업에 대한 능력이 정말정말 크게 향상된 것 같다.

부트캠프라는 것을 처음 접해보는 것이었음에도 불구하고 모든 단계가 체계적으로 마련되어있고 문서 작업도 템플릿을 기반으로 수월하게 작업할 수 있었다.

활동하는 도중도중에 궁금증이나 '아 이거 잘 모르겠는데'라고 생각이 들면 언제든 쿠키즈를 도와주는 운영진 분들, 멘토님들이 계셨기에 기간 동안 번아웃이나 의욕 저하 없이 '나도 열심히 해야겠다'라는 생각을 가지고 임할 수 있었다.

너무나도 좋은 경험이었고 또다른 누군가가 '나 카카오테크캠퍼스 고민중이야'라고 묻는다면 한치의 망설임도 없이

"무조건 해!!! 너 이거 안 하면 진짜 후회해."라고 말할 수 있을 만큼 나에게 너무 소중한 경험이자 기억으로 남을 것이다.

[카테캠] 2회_OT

슈슈버거 — Wed, 9 Apr 2025 15:10:41 +0900

OT를 진행했습니다.

커리큘럼, 소통 사이트, 강의실, todo 등 굉장히 다양한 내용이 있었고요

익숙한 얼굴들도 몇몇 보여서 반가웠습니다.

팀 구성도 완료되었습니다. 아는 이름이 좀 보이네요. 휴 다행이다

기대가 되네요.

열심히 해야지

[카테캠] 1회_합격했다

슈슈버거 — Wed, 9 Apr 2025 15:09:18 +0900

제가 카테캠에 붙었습니다 크흡

붙을 수 있을까 내심 조마조마했는데 다행히도 붙었습니다

카테캠 지원부터 자소서, 코테까지 심리적으로 물리적으로 많은 도움을 준 언니에게 감사를 표현하고 싶다.

정말 열심히 해야지

다이어리도 받았겠다 거기다가 꼼꼼히 기록해야겠다

[2024~2025 동계모각코] 6회차 결과

슈슈버거 — Mon, 17 Feb 2025 16:22:50 +0900

52강

변수를 이용해 화면에 보일 내용을 그때그때 값을 다르게 저장해줄 수 있음

ui 업데이트 시 리액트에 의해 재평가되어야 함 >> 이게 감지되면 업데이트 될 거임

기본적으로 리액트는 코드를 한 번밖에 실행하지 않는것을 반드시 염두에 두기

리액트는 각각의 컴포넌트 함수를 볼때마다 실행 > >버튼이 4개면 4번 실행

컴포넌트 함수가 재실행되어야 함을 알려줄 방법이 필요함 >> 상태

53강

상태

import { useState } from ‘react’;를 통해 변수를 추가함

그후 App() 에서 useState();를 통해 호출 (반드시 함수의 최상위에서 호출되어야 함)

내부 함수 중첩, if, loop문 사용 불가

selectedTopic : 현재의 스냅샷 (초기값이 저장됨)

setSelectedTopic : 항상 함수임(리액으에서 제공, 업데이트 위함)

컴포넌트 함수 다시 실행해야 됨을 알려줌

이러고 인제 handleSelect()함수 안에다가 이걸 넣어주면 됨!

버튼 누를때마다 콘솔에는 예전값이 뜸

상태 업데이트 함수 부를 때 컴포넌트 함수가 실행이 다시 되는데 이게 다 끝나야 새로운 값이 저장이 된다. 그래서 console.log에는 여전히 예전 값이 뜨는거다

54강

역시 data.js에 저장된 것을 들고옴

식별자가 객체와 일치해야 함을 주의하며 사용하기

EXAMPLES[selectedTopic].title 이렇게 사용함

콘솔에 오류 ( 처음 시작할 때 유효값이 없음) >> 유효값 지정으로 해결

55강

조건적 내용 출력

주제를 골랐을 때만 출력하게 하고 싶음 그렇지 않았을 때의 기본값 설정

동적인 내용 출력 위한 삼항 연산자 사용
- 선택한 주제가 없을 경우 랜더링 되는 경우가 정해짐
div 전체 보여주는 것일수도
두 개의 동적인 부분 사용하는 것도 방법임
- && 기호를 사용해서 else의 내용을 없애는 것도 하나의 방법임
변수 사용
- tabContent를 만들어서 기본 상태의 문단을 저장한다.
- if문을 실행해서 selectdTopic에 따라 div의 내용을 저장해주는 등 작업을 수행한다.
- 이것은 함수 상단에서
- 그러면 div에서 tabContent해놓으면 알아서 보이겠지

56강

css 스타일링 및 동적 스타일링

tabButton.jsx에서 className=”active”을 설정해준다.

이게 버튼이 활성화되었는지 여부나타냄

이걸 동적으로 설정해야 함

isSelected와 같은 변수를 통해서 active 여부를 구분할 수 잇도록

삼항연산자 방식 사용 > 속성의 조건부 출력 가능

57강

list 동적 출력

자동으로 배열에 있는 항목에 맞춰 출력하게 하기!!

배열.map을 통한 함수를 사용하면 자동으로 배열의 내용을 받아오나 봄

여기의 실행 함수 부분에 <CoreConcept로 작성두었던 아까의 목록 코드를 넣으면 됨

key의 여부에 따라 경고가 보이고 안 보이고가 다름

[2024~2025 동계모각코] 6회차 목표

슈슈버거 — Mon, 17 Feb 2025 16:22:20 +0900

Chap 3 상태 학습 및 마무리 회고를 하고자 한다.

[2024~2025 동계모각코] 5회차 결과

슈슈버거 — Mon, 3 Feb 2025 17:18:38 +0900

41강

JSX에는 {} 사용 가능 : IN 시작과 끝

요소 태그 사이, 속성 값으로 사용 가능
자바스크립트 표현 아무거나 넣을 수 있음 > 이 내용의 결과가 화면에 출력이 되는 것임

reactDescription : 상수로 저장되어 있음! 배열 형태로

변수 또는 상수로 미리 저장해놓을 수도 있음
이렇게 하면 jsx 코드가 좀 단정해지니까 이걸 선호함

42강

이미지도 동일한 문법으로 작업할 수 있음

img src 이런 거 이용해서 해도 되지만 최적의 방법은 아님

작업물 배포시 이미지가 사라질 수도 있기 때문

배포 시 모든 코드가 변환 및 최적화되고 함께 묶여짐 > 이 과정에서 무시되거나 유실될 수 있음

import 사용하기!!!!

import reactImg form ‘./상대경로’ > 이 형태로 저장해준다.

그러고 기존의 img src 안에는 {}를 통해 reactImg를 넣어주면 된다

따옴표를 추가하지 않는 다는 점!! src={reactImg}일케 쓴다는 것!

결국 자바스크립트 객체가 되는거다 이미지가

43강

컴포넌트 장점 : 재사용 가능!

props : 데이터를 컴포넌트로 전달 및 사용 가능하게 함

App.jsx에 CoreConcept()라는 함수를 추가할 수 있음

매개변수는 보통 props라고 칭함
함수 내에서는 props.image 이런 식으로 데이터에 접근함

그러면

<CoreConcept title=”Components” /> 이런 식으로 사용 가능해짐

title과 같은 친구들이 props임

44강

props 대체 문법

App.jsx 내에서 data.js의 내용을 가져오고자 함

import { CORE_CONCEPTS } from ‘data.js’; 이게 가능해야 함

동적으로 CoreConcept 안에 보여질 내용을 정할 수 있음

CORE_CONCEPTS[0].title 이런 식으로!

동적인 설정 가능

한 개의 컴포넌트로 다양한 화면을 보는 것이 가능해짐

그렇지만 최적의 상황은 아님 (반복적 코드 많음)

<CoreConcept {…CORE_CONCEPTS[0]}/> 이렇게 하면 더 짧아지겠지

CoreConcept 부분의 매겨변수에 {}를 넣음으로써 또 다른 활용법 가능

45강

단일 Prop 객체 전달

자바스크립트 객체로 이미 구성된 데이터가 있다면, 그 객체를 여러 Prop들로 나누는 대신 하나의 Prop 값으로 전달할 수 있습니다.

즉,

1. <CoreConcept 2. title={CORE_CONCEPTS[0].title} 3. description={CORE_CONCEPTS[0].description} 4. image={CORE_CONCEPTS[0].image} />

또는

1. <CoreConcept 2. {...CORE_CONCEPTS[0]} />

대신,

이처럼 CoreConcept 컴포넌트에 하나의 concept Prop를 전달할 수 있습니다 (Prop 이름은 선택적):

1. <CoreConcept 2. concept={CORE_CONCEPTS[0]} />

그러면 CoreConcept 컴포넌트에서는 그 하나의 Prop만 받게 됩니다:

1. export default function CoreConcept({ concept }) { 2. // Use concept.title, concept.description etc. 3. // Or destructure the concept object: const { title, description, image } = concept; 4. }

어떤 문법과 접근 방식을 선호하는지는 전적으로 여러분 선택입니다.

받은 Prop들을 단일 객체로 그룹화

여러 Prop을 컴포넌트에 전달한 다음, 컴포넌트 함수 내에서 자바스크립트의 "Rest Property" 문법을 사용하여 단일 객체로 그룹화할 수도 있습니다.

예를 들어, 컴포넌트가 이런 식으로 사용되었다면:

1. <CoreConcept 2. title={CORE_CONCEPTS[0].title} 3. description={CORE_CONCEPTS[0].description} 4. image={CORE_CONCEPTS[0].image} />

받은 prop들을 다음과 같이 단일 객체로 그룹화할 수 있습니다:

1. export default function CoreConcept({ ...concept }) { 2. // ...concept groups multiple values into a single object 3. // Use concept.title, concept.description etc. 4. // Or destructure the concept object: const { title, description, image } = concept; 5. }

이 구문이 헷갈릴 수도 있지만, 걱정하지 마세요! 이 강좌를 통해 이 구문의 구체적인 예시와 특정 상황에서 왜 사용하는지에 대한 내용을 살펴볼 예정입니다!

기본 Prop 값

가끔 선택적 Prop을 받을 수 있는 컴포넌트를 만들게 될 때가 있습니다. 예를 들어, ‘type’ Prop을 받을 수 있는 커스텀 Button 컴포넌트가 있습니다.

그러면 Button 컴포넌트는 type 설정 여부와 상관 없이 모두 사용할 수 있어야 합니다.

type 설정이 된 경우:

1. <Button type="submit" caption="My Button" />

되지 않은 경우:

1. <Button caption="My Button" />

이 컴포넌트가 작동하도록 하려면, type Prop에 대한 기본 값을 설정할 수 있습니다 - 전달되지 않을 경우를 대비하는 것입니다.

자바스크립트는 객체 비구조화를 사용할 때 기본 값을 지원함으로 이를 쉽게 달성할 수 있습니다:

1. export default function Button({ caption, type = "submit" }) { 2. // caption has no default value, type has a default value of "submit" 3. }

46강

모든 컴포넌트가 한 파일에 app.jsx에 몰려있다

작업물의 크기가 계속 커지면 컴포넌트도 추가되며 파일이 커지기 때문에 이건 추천하지 않는다

별도의 컴포넌트 별로 저장하는 것이 좋다

연관성이 매우 높거나 같이 있어야 작동하는 경우만 한 파일에 추가하는 것을 목표로!!!

src 폴더에 저장할 수 있는 하위폴더에 저장

파일명은 컴포넌트 이름과 동일하게 저장

기존 App.jsx에는 어떻게 사용이 되는지 봐야 함

export default 를 통해 header.jsx에서 Headr를 내보내주어야함

import Header from ‘./components/Header.jsx’; 이런식으로 해서 사용한다

47강

컴포넌트 스타일 파일

프로젝트 코드의 다른 부분도 나눠서 저장!!!!

css 코드의 경우 헤더, 개념 항목 별로 다 모여 있따

이걸 컴포넌트별로 나눠서 저장한다!!!!

Header.css를 만들고 헤더 관련 css 코드들을 붙여넣는다.

자동으로 로딩되지 않기 때문에 알려줘야 함. index.css나 index.jsx에도!!!

import ‘./Header.css’ 이걸 Header.jsx에 넣는다

근데 이 Header.css에 있는 코드는 Header.jsx의 header에만 적용되는 것이 아니기 떄문에 App.jsx에서 header를 사용하면 동일한 스타일이 적용이 된다는 점 유의!!!

48강

children props

상호작용 섹션!!!1

app.jsx의 main부분에 section을 추가한다!!

내장 html 코드인 menu를 사용함 >> 버튼 목록 생성

TabButton.jsx를 만들어 사용하면 반복 코드를 줄일 수 있음

안에 props.children으로 사용을 한다고 해놓음

이 안에는 뭐 텍스트가 들어갈 수도 객체 구조가 들어갈 수도 있음

: 컴포넌트 합성

이것 말고 attribute를 사용할 수도 있다!!!!! 이건 취향 차이

49강

이벤트 처리하기

이제는 버튼을 클릭하면 어떠한 동작이 이루어지도록 해보자

TabBUtton.jsx로 먼저가서 eventlistener를 추가한다

그치만 선언적 코드로 적고 싶음!!

button onClick={함수명} 이런 식으로 사용한다!!

함수는 handel{이벤트명} 이나 {이벤트명}Handle 이렇게 적는다.

50강

함수를 props의 값으로 전달하기!!!

콘텐츠 영역에 보여주고 싶다

App.jsx 파일로 돌아가서 menu 밑에 동적 내용 출력 공간을 만들고 싶다

함수에 포인터 전달!!!!!

app.jsx에 함수 선언 및 onselect로 함수 전달 > button.jsx에서 그 함수를 매개변수로 받아 실제 html 코드 내에서 사용

51강

selectedButton을 이용해 어떤 버튼이 눌렸는지 알 수 있게 한다.

() ⇒ handleSelect()로 구조를 바꾼다

이걸로 인해 익명의 화살표 함수가 onSelect의 값으로 실행된다

handleSelect(’components’) 이런 식으로 해놓으면 이벤트별로 정의되는 함수를 구분할 수 있게 된다.

[2024~2025 동계모각코] 5회차 목표

슈슈버거 — Mon, 3 Feb 2025 17:17:53 +0900

5회차 : Chap 3 속성 학습하기

다음 강의들을 수강하고자 한다.

[2024~2025 동계모각코] 4회차 결과

슈슈버거 — Mon, 27 Jan 2025 19:30:23 +0900

34강

웹사이트 만들어볼 거임 (정적 + 동적)

리액트의 기초 개념 학습 예정

컴포넌트, JSX, STATE
1. 데이터 사용 방법
2. 유저 이벤트 상호작용
3. 상태! : 고정적 웹사이트 역동적으로 변화시키는데 중요
앱 : 동적 | 정적

35강

컴포넌트 : 잠재적으로 재사용 가능한 구성 요소

리액트 개발자가 생성 가능

컴포넌트 결합으로 리액트 앱이 만들어짐

UI를 여러 컴포넌트 결합 >> 어느 웹사이트든 다 마찬가지임

헤더, 핵심, 상호작용 모두 컴포넌트로 볼 수 있음

(사용자에 따라 개념이 달라서 개수 다 다름)

HTML, CSS, JS를 감싼다고 볼 수 있다
- 복잡한 사용자 인터페이스를 쪼개서 관리 가능

접근이 쉽다가 매우 장점

비슷한 코드는 함께 저장됨
개발 과정 단순해짐
디자인, 개발 둘 다 개발 원칙 따름

36강

자료 모음

초기 프로젝트 구축하기

NPM RUN DEV : 개발 서버
- 변경 사항 생길 떄마다 자동 업데이트

37강

index.html 파일

상당히 비어있음 (화면에 보이는 요소들이 없음)
- 이거를 react가 담당할 거임
js파일 로드 부분이있음
- jsx는 무시

index.jsx를 보면

여전히 이미지처럼 화면에 보이는 건 없음
app.jsx에서 뭘 불러옴

app.jsx

여기서 드디어 화면에 대한 요소를 불러옴

비표준의 js 문법을 써서 다들 확장자가 jsx임

브라우저에서는 사용 불가능! 다만 리액트 개발자로서 작성하면 브라우저에 도달하기 전에 어디서 바뀜 (브라우저에서 사용 가능한 코드로)

<두가지 규칙>

함수 제목은 대문자로 시작
함수에서 렌더링 가능한 값이 반환되어야 함
- 렌더될 html 마크업이 반환되는 경우 많음

38강

보통 몇십, 몇백 개의 컴포넌트를 만듬

리액트 컴포넌트는 단순히 자바스크립트 함수와 같은 역할임

function Header()를 어케 실행?

<Header><Header/> 일케 !! app() 안에서 그냥 바로 사용

39강

js vs jsx

브라우저 지원 여부!!
빌드 프로세스에 따라 확장자 처리
js만 사용하는 프로젝트도 있음 이 안에도 jsx 코드 있을 수 있음
import App from ‘./App.jsx’이것도 되고 ‘import App from ‘./App’ 얘도 되고

40강

컴포넌트 처리 과정

App.jsx에서 App 컴포넌트를 내보냄

import, export는 js 특징임 ( 리액트 특화 아님 )

컴포넌트 함수에 jsx 코드 사용할 거임 우리 대부분

리액트 안에 리액트 넣기 가능!! by 렌더링 메소드

그래서 f12누르면 html말고 다른 것도 함께 존재하는 거임

[2024~2025 동계모각코] 4회차 목표

슈슈버거 — Mon, 27 Jan 2025 18:57:18 +0900

4회차 : Chap 3 컴포넌트, JSX 학습하기

다음 강의들을 수강하고자 한다.

[2024~2025 동계모각코] 3회차 결과

슈슈버거 — Mon, 20 Jan 2025 05:40:33 +0900

2025.01.14

수강 완료 화면

23강

배열 및 객체의 분해

<배열편>

const userNameData = ["Max", "Schwejl"]

// 기존의 분해 방식
const firstName = userNameData[0];

// 더 짧은 방식
const [firstName, lastName] = ["Max", "Schwejl"];

이렇게 해두면 firstName을 치면 자동으로 Max가 선택된다.

분해를 통해 각 변수에 값을 자동으로 젖아해놓는 것이다.

<객체편>

const user = {
	name: "Max",
	age: 34
};

// 기존 방식
const name = user.name;
const age = user.age;

// 더 짧은 방식
const {name: userName, age} = {
	name: "Max",
	age: 34
}

객체의 경우는 객체에 정의된 필드 이름을 사용해야 함

(배열은 마음대로!!)

단 name: userName 처럼 내가 별칭을 지어줄 수는 있음

기호의 왼쪽에 나오는 중괄호는 분해에 사용된다는 점

24강

함수 매개변수 목록에서 분해

객체를 포함하는 매개변수를 수록할 경우 객체 프로퍼티를 꺼내서 로벌 범위 변수로 만들 수 있다.
function storeOrder(order) { localStorage.setItem('id', order.id); localStorage.setItem('currency', order.currency); } // 분해 by 점 표기법 function storeOrder({id, currency}) { localStorage.setItem('id', id); localStorage.setItem('currency', currency); }
그치만 주의할 것!! 여전히 함수 storeOrder는 매개변수를 하나만 받고 있는거다!! (중괄호로 싸여져 있다는 점)
아래와 같이 호출된다는 점!
storeOrder({id: 5, currency: 'USD', amount: 15.99});

25강

스프레드 연산자 (== 전개 연산자)

병합된 리스트를 만들려면 []로 이루어진 새 배열을 반들고 […]을 이용

const hobbies = ["Sports", "Cooking"];
const user = {
	name: "Max",
	age: 34
};

const newHobbies = ["Reading"];

// 그냥 두개의 배열이 합쳐져서 mergedHobbies안에는 구분된 값 표현
const mergedHobbies = [hobbies, newHobbies];

// 그냥 다 합치고 싶다면?
const mergedHobbies = [...hobbies, ...newHobbies];
>> 이렇게 하면 각 배열의 값들만을 새 배열에 추가함

// 이렇게 하면 isAdmin, name, age 3개의 속성을 가지는 객체 생성
const extendedUser = {
	idAdmin: true,
	...user
}

26강

컨트롤 구조 다시 살펴보기(제어문 살펴보기)

일반적으로는 if문을 사용해 사전에 알 수 없는 조건을 걸러낸다
const password = prompt('Your Password'); if (password === "Hello") { console.log("Hello works"); } else if (password === "hello") { console.log("hello works"); } else { console.log("Access not granted."); }
for문 (배열 순회 반복문)
const hobbies = ["Sprots", "Cooking"]; for (const hobby of hobbies) { console.log(hobby); }

27강

리액트 없이 dom 조작

로드된 웹사이트 확인, 런타입에 읽고 조작 : js의 장점 but 리액트 시에는 필요없음(선언형이기 때문)

28강

함수를 값으로 사용하기

내장된 setTImeout()이런 함수를 사용 가능미리 작성된 함수를 전달할 떄는 이름만!!! 전달한다!! () 없이
- 반환값을 원하면 ()을 붙이면 된다.
  - 그러면 handleTimeout이 먼저 실행되고 그 다음에 그 반환값을 매개변수로 해서 setTimeout이 실행
- 근데 우리는 지금 그러지 않으니까 그냥 이름만 적어서 함수 자체!
// 이렇게 매개변수란에 바로 익명함수도 작성 가능 setTimeout(() => {}) // 사전 정의 함수 사용 가능 function handleTimeout() { console.log("Timed out!"); } const handleTimeout2 = () => { console.log("Timed out ... again!"); } // 함수랑 이 함수를 실행할 떄까지 대기할 ms 단위의 시간 setTimeout(handleTimeout, 2000);

내장 함수에만 쓸 수 있냐? 그것도 아님!! 내가 만드는 함수에도 쓸 수 있음

function greeter(greetFn) {
	greetFn();
}

greeter(() => console.log("Hi"));

이렇게 하면 하단 줄의 익명함수의 내용이 greetFn이라는 함수명을 가지게 되는 거고 greetFn()에서 해당 함수의 내용이 실행이 된다

29강

함수 내부에서 함수 정의하기 (리액트 사용시 적합)

function init() {
	function greet() {
		console.log('Hi!');
	]
	
	greet();
}

greet(); // 사용 불가 얘를 생성하는함수 내에서만 사용 가능
init(); // 사용 가능 (정상적으로 Hi!가 출력됨)

30강

참조형과 기본 값 비교

let userMessgae = 'Hello!';

// 기존 값 수정 불가(새로운 변수가 되어버림)
userMessage = userMessage.concat('!!!');

const hobbies = ["Sprots", "Cooking"];
// 기존 배열이 수정됨
// (기존 배열의 주소로 가서 확인하고 거기에 원소 추가)
hobbies.push("Working");
console.log(hobbies);

참조형 변수를 저장할 때는 그 값의 주소를 저장한다.

string이런 거는 바로 값을 저장해 버린다고 볼 수 있다. (정확히는 아님)

** 주소는 객체를 다룰 때만!!! **

const를 수정할 수 있는 이유!! (새 변수를 만들수 없다는 거니까!!)

상수에 객체 저장 객체는 주소 참조해 접근이니까 메모리 주소에 있는 값을 조작할 수는 있음

31강

자료 모음

next-gen-js-summary(pdf)

let, const : var대체

객체의 내용 호출

class Person {
    name = 'Max';
    printMyName = () => {
        console.log(this.name);
    }
}
 
const person = new Person();
person.printMyName();

class 사용시 inheritance 사용 가능

class Human {
	species = 'human';
}

class Person extends Human {
	name = 'Max';
	printMyName = () => {
		console.log(this.name);
	}
}

const person = new Person();
person.printMyName();
console.log(person.species);

32강

js array function

map, find, findIndex, filter, reduce, concat, slice, splice

33강

정답 코드 모음