'개발' 카테고리의 글 목록 (19 Page)

2022.02.19· 개발/⛵ 항해99

💜 백엔드개발자분들과 첫 협업! 이번주 프로젝트를 시작으로 이제 백엔드 개발자분들과의 협업이 시작되었다! 처음 해보는 협업이라서 긴장도되고 서로의 언어와 프로세스를 이해하지 못 할까 걱정을 많이했지만 4일이 지난 지금까지 무리없이 잘 진행되어가는 것 같다! 함께 하는 노드개발자분들도 프론트가 일이 많다고 엄청 배려해주시고 도와주셨다! API 명세를 적어내려가면서 동시에 와이어프레임 작업도 해서 프로젝트에 사용되어야 할 부분들은 꼼꼼히 챙기고 협의해야하는 부분을 잘 챙겼던것 같다. 현재는 서버개발은 끝나서 프론트 파트가 준비가 되면 axios 를 이용해서 연결하면 된다! 아직 프론트파트가 다 준비가 되지않았다. 내가 맡은 부분은 얼추 리덕스까지 진행되었는데, 로그인, 회원가입 파트가 정말 생소해서 어렵다는..

[프로그래머스] 2016년 – 자바스크립트

2022.02.19· 개발/💬 코딩테스트

✅문제 2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 Sun, Mon, Tue, Wed, Thu, Fri, Sat 입니다. 예를 들어 a=5, b=24라면 5월 24일은 화요일이므로 문자열 “TUE”를 반환하세요. ✅제한사항 2016년은 윤년입니다. 2016년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일같은 날짜는 주어지지 않습니다) ✅입출력 예 abresult 5 24 “TUE” ✅Solution function solution(a, b) { let week = ['SUN', 'MON', 'TUE'..

[220218] TIL

2022.02.19· 개발/📝 TIL

코드의 효율성이란 무엇인가요? 실제 코드를 작성하면서 생각하시는 코드의 효율성을 개선해보신적이 있는지 궁금합니다 면접 준비를 하면서 받은 예상 질문 중 하나인데, 많은 생각을 하게했다. 단순히 코드를 작성하는 사람 입장에서 코드의 효율성이란 가독성이 좋고 유지보수하기 좋으며 재사용할 수 있는 코드가 아닌가라고 제일 처음 생각을 했다. 그리고 테스트코드도 어쩌면 이라는 생각도 들었고, 컴퓨터 자원으로써의 최대 효율성은 성능의 최적화가 아닌가 라는 생각을 했다. 팀 프로젝트를 거듭하면서 코드의 효율성은 가독성과 탄탄한 아키텍쳐라는 생각을 거듭하게 되었다. 코드는 항상 읽기 쉽고 모든 개발자들이 이해할 수 있게끔 작성되어야 한다고 생각한다. 주석을 달지 않아도 읽히는 코드야 말로 정말 효율성 높은 코드가 아닐..

[JavaScript] 모던 자바스크립트 data 저장 방식(Array, object, map, set)

2022.02.19· 개발/JavaScript

자바스크립트의 데이터 소스를 크개 3가지로 나눠보자면 프로그램 자체애서 적어서 바로 받아온 것 UI에서 넣어온 소스 (from DOM) WEB Api같은 외부에서 fetch한 소스 이렇게 이 3개지의 소스에서 가져온 데이터를 저장하는 방식에는 총 4가지가 있다. 여기에는 몇 가지 기준이 있는데, 단순한 리스트가 필요한건지, 아니면 key, value 값이 필요한건지 생각을 해서 기준에 맞추어서 쓰면 된다. 저장방식은 Array, Set, Object, Map 총 4가지이다. 심플한 리스트가 필요하다면 array와 set을 이용해서 저장하면 된다. Array color = [‘red’, ‘gold’, ‘red’]; //{ ‘red’, ‘gold’, ‘red’} 👉 반복되는 값이 리스트에 포함이 될 수도 있..

[항해99] Week05. WIL – 리액트 전역상태관리

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Weekly I Learned 📚 ⭐ React 전역상태관리 전역 상태 관리란, 말 그대로 전역에서 상태를 관리한다는 말입니다. 리액트에서는 상위에서 하위로 상태 값을 전달하며 관리를 하게 되는 시스템입니다. 아래의 사진처럼 리액트 프로젝트를 만들다보면 수많은 컴포넌트들이 발생합니다. 이 때 상태값을 전달 전달하게 되면 당연히 헷갈리고, 필요없는 값도 전달하게 되는 상황이 발생하게 됩니다. 이 때 불필요한 props를 전달받아야하는 상황에서 props drilling 이라는 문제가 발생하기도 합니다. props drilling 리액트 컴포넌트에서 다른 부분으로 데이터(props)를 전달하는 과정에서 오로지 전달만을 위해서 여러 컴포넌트를 거치는 상황을 말합니다. 이런 불필요한 props dril..

[항해99] Day34. 리액트 심화주가 끝났다. 매거진 사이트 구현 완료!

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 이번 주 개인 과제였던 매거진 사이트 만들기 – 인스타그램같은 느낌의 사이트였다. 다양한 요구사항들이 있는 과제였는데 사실 제대로 잘 구현했다고 100%로 장담은 할 수가 없다. 아쉽게도 말이다. 이번 주 과제는 수요일이면 다 완성하겠지? 라고 생각했었는데, 마지막 마감까지도 좋아요 버튼 기능 버그를 잡아내지 못해서 데드라인직전까지도 코드르르 만지고 있었다. mitter 라고 이름을 지어 준 이번 나의 프로젝트! 인스타그램같은 이미지 공유 기반 sns 스타일인데 이름은 트위터에서 가져왔다 ㅎ 한 주 동안 구현 해낸 기능들을 나열해보자면 로그인 회원가입 게시물 추가 게시물 조회 게시물 수정 (+재업로드 / 레이아웃 변경) 게시물 삭제 무한 스크롤 댓글 쓰기 좋아요 ..

[항해99] Day31. TIL – 무한 스크롤 네 이놈!

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 💜 TODAY 무한 스크롤 구현하면서 오류를 만났다. 나중엔 멘토님을 붙잡고 40분가량있었는데 결과는 오타로 인한 오류였다 😐 무한 스크롤인데, 스크롤을 하면 초반에 불러지는 값의 길이만큼 똑같은게 반복적으로 로딩이 되었다. 무한 렌더링이 되는 줄 알고 데이터베이스 어쩔? 이랬는데 그건 아니였다. 무한 스크롤 컴포넌트에 넣겨주는 props값 중에 리듀서 함수에서 넘어오는 값 중에 오타가 있어서 로딩이 제대로 이루어지지 않았던 것이다. 오늘 알게 된 console.log()의 힘. 멘토님과 하나 하나씩 다 찍어보고 값이 제대로 안 들어온게 있어서 그거부터 고쳐보자 싶어서 고치러 갔다가 발견한 오타. 그리고 해결된 오류. …그리고 밀려오는 민망함. 저 오류 때문에 2..

[항해99] Day30. TIL

2022.02.19· 개발/⛵ 항해99

💜 TODAY 오늘 하루 동안 firebase를 이용해서 게시물을 올리는 걸 다 할 수 있을 거라고 생각했는데, 파이어베이스와 연동해서 로그인/회원가입 기능 구현이 어려웠다. 데이터베이스에 글을 올리고 아미지까지 올리는데 점점 흐린 눈이 되어서 강의를 보게 되는 것 같았다. 이렇게 강의를 보면서 프로젝트를 해나가면 되는건가 이게 머리에 남나? 이런 의심이 또 들기 시작했다. 그런데 확실히 코드를 적어두고 구현시켜보고 다시 그 코드를 한번 더 보면 확실히 기능 구현의 흐름을 잘 볼 수 있는 것 같기도 하다. 이제 알 것 같으면서도 점점 미궁 속으로 빠지는 느낌. 그와 동시에 작은 기능들이 하나,둘 구현되는게 눈에 보이니 뿌듯함과 동시에 재미까지 있으니 멈추지 못하고 계속하는 것 같다. 오늘 굉장히 시간을 ..

[항해99] Day29. TIL – 리액트 심화주차 시작!

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 💜 TODAY 리액트 입문주가 모두 끝나고 심화주차가 시작되었다. 개인 과제로 부여받은게 순한맛, 매운맛이 있는데 순한맛도 순한맛이 아니였다. ㅎ 순한맛으로 부여받은 과제는 약간, 채팅 기능이 빠진 트위터같은 느낌 😵 도전정신이 확! 일어나면서눈이 핑글핑글 도는 느낌을 받았다. 로그인 페이지 회원가입 페이지 메인 페이지 로그인 기능 구현 파이어베이스 회원가입 연결 를 끝낸 상황인데, 사실 컴퍼넌트를 쪼개서 구현하는 것만 해봤지 element까지 쪼개서 구현해보는 건 처음이라서 정말 신세계이면서도 모바일, 태블릿같은건 사이즈를 어떻게 조절하지? 라는 생각이 들었다. 좀 더 기능 구현이 이루어지만 디테일하게 view를 다듬을 계획이다. 💜 TOMORROW 로그인 유지..

[항해99] Week04. WIL – 라이프 사이클(클래스형 vs 함수형)

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Weekly I Learned 📚 이전에 리액트의 라이프 사이클에 대해서 포스팅을 한 적이 있는데, 이번에는 리액트의 클래스형 , 함수형에 따른 사이클의 메소드에 대한 자세한 이야기를 해보려고 한다. ⭐ 라이프 사이클 (클래스형) 클래스형에서 라이프 사이클은 세세하게 나누면 총 9개가 존재한다. 이 중에서 카테고리를 나눠보자면 크게는 3가지로 나뉘는데, 생성이 될 때(Mount), 업데이트 될 때(Update), 사라질 때(Unmount) 이다. 이해를 돋기 위해서 예전에 첨부했던 사진이지만 한번 더 첨부해본다. ⭐ 라이프 사이클 메소드 1️⃣ constructor 클래스형 생성자라는 말이다. 클래스형 컴포넌트를 만들 때 처음으로 실행된다. 이 메서드에 초기 state를 넣을 수 있다. 함수형 ..

[항해99] Day27. TIL – TDZ? / 또 다른 오류의 발견?

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ⭐ TDZ? TDZ(Temporal Dead Zone) 란, 한글로 직역하자면 일시적인 사각지대란 뜻. →스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ(Temporal Dead Zone) 라고합니다. ⭐ 변수 생성 과정 선언 단계(Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계를 의미합니다. 이 변수 객체는 스코프가 참조하는 대상이 됩니다. 초기화 단계(Initialization phase) : 실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계 입니다. 이 단계에서 할당된 메모리에는 undefined로 초기화 됩니다. 할당 단계(Assignment phase) : 사용자가 u..

[항해99] Day25. 옵셔널 체이닝(Optional Chaining)이란?

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ✨ 옵셔널 체이닝이란? 그냥 스윽- 보고 지나갈 때는 삼항연산자에 쓴느거를 다르게 말하는건가? 라며 가볍게 생각하고 찾아봤는데 그런게 아니였다. ……… Optional Chaining은 ES2020에서 등장한 새로운 연산자로서 ‘?.’ 의 형태로 사용하며 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자이다. 체이닝 연산자(.)와 비슷하게 동작하지만 참조가 null 혹은 undefined여도 에러식을 리턴하지 않고 undefined 값을 리턴한다. 함수도 마찬가지다. 중첩된 오브젝트 프로퍼티에 접근하는 데에 가장 안전한 방법으로, 중간 프로퍼티가 존재하지 않은 경우에도 안전하게 접근..

티스토리툴바