TIL

자바스크립트 자바스크립트란 웹 브라우저에서 작동하는 프로그래밍 언어 이다.

불 표현식 ? 참 결과 : 거짓 결과|| : 좌변이 참이면 무조건 참&& : 좌변이 거짓이면 무조건 거짓

입교 시험후 자바스크립트 1챕터 ~ 3챕터 복습 식별자의 종류!! 자료형 검사 : 숫자, 문자열, 불 같은 자료형을 확인하기 위해 - typeof(자료) 연산자 사용

배열 [] 사용 쉼표(,) 구분 내부의 값을 요소 라고 한다! 요소의 순서를 인덱스 라고 부른다. / 배열[인덱스] 요소 개수확인 length 속성사용

오늘은 앞 챕터가 부족한거 같아서 5챕터 조금 보다 1~4 챕터를 다시 보고 기록!식별자 () X - 단독 사용 : 변수 / 다른식별자 같이 사용 : 속성식별자 () O - 단독 사용 : 함수 / 디른식별자 같이 사용 : 메소드이스케이프 문자() 를 사용하면 따옴표 문

함수

오늘부터 미니 프로젝트를 진행하였다... (어렵네....)오늘 회의 에서 API명세서, 와이어프레임 작성을 했습니다!기술매니저님이 알려주신 RESTfulAPI 설계에 사이트(https://sanghaklee.tistory.com/57)를 알려주셔서 내용을 읽어

미니 프로젝트 html작업과 css작업을 거이 완성해나갔으며 반응형nav 에서 높이를 변경하면 css가 깨지는 경우가 발생했습니다. 이를 해결하고자 하였으나 부트스트랩 특성상 css가 내장되어 있어 변경하면 기본css랑 충돌이 일어나게 됩니다. 이것만 해결하게 된다면

오늘 미니 프로젝트 진행 하면서 와이어프레임, API명세서를 보고 프로젝트를 진행하였고 아직 많이 부족한거 같았다. 조금더 분발하고 열심히 해야겟다!

나의 의도 : 로그인, 회원가입시 모든 입력 값에 충족 했을 때 경고문 출력을 하려 했습니다.문제 진단 : 로그인, 회원가입이 서버에 보냈는데 데이터가 빈값으로도 처리 원치 않았는데 됐습니다.나의 노력 : 조원과 회의를 통해 유효성 검사에 대한 문제점을 찾았습니다.내가

알고리즘 1번(직사각형 별 찍기) 알고리즘 2번(짝수와 홀수) function total(s){ return s%2 ? "Odd" : "Even" } total(9) = Odd total(6) = Even 해설 : 삼향 연산자를 사용햐 s%2 조건을 만들고 ?

알고리즘 4번 알고리즘 5번 알고리즘 6번 알고리즘 7번 알고리즘 8번 알고리즘 9번 알고리즘 10번 알고리즘 6번

알고리즘 11번(x만큼 간격이 있는 n개의 숫자)

알고리즘 16번(문자열 내 p와y의 개수)

알고리즘 23번(자연수 뒤집어 배열로 만들기) 알고리즘 24번(정수 내림차순으로 배치하기) 알고리즘 25번(정수 제곱근 판별) 알고리즘 26번 알고리즘 27번 알고리즘 28번(하샤드 수) ![](https://velog.velcdn.com/images/koz8

오늘 알고리즘 테스트를 봤다.... 아직까진 알고리즘이 어렵게 느껴지지만 처음 시작할때 보다는 많이 늘어난거 같다! 내일부터 React 배우기 시작한다 얼른 Javascript를 최고상태로 만들어야 겠다!!! 알고리즘은 하루에 한개씩은 풀어보자!!

오늘은 React 기초를 배우기 시작한날입니다. 배우기전에 예전에 배운 html,css,js를 다시 돌아보는 날이면서 react 기초 설치와 react가 무엇인지 알게 되는 날이 었던거 같습니다!S.A과제로 html 만들고 netlify로 배포를 해보았습니다!React

유사배열 : 유사 객체 배열은 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다. 유사배열 각 요소를 수정방법 -Array.from() 메서드는 유사 배열 객체나 반복 가능한 객체를 얕게 복사해새로운Array 객체를 만듭니다. 배열

event.target

ref를 이용하여 DOM에 접근하는 이유는 가상DOM에 접근하기 위함입니다.Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다.

오늘 기술매니저님과 이야기를 했습니다.1\. 리액트에서 key값을 왜 넣어주어야 하며, key 값은 고유한 값을 받아줘야한다고 했습니다.

오늘은 react 시험을 한날입니다... 시험에서 원하는 것은 다만들고 css 작업도 진행을 했습니다. 하지만 깃허브 터미널 작업하는데에서 막혔습니다. 브랜치를 새로 생성해서 그 곳으로 파일을 넘겼지만 넘어가지않고 시간이 흘러 해결 못하고 레파지토리를 새로 하나 파서

나중에 알아볼 내용들Zustandredux-toolkitreact-queryUUID

오늘은 Redux에 대해 공부를 하였습니다. Redux는 중앙 state 관리소를 사용할 수 있게 도와주는 패키지입니다! redux를 사용하는 이유는 props Drilling 부모에서 자식컴포넌트로 데이터를 전달해주는데 불필요한 컴포넌트를 거쳐 내려가는것을 방지? 하기위해서 상태관리 redux를 사용합니다! useState로 생성한 state는 local...

FLUX 패턴 사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Stor의 데이터를 변경한 뒤 view에 반영하는 단반향으 흐름으로 애플리케이션을 만드는 아키텍쳐입니다. 각 요소들은 단방향 흐름에 따라 순서대로 역할을 수행하고, View로 부터 새로운 데이터 변경이 생기면 처음부터 다시 이 순서대로 실행합니다. 이...

오늘 리액트 개인 과제를 시작할려 했지만 내가 뭐부터 손대야 하는지 감을 잡지 못하구 갈팡질팡을 하다 시간을 날리면 안될거 같아서 리액트의 기초부터 다시 하기 시작했습니다! 다시 돌아가니 조금 몰랐던 부분과 헷갈리던 부분을 조금은 알아갈수 있어서 좋았지만 주어진 과제를

1

오늘 부터 리액트 심화 주차가 시작되었습니다!! json-server, axios가 제일 중요한 요점인거 같다!! 흠... 오늘 강의 듣긴 했지만 아직 모든 부분이 다 이해가 안되는거 같다.. 그리고 React 끼리 팀과제 와이어 프레임, api명세서등 작업을 진행하였

오늘 조원과 협업을 진행하면 깃허브로 서로 파일을 올린뒤 푸시했습니다!1.yarn add react-scripts 이걸 쓰면 해결됨2.깃관련 코드git clone 주소 하면 파일을 받아올수 있다!git checkout develop // develop 브랜치로 넘어감g

기술 매니저님과 멘토링

오늘

팀과제 거이 막바지 인거 같다!! 대부분 기능들은 완성을 한거 같고 css랑 서버 배포만 남은거 같다!!! 마지막 까지 화이팅 하자!!

오늘 미니 프로제트시작한 날이다 초반 git 작업과 css/ react 컴포넌트 분할등 작업을 진행하였습니다. 그리고 하루 이틀안에 css 작업을 마치고 기능작업을 들어가게 될거 같습니다 이번주차 화이팅!!

오늘 BE와 FE 서버 통신을 하였습니다 진행 도중 CORS에러가 발생하였고 프론트에서 CORS 에러를 해결하는 방법이 axios에인스턴스 생성해서 헤더를 공식문서 : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

오늘 트러블 슈팅 같은 모듈 에서 같은 초기값을 get방식으로 가져올시 겹쳐져서 에러가 걸림 해결 모듈을 나누거나, 초기값을 넣어주는곳을 다르게 잡아야한다! 버튼 클릭시 원하는 값만 나타나게 만드는 법 useSelect로 값을 모든 값을 출력해주고 filter를 써서 원하는 값만 분류한뒤 useState를 써서 버튼 클릭시 그 값만 변경후 출력되게 만듭...

오늘 댓글 추가,삭제, 수정 / 좋아요 기능만 남았습니다...트러블 슈팅댓글 추가시 writer 를 useState 써서 초기값안에 writer를 넣어 주었습니다 처음 작성과 그다음 작성은 되었지만 새로고침시 writer이라는 값이 undefined가 되면서 500에러

..

오늘 미니프로젝트가 끝난 주차 이다.... 7일동안 불태운거 같지만 아직도 나는 부족하다고 느껴지는거 같다!! crud를 2번 정도 하니 어느 정도는 된거 같아 좋은거 같다!! 추가로 좋아요 기능도 구현을 해봐서 이번 주차는 많이 얻어 간거 같다!!!!!!\~\~~최종

오늘 클론코딩주가 시작 되었습니다. 여러의견이 나와서 조율후 최종선택된 것이 텀블벅사이트를 입니다. 오늘은 api명세서, 프론트에서는 와이어프레임과 layout작업을 시작 했습니다 저는 오늘 로그인 페이지 작업을 했고 아래와 같이 작업하고 회원가입도 진행중입니다!!텀블

클론 코딩 2일차 진행중입니다!! 어제, 오늘 회원가입, 로그인 레이아웃은 끝마치고 오늘 react-slick에 대해 공부중인데 많이 어렵습니다.. 상세페이지에서 이미지 슬라이더 기능때문에 react-slick에 대해 보고 있지만 아직까진 이해가 되지않아 어려움을 겪고

오늘 css작업은 끝나고 기능으로 넘어가서 댓글 crud로직은 완료되고 서버와 연동만 시키면 끝이날거 같습니다! 그리고 나머지 작업으로는 로그인과 회원가입에 대해 로직을 짜고 유효성 검사를 하면 대부분의 기능은 끝이 날거 같습니다! 3일안에 최대한 많은 것을 끝내도록

오늘

클론코딩을 끝마치고 발표하는 시간과 기술 매니저님의 피드백을 듣고 중요하고 느낀내용들은 옵셔널 채이닝에 대해 좀더 알았으면 좋겠고 react에서 불필요한 파일들을 제거해주고 버튼을 하나의 컴포넌트로 관리해주면 좋겠다고 피드백을 해주셨습니다 (텀블벅 클론코딩 하지마세요.

실전 프로젝트 시작하는 날입니다 오늘 백엔드와 프론트와 주제를 선정하고 디자이너님도 오셔서 같이 주제에 대한 의견을 묻고 최종 주제를 선정후 프론트엔드 컨벤션을 정하고 기능에 대한 회의도 진행하니 시간이 많이 들었고 오늘과 내일은 주제에 대해 회의하는 시간이 많이 들거

오늘 음성에 대한 기능에 대해 알아보다 (확실한 정보는 안알려 줍니다) soundwave(힌트)에 대해 알아보았고 이 것을 우리 팀원들이 적용하고 싶은 기능과 들어 맞아 회의가 쉽게 끝이 났고 월요일에 디자이너분과 회의를 하고 와이어 프레임을 만든뒤 오후 늦게 css

디자이너분과 회의가 끝이 나고 프론트엔드분과 각자 구현할 페이지 나누었고 저는 로그인, 회원가입, 상세, 마이페이지를 맡았고 최대한 제 역량을 발휘하여 끝내고 추가적인 기능을 구현할 생각입니다! 오늘은 로그인, 회원가입페이지를 모달창으로 구현해야하는데 모달을 기초를 공

모달로 로그인,회원가입을 구현하는데 로그인 모달안에 회원가입 버튼 클릭시 회원가입 모달이 들어가는 2중 모달을 구현해야 했습니다... 12시간이 걸려 어떻게 구현을 하였지만 아직 코드에 대해 이해를 못한거 같아서 로그인과 회원가입 로직을 구현후 다시 2중 모달에 대해

로그인, 회원가입 로직은 대부분 완성이 되었고 s3 이미지 업로드에 대해서 공부중이긴 한데 아직도 해결을 못하고 있습니다... 어떻게 돌아가는지 아직도 이해를 못하고 있고 내일 팀원분께 이야기해보고 이해를 최대한 해보는게 좋을거 같습니다...

어제 오늘 s3 이미지 업로드에 대해 시간을 엄청 소모를 했다.... 최대한 찾아보고 물어보고 해서 s3에 이미지 올라가고, 서버에 url을 보내는 로직을 구현했습니다.!!.then((res)=>{})를이용해서 값을 받아오면 된다!!

React wavesurfer, waveform에 대해 공부를 하였습니다... 아직 이라이브러리에 대해 지식을 모르다 보니 막상 사용하기가 힘들고 ui쪽으로도 변경시키고 싶은데 잘 안되니 답답합니다... 다음주 월요일 까지 기간을 두고 최대한 공부하고 사용법을 숙지후에

어제 밤에 회원가입 로직에서 프로필 사진이 있을때와 없을때에 변수값이 빈문자열이거나 url 주소가 들어있는것 로직을 구현해야하는데 프로필 사진이 있을때 로직만 구현된 상태라서 빈상태일때는 서버로 전송이 안되서 그것에 대해 로직을 구현하는데 시간이 조금 걸렸고 Promi

오디오 라이브러리에 관련해서 적정선으로 이해하고 상세페이지에서 내가 원하는

로그인, 회원가입에서 짜잘한 에러부분(file타입 확장자를 accept )을 해결하고 오늘 상세페이지 작업을

1

상세페이지 ui 작업이 끝나고 상세페이지에서 서버와 통신작업을 하던 도중 에러를 만나서\--두에러 해결후 다시 적자내일안까지 각 오디오 재생및 오디오바를 만들어 시간과 바만 생성해서 wavesurfer와 연동을 시킨뒤 오디오가 잘 재생되게 노력을 할 예정입니다!!댓글

.

아직도 wavesurfer에 대해 해결을 못하고 진행이 더뎌지는 상태입니다... 음원을 대해 생각해야 할점이 너무 많다보니 어렵게 느껴집니다.! 현재 진행 상황은 전체플레이 재생(가능) , 각각의 음소거 및 소리 볼륨조절(가능) 상태입니다..미구현(상단바와 음원의 연동

좋아요기능을 하였습니다

댓글 crud 작업을 진행 본인일시 댓글 수정 삭제 가능 댓글 좋아요 기능 1번은 기본적인 crud라서 코드적인 부분은 작성X 2번 본인을 구분하는 user정보를 get으로 가져와서 댓글의 user정보와 일치하면 삭제할수 있게 삼항연산자를 사용 / 로그인 안했을시

리프레시 토큰 재발급에 대해 기록!!

내일 중간 발표 때문인지 코딩하는데 집중을 잘 못하는거 같습니다. 기대반 걱정반.... 오늘은 적당히 코드 치고 자야겠습니다..!! 중꺽마!

오늘은 중간 발표회 하는 날이라 작업을 거이 못하고 css 부분을 수정하거나, 서버와 연결된 부분에서 에러나는 부분을 수정하는 작업을 하고 오후 3시부터 1조 발표가 시작이 되었습니다!! 각 조에서 했던 작업을 보면 다들 잘하는거 같고 추후 항해 끝나기 전에 그 조를

설연휴이지만 아직 나는 코딩이 부족한거 같아 다른 사람들이 쉴땐 나는 코딩을 좀더 해야 한다는 느낌이 듭니다... 그래서 오늘은 설정 페이지 작업을 진행 하고 있습니다.. 이 페이지에서 각각의 부분에 대해 내일 백엔드와 협의 해야 할 부분이 있을 거 같고 ui작업은 거

설정페이지 작업을 하던 도중 최상단 div에 overflow를 적용시키고 계정 설정과 알림설정 버튼 클릭시 스크롤이 이동이 안되는 문제점이 발생했습니다!! 시도 해본 방법 react-scroll 라이브러리를 사용해서 이동하게 시도를 해봤지만 overflow를 풀면 적

오늘은 마이페이지 UI작업을 했습니다..! 아직 작업을 덜한부분이 무한스크롤, 하단오디오와 연결하는 부분이 남아있습니다!! 최대한 노력해서 무한 스크롤을 구현을 해볼 예정입니다!!

마이페이지 짜잘한 작업 마치고 alert창을 모달로 변화시켜주는 작업을 했습니다. 그리고 상세페이지 디자인이 다시 나와 적용중입니다! 감기가 걸려서 몸 상태가 그닥 좋지 않네요...업로드중..

공유 기능을 구현 해보았습니다 facebook, linkedin, twitter 같은 경우에는 react-share 라이브러리를 이용하여 구현을 하였습니다! import 해서 아이콘을 가져올수 있고 props로 size나 borerRadius등을 설정할수 있습니다!

오늘은 설정페이지 작업을 했는데 useState 지옥이 펼쳐 졌다... ㅎㅎ 이건 지옥이야... 추후 코드를 velog에 나와있는 useReducer로 적용 시켜 볼생각입니다!! 참고 : https://velog.io/@eunbinn/a-cure-for-react-useState-hell

카카오 소셜 로그인 로그인 버튼 있는 jsx 파일에 라우터부분 backend와 통신api 연결 kakao 실행할 컴포넌트

오늘 세세하게 작업한뒤 좋아요/ 팔로우/ api 통신 3개 작업하고 마이페이지 작업에 집중을 했습니다!!페이지네이션 기능서버 주소에 요청을 해서 axios.get('주소?page={숫자}&size=몇개 받아올지 확인'상태값 page ,setPage = useState(

애니메이션 css에 대해서 공부를 하였습니다!! animation-name : 애니메이션 이름 (즉 @keyframe 이름) animation-iteration-count : 반복 횟수 animation-direction : 반대 방향으로 실행 animation-duration : 실행 시간 animation-timing-function : 곡선의 형태 ...

오늘은 코드 리펙토링을 했습니다!!redux모듈에 로직을 변경하고 설정페이지 useState 지옥에서 벗어나기 위해 useReducer을 쓰고 로직을 변경해보았습니다!!

오늘은 reducer 부분의 코드를 야매 방식일까...? post,put,delete 같은 통신이 끝나면 get요청을 한번더 해서 상태값들을 바로바로 변경을 시켰다 하지만 이것에 대해 조금의 의구심이 들었다... 통신이 2번이 일어나서 서버에 좋지 않은 영향을 끼치지 않을까 라는 생각이 났다... 그래서 아직은 코드 코드를 수정하기엔 기초가 많이 부족한거 ...

컴파일과 인터프리터에 대해 알아 봤습니다!!

공간복잡도와 시간복잡도 복잡도는 알고리즘의 성능을 나타내는 척도입니다. 시간 복잡도는 특정한 크기의 입력에 대하여 알고림즘이 얼마나 오래걸리는지 의미하며 공간 복잡도는 특정한 크기의 입력에 대하여 알고리즘이 얼마나 많은 메모리를 차지하는지 의미합니다. > 스택 큐

배열 vs 링크드리스트 배열은 특정 크기만큼 연속된 메모리 공간에 데이터를 저장하는 자료구조입니다. 링크드리스트는 각각의 데이터가 메모리 공간 상에 고유한 노드로 존재 하며 자신의 앞과 뒤의 데이터의 주소만 기억합니다. 배열과 링크드리스트의 조회속도는 배열이 빠르며 추가및 삭제는 링크드리스트가 더 빠릅니다. 배열은 컴파일 과정에서 메모리가 할당되는 정적 ...

호이스팅함수안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 의미합니다. var 같은 경우에는 선언한 변수와 함수만 호이스팅이 되고 할당된것은 호이스팅이 되지 않으며, let과 const는 호이스팅이 일어나지 않습니다!스코프스코프는 식별

contextAPIReact에 내장되어 있는 기능으로 props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할수 있게 해줍니다.웹 스토리지웹 스토리지에는 로컬스토리지와 세션스토리지가 있습니다. 이 두 스토리지는 스토리지에 키와 값을 저장합니다. 하지

TCP 3 way handshakeTCP/IP 프로토콜을 이용하여 통신을 하는 응용프로그램이 데이터를 전송하기 전에 먼저 정확한 전송을 보장하기 위해 상대방 컴퓨터와 사전에 세션을 수립하는 과정을 의미합니다. 과정 설명으로 1. 클라이언트가 데이터 보내기 전에 동기화

리액트, js, cs, redux 모든게 다 부족한거 같다.... 일단 최대한 리액트,자바스크립트를 잘알고 넘어가야 어디를 취업하더라도 내가 이 기술에 대해서는 확실하다는 것을 설명을 할수 있을거 같다.... 공부하면서 간단한 사이드 프로젝트도 할 예정이다.! 좋은 회

사이드 프로젝트를 진행했습니다! 백엔드 2, 프론트 3, 디자이너 2 인원으로 개발자 면접 공부에 대한 주제로 만들려고 하고 있습니다.

UI 컴포넌트를 독립적으로 분리해 개별 관리 및 테스트를 도와주는 도구라고 합니다.개별 정리,정돈 편리재사용성을 고려한 디자인 & 개발 가능테스트 용이개발자의 관점불필요한 작업을 줄여줍니다.안정적으로 검중된 코드를 사용할 수 있다.캡슐화를 통해 테스트가 쉬워집니다.

오늘 스토리북 설치를 해보았습니다.!!

타입스크립트 기초 지식TypeScript는 JavaScript로 컴파일 되는 트랜스파일러 or 컴파일러 입니다.한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른언어로 변환하는 것을 의미합니다.인간이 입력한 코드를 바이트로 변환해서 컴퓨터가 알아들을 수 있

타입스크립트 설치하는 방법yarn으로 설치설치후 tsc명령어위의 명령어 입력후 타입스크립트 셋팅이 완료된 파일(tsconfig.json)이 생성혹시 zsh: command not found: tsc 이 뜰시해결방법

오늘 이력서 피드백 받은거 수정하고 회사 10군데를 지원한거 같다... 다 합격하면 좋겠지만 아직 한참 부족하지만 사이드프로젝트, 프로젝트 리펙토링, 타입스크립트 공부하면서 계속 지원은 해야할거 같습니다. 오늘 타입스크립트 조금 공부하고 자야할거 같네요! 정리는 아래와

취업 준비는 해야하는데 왜이리 할게 많을까.... 라는 생각이 너무 많이 든다! 타입스크립트를 공부하고 사용할줄만 알게된다면 추후 내가 지원할 수 있는 회사가 많아 질거 같고 스토리북도 공부해보고 싶고.. 사이드 프로젝트를 빠르게 완성하고 싶고 내가 했던 프로젝트들을

사이드 프로젝트작업을 하는 도중 공통 컴포넌트에서 내가 props를 children으로 전달 받게 해주는데 typescript로 하다 보니 하위 컴포넌트에게 줄때 설정 해줘야하는게 있습니다.위 방식으로 해줘야 다른컴포넌트에서 사용할 수 있습니다.

오늘 사이드 프로젝트를 한 내용으로 기준을 잡고 TIL 쓰려고 합니다.특정 컴포넌트에서 url주소를 기준으로 각 페이지에서 다르게 보여주게 하고 싶었습니다.일단 url 주소를 가져오는 방법은 (JS 기준)window.location.href전체 URL 문자열을 가져옵니

오늘 사이드 프로젝트 디자인 수정과 타입스크립트 작업을 해보았습니다.useNavigate() react Hook을 typeScript로 변환해서 써보았습니다.useState() 타입스크립트useState<타입>()와 같이 Generics을 사용하여 해당 상태가 어

오늘 설정페이지와 마이페이지 작업을 했습니다. 아직 UI 적으로 수정해야할 부분이 있어 중간점검차 TIL에 적었습니다. 그리고 chart 라이브러리중 ApexCharts를 선택했고 공부중입니다.! 최대한 빨리 끝내고 취업하고싶다..

오늘 이미지 성능 개선에 대해 공부를 하였습니다... jpg, svg, png 등등 여러개 파일이 있는데 각각에 대해 아직 부족해서 공부를 좀더하고 정리를 해야할 거 같습니다. 그리고 내일은 mock데이터를 사용하여 임시데이터로 무한스크롤을 구현해 볼 생각입니다.!

velog 오랜만에 작성하는거 같다!!어제 프론트끼리 작업하고 머지하고 각자 작업할거 진행하고 소셜로그인 타입스크립트로 시도하였으며 쿠키에 값을 저장 했고, 다른 api들 토큰이 없어서 값을 받아 오지 못하였지만 오늘 소셜에서 accesstoken 값을 받아와 다른 a