728x90

분류 전체보기 121

[개발 공부 21일차] React 입문 - 개인 과제 완료! 블록 요소와 인라인 요소

재밌지만 어려웠던 리액트 과제가 끝났다! 강의 내용에 대부분 답이 있어서 2/3 정도는 어렵지 않게 했지만 완료 버튼을 눌러서 Done이 있는 곳으로 컴포넌트를 보내줘야 하는 기능을 구현하는 게 정말 어려웠다. 식은 적었는데 어떻게 구현해야 할지 막막해하다가 어제 다른 동기 분이 특강 아닌 특강을 해주셔서 이해가 잘 되었고, 또 과제를 얼른 마칠 수 있었다. 1. [React 개인과제] 완성 1-1) 기능 구현 계획 1-2) 구현 문제 및 해결책 1-3) 블록 요소와 인라인 요소 1-4) npm start가 안 됨 && 해결책 2. 금일 소감 1. [React 개인과제] 완성 위 사진처럼 완료 버튼을 눌렀을 때 Done이 있는 위치로 컴포넌트를 보내줘야 한다. 이 부분이 너무 어려워서 정말 ..

[개발 공부 20일차] React 입문 청강 완료! & 챌린지 반 과제 완료

휴... 바로 드가자 1. [React 기초] 완강 및 개념 명확히 1-1) 핵심 요약 1-2) 질문 및 답변 2. [article] React로 사고하기 3. 금일 소감 1. [React 기초] 완강 및 개념 명확히 1-1) 핵심 요약 default props : 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기값 ↓ 유사 Default Argument : 매개 변수가 지정되지 않았을 때, 자동으로 지정해줄 값 정해줌 hook : 기능 state : React에서 이벤트에 의해 변경되는 동적인 값 UI 바꾸려고 씀. 즉, 렌더링 다시 하려고 예문 작성 중에 에러 원인 알려주는 확장 프로그램이 구조분해할당을 구조파괴선언이라고 알려준다 ㅋㅋㅋㅋㅋㅋㅋ 아니 구조 파괴 선언이라니 이 친구..

[개발 공부 19일차] React 개발환경 세팅 & 개념

휴 요즘 특강과 수준별 분반 수업이 함께 진행돼서 주된 강의를 챙기기가 좀 어려워졌다. ← 요건 내가 부족한 탓이긴 하다. 계속해서, 무수하게 쏟아지는 정보를 좀 정리하고자 앞으로 블로그 포스팅에는 내가 모르는 개념, 알아둬야 하는 핵심 등을 위주로 기술할 예정이다. 다소 짧게 적는 날이 있더라도 지엽적인 내용 빼고 액기스만 담으려 한다. 그럼 바로 드가자 1. Node.js 설치 및 npm과 yarn 오류 2. [특강] VS code 꿀팁: 확장 프로그램, 단축키 3. [React 입문] 기억해야 내용 4. 금일 소감 1. Node.js 설치 및 npm과 yarn 오류 에러 코드는 위와 같이 떴다. 어제부터 Node.js 설치 버전이 16으로 설치되지 않았다. 일단 엄청 급한 건 아니니 강..

[개발 공부 18일차] React 입문! (+ 챌린지 반 편성)

오옹 드디어 React(주특기) 입문 주간이 시작되었다. 자바스크립트 문법 이해는 기초 수준인 것 같다고 느껴서 'React 어려우면 어쩌지' 했는데 다행히 초반에 자바스크립트 문법을 좀 짚어주시고 강의 시작돼서 너무 다행이라고 느꼈다. 오늘은 기초 공부를 한 것이고, 몰랐거나 헷갈렸던 개념만 가볍게 작성해 볼 생각이다. 1. React 입문 강의 시작! 2. [수준별 분반] 챌린지 반 입성! 3. 금일 소감 1. React 입문 강의 시작! 좀 두근거립니다. 설렘 설렘... 계속 새로운 걸 배우다니 정말 별로 못자서 몸은 피로한데 정신은 행복하군여... 어렵고 복잡한데 이해하면 쾌감이 어마무시합니다 이 코딩의 세계가... 그리고 프로젝트하며 코드를 짤 때 발생하는 에러를 디버깅해내면 감격이..

[개발 공부 17일차] 팀 프로젝트 발표날!

야무지게 발표하고 돌아온 접니다! 휴.. 5시간 정도 잤지만 다행히 오늘 컨디션이 괜찮아서 발표도 나쁘지 않게 한 것 같다. 발표 자료 퀄리티도 칭찬 받았다! 나는 프로젝트 기능이 별로 없어서 정말 칭찬 없고 피드백 사항만 엄청 많을 줄 알았는데 생각보다 칭찬만 거의 90% 비율로 해주셔서 잘한 건지.. 아니면 퀄리티가 심각해서 피드백해 주실 게 별로 없었던 건지,, 아직도 잘 모르겠다.. 튜터님들께 직접 가서 더 피드백해 주실 거 없냐고 말씀드리는 방안도 생각해봤는데, 그냥 추후에 진행되는 걸 더 잘하는 걸로 결론 내렸다. 1. 발표 및 시연 2. 다른 튜터님들께도 시연 보여드림! 3. 금일 소감 1. 발표 및 시연 PPT는 넷플릭스 대표 색 위주로 디자인해서 최대한 넷플릭스 느낌이 강하게..

[개발 공부 16일차] 팀 프로젝트 4일차: 팀 프로젝트 완성!

자바스크립트가 좀 어려워서 이번 프로젝트는 난항이 좀 있었다. 그래도 개인 과제 때 진짜 팀 프로젝트에 누가 되지 않으려고 밤새워가며 공부하고 몰두한 보람이 있었다. 음... 그리고 이번엔 내가 많은 게 그래도 가장 어려울 것 같아서 맡았는데 다 하고 나니 가장 쉬운 거였나?.... 하는 생각이 많이 든다. 발표 이후, 리액트 강의 시작되면 리액트 강의 들으면서 팀 프로젝트 코드를 다시 봐야겠다. 처음부터 끝까지 어떤 코드로 구성되어 있고 로직이 어떻게 되는지 이해하는 시간을 가져야겠다. 1. 막혔던 부분과 해결 [CSS 디버깅] 2. 드디어 팀 프로젝트 끝! 3. 금일 소감 1. 막혔던 부분과 해결 [CSS 디버깅] 프레디의 피자가게부터 밑 요약 내용까지 행간이 다닥다닥 붙어있고 아래 글자..

[개발 공부 15일차] 팀 프로젝트 3일차: 상세 페이지 구현

벌써 팀 프로젝트 3일차다. 시간이 너무 빨라서 매일 "헉 벌써 _월 __일이야?" 하는 게 일상이다,, 휴 20대 가는 속도 좀 늦춰주세요.... 아무튼 오늘은 어제 너무 들인 시간치고 효율이 없었던 것 같아서 누구에게 쫓기는 듯한 느낌을 받으며 빠르게 팀원들끼리 회의하고 내 해야 할 일에 집중했다. 오늘은 HTML과 CSS를 작업했다. HTML과 CSS 파일 나눠서 하면 더 좋긴 한데 아직 위, 아래로 보는 게 좀 더 편해서 안 나누고 하고 있다. JS부터는 VS 코드상에서 파일 나눠서 작성해야겠다. 1. 상세 페이지 내 영화 상세정보 구역 분배 2. 막혔던 부분과 해결 3. 금주 소감 1. 상세 페이지 내 영화 상세정보 구역 분배 OTT를 보다가 넷플릭스가 가장 UXUI가 깔끔해서 그걸..

[개발 공부 14일차] 팀 프로젝트 2일차 (영화 검색 사이트 구현)

오늘부터 본격적으로 팀 프로젝트에 들어갔다. 내가 구현하는 기능은 영화 상세 페이지 및 Home 페이지 돌아가는 버튼 구현이다. 어려워 보여서 택했는데 진짜 어렵다 ㅋㅋㅋㅋㅋㅋ 그래도 재밌다. 배우던 첫 주차이자 첫 챕터에 비하면 정말 난이도가 많이 올랐다는 것을 느낀다. 그리고 특히 영어 공부를 많이 해야겠다는 것 또한 느낀다,, 영어 공부를 놓은 지 좀 돼서 이해가 바로바로 되지가 않는다. 틈틈이 쉬는 시간엔 일반 책 읽지 말고 영어 공부를 해야겠다. 오늘은 에러가 많이 떴던 날이라 그 내용에 대해서 적어보려고 한다. 1. 튜터님들 피드백 적용 후, 코딩 시작 ㆍ 조언에 따라 바꾼 점: 코딩 계획 세우기 ㆍ 계속되는 구글링 ㆍ 오류는 내 친구 ㆍ 그래도 해냈죠? 2. 클릭해서 해당 영화 ..

[개발 공부 13일차] 순수 자바스크립트 팀 프로젝트 시작

오늘부터 자바스크립트 팀 프로젝트를 하는 날이다. 오전 10시에 팀 프로젝트 관련 발제를 들었다. 발제는 한 20분만에 끝나서 팀원과 바로 회의를 진행하였다. 1. 팀 프로젝트 기능 분배 및 기타사항 1) 누구 코드로 할지 2) 어떤 API? 3) 필수 기능 분배 4) 커밋 컨벤션 정하기 2. [기초 특강] Javascript 코드를 읽는 방법 1. 팀 프로젝트 기능 분배 및 기타사항 회의 내용을 통해 정한 사항은 다음과 같다. 1) 누구 코드로 할지 : 팀원 한 분 걸로 하기로 했다. 2) 어떤 API? : TMDB 3) 필수 기능 분배 (1) API 연결: --님 (2) 상세 페이지 구현 & 홈으로 돌아가기: 나 (3) 영화 리뷰 작성 기능(+ 비밀번호): --님 (4) 유효성 검사: -..

[개발 공부 12일차] 자바스크립트 형 변환 및 전반적 기초 공부

오늘은 밤새워서 공부하여 JS 문법을 좀 이해하는 시간을 가졌다. 아침 06시 30분까지 같은 기수 분에게 1:1로 설명 들으며 이번 필수 기능 구현에서 모르는 것 물어봐서 필수 가능에서 사용하는 문법은 이해가 되었다. 그게 문법을 이해하는 데 큰 도움이 됐다. 더불어서 위 사진처럼 자바스크립트 기초 강좌 유튜브 영상도 큰 도움이 되었기 때문에 오늘은 그 내용에 대하여 문법 개념과 기초에 대해 작성해 볼 생각이다. 1. 형 변환 2. 비교 연산자, 조건문 3. 논리 연산자 1. 형 변환 string(변수) : 문자열로 변환 Number() : 숫자형 변환 * true = 1, false = 0) * 숫자 + 문자 ⇒ NaN(Not a Number) 반환 Number(null) ⇒ 0 Numb..

728x90