TIL_

Form사용자가 정보를 입력할 수 있게 만들어놓은 웹요소를 폼이라고 한다.사용자가 폼 요소에 내용을 입력. 그 내용을 가져오거나 수정하는 일. 입력한 내용이 미리 정한 형식에 맞는지를 자바스립트가 처리하게 되는데 자바스크립트가 폼요소를 처리하는 방법을 배웠다. 사진과

오늘은 항해 사전강의 2주차를 복습하였다. button onclick="hey()">연습중 :버튼에 온클릭을 넣어준다. 나의 경우 hey뒤에 ()안넣어줘서 실행이 안됐다. 자바스크립트 복습 -클릭한 횟수 세기 연습중 let count = 0

파이썬을이용한 다양한 기능들을 사용하기 앞서 파이썬에 대한 기본적인 문법들을 공부하였다. 자세한 내용은 생략. 크롤링을 하기 전에 리퀘스트라는 프로그램을 다운받았다. 그렇다면 requests는 무엇일까? requests 라이브러리는 ajax와 유사하게 api 데이터를

오늘 배운것은 로컬서버를 만들고, 인풋창에 입력된 정보를 bd에 저장하고, 서버로 내보내는 것까지 하였다. flask란 무엇인가? Flask는 마이크로 웹 프레임워크(Micro Web Framework)이다. 프레임워크는 집을 지을 때 가장 기본이 되는 뼈대를 의미한

기초적인 html과 css를 다루긴하지만 기본적인것들만 알고 있다. 무엇보다 기초가 튼튼해야 한다는 조언을 듣고 html부터 다 정리해보고자 한다. 내가 잘못알거나, 기억하고 있으면 좋은 내용 위주로 필기를 하였고, https://poiemaweb.com/ht

오늘은 html이후로 포이마웹에서 css를 공부하다 이게 글을 읽는건지 코딩을 배우는 건지 현타가 와서 토이프로젝트를 하나 시작하게 되어싿.

오늘은 공부를 많이 하지 못했다. 원래 오늘부터 딥다이브 자바스크립트를 시작할려고 했는데 어제 투두리스트 하나도 제대로 못만드는 나를 보고 충격먹어서 직접 여러가지를 만들어보고 책을 공부해도 늦지 않을거라 생각해서 프로젝트 만들어볼만한걸 찾따가 노마드코딩에서 크롬 클론

자주 등장하는 브라우저 내장 객체는 몇가지가 있다. : 웹브라우저의 상태를 제어. 자바스크립트의 모든 객체는 window객체에 포함됨. window 객체에서 사용하는 함수는 아주많다. 그중 내가 배운건 open() : 새로운 창을 연다. window. open( "ht

엄청나게 기초적이지만 나에게는 새로운 것들을 기록하였다. conditional- 조건문parseInt- 문자열 숫자로 변환else if --> if 문안에 조건문 하나더 넣고 싶을때 -->여러개 넣는거 가능 && :andll : or (엔터 위에 있음)querysele

5/15이상하게 코딩공부는 힘들지가 않다... 이상하게 코딩을 하면 마음이 편안해진ㄷr..무언가를 만들어내는 결과물이 존재하니, 하루빨리 이를 해내기 위해 더 열심히 하게 되고, 빨리 만들어내고 싶기도하고, 내가 어떤 결과물을 낼 수 있을까 설레기도 한다. 만약 업이된

target = 클릭된 html 함수 \--> console.dir(event.target.parentElement) : 클릭 이벤트가 발생한 곳의 위치를 알 수 있다. 배열추가 하는법 : toDos.push(newTodo)toDos라는 배열에 newtodo라는 값

오늘은 드디어 깃헙을 만들고, 올리는 방법까지 배웠다 .코딩알려주는 누나의 영상을보고 따라하였다. 코알누짱!!https://hackmd.io/@oW_dDxdsRoSpl0M64Tfg2g/ByfwpNJ-Kgithub에서 뉴프로젝트 만들기2.git bash열기gi

웹사이트를 전세계로 배포하기 위해서는 일련의 과정이 필요하다. 그러한 과정을 그림으로 그려보았다. 가장먼저 나의 파일이 완성되면, 나의 웹사이트를 24시간 동안 공장처럼 돌릴 컴퓨터 즉 수뇌부가 필요하다. 24hours 컴퓨터는 내 방구석에서는 impossible하

거의 1주일 꼬박걸려 크롬앱 클론코딩 강의를 완료하였다.사실 완료라기보다는 그냥 강의를 끝까지 들었다 정도?매일매일 나의 멍청함을 느낀다. 진짜 싫다...오늘 기록하는 내용은 클론코딩 강의를 들으면서 추가적으로 기억할 내용들을 메모하였다. 가장 먼저 뭘 해야할지 모르겠

요즘 til쓰는것에 현타가 왔다. 고작 16번째 인데 나란인간..쉽게 질리는 인간이다..쓰기 싫다기 보다는 쓰고 싶은데 잘쓰고 싶다. 썸네일도 만들고 하고싶은데 기깔나는 아이디어가 안나온다...계속 고민중이다... 가장중요한것 중하나가 flex는 두가지 요소로 나누어진

원하는 data가 여러개 일때 아래와 같이 코드를 하나씩 여러번찍어야 하는 불편함이 있다. function print(person){ console.log(person.name); console.log(person.age);}print()그래서 object를

크롤링을 하다 보니 requests는 뭐고, beautiful soup은 또 뭔지 하나하나 뜯어보다 도저히 이해가 안가 근본부터 공부해보자 해서 여기까지 오게 되었다. 인터넷의 작동원리 컴퓨터에서 컴퓨터로 우리가 원하는 서비스를 이용하기 위해서는 연결이 되어있어야 한

beautiful soup vscode에 파이썬을깔았다. 터미널*을 이용해 requests를 불러와 설치해야 한다. reqeusts는 파일에 까는것이다. 프로그램에 까는게 아니다. Requests is a Python module that you can use to

부트캠프3일차.. 아직 군기빠짝 열정만땅이다... but,처음 마음먹었던 1일1알고리즘은 아직도 시작을 안했다. 왜냐믄,,,,프로젝트가 우선이기때문ㅇ..(변명) 프로젝트만 끝나면 진짜 진짜 시작할거다... 오늘은 담임매니저님과 상담이 있었다. 공부를 하면서도 계속 이

다행이 어제 열일한 덕분에 내 담당페이지의 70%를 끝내고 편안한 마음으로 나머지 30%를 할수 있었다. 남은시간에는 다른 조원들도 좀 도와주고...처음엔 너무 막막했는데 막상 해보니깐 나쁘지 않은 결과물이 나올거 같기도 하고 그렇다. 좋은api를 가져오지 못해서,

사실 부트캠프는 6월에 가기로 했었다. 하지만 개강을 앞두고 공부를 하고가지 않으면 안된다는 무시무시한 얘기들을 너무많이 들어서 기초적인 공부를 마치고 가기위해 한달을 미루고 이번에 가게되었다. 첫날 느낀바로는 미루기 참잘했다.... 이곳은 우리가 흔히 아는 학원같이

http 클라이언트가 어떻게 서버와 통신할수 있는지 정의한 프로토콜인데, 클라이언트가 서버에 데이터를 request하고,서버는 response를 해주는 방식을 의미한다. 이때 요청한 것을 받아오는 방법으로는 ajax를 사용한다 ajax는 동적으로 서버에 데이터를 받

크롤링 복습 노마드코딩 그림판 클론코딩 css 공부 frontend mentor- css 연습 스터디 과제 크롤링 복습 뷰티풀숩과, 리퀘스츠 이용시 프로그램자체를 다운받게 된다면 컴퓨터 상에 충돌이 일어나 해당 파일에 venv라는 가상환경을 만들어서 깔게 된다. 웹

이번주차는 알고리즘을 풀어보면 자바스크립트 문법과 친해지는 시간이다. 첫날 알고리즘 공장 가동을 시작했을때는 이걸 하루종일한다고? 도라방스..이번주차는 어떻게 버티지...? ;;;였는데...하다보니 맞추는 재미도 있고(아주 조금), 팀원들과 서로의 답을 비교해가며 풀으

오늘 알고리즘 모의고사 알고리즘문제 4문제 복습하기 자바스크립트 과제 https://serzhul.io/JavaScript/35.%EC%8A%A4%ED%94%84%EB%A0%88%EB%93%9C-%EB%AC%B8%EB%B2%95/ https://mylko72.gitb

일단 오늘의 OOTD먼저 자랑하고 시작할게염(❁´◡\`❁)오늘은 열공하겠다는 의미로 박사님st main컬러는 yellow..funky한 헤어스타일은 포인트..잇츠굳~!~알고리즘이 하하 난이도에서 중으로 넘어가니 3시간동안 1문제밖에 못풀었다. 이거 풀다 막혀서 저거풀

토스 밋업 스코프 때문에 값비워주는거 그리고 모의고사 문제 리뷰

또다시 새로운 주차시작.새로운 조원들을 만났다. 12조...위치만 빼면 이츠굳.... 역세권이 아니라서 주변에 사람도 없고, 우리조 밖에 없다.그래서 조금이라도 우리의 존재를 알리려고 사람들이 모여있는 윗동네와 가까워지기 위해 칠판에 올라가있다.ㅋㅋㅋ오후에는 공부하다

오늘은 과제를 미리 끝내고 싶은 마음에 강의를 다 듣진 않았지만.. 공부할건 아직 산더미지만 과제를 미리 시작했다. key를 잘못줬더니 warning은 warning대로 뜨고, 배열의 요소를 삭제를 하면 이상하게 삭제가 되었다. 어떤 object는 삭제되고, 어떤 o

DFDF

다덜 이과제 기억하십니까 오랜만에 리액트라 어리바리지만 다행이 오늘 완성을 하였고, 오늘 만났던 오류들에 대한 리뷰를 시작하겠습니돠 트러블 슈팅을 해봐야쥐 map사용시 key 문제 key를 잘못줬더니 warning은 warning대로 뜨고, 배열의 요소를 삭제를 하

우선 아이디는마지막 값의 아이디+1로 주었다. 만약 length+1로 주게된다면 한가지 문제가 발생하게 된다. 1,2,3 중에 2를 삭제했을때 length+1은 3이기 때문에 아이디가 3인 아이가 출력이 되므로 아이디가 겹치는 문제가 발생한다. 마지막 값의 아이디+1을

목표가 주어지고, 목표를 향해 막 달려오다. 과제를 끝내고 나니 당장 목요일까지는 자습을 할 수 있는 시간이 되었다. 막상 자유로운 시간이 주어지니 갈곳을 잃은 느낌이다. 리액트공부를 뭘 해야할까 고민을하다가 리덕스와 훅들을 익혀보기로 하였다. 깊게원리를 이해하기 보

오늘 호기로운 마음으로 내가 몰랐던 다양한 코드에 대해 알게되어서 좋다. 코드리뷰를 못하는걸 이렇게 푼달까 파이어베이스 위주의 수업이라 여기까지 하겠다. 나의 하루...뭔가 결과물없이 끝낸거 같아서 날린 느낌이지만 그래도 배운건 있으니깐!@ 긍정긍정 firebase

이번에 투두리스트를 만드는 과제는 아래와 같은 컴포넌트 구조를 가지고 있다. todolist부터 todo까지 state를 계속 props로 넘겨줘야 하는 구조이다. 이번기회에 props버전, usecontext버전, redux버전으로 투두리스트를 만들어보았다. 3가지

이번글은 서론이 길다. 왜냐면 구석기시대의 xhr부터 aixos까지 가기위한 여정이 멀기때문이다. 3주차 강의 시작 프론트서버에 데이터 요청 데이터를 보여주는 역할 프론트의 하는일 90% 포스트맨 시작진짜 apirest api http프로토콜 사용 서버와 클라이언트의

우선 아침에 타입스크립트강의를 두어개 정도 보다가 너무피곤해서 좀 자다가 예전에 만든 프로젝트좀 고치다가 정신이 안들어서 좀쉬다가밤이되서야 스파르타 심화반강의를 듣기 시작했다. 간단하게 mock데이터만들고, postman 사용도 해보았다. 실제로 이두개는 많이 쓰이는

vanila js로 프로젝트를 할 때에는 폴더구조에 대해 고민하지 않았다. 하지만 리액트는 컴포넌트 기반의 프로그래밍 언어어떻게 하면 컴포넌트들을 효율적으로 재사용해서 사용할 수 있을지 고민이 필요하다. 우선 결론부터 말하자면 > 정해진 틀은 없다. 다양한 디자인 방

금~목 리액트 심화주간이 시작되었다. 이번주도 헛되이 보내지 않기 위해 앞으로의 계획을 세워볼까 한다. 우선 금요일에는 과제를 하였다. 기본적인 기능구현을 끝냈다. 남은건, 코드를 최적화시키고, css로 예쁘게 꾸미고, 리드미에 설명올리기 정도가 남아있다. 목요일 까지

일주일에

직접 create-react-app을 만들어보기로 결정한 계기는 어제 리덕스 패키지도 설치안하고 리덕스툴킷이 안된다며 5시간을 넘게 삽질한 나에게 감동받아서이다.... pakage.json을 주의깊게 보고, 리액트 파일들에 대한 이해가 있다면, 이런 패키지와 관련된 오

무언가를 만들어보기 앞서 개념부터 공부해 보자 미들웨어는 어떤애일까 * 일반 리덕스* 기존의 리덕스는 액션이 발생하게 되면, 디스패치를 통해 스토어에게 상태 변화의 필요성을 알리게 된다. 미들웨어가 추가된 리덕스 리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서

리액트를 공부하면서 document.queryselector를 이용한 코드를 본적이 없었다. 그래서 원래 사용하면 안되는 거구나라고 자연스럽게 생각하고 있었다. 하지만 최근에 사용하기도 한다는걸 알게되었고, 왜 사람들이 지양하는지 알아보게 되었다. 그러한 이유는 우선

리액트쿼리 Serverstate library Managing asynchronous operations between your server and client Redux, mobs, zustand—> client state 프론트엔드의 상태에는 두가지가 있다. 프런

항해를 시작한 이래로 두번째 위기를 맞았다. 첫 위기는 항해첫날 첫 프로젝트였고, 두번째 위기는 리덕스 thunk로 crud를 구현해야 하는 과제였다. 썽크를 공부한건 오늘이 처음은 아니었다. 저번주에 파보려고 했지만 개념은 알겠는데 차마 구현은 엄두가 나질 않았다.

우선 이 이야기는 헤로쿠와 일요일부터 월요일까지 씨름하다 화요일에 드디어 깨달음을 얻고 db.json을 쏘아올리는데 성공한 이야기를 담고 있다. 여러시도 끝에 알게된 방법들을 정리해보았다. 1.json-server 설치하기 2.json-server 실행하기이 명령어는

1. 깃과 관련된 이슈 : 이번에 처음으로 a-z까지 깃으로 협업을 한거 같다. 전에는 올리는거 까지는 깃으로 하였지만 머지는 일명 손머지를 했었다. 이번에는 제대로 경험해보고자 . Organization 을 파고, 역할분담을 한뒤, 뼈대를 만들고, 각자 뼈대만든걸

쿠키//config로 GET 요청해보기(옵션)axios({ method: 'get', url: 'http://localhost:5001/sleep_times',}) .then((response) => { console.log(response); })

import { useState } from "react";import { FaStar } from "react-icons/fa";import styled from "styled-components";const Star = () => { const hovered, s

토요일쯤 되니 체력이 바닥이 났다. 리액트 인풋 관련 에러-Warning: A component is changing an uncontrolled input to be controlled.https://velog.io/@forest0501/React-Input

우선 백엔드가 있다면 , limit와 offset을 몇으로 할 지 정하고 시작해야 한다, 그리고, 페이지를 쿼리스트링으로 어떻게 보낼지 정한 뒤에 시작해야 한다.

오늘은 자잘하지만 알짜배기로 알게된 것들이 있다. 변수 뒤에 ?를 사용해주면 값이 없을때 에러대신 undefined가 뜬다. 따라서 값이 안들어와 에러가 나는 상황 또는 필수값이 아니라서 값이 있을 수도, 없을 수도 있는 상황에 쓰는 것이다. thunk의 새로운 방법에

firebase.jsapp.js

문제상황은 이렇다 무한스크롤기능을 구현하던 중 페이지 끝에 스크롤이 닫을때마다 page 스테이트를 1씩 증가해주는 코드를 짰다. 하지만 아래 사진과 같이 1이었던 숫자가 2가되고, 2가 다시 1이 된다. 왜그럴까.... 다양한 방법으로 에러를 해결하던중 이 방식으로

세션 브라우저 동작방식 우리는 웹브라우저를 만드는 사람이기 때문에 브라우저의 동작방식을 이해하는건 매우매우 중요하다 브라우저란? 웹콘텐츠를 보여준다. 자바스크립트가 돌아가는 플랫폼이환경을 '호스트; 라고 한다.브라우저의 윈도우 객체에서 BOM에서 자바스크립트가 가져옴

6주만의 블로그이다. 한동안 블로그를 쓰지 않은 이유는 이번 프로젝트외에 다른것에 신경쓸 마음의 여유가 없었다는 변명과 함께\~~ 회고록 시작합니다. 이번 프로젝트때 프론트 리더를 맡았다. 할수 있는건 다 해보자는 열정만땅의지로 맡았지만 막상 맡고나니 생각보다 막중한

우리 서비스에 TDD를 도입하게된 배경은 처음 우리의 개발 방향을 잡았을때 우리가 개발지망생에서 개발자로 한단계 업그레이드 되기 위해서는 안정되고 클린한 코드를 짜는 개발자가 되고싶다고 생각하였다. 그래서 고민한게 react testing library를 활용한 테스

가장 먼저 내가 구현하고 싶은 화면을 정리한다.<예) 버튼이 비활성화 되어있다. —> 체크박스를 누르면 버튼이 활성화된다. —> 한번더 누르면 다시 비활성화 된다.>이러한 패턴을 확인하기 위한 과정은컴포넌트 띄우고 -> 액션발생 -> 결과확인이순서가 test코드의

ㄹ

짧지만 길었던 3주간의 스터디 회고 내가 입사한 11월 부터 1월 중순까지 우리팀은 스프린트기간이었다. 1-2달로 예상했던 스프린트가 3달까지 연장되면서 이건뭐 스프린트가 아니라 전속력 마라톤인가 라는 의문을 가지게 하였다. 그렇게 헥헥거리면서 달려오다. 1월 말부터

zustand는 사용방법은 간단하지만, 다양한 방식으로 응용이 가능하며, 사용하는 사람에 따라 방식이 천차만별이다. 최적의 방법을 찾다가 알게된 방법들을 정리해본다. 참고 : Working with Zustand전체 스토어를 구독하게 되면, 스토어에 담고 있는 모든 s