TIL

화살표 함수 (Arrow Function)딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴딕셔너리를 짧게 만들어보기! - 객체 리터럴map -반복문의 또 다른 방식1.😀화살표 함수 (Arrow Function)기존 방

앱 개발을 하면서 매번 보고 ctrl+C, ctrl+V 이다 심지어 방금 적은문자도 똑같은 방식으로 진행했다. 그러자 백지상태에서 프로그래밍을 해보라 했을때 너무 답답하고 막막하여 어떻게 해야할지 몰랐다. 하지만 오늘 3시간동안 머리를 굴린결과 조금의 희망과 어떻게

사물로 생각해보면 여기 적힌코드는 내가 그리고 만들고싶은 그림, 또는 물건이다.내가 하고싶은말, 만들고싶은 앱을 여기다 적어 다른사람들에게 보이게한다.그리고 이런것들 이게 바로 꾸미는것 내가 하고싶은 말들을 이쁘게 꾸며서 말하고 멋있게 포장해서 남들에게 독보이게 해주는

오늘 배운것중 하나는 Ajax와 jQuery 여기서 서울의 미세먼지를 내 컴퓨터에 받아와 이런식으로 사용 가능하다는 것을알았다.이렇게 공부를 하던와중 지금 만들고있는 웹에 날씨정보를 뛰우는 것이 숙제였다.날씨API이것을이용해 똑같은 방법으로이런식으로 만드는것이 목표였는

오늘 10.31일의 마지막날이자 나의 첫 스파르타코딩의 프로잭트날이였다. 오늘의 고민과 문제! 팀 프로젝트를 어떻게 시작하고 잘 풀어나갈까? 팀원들과 같이 소통하여 프로젝트 분담을 어떻게 나누지? 최대한 즐겁게 팀분위기를 이끌기위해 어떤 노력을 하면 좋을까?

git에 있는 팀원들의 파일을 한곳에 모아 하나의 프로젝트를 완성시키기맨 처음 지원님이 작성하신 주야간모드를 가져온 실행시켰지만 약간의 오류가 생겼다버튼은 성공적으로 잘되지만 실행시 background에있는 글시가 같이 사라지는 오류가 생겨 파일을 다시 손보고 있으셨다

브렌치를 따로따로하여 협업을 하자인간머지는 할것이 못된다.지금 보는 git이 지금까지 작업하면서 만들들었던 mastr이다. 한곳에 모두가 작성했던 HTML, CSS, app.py가 들어있는것이다. 이것들을 나 혼자서만의 힘으로 정리하기는 부족했던거 같다. 조금만 더 생

오늘은 프로젝트를 발표하는날이라 공부를 할수있는 시간은 아침시간과 발표가 끝난 후 오후 시간이였다.아침에는 공부라면 공부지만 프로젝트의 버그를 잡아내는것에 집중하여 프로젝트 발표를 1시간남기고 완성 할수있었다.서버에서 구동했을때는 이런식으로 몽고DB에 있는 데이터들이

템플릿 리터럴 (Template literals)이런식으로 1차 totalPrice -> shirtsPrice += 2차 totalPrice -> shirtsPrice +=3차 totalPrice -> shirtsPrice -= 결과로

했습니다... 하지만 LCK에서 롤드컵 우승했다고 생각하고 홈페이지를 만들어 볼려고 합니다.일단 홈페이지의 배너에 애니메이션을 넣어서 제작했습니다.뒤에서 DRX 선수들의 매드무비가 영상이 나오게 했죠.video 함수를 사용하여 파일에있는 MP4영상을 가져왔습니다.

일단 파이썬은 자바스크립트보다 매우 직관적인 언어고 할 수 있는 것도 많다.하지만 우리는 자바스크립트를 공부하지않고 왜 파이썬을 공부해야하는가!?그것은 회사에서 코딩테스트! 라는것을 많이 보기 때문이다 코테란!? 말대로 자기가 원하는 곳에 시험을보고 거기에 들어가기위해

당현히 시간도 2배로 늘어난다 그러니 시간을 단축시기키위해 좋은 알고리즘을 알아야한다!이 함수가 시간이 얼마나 걸릴까 생각을 해보았는가?사실 코드를 작성하면서도 이 코드들이 실행하는 시간을 분석하는 사람은 몇몇 없을꺼같다(나는 그렇다)하지만 나는 좋은 개발자가 되고싶다

Q. 다음과 같이 0 혹은 양의 정수로만 이루어진 배열이 있을 때, 왼쪽부터 오른쪽으로 하나씩 모든 숫자를 확인하며 숫자 사이에 '✕' 혹은 '+' 연산자를 넣어 결과적으로 가장 큰 수를 구하는 프로그램을 작성하시오. \*\*단, '+' 보다 '✕' 를 먼저 계산하는

어레이와 링크드리스트의 차이를 보면 이렇게 나와있다.이게 무슨 뜻이냐처음 부터 차근차근 내려가면서 보자Array이는 0(1) LinkedList는 0(N)이다 이건 또 무슨소리인가 해석해보면Array / 0(1) 삽입 / 삭제 1LinkedList / 0(N)삽입 /

피그마란 무엇인가? 모르면 구글에 검색해보자 나도 몰라서 검색했다. 정리를 잠간 해보면? 피그마는 디자인 클라우드다 디자인을 빠르게 확인하면서 작업할수있다. 웹 브라우저 기반이다. 피그마는 디자너가 협업하기 정말 좋은 디자인 툴이다! 결론 피그마는 웹 디

자동화 퇴실체크 나는 오후 9시가 지난뒤 퇴실체크를 하지않아 운동을 하는와중 매니저님에게 전화가 왔다... > ??? : 민수님 12시간이 지났는데 퇴실체크가 되지않아 연락드렸습니다! > 민수: 아 죄송합니다... 제가 깜빡하고 퇴실체크를 하지않았네요... 집에가

1.fire base(파이어베이스)공부하기2.웹페이지를 어떻게 구성할지 생각하기3.어떤방식으로 소통하고 공부해나가야할지튜터님이 강의를 해주시는 FireBase의 강의를 다시 듣고 복습하는 방식으로 공부를하고, 왕초보 웹개발에서 사용한 가비아를 다시 써봐야겠다.그리고 이

현재 개발자가 어떻게 git을쓰고 관리하는지 심층으로 들어가보기최대한 머지를 쉽게 그리고 에러가 안나게끔 만들어보기일단 기초 프로젝트를 할때는 main Branch에 모든것을 병합하여 엄청나게 고생을했다(다시는 이런일이 생기지않도록 이번에는 정말 깔끔하게 git을 써볼

menu bar의 구동 방식과 틀스크롤 방식과 딜레이 방식으로 부드럽게 구현스크롤 애니메이션메뉴바를 만들기위해 이곳 저곳 검색을하던 와중 웹개발 종합반에서 만든 버튼이 부트스트렙에서 가지고 왔는게 생각이 났다. 이번에는 부트스트렙을 적극 활용해서 많은 메뉴바 네비게이션

어제 구현할려했던 애니메이션 스크롤을 오늘 페이지에 적용시켰다. 이것 때문에 정말 고생 한거같다..문제는 js가 HTML에 연결이 안되서 보이지 않는 오류를 찾는라 시간을 너무 많이 써버렸다.결과적으로는 성공했다.참조(https://gurtn.tistory.c

어제도 스크롤 기능을 구현하는데 하루를 다써버리고도 모자라 하루 반나절을 꼬박 세고 나서야 구현에 성공했다. 페이지가 많다면 스크롤을 무한으로 늘려 양이 많아 보이도록 할수있지만. 팀원들이 하나식 페이지를 맡아 총 5개의 페이지로 구성하기 때문에 무한 스크롤을 구현하고

일단 완성하기에 까지에 버그들이 너무 많아서 고생을 많이했다.결국에는 완성했지만 다시는 스크롤을 만들고 싶지 않다는 생각과 이제 모든 스크롤을 만들수있겠다는 생각을 했다. 버그의 이유중 하나는 margin값이였고 하나는 css자체의 웹페이지의 간격이였다.여기에 marg

이번 한주에 한 일 git organization 협업 파이어베이스를 이용한 웹페이지 구동 스크롤 애니메이션 구현 1. git organization 협업 기초 프로젝트에서는 자신의 git허브에 레파지토리를 만들어 작업을 했는데 이번에는 git organizat

자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어입니다.여기서 '생동감'이란 단어에 주목을 해야한다. CSS와는 차원이 다른 효과를 불러주기 때문이다.자바스크립트엔 다양한 장점이 있지만 여기선 세 가지만 언급해 보도록 하겠습니다.HTML/CS

데이터 타입에는 기본형, 참조형으로 나뉘고기본형은 : Number, String, Boolean, null, nudefined, symbol 참조형은 : Object->Array, Function, Date, RegExp, Map,WeakMap Set,WeakSet 이

this = 객체를 가리키는 키워드이다. 쉽게말해서 this는 호출하는 놈 이다,호출하는 몸이 없을 경우에는 기본값으로 window 객체 입니다.예외가 있는데전역스코프에서 this는 window 객체 입니다.화살표 함수 (Arrow Function)에서 this가 조

타입 스크립트란 무엇인가? 자바스크립트 대용품 같은 느낌이다. javaScript + Type 문법 즉 자바스크립트 업그레이드 버전이다. 그럼 왜 자바스크립트가 아니라 타임스크립트를 써야하나? 그것은 자바스크립트의 이러한 문제점이 있어서이다. ex) 원래는

앱만들기, 발행하기 쉽고 UX적으로 뛰어나서2020년 이후로 리액트 문법이 class 없이 쉬워져서 자바스크립트 변수, if, for, array, object, function, 이벤트리스너, HTML, CSS 기초지식 필요합니다. 자바스크립트 기초지식 없으면 Rea

UI 구현하기 (1200px, 800px 제한하고, 전체 화면의 가운데로 정렬)Todo 추가 하기(제목과 내용을 입력하고, 추가하기 버튼을 클릭하면 Working에 새로운 Todo가 추가되고 제목 input과 내용 input은 다시 빈 값으로 바뀌도록 구성해주세요.)T

React로 만든 페이지는 Component로 구성되어있다. 페이지 단위로 HTML을 작성하는게 아니라각 부분을 Component로 만들어서 조립해서 사용 한다. 그럼 장점이 비슷한 부분은 재사용,유지보수 등등 많은 이점이 있다. 우리가 가장많이 들어가는 네이버 페이지

props 문법이 귀찮을때 쓴다.state를 하기 귀찮을때 쓴다.React 스타일 웹개발은 그림으로 나타내보면 이런식으로 나온다. 하나의 html파일을 두고 component를 만들고 원하는 곳에 복사 붙처넣기 하는 방식으로 개발을 한다.그런데 개발을 하다보면 stat

우리는 프로젝트를 2번이나 해본 경험이있다. 그 중에서 도메인을 구하여 AWS에 배포하는 방식을 사용하였다 이번에는 Vercel라는 플랫폼으로 배포를 해볼려고 한다.Vercel은 AWS와 같은 클라우드 컴퓨팅 서비스를 제공하는 회사이다. 그리고 React의 프레임워크인

React Hooks (useState)여기서 나타내는 단어들은 React, Hooks, (useState)이다 그럼 하나식 살펴 보도록하자 React 웹 사용자 인터페이스를 만들기 위해 사용된다.Hooks 클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존

useEffect 란? 클래스 컴포넌트의 생명주기 메소드 componentDidMount(), componentDidUpdate, componentWillUnmount()를 통합한 것과 같은 API로 side effect를 발생하는 작업을 수행하는 훅 API입니다.

action객체란

액션 생성함수는, 액션을 만드는 함수이다. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다..휴먼에러 (오타) 방지액션객체의 type value를 상수로 만들어놓았기 때문에, 개발툴에서 자동완성등의 보조 기능을 지원받을 수 있습니다. 그래서 의도치 않은 휴먼에

이번에 과제에서는 타입스크립트를 사용하여 만들어봤다그래서 빌드업을 npx create-react-app 프로젝트이름 --template typescript이렇게 타입스크립트 리액트를 만들어서 사용했다.폴더 구성을 이런식으로 만들어 봤다.맨 처음 타입을 지정해준다.라는

효율적인 Redux 개발을 위한 저희의 견해를 반영한, 이것만으로도 작동하는 도구 모음입니다. Redux Toolkit은 Redux 로직을 작성하기 위한 표준 방식이 되도록 만들어졌습니다.이 안에는 저장소 준비, 리듀서 정의, 불변 업데이트 로직, 액션 생산자나 액션

json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지 입니다. 우리가 json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mo

NHN에서 개발한 UI 오픈소스 라이브러리이며, 디자인이 깔끔하고 사용법이 쉬운 편이다.퍼블리셔 분들이 TOAST UI는 버그가 많고 원하는 디자인으로 커스텀 하기 어렵다고 했지만,TOAST UI 에디터는 벨로그를 사용하는 나로서는 참을수가 없었다.\-깔끔한 UI\-여

패키지 관리자로 **yarn** 또는 **npm**중 하나를 일괄적으로 사용하다가가끔씩 실수로 혼용하는 경우가 있다. npm과 yarn은 패키지 관리 방식이 다르기 때문에 충돌이 날 수 있으므로 가급적이면 혼용하지 않는게 좋다.lock 파일은 둘 다 있어도 상관

설치! 기능! 구현! 코드!

설치! 기능! 구현!! 코드! Main.jsx Slide.jsx

설치! 기능! 구현! 코드!

우리 팀만의 React App 만들기Redux, toolkit, Thunk 등을 활용해 보기UI적 components 또는 로직을 모듈화 시키기UX를 항상 생각해서 만들고 고민을 지속적으로 하기공통UI 구현하기API 명세서 작성하기본문CRUD본문 리스트 조회 하기본문

설치! 기능! > 다른사람 repository에서 프로젝트를 시작했을때 그 프로젝트 내용을 다시볼려면 팀원의 git에 들어가서 확인하지말고 자신에 repository 에 가져와서 편하게 보자 처음에는 clone 해서 그냥 자신의repository에 push하면 끝

Typescript란? Typescript란 간단하게 자바스크립트가 타입으로 전환되어 있는 언어라고 볼수있다. 하지만 유연하고 언어가 비교적으로 쉬운 자바스크립트에 규칙을 적용하는 느낌이다. 우리가 자바스크립트처럼 작성하면 에러가 발생하고 규칙을 지정하여 작성을 하

좋은 QA 프로세스 는 제품 또는 서비스의 품질을 개선하고 유지하는 데 효과적인 프로세스입니다. > 첫째, 품질 관리에 대한 명확한 정책과 지침이 있어야 합니다. 이 정책과 지침은 제품 또는 서비스의 개발과 운영에 대한 표준을 제공합니다. 이러한 지침은 모든 관련 이

호환성 테스트 다양한 브라우저(Chrome, Firefox, Safari, IE 등)에서 페이지가 정상적으로 작동하는지 확인 다양한 운영체제(Windows, Mac OS, Linux 등)에서 페이지가 정상적으로 작동하는지 확인 다양한 디바이스(데스

지라(Jira) > 소프트웨어 개발 프로젝트를 위한 이슈 추적과 프로젝트 관리를 위한 플랫폼입니다. 이를 통해 개발자와 프로젝트 관리자는 각각의 역할에 맞게 일정, 작업 항목, 이슈 등을 관리할 수 있다. 이슈 추적 버그, 요구 사항, 기능 개발 등의 이슈를 추적하고

Test 자동화란? >수동으로 테스트를 진행하는 것이 아니라, 스크립트나 도구를 이용하여 테스트를 자동으로 수행하는 것을 말합니다. 이를 통해 테스트의 반복적인 수행을 효율적으로 처리할 수 있으며, 일정한 품질 수준을 유지할 수 있습니다. 또한 Test 자동화는 UI나

QA는 제품 또는 서비스의 품질을 보장하기 위한 프로세스와 방법론으로, 개발부터 출시까지 지속적으로 품질을 향상시키는 작업입니다. QA 전문가들은 문제 예방과 해결을 통해 제품의 품질을 일관되게 유지하며, 다양한 테스트와 품질 관리 방법을 활용하여 성능, 안정성, 보안