Kani's Blog

Java 12, 13에서 2번의 Preview를 통해 강화된 Switch 표현식이 Java 14에서 표준화되었다. 기존 switch 구문 public class SwitchExpressionsExample { public static void main(String[] args) { SwitchExpressionsExample example = new SwitchExpressionsExample(); example.printDay(Day.FRI); example.printDay(Day.TUE); example.printDay(Day.SUN); } public void printDay(Day today) { switch (today) { case MON: case TUE: case WED: case THUR..

우연히 구글 앱 스토어에서 영어 회화 어플을 보고 설치를 해봤다. 거기에 go와 come의 사용에 대해 보다가 유익해서 정리해 봤다. - 뜻 go : 가다 come : 오다 기본적으로는 위의 뜻을 가지고 있지만 회화에서는 혼동이 될 수 있다. 한국어로 대화할 때는 자신을 주체로 이야기를 한다. 영어로 대화할 때는 가는 곳의 성격(장소, 대화 중인 인물)을 고려해서 이야기한다. - 예시1 A : Hey, Are you coming now? B : Sure, I'm coming. - 예시2 A : Are you going to Jane's birthday party? B : Yes, I'm going. 예시1,2 모두 B가 간다 혹은 가고 있다의 표현인데 예시1의 경우는 come을 쓰고 예시2의 경우는 go..

올해 1월도 지나고 다소 늦은 감은 있지만 적어보려고 한다. 취업 또는 이에 준하는 활동하기 티스토리 게시글 한 달에 5개 이상 쓰기 Github 2020 contributions 300 이상 달성하기 Group Study 3개 이상 하기 영어 회화 연습하기 음역대 넓히기 : B4 이상 노래 완창 하기 League Of Legends 솔랭 플래티넘 자존감 높이기 : 긍정적인 마인드!

이 글을 쓰는 목적은 무엇일까? 사실 며칠 전에 모 선배로 부터 팩트폭행을 당했다. 지금의 나의 상황백수에 대해서 개선하고자 한다면에 어떻게 해봐라라는 내용이다. 이런 이야기를 듣고 며칠 동안 생각하고 낸 결론이 티스토리 개편에 대한 이 글의 내용이다. 티스토리를 언제 처음 개설했는지는 기억이 나지 않는다. 첫 게시글이 2018.01.19 인걸 보니 벌써 2년도 넘었다. 현재(2020.02.02 기준, 콩) 공개된 게시된 글의 수는 15개다. 또한 최신 글(2020.02.02 기준)은 2019.02.12로 거의 1년도 전이다. 물론 저 때도 지금과 비슷하게 포스팅에 대해 다시 한번 다짐을 하고 React.js에 대해 포스팅을 했었다. 하지만 당시에 카카오 채용을 진행 중이어서 점점 뜸해지더니 지금에 이르..

데이터 검색(필터링) App.js에 input 태그를 하나 붙이고 이 input 태그의 값을 키워드로 검색하는 부분을 만들어보겠습니다. App.js를 다음과 같이 수정해주세요. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091// App.jsimport React, { Component } from "react";import "./App.css"; import AccountBookForm from "./components/AccountBookFor..

데이터 제거 데이터를 제거하기 위한 몇 가지 방법이 있습니다. 12345678const array = [1, 2, 3, 4, 5]; // slice로 자른 후 concat으로 붙인다.array.slice(0, 2).concat(array.slice(3, 5)); // [1, 2, 4, 5]// [...array.slice(0, 2), ...array.slice(3,5)]; // 위와 같은 내용을 전개 연산자를 이용하여 표현 // 배열에서 3이 아닌 요소만 필터링array.filter(num => num !== 3); // [1, 2, 4, 5]cs 이제 실제 파일을 위와 같은 제거 방법을 써서 추가해 보겠습니다. App.js 파일을 다음과 같이 수정하세요. 12345678910111213141516171..

React에서는 기존에 javascript에서 배열을 다루듯이 하면 안됩니다. state의 내부의 값을 직접적으로 변경해서는 안되기 때문입니다. 이를 불변성 유지라고 합니다. push, splice, unshift, pop 같은 내장 함수는 배열자체를 직접 수정하게 되므로 적합하지 않고, concat, slice, map, filter와 같이 기존 배열을 기반으로 새로운 배열을 만드는 함수를 사용해야 합니다. 불변성을 유지해야 필요한 상황에 맞게 리렌더링이 되도록 설계할 수 있고, 성능도 최적화 할 수 있기 때문입니다. 데이터 추가 기존에 만든 AccountBookForm에서 추가한 데이터를 실제 배열에 추가해 보겠습니다. App에서 제어하도록 하겠습니다. App.js 파일을 다음과 같이 수정해주세요. ..

이번 시간부터는 지난 시간까지 배웠던 React의 문법을 사용하여 간단한 가계부를 만들어 보도록 하겠습니다. 여러 게시글을 통해 점차 살을 붙여갈 것입니다. 프로젝트 설치 및 시작 우선 새로운 프로젝트를 하나 설치하고 그 곳에서 작업하도록 하겠습니다. VS Code를 실행하고 개발 서버를 시작해주세요 12345create-react-app account-book-example cd account-book-example yarn startcs 시작하겠습니다. 우선 프로젝트의 src 안에 components 디렉터리를 생성해주세요. 이제부터 생성할 컴포넌트는 이 곳에 넣도록 하겠습니다. 컴포넌트 추가 - AccountBookForm src/components/AccountBookForm.js 파일을 생성해 ..

React에는 컴포넌트가 로드될 때, 업데이트 될 때, 제거될 때 자동으로 호출되는 API가 존재합니다. 이를 React의 Life Cycle API라고 합니다. 초기 생성 API 브라우저에 컴포넌트가 나타나기 전에 호출되는 API에 대해 알아보겠습니다. - constructor(props) : 컴포넌트 생성자 함수로 컴포넌트가 새로 만들어 질 때마다 호출됩니다. - componentWillMount() : 컴포넌트가 화면에 나타나기 직전에 호출되는 API입니다. 주로 서버를 호출하는 용도로 사용되었는데 이 API를 더 필요하지 않다고 판단하여 React v16.3에서 더 이상 사용하지 않게 되었습니다. v16.3 이후 UNSAFE_componentWillMount()로 사용됩니다. 기존에 여기서 처리하..

React Component에서 다루는 데이터는 props와 state가 있습니다. props props는 자식 Component가 생성될 때 부모 Component에서 받아온 데이터로 변경이 불가능합니다. 자식 Component에서 this라는 키워드를 통해 부모 Component로부터 받은 props를 사용할 수 있습니다. src 폴더에 Card.js라는 파일을 만들고 다음과 같은 내용을 입력합니다. 12345678910111213141516171819202122232425// Card.jsimport React, { Component } from "react"; class Card extends Component { render() { return ( 이름 : {this.props.name} 소속 ..