카카오 단풍톤 3기를 마무리하며... 예선 해커톤이 마무리가 되었다. 해커톤을 마무리하게 되면 가장 먼저 해야 할 일은 바로 "문서화"라고 생각한다.해커톤을 하면서 내가 느낀 점, 깨달은 점 등을 적어보도록 하겠다. 해커톤에서 가장 중요한 것. 내가 생각하기에, 그리고 대부분이 인정할 것인데.. 그건 바로 "사람"이다.단풍톤을 하면서 시간이 지남에 따라 "아이디어"라던지.. 프로덕트의 기능이라던지 등등. 이런 부분은 점점 시간이 지남에 따라 잊어가지만, "사람"만큼은 계속에 기억에 남을 것이다.그리고 코드를 작성하는 건은 결국 사람이다. 협업도 사람과 한다.그러니 개발자에게 가장 중요한 역량이 뭐냐고 물어본다면 1순위로 "경청과 질문"이라고 보고 있다. (물론 개발 실력도 중요함)이런 역량을 확실히 키우고 성장하여 사람과 같이 더 좋은 프로.. 2024. 11. 24. 9. 리액트로 포트폴리오 사이트 만들기 (마무리) 사실상 이미 저번 리액트 문법으로 모든 빌딩은 끝난 셈이다. 다만, 전체적인 스무스 효과와 가로 모드, 배포 정도가 남았기에.. 이런 저런 부분을 마무리하고자 한다.참고하고 싶다면 다음 사이트를 참고하자.https://webstoryboy.co.kr/1943 20. 포트폴리오 사이트 만들기 : React-Site : 마무리 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 마무리 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보webstoryboy.co.kr전체적인 코드는 다음과 같다.https://github.com/kss2002/PortfolioWebsite-be.. 2024. 9. 25. 8. 리액트로 포트폴리오 사이트 만들기 (푸터 영역) https://webstoryboy.co.kr/1942 19. 포트폴리오 사이트 만들기 : React-Site : 푸터 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 푸터 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리webstoryboy.co.kr(관련 사이트)https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta development by creating an account on.. 2024. 9. 22. 7. 리액트로 포트폴리오 사이트 만들기 (연락처 영역) https://webstoryboy.co.kr/1941 18. 포트폴리오 사이트 만들기 : React-Site : 연락처 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 08 포트폴리오 사이트 만들기 : 연락처 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토webstoryboy.co.kr(관련 사이트)https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta development by creating an account o.. 2024. 9. 20. 6. 리액트로 포트폴리오 사이트 만들기 (포트폴리오 영역) https://webstoryboy.co.kr/1940 17. 포트폴리오 사이트 만들기 : React-Site : 포트폴리오 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 07 포트폴리오 사이트 만들기 : 포트폴리오 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹webstoryboy.co.kr(관련 사이트)https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta development by creating an account.. 2024. 9. 20. 5. 리액트로 포트폴리오 사이트 만들기 (사이트 영역) https://webstoryboy.co.kr/1939 16. 포트폴리오 사이트 만들기 : React-Site : 사이트 영역소개 안녕하세요! 웹스토리보이입니다. 이번에는 사이트 영역을 작업하겠습니다. 크게 어려운 점이 없으니 잘 따라해주세요! 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기webstoryboy.co.kr(관련 사이트)https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta development by creating an account on GitHub.github.. 2024. 9. 19. 4. 리액트로 포트폴리오 사이트 만들기 (스킬 영역) https://webstoryboy.co.kr/1938 15. 포트폴리오 사이트 만들기 : React-Site : 스킬 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 05 포트폴리오 사이트 만들기 : 스킬 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리webstoryboy.co.kr(관련 사이트)이것 또한 코드가 길기에 다음 깃허브 사이트를 참고하자.https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta develo.. 2024. 9. 18. 3. 리액트로 포트폴리오 사이트 만들기 (인트로 영역) https://webstoryboy.co.kr/1937 14. 포트폴리오 사이트 만들기 : React-Site : 인트로 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 04 포트폴리오 사이트 만들기 : 인트로 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토webstoryboy.co.kr(참고 사이트)인트로 부분이 완성이 되었다.왼쪽은 마우스를 hover하지 않은 상태. 오른쪽은 마우스를 hover한 상태이다.이것또한 코드가 길어서, 코드는 밑의 링크를 참고하자.https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/Portfolio.. 2024. 9. 18. 2. 리액트로 포트폴리오 사이트 만들기 (헤더 영역) https://webstoryboy.co.kr/1936 13. 포트폴리오 사이트 만들기 : React-Site : 헤더 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 03 포트폴리오 사이트 만들기 : 헤더 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리webstoryboy.co.kr(관련 사이트)이번에는 "헤더" 영역을 세팅했다.https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta development by cre.. 2024. 9. 18. 1. 리액트로 포트폴리오 사이트 만들기 (셋팅, 컴포넌트화) 원래 자바스크립트 심화 버전 강의를 듣고 있었지만, 너무 이론적이고... 무엇보다 아직 리액트로 사이트를 빌딩 하는 과정에 대해서는 완벽히 모르고 있기에, 따른 유튜브 강의를 듣기로 했다.물론 추가 활동인 "백준 문제 풀기"도 지속할 것이다. https://webstoryboy.co.kr/1934 11. 포트폴리오 사이트 만들기 : React-Site : 셋팅하기Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 01 포트폴리오 사이트 만들기 : 셋팅하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리webstoryboy.co.kr(여기 블로그를 참고하였다.)스킬은 리액트가 되어줄 것이고, SCSS, GA.. 2024. 9. 16. 10. [Reflect 6~7챕터] 자바스크립트 완전 끝내기: ES6+ 심화 6. getPrototypeof(), setPrototypeof(), ownKeys(), getOwnPropertyDescriptor() Reflect.getPrototypeOf() 정적 메서드는 주어진 객체의 프로토타입을 반환합니다. Object.getPrototypeOf()와 거의 동일합니다. 참고로 Object.getPrototypeOf() 메서드는 지정된 객체의 프로토타입(가령 내부 [[Prototype]] 속성값)을 반환합니다. __proto__ 는 프로토타입을 설정할 수 있다.실제로 Object.getPrototypeOf()를 통해 확인한 프로토타입이 parent와 동일한 것을 보면 알 수 있다. Reflect.setPrototypeOf() 정적 메서드는 주어진 객체의 프로토타입(내부 [[Pr.. 2024. 9. 15. 9. [Reflect 4~5챕터] 자바스크립트 완전 끝내기: ES6+ 심화 4. has(), deleteProperty()Set 객체의 has() 메서드는 이 Set 객체에 주어진 요소가 존재하는지 여부를 판별해 반환합니다. 또한 결국 has는 true 혹은 false을 반환하는 함수라고 결론을 지을 수 있습니다.handler.deleteProperty() 메서드는 delete 연산자에 대한 트랩입니다. Reflect.deleteProperty() 정적 메서드는 속성을 제거할 수 있습니다. delete 연산자의 함수판이라고 할 수 있습니다. 5. defineProperty(), preventExtensions(), isExtensible() Object.defineProperty() 정적 메서드는 객체에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정한 후, 해당 객체.. 2024. 9. 14. 8. [Reflect 2~3챕터] 자바스크립트 완전 끝내기: ES6+ 심화 2. get(): this 참조 오브젝트, Proxy 핸들러의 get() 트랩객체의 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 나뉜다. 일반적으로 선언 또는 할당으로 지정되는 property는 데이터 프로퍼티이다.let myObj = {str: 'a', num: 1}접근자 프로퍼티는 획득자 함수 get(){}, 설정자 함수set(){} 인데, 객체 외부에서 property를 호출했을 때에는 함수가 아닌 일반 property처럼 보인다. get(){}getter(획득자) 라고도 불린다.property를 읽으려고 할 때 함수를 호출(실행)하여 값을 리턴한다.즉 함수에서 리턴하는 값이 property 값이 된다.let myFriend ={ get name(){ return 'Jin Woo'; }}.. 2024. 9. 13. 7. [Reflect 1챕터] 자바스크립트 완전 끝내기: ES6+ 심화 1. Reflect 특징: Reflect 오브젝트, Proxy 사용이번에 배운 것은 Reflect 오브젝트이다.(코드는 다음과 같다.)Reflect 는 중간에서 가로챌 수 있는 JavaScript 작업에 대한 메서드를 제공하는 내장 객체입니다. 메서드의 종류는 프록시 처리기와 동일합니다. Reflect는 함수 객체가 아니므로 생성자로 사용할 수 없습니다. 다른 대부분의 전역 객체와 다르게, Reflect는 생성자가 아닙니다. 따라서 함수처럼 호출하거나 new 연산자로 인스턴스를 만들 수 없습니다. Math 객체처럼, Reflect의 모든 속성과 메서드는 정적입니다.Reflect 객체의 정적 메서드 이름은 프록시 처리기 메서드의 이름과 같습니다. 또한 Reflect는 proxy를 사용할 수 있다.이때 pr.. 2024. 9. 12. 6. [Proxy Trap 5~7챕터] 자바스크립트 완전 끝내기: ES6+ 심화 5. defineProperty(), preventExtensions() , isExtensible() 트랩 Object.defineProperty() 정적 메서드는 객체에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정한 후, 해당 객체를 반환합니다. Object.preventExtensions() 메서드는 새로운 속성이 이제까지 객체에 추가되는 것을 방지합니다 (즉 객체의 장래 확장을 막습니다). Object.isExtensible() 메서드는 객체가 확장 가능한지(객체에 새 속성을 추가할 수 있는지 여부)를 결정합니다. 6. getPrototypeof(), setPrototypeof() 트랩 Object.getPrototypeOf() 메서드는 지정된 객체의 프로토타입(가령 내부 [[Pr.. 2024. 9. 11. [9/10] 프론트엔드 스터디 후기 1. 참여한 과정구름톤 유니브에 프론트엔드로 지원하게 되었고, 운이 좋게도 뽑히게 되었다.이후 리액트를 배우게 되었다. 지금은 자바스크립트 심화버전을 듣고 있다.2. 어떻게 진행했는가진행은 파트 스터디와 전체 스터디로 나뉘게 되었다.두 개의 스터디 모두 일단은 온라인으로 진행이 되었으며, 일요일에 파트 스터디, 화요일에 전체 스터디를 진행한다. 시간은 오후 6시이다. (파트는 다름)또한, 개강 이후에 전체 스터디는 오프라인으로 진행하고 있다.이후 시간은 바뀔 수 있다. (지금 오후 6시임)3. 어떤 내용을 공부했는가 자바스크립트 심화 버전에 대한 공부를 진행하였다.(물론 이 전 내용도 포함되지만, 일단 주간에 대한 것만 올리겠다. 그 동안 배운 것은 티스토리에 전부 기록을 해두었다.)다만 내용이 좀 심화.. 2024. 9. 11. 5. [Proxy Trap 1~4챕터] 자바스크립트 완전 끝내기: ES6+ 심화 1. set() 트랩-1: set(), set() 트랩 호출, set() 트랩 준수사항 세트(Set)는 자바스크립트에서 고유한 값들의 집합을 다루는 자료구조이다. 이를 활용하면 데이터 중복을 제거하고 유일한 값들을 효과적으로 관리할 수 있다.세트(set)는 한마디로 순서가 없는 중복되지 않은 데이터의 집합이다. 배열(array)과 차이점을 이해하는 것이 무엇보다 중요하다.배열은 데이터를 순서 있게 저장한다. 그래서 인덱스(index)를 통해서 특정 위치에 저장되어 있는 데이터에 접근이 가능하다. 그리고 배열에는 동일한 값을 여러 번 저장할 수 있다. 값이 동일하더라도 인덱스가 틀리기 때문에 데이터의 중복이 문제 되지 않는다.반면에 세트는 얼핏 보기에는 배열과 비슷해보일 수 있지만 사실 결이 아주 다른 자.. 2024. 9. 8. 4. [Proxy 1~4챕터] 자바스크립트 완전 끝내기: ES6+ 심화 1. 기본 오퍼레이션: Proxy란, 기본 오퍼레이션 논리이번에는 proxy를 배워보았다. (오퍼레이션은 연산자를 뜻함.) Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체로, 가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달되기도 한다.let proxy = new Proxy(target, handler)target – 감싸게 될 객체로, 함수를 포함한 모든 객체가 가능하다.handler – 동작을 가로채는 메서드인 '트랩(trap)'이 담긴 객체로, 여기서 프락시를 설정한다.(예시: get 트랩은 target의 프로퍼티를 읽을 때, set 트랩은 target의 프로퍼티를 쓸 때 활성화됨).2. Proxy 논리.. 2024. 9. 7. 3. [Class 6~9챕터] 자바스크립트 완전 끝내기: ES6+ 심화 6. 상속, extends 키워드, 상속 구조, 메소드 오버라이딩이번에는 상속을 배웠다. 자바스크립트에서 상속을 어떻게 하는 것인지 배운 셈이다. 키워드는 extends를 이용해 준다.또한 상속에서는 클래스라는 개념을 사용할 수밖에 없다. 클래스를 명명해 주고 extends 키워드를 이용해서 상속을 구현해 주면 된다.(참고로 oop라는 건 객체 지향 프로그램의 줄임말이다.)이를 기반으로 메소드 오버라이딩을 구현할 수 있다. 오버라이딩(overriding)이란 상속 관계에 있는 부모 클래스에서 이미 정의된 메소드를 자식 클래스에서 같은 시그니쳐를 갖는 메소드로 다시 정의하는 것이다.조건은 다음과 같다.1. 오버라이딩이란 메소드의 동작만을 재정의하는 것이므로, 메소드의 선언부는 기존 메소드와 완전히 같아야.. 2024. 9. 6. 2. [Class 4~5챕터] 자바스크립트 완전 끝내기: ES6+ 심화 4. constructor, constructor 반환constructor가 무엇인지 배웠다. constructor란 "생성자"를 뜻한다.생성자는 인스턴스를 생성하고 초기화하게 만들 수 있다.또한 생성자는 반환도 가능하다.반환을 하고 싶으면 return을 안 작성하면 된다.5. getter, setter, static 메소드, 호이스팅 getter, setter, static 메소드, 호이스팅에 대해 배웠다.객체의 프로퍼티는 두 종류로 나뉜다.첫 번째 종류는 데이터 프로퍼티(data property) 이다. 지금까지 사용한 모든 프로퍼티는 데이터 프로퍼티이다. 데두 번째는 접근자 프로퍼티(accessor property)라 불리는 새로운 종류의 프로퍼티이다. 접근자 프로퍼티의 본질은 함수인데, 이 함수는.. 2024. 9. 5. 이전 1 2 3 다음
