내일배움캠프4기 React

이 녀석과 쉽게 친해지긴 어려울 것 같다.gitbash 를 이용해 로컬 저장소 연결하는 법을 배웠는데 오류 투성이..17:55분 기준 아직 실패했다.ssh 연결을 통해 성공했다.local 의 ssh 키를 받아 github 와 파이참도 연동시켰다.내일 시간내어 git 자

난 main 페이지에 팀원카드를 맡았다.처음 모습니다.깃허브를 뒤져보고 구글링을 해봐도 어떻게 검색을 해야할지 감이 오지 않았기 때문이다.담임매니저 선생님께서 처음엔 그게 정상이니 부트스트랩을 이용해 꾸미는 연습부터 하라고 하셔서 거의 다 부트스트랩을 이용하여 카드를

어제에 이어 팀 제목, 소개 해주신 분과 Main Page 를 합쳤다.팀 제목에 animation 을 추가해 놓으신게 잘 되지 않아서머리를 부딪혀 고민하였다.keyframes 를 사용하여 slide 를 추가하였는데(수정 전)같이 진행하시는 분의 화면에선 글씨가 중앙에

완성시킨 프로젝트 녹화를 진행하였다. 간단한 노래와 기능소개 녹화 끝git 과 연결엔 gitbash 나 파이참 안에 터미널을 이용해도 가능하다.git init > .git 폴더를 폴더에 생성(숨김파일)git add (github로 push 할 파일) > 올리기

오늘은 mini 프로젝트의 발표가 있었다.4일간 팀원들과 열심히 작업하여 자신 있었지만 긴장도 되었다.발표회가 시작되고 정말 괴물같은 분들이 많다는걸 깨닫게 되었다.물론 이번 내일배움캠프가 처음이 아니신 분들도 있겠지만그 분들의 기술을 보고 아직 배울것이 산더미구나 라

처음으로 Visual Studio code 를 이용하여 Node.js 파일을 생성하여 공부하였다. 문법의 기초라 어렵지 않게 공부하였다.일단 변수를 지정할 때 let 과 const 를 사용한다.let : 변수의 변화 가능 ex) let a = 3 > a = 5 (

문자열if, else 안의 내용의 줄을 맞춰줄것!!!! 중요for i, person in enumerate(people):break 조건이 맞으면 멈추고 반복문에서 빠져나옴 break 로 3개만 검사하고 빠져나옴 \- 튜플이란 리스트인데 불변형! \[

array 는 불변이다.배열은 원소 간에 삽입 / 삭제 하려면 모든 원소를 다 옮겨야 한다.새로 추가시 비효율적이다. O(N)but, 자료추적시 용이하다.linkedlist 는 노드와 포인터로 이루어진다.자료추적이 힘들다.삽입/삭제는 O(1) 추가, 삭제, 출력, 찾

업&다운 숫자 찾기 개념에서 list 를 정렬하여 중간 값을 기준으로 목표 값을 찾는 것 \- 반복문을 쓰지 않을 수 있어 시간복잡도에 유리할 수 있다. \- 라고 한다.어떤 것을 정의할 때 자신을 참조하는 함수 \- ex) while 문 처럼 무한반복에 빠지지

리스트 어떤 식으로 정렬이 되는지 알고리즘적으로 분석을 하였다.실 사용시 sort 함수를 이용하여 list 를 정렬 하면 됨스택Stack 은 LIFO 방식으로 마지막으로 들어간 데이터가 나오는 형식이다.push(data) : 맨 앞에 데이터 넣기 pop() : 맨

sortlist.sort() = 문자열, 숫자 배열을 오름차순으로 정렬list.sort(reverse=True) = 내림차순 정렬a = sorted(list) = list는 그대로 두고 a 에 list를 오름차순 정렬a = sorted(list, reverse=True

소스트리github 이용을 엄청 편리하게 해준다.파일이 수정될 시 파일상태에 바로 표시해줌.히스토리를 이용해 어떤 변경점이 있었는지 육안으로 바로 확인 가능.git init , git add, git commit 을 훨씬 보기 편하게실행할 수 있도록 도와줌.github

Til 을 통해 github 사용법 정리와 sourcetree 사용법 익힘.github-sourcetree 연동 사용법https://velog.io/@cmaw/github-sourcetreegithub 현업 사용법https://velog.io/@cm

MPA(Multi-Page Application)브라우저에서 변경사항이 있을 때 서버로 서브밋 데이터를 전달하여 새로운 페이지 렌더링을 요청하고 그 데이터를 표시함새로운 페이지를 불러올 때 새로고침 됨SPA(Single-Page Application)서버로부터 완전한

https://velog.io/@cmaw/Swiper.js-%EC%82%AC%EC%9A%A9%EB%B2%95https://velog.io/@cmaw/%EC%9B%B9-%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%8B%B1-%EC%A0%95%

https://velog.io/@cmaw/%EA%B8%B0%EC%B4%88-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-S.A확실히 조원들의 참여도가 높으니 척척 진행되었다.하지만 바로 주말이라 어떻게 진행될지 모르겠다.

소스트리를 배우고 나니 깃을 이용하는 것이 몇 배는 간편해 졌다.터미널을 이용한 방법도 알고 있어야되긴 하겠지만 굳이 어려운 방법을 쓰는 것 보다 간편히 일 처리를 하는 것이 더 좋을 것 같다.크롬의 개발자도구를 이용하여 html, css 를 퍼올 수 있게 되었다.하지

swiper.js 를 이용하여 구현 하였다. vertical 슬라이드를 이용하였고, infinity 와 합하여 무한으로 돌게 하였다.direction : vertical, loop:truedisplay:inline-block 으로 블럭으로 지정해서 시작overflo

각자 페이지 사이즈를 기준으로 작업을 하였는데 spa 로 합치니 main 틀에 밀리거나 가려져서 css 가 다 무너졌다.하루종일 고치느라 진을 뺏다.또 간단히 main 에서 html을 불러오는 것이 아닌 firebase에 저장된 파일을 불러오는 형식이었다.지금 아예 모

SPA 적용시 index.html 에 링크 script 를 넣어줘야함.그래야 초기에 다운로드가 됨홈페이지가 로딩 되자마자 바로 실행되는 script 는바로 export 할시 html 이 다운되기도 전에 타겟을 하기 때문에null 이 나온다. 그렇게 때문에 로딩이 다 된

페이지에 따라 화면이 다르다 보니 메인배너가 여러화면에서 뜨기위해선각 html 마다 그 코드를 넣어주어야 했다.너무 비효율적이었다.그래서 페이지가 로딩 될때 배너와 사이드바가 함께 뜨는 형식으로바꾸어 주었다.각 구역으로 나누어 작업했다.사이드바가 없는 구역도 있기 때문

하루종일 프론트엔드의 수정을 하였다.

이게 맞는건가 싶은 프로젝트였다.아직도 끝나지 않았다..처음에 백엔드와 프론트엔드로 구분하여 포지션을 정한것이 바보같은 일이었던거 같다.첫 미니 프로젝트 때는 다들 그 수준만큼이 학습이 되어있었기 때문에 각 포지션을 맡아서 진행하여도 되었지만, 이번 프로젝트는 선행학습

프로젝트 제출하기 30분 전 파일이 덮히면서 오늘 2시간 작업분량이 사라졌다.조원들의 단체 멘붕..2시간전 저장해놓았던 파일로 어찌저찌 발표를 진행하였다.http://sparta-cyj.shop/오늘은 더이상의 공부는 힘들 것 같다.조원들과의 코드리뷰 시간을

이번 기초프로젝트에서 하루에 2번씩 회의를 진행을 하였다.오늘 어떤 작업을 했는지 어디가 어려움이 있었는지 이야기하는 시간을 가졌었는데 시간이 지나면서 조금 흐지부지 했던 것도 있었고 조원들을 믿었던 것도 있엇다.하지만 서로 모두가 만족할 수 있는 결과를 가져온게 아니

반응형 : @media screen 을 통해 width 사이즈를 min-width, max-width 로 설정하여 각 사이즈마다 css 를 따로 넣어주었고개발자도구를 통하여 width 사이즈를 확인할 수 있음.모바일, 패드 사이즈를 각각 다 볼 수 있음.left: -1

어떤 순서로 js 가 실행이 되느냐??!!!LexicalEnvironmaent(LE)함수를 호출할 때가 아닌 선언할 때 실행되는 것.'zere' = 전역변수로 name 에 할당wrapper() 실행 > name 은 'nero' 로 할당됨.log() 에서 console.

문자열 뒤집기.let a = 'hello' 를 뒤집어 보자.let b = a.split() >> a 를 배열로 변경 >> 'hello'let b = a.split('') >> h,e,l,l,o 각각 으로 분리!어떤 기준으로 자를것인가 라는 뜻.'' 로 하나씩 자르느냐.

unshift, pop, shift, deleteunshift 는 좋은 아이이다.배열의 시작에 값을 넣어준다.1,2,3 에 .unshift(0) 을 해주면 0,1,2,3 이 된다.pop 은 배열의 마지막 값 삭제 후 저장.shift 는 배열의 첫 값 삭제 후 저장.de

처음 풀기 시작했을때 c++ 언어로 풀이를 시도하여 되질 않았다..js 언어로 타겟팅하여 풀기 시작했다..map .reduce 등을 사용하여 긴 식을 간단히 표현할 수 있게 되었고while 문이 아직 익숙치 않은데 조금 사용법을 알게 된것 같다.계층에 대한 특강은 자격

node.js 를 다운 받아준다.터미널에서 node -v 로 버전확인 및 다운로드 확인이 가능하다.yarn 을 통해 React 를 시작할 수 있는데node 를 받은 후 sudo npm install --global yarn 를 통해 yarn 다운이 가능함, sudo 는

2차원 배열을 나타내기 위해선 반복문을 통해 배열속에 배열을 생성해도 되지만es6 에서 사용가능한 방법으로 쉽게 생성이 가능하다.new_length = 배열의 총길이n = 2차원 배열의 길이배열의 length 는 8이고 n 은 2 이다.2 \* 4 의 배열로 나타내야한

이런 멍청한!!yarn React 시작하는 방법도 모르고있었다..터미널 로 폴더를 생성할 곳으로 접속하여으로 가능!또 react 에서 prop-types 를 사용하기 위해서prop types 를 설치한 후에이런 식으로 Button 의 text 에 prop-types 를

난이도 진짜로!!!!! 4시간 걸렸다..처음에 구상은 값이 0이고 길이는 201인 배열(0을 포함해야함)을 하나 생성하여 입력값의 시작과 끝 값의 인덱스에 +1 을 해준다.그 다음 0 인 데이터는 지우고 -1을 해주면 0, 1, 2로 구성된 배열이 나오는데 0 은 겹치

실제로 영어는 싫다.각 숫자에 맞게 문자열이 왔을때 replace 를 통해 재 배치 해주었다!replace 는 첫문자열만 변환하기 때문에replaceAll 을 사용하여 안에 있는 문자열 전부를 변환시켰다.

일단 라우터 돔을 이용하여 라우터 사용으로 페이지를 변환할 수 있게 하였다.새로고침이 일어나게 되면 데이터가 초기화 됨으로 SPA 형식으로 제작해야함.현재 이곳으로 타겟의 아이디를 보내주는 방법을 찾고있음.react redux 를 사용하면서 데이터가 어떤 방향으로 흘

eval 함수를 통해 쉽게 가능했지만 검색을 통해 지양해야 하는 함수란 걸 알았다.map 과 split 을 통해 문제를 해결 하였다.quiz 를 ' = ' 으로 먼저 분리해주고 -, + 를 확인하여 계산후 비교한다.주의할 점은 .includes 를 사용하여 - 가 포함

이중 for 문을 사용하여 2차원 배열을 돌면서처음 전체를 돌땐 폭탄이 세로로 터지게 한다.단, 위 or 아래가 1이라면 또 터져야되기 때문에 그대로 두고0 이라면 폭발범위였기 때문에 2로 준다.세로로 다 터뜨린 배열을 가로로 터뜨린다.2중 for 문을 이용하여 1,

1. 평행 코드 https://github.com/ehfdl/programmers.git 생각보다 간단하게 풀었다. 기울기가 같은 경우를 구하면 되기 때문에 두 점 사이의 거리를 구해 기울기를 구하면 된다. (y1 - y0) / (x1 - x0) 를 구하고 다른

오름차순, 내림차순 정렬을 할 때 .sort() 메소드를 사용한다.sort 비교함수 링크 참고.https://velog.io/@cmaw/JS-.sort-%EB%B9%84%EA%B5%90%ED%95%A8%EC%88%98a, b 의 n번째 문자열이 같은지에 대한

.toString(2) 메소드를 이용하여 입력 값을 2진수로 변경 해준다.배열의 길이가 정해져있기 때문에 배열길이보다 짧은 2진수의 앞에.padStart 메소드를 이용해 0 값을 채워준다..split('') 메소드로 2진수를 쪼개준 뒤에 a, b 배열을 더한다.문자열

프로그래머스 스쿨의 연습문제를 풀면서 실사용에 유용한 메소드들을 더 알 수 있는 기회가 되어 좋았다.redux 를 이용한 todolist 만들기를 통해 작업을 하면서state 의 개념, 첫 구성을 할 때 어떤식으로 시작을 해야할지가 감이 잡혔다.화면에 보여지는 것이 없

https://github.com/ehfdl/programmers.slice 로 뒷 4자리 번호를 저장하고phone_number.length - 4 만큼 '\*' 을 채운 문자열과 더하였다.정규식을 이용한 풀이도 보았는데이해조차 되지 않기 때문에 이런 것도 있

1. 두 정수 사이의 합 https://school.programmers.co.kr/learn/courses/30/lessons/12912 풀이 https://github.com/ehfdl/programmers 주어진 두 정수를 Array 배열로 생성 후 redu

https://school.programmers.co.kr/learn/courses/30/lessons/12918?language=javascript문자열의 길이 .length 와 Number 로 숫자인지 아닌지 확인하였다.하지만 e 때문에 되지 않았다.e는

1. axios axios 란 Promise 기반 HTTP 클라이언트 이다. async await 사용. 단축 메소드 사용! get 요청 메소드 2. 프로젝트 시작 프로젝트가 또 시작을 하였다. 역시나 시간은 부족하다.. 일단 초기 전체적인 틀을 짜서 시작

https://velog.io/@cmaw/Styled-components-Input-typeradio-css-%EC%A3%BC%EA%B8%B0axios.get 을 이용하여 payload 에 id 값을 받아와서특정 데이터를 선택 하는 것에 성공했다.댓글추가 기능

redux-toolkit, thunk, json-server, axios 를 단시간에학습을 하고 바로 프로젝트를 진행하면서 막히는 부분이 너무 많았다.아직 이제 이해를 하시는 분도 있고 복붙만 하는 나도 있고어떤식으로 진행이 되는지는 알겠지만 코드를 하나하나 작성하기에

axios.patch(url,data) 를 이용하여타겟팅 된 객체를 수정 시켜준다.redux-toolkit state 도 수정 하기 위해서hint를 add 했던 객체 모습 그대로 .map 을 이용해 그 위치에 넣어준다.만약, 수정 해 줄 객체의 데이터가 다르다면 읽히

1. 만능버튼 말만 만능버튼이지 만능이 아닌듯 싶다. css 가 다 다른 버튼들에는 오히려 더 많은 입력을 불러 일으켜서 이번 프로젝트땐 비효율 적인것 같다. css가 같은게 여러개일때 사용하면 좋을 것 같다. const 함수로 사용하게 되면 onclick 이벤트의

비밀번호의 타입을 password 로 하게 되면 문자로 가려지게 화면에 보인다.난 글의 작성자가 비밀번호를 등록하거나 입력할 때 문자로 가려지면자신이 잘 입력했나 확인이 잘 안되기 때문에 타입을 Number 로 하여 처리하였다.다른 조의 방법을 보고 고민을 해결하였다.

expo 를 이용하여 모바일 상에 어떤모습인지 바로바로 업데이트하여 확인 가능!https://expo.dev/ expo 사이트 회원가입 후 New Project 생성 yarn , npm 을 통해 -global eas 다운받기expo 계정으로 로그인EXPO에서

클릭 시 깜빡거리를 효과를 준다.button과 비슷한 역할을 함.웹의 onclick 역할을 한다.tasks 변수에 tasklist 를 돌린다.이 식은 true 를 반환한다.테스크가 있냐? 라는 식이기 때문!그렇기 때문에 꼭 else 문으로 id 가 다를 경우 false

새해 넘어가기 전 2022년 마지막 글이다.React-Native 는 현재 js 언어로 쓰기 때문에 그렇게 어렵지 않을 것 같다.하지만 웹개발을 목적으로 공부하는 만큼 앱보단 웹에 집중을 조금 더 해야 되겠다.또 지금 강의를 진행하면서 느낀점은전에 배웠던 것이 금방 잊

6\. Warning: Each child in a list should have a unique "key" prop.

1. React Navigation 기본 사용법 2. Expo 프로젝트 생성 (터미널) 3. 과제 프로젝트 UI

1. Dimensions 2. StyleSheet.absoluteFIll 3. LinearGradient 4. react-native-swiper 5. Scroll View 6. FlatList

몸살로 인해 강의를 제대로 수강하지 못했다.react-native 의 modal 을 이용하여 만들었다.visible 이 true 일때 보여지고 false 일때 사라진다.action을 추가하여 animation 효과를 줄 수 있다.

TouchableOpacity 태그로 disabled 기능 사용,props 로 title별 칼라 변경.button 은 쉽지만 디자인이 별로 없음.

https://github.com/ehfdl/MnM-Project3\. Stack 이동, Stack error

3\. React(https://velog.io/@cmaw/React-%EB%B9%84%EB%B0%80%EB%B2%88%ED%98%B8-%EB%B3%B4%EC%9E%84%EC%88%A8%EA%B9%80-%EA%B8%B0%EB%8A%A5-useState) (us

alert사용자에게 메시지를 보낼 때 alert 를 이용한다.alert 는 정해져 있는 모델이기 때문에 디자인을 할 수 없는데native 에선 간단한 Alert 모델을 지원한다.비밀번호사용자가 회원가입, 로그인을 할 때 비밀번호는 보안에 직결되기 때문에암호화를 꼭 해야

https://github.com/ehfdl/MnM-Projectgithub으로 이슈 관리프로젝트 중간중간 회의하기프로젝트 시작 때 확실한 역할분담문제마감기한 공유깃허브 merge 실수원인커뮤니케이션의 부족깃허브 사용미숙해결방안커뮤니케이션의깃허브 PR 메시지

3\. useFocusEffect

1. interface 2. onChange event target

2\. 'undefined'일 수 있습니다.(error)

2\. Global-Style(reset)

프로젝트 노션 링크이번 프로젝트 땐내가 과거에 태어났다면? 을 주제로 프로젝트를 진행하게 되었다.과거에 있었던 역사적 사실들을 기반으로 역사 교육을 진행하고그 후 간단한 재미있는 테스트를 통해 자신이 어떤 시대의 사람일까?알 수 있는 프로젝트 이다.구글 스프레드 시트를

2\. Youtube API 사용법

1\. declare 충돌 error(env, declare, process, tsconfig.json)

1\. json 파일 줄바꿈 처리

역사에 관련된 간단한 테스터를 만들어보았다.타입스크립트로 만들면서 기본타입을 제외한 마우스 이벤트, 체인지 이벤트 같은 것의 타입들을 지정해 볼 수 있어서 좋았다.프로젝트 진행 중 다음에도 쓸만한 코드를 뽑아보았다.status bar props 로 처리한 것count의

깃허브 컨벤션을 프로젝트 시작 때 정하여 지킨 것서로 적극적으로 의견을 주고 받은 것(소통 굿)자신이 맡은 부분을 끝까지 구현하려고 노력한 것1) 문제프로젝트 초반에 추가 구현 기능을 사전에 미리 정하는 것(반응형, 유튜브)날짜 별 계획을 세우는 것깃허브 이슈, 프로젝

3\. \[NextJs] Custom App Typescript

현재까지 몇명의 고려인, 조선인 등등이 나왔는지 체크하여 카운트.각 문서에 total 수를 증가시켜 확인한다.

3\.

2\. notion dataBase 생성 및 Id 확인하기, API KEY 발급받기

빡코딩이번주는 NextJs 로 간단한 나의 포트폴리오를 만들었다. 첫 클론 코딩이었는데 쉽지 않았다. NextJs 의 버전 업데이트, tailwindcss의 미숙함 때문이었다. notionAPI를 활용하였는데 어떤식으로 진행을 했는지 감도 잘 오지 않았다.후에 노션의

드디어 내일배움캠프의 기나긴 여정을 마무리하는 최종 프로젝트가 시작되었는데, 이 소중한 5주의 기간 동안 모든 팀원들이 함께 최선을 다 하겠다는 의지를 담았습니다. 저희 프로젝트 주제인 혼합주 레시피 추천 애플리케이션을 연상시킬 수도 있는 팀명입니다.최영진 - 리뷰쓰기

1\. \[typescript] input type="file" image, preview, 미리보기(nextJs, React)

1.

유저가 입력하는 상황, 선택하는 상황을 고려하여 상황마다 유효성 체크를 하였다.어떤 문구를 사용할지 체크해보고 다같이 작성하였다.추후 문서로 정리할 예정이다.추가기능을 계속 생각하면서 이게 될까? 란 회의를 계속 진행하였다.핵심은 알림창 디자인, 신고기능, 댓글의 페이

함수에 의해 setState가 작동한다면함수 중간에 실행시킨다고 해도 함수의 작동이 끝나고페이지가 재 렌더링 될 때 state의 변경이 일어난다.Firebase storage에 image 를 업로드하고 그 url 을 state에 담아서db에 업로드하는 로직을 짯었다.역

최종프로젝트 첫번째 주는 프로젝트를 기획하고 와이어프레임을 짜는데 시간을 다 보냈다.실제 해보지 않은 기능들을 추가하고, 만드는 중간에 고민해야할 부분들을 사전에 계획하여 팀간에 어긋나는 로직이 없도록 하였다.간단한 기능 구현을 위하여 와이어프레임은 UI 로 짯고게시물